@paygreen/pgui 2.0.0 → 2.1.0

package/README.md

@@ -0,0 +1,94 @@
+# 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 -save-dev @paygreen/pgui
+```
+
+When this is done, you will need to link Chakra UI package library from your target project to PGUI.
+
+To do that, please change from your ```package.json``` the script link-local-lib
+```json
+{
+  "scripts": {
+    ...
+    "link-local-lib": "npm link {path_from_your_app/node_modules/@chakra-ui/react}",
+    ...
+  },
+}
+```
+And then run
+```bash
+npm run link-local-lib
+```
+Don't forget to do this command every time you install or remove a package or your node_modules.
+
+Now that you linked Chakra UI library from your target project to PGUI, you will need to link PGUI to your target project.
+
+To do that, please run this command in PGUI project
+```bash
+npm link
+```
+This will create a new symbolic link named "pgui". And you will now be able to add it on your target project by doing that command inside it
+```bash
+npm link pgui
+```
+
+It should now link your library and it should works well, you just have to link your theme with the one on PGUI on yiour ChakraProvider in your target project, and then use the components you need! 🥳
+___
+## 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). Please use the command to normally solve it
+```bash
+npm run link-local-lib
+```
+
+If it doesn't work, please refer to Getting Started.
+
+### 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"
+```