Ouisys Component Library

The ouisys-component-library is a collection of all reusable components used by our OUISys template, either ouisys-template-strategies or ouisys-template-nid. Previously, the reusable components were included on ouisys-clients, but we are now moving them separately from the configurations.

View Components

You can view each component's documentation on gitlab pages

Development

• Make sure that you are using node v20.12.2 and run yarn to install dependencies
• All components are located inside ./src folder
• When creating a new component, we follow the “PascalCase” naming convention, for example, ChainRedirect, ExtraDisclaimer, or LanguageSwitcher
• When developing a new component, make sure that you have a test for it, to make sure all possibilities are considered. Also, having a Storybook is a way for us to understand what are the expected properties of the new component and to test it in isolation
• If you need to have CSS for the component, we do use a modular approach. Styles defined within a module are scoped to that module, preventing unintended style overrides. Please note that having styles or CSS on your component is optional
• In case you need to have test data when testing your component, especially on Storybook, you can add your mocked data to ./mockData folder
• You can link this library to your OUISys template to test any changes. You can achieve this by running yarn link and on your OUISys template, run yarn link "ouisys-component-library"
• For every change you make on this library, you must run yarn build and restart your OUISys template
• Before pushing or committing your changes, make sure that you unlink this library by doing yarn unlink, and on your OUISys template, run yarn unlink "ouisys-component-library"
• Build your changes through yarn build before committing and pushing your changes
• After pushing your changes, update the npm current version by doing npm version patch
• Once the version is updated, run npm publish to publish the updated library
• Remember to push these NPM changes to the repo again by going git push
• You can verify the updated library by running this command on your OUISys template yarn add ouisys-component-library@latest

Notes

When creating new components, you need to follow the following:

• Create new component or utilities inside ./src/{MyComponent}/{MyComponent}.tsx
• Styles, Storybook, Types, and Jest file should be on the same location as your component or utilities
• Once your component is ready, create the following ./src/components/{mycomponent}/index.ts if component, and ./src/utilities/{myutilities}/index.ts if utilities
• Add your component or utilities on rollup.config.mjs inside the bundle constant
• Finally, you need to inform npm that you have a new component by adding the build component on package.json and then exports property

Commands

Installation

Install all dependecies of the application.

yarn

Storybook

To test and see component documentation.

yarn storybook

Testing

To run local test and make sure that everything has been considered.

yarn test

Alternatively you can add the --watch flag for continued refresh and testing, as well as the -u flag to update your snapshots, when relevant and needed.

Build

Building the package and ready to publish on npm

yarn build

Usage

To use this package to your project or application.

yarn add ouisys-component-library@latest

import React from 'react';
import { Button } from 'ouisys-component-library/Button';
import { ButtonProps } from 'ouisys-component-library/types/Button/Button.types';

export const CustomComponent = ({ children }: ButtonProps) => (
  <Button type="submit" className="custom-component-button">
    Custom Component Buttom
  </Button>
);

Contribution

To read on this topic, please do so here.