@paygreen/pgui 2.1.1 → 2.1.2

package/README.md

@@ -7,39 +7,55 @@ ___
 To setup PGUI in a local environment, please install the package in your target project.
 
 ```bash
-npm i -save-dev @paygreen/pgui
+npm i @paygreen/pgui
 ```
 
-When this is done, you will need to link Chakra UI package library from your target project to 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.
 
-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
+![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 run link-local-lib
+npm link
 ```
-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.
+2. in ```/target_app/node_modules/react```, this will create 2nd symlink react
+```bash
+npm link
+```
 
-To do that, please run this command in PGUI project
+3. in ```/pgui```, this will create 3rd symlink to pgui library
 ```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
+
+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 pgui
+npm link @paygreen/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! 🥳
+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
 
@@ -72,12 +88,12 @@ ___
 ## 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
+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.
+If it doesn't work, please refer to Getting Started guide to check the npm link process.
 
 ### Error on storybook build