@paygreen/pgui 2.0.0 → 2.1.2

package/README.md

@@ -0,0 +1,110 @@
+# PGUI 🌿
+
+## Information
+PGUI is the current Paygreen's Design System. The purpose of the package is to provide Components for [Paygreen](https://paygreen.io) applications that works with [Chakra UI](https://chakra-ui.com)
+___
+## Getting Started
+To setup PGUI in a local environment, please install the package in your target project.
+
+```bash
+npm i @paygreen/pgui
+```
+
+When this is done, 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.
+
+![Screenshot](pgui-schema.png)
+
+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
+```bash
+npm link
+```
+
+2. in ```/target_app/node_modules/react```, this will create 2nd symlink react
+```bash
+npm link
+```
+
+3. in ```/pgui```, this will create 3rd symlink to pgui library
+```bash
+npm link
+```
+
+4. in ```/pgui```, this will link your local packages @chakra-ui/react and react
+```bash
+npm run link-local-package
+```
+
+5. in ```/pgui```, this will build your project
+```bash
+npm run build
+```
+
+6. in ```/target_app```, this will link pgui to your local app directory
+```bash
+npm link @paygreen/pgui
+```
+
+7. it should works well, you just now have to link your theme with the one on PGUI on yiour ChakraProvider in your target project, and then use the components you need! 🥳
+
+```javascript
+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.
+```bash
+npm run build
+```
+
+Then your modifications will be available on your target project.
+___
+
+## Storybook
+
+When you add a component and you write documentation, you can see it in storybook.
+To run storybook please use the command
+```bash
+npm run storybook
+```
+
+It should open you storybook on your localhost:6006 port.
+___
+
+## Troubleshooting
+
+### React Invalid Hook Call Warning
+If you have an error based on [React Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html), 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
+```bash
+npm run link-local-lib
+```
+
+If it doesn't work, please refer to Getting Started guide to check the npm link process.
+
+### Error on storybook build
+
+When you try to ```npm run storybook``` you might catch this error
+```
+ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 22:4-12
+Can't import the named export 'Children' from non EcmaScript module (only default export is available)
+ @ ./node_modules/framer-motion/dist/es/index.mjs
+ ```
+When this appens, it is normally because of framer-motion package coming with Chakra UI. It is a known issue with latest version of framer version, to solve this issue please use this version instead
+
+```json
+"framer-motion": "4.1.17"
+```