ouisys-component-library v3.0.6
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 runyarn
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, runyarn 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, runyarn 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 doingnpm 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.
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
4 months ago
4 months ago
5 months ago
5 months ago
9 months ago
10 months ago
10 months ago
10 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago