@paygreen/pgui v2.14.9

PGUI 🌿

Information

PGUI is the current Paygreen's Design System. The purpose of the package is to provide Components for Paygreen applications that works with Chakra UI

Getting Started

To setup PGUI in a local environment, please install the package in your target project.

npm i @paygreen/pgui

import { ChakraProvider } from '@chakra-ui/react';
import { theme } from '@paygreen/pgui',

<ChakraProvider theme={theme}>
  {Your App}
</ChakraProvider>

Develop a new component

If you need to develop or update a component you will need to create a new folder with your component's name inside src/components. Inside this folder you'll need to create 2 files, index.tsx and docs.stories.tsx if needed.

Don't hesite to refer yourself to FormGroup component which is a good simple component created with Chakra.

When your component is finished, you will need to export it globally on the src/components/index.ts and src/index.ts file.

To make your modifications accessible, build the package with rollup.

npm run build

Storybook

When you add a component and you write documentation, you can see it in storybook. To run storybook please use the command

npm run storybook

It should open you storybook on your localhost:6006 port.

Link PGUI development into your current React project

You will need to link Chakra UI and React packages from your target project to PGUI and then link PGUI to your target project as the schema explains here.

To do that please follow these steps

1. in /target_app/node_modules/@chakra-ui/react, this will create 1st symlink to @chakra-ui/react

npm link

2. in /target_app/node_modules/react, this will create 2nd symlink react

npm link

3. in /pgui, this will create 3rd symlink to pgui library

npm link

4. in /pgui, this will link your local packages @chakra-ui/react and react

npm run link-local-lib

5. in /pgui, this will build your project

npm run build

6. in /target_app, this will link pgui to your local app directory

npm link @paygreen/pgui

7. it should works well, you just now have to link your theme with the one on PGUI on your ChakraProvider in your target project, and then use the components you need! 🥳

See all links

npm ls --link --global

Instead of use npm link, to real-time testing your component, run npx relative-deps in the APP project ad restart it.

Then your modifications will be available on your target project.

Troubleshooting

React Invalid Hook Call Warning

If you have an error based on React Invalid Hook Call Warning, this is because you're trying to use the local project without npm link (on chakra-ui/react or react). Please use the command to normally solve it

npm run link-local-lib

If it doesn't work, please refer to Getting Started guide to check the npm link process.