Merge pull request #250 from abhinavkrin/improve/readme+storybook

Improve/readme+storybook

README.md

@@ -80,22 +80,26 @@ yarn
 
 Thats all, This will install all the dependencies and will then build our auth, api and react package.
 
+#### Starting storybook for react
+```bash
+cd packages/react
+yarn storybook
+```
+Till now, storybook should be up and running. You can play around with EmbeddedChat and it's component and see changes in storybook in real-time.
+
+### Working with api and auth packages.
 #### Starting auth dev environment
+If you want to make changes to auth package and test them, you can start its playground server.
 ```bash
 cd packages/auth
 yarn dev
 ```
+React package depends on api package. If you make any change to api package, build the package using `yarn build` in `package/api` directory. Then, restart the react projects.
 
 #### Starting api dev environment
+If you want to make changes to api package and test them, you can start its playground server.
 ```bash
 cd packages/api
 yarn dev
 ```
 Api package depends on auth package. If you make any change to auth package, build the package using `yarn build` in `package/auth` directory. Then, restart the api dev environment.
-
-#### Starting react dev environment
-```bash
-cd packages/react
-yarn storybook
-```
-React package depends on api package. If you make any change to api package, build the package using `yarn build` in `package/api` directory. Then, restart the react dev environment.

packages/react/.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/stories/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

packages/react/package.json

@@ -66,6 +66,7 @@
     "jest": "^27.5.1",
     "lint-staged": "^12.4.2",
     "npm-run-all": "^4.1.5",
+    "parcel": "^2.9.1",
     "prettier": "^2.8.1",
     "react-scripts": "^5.0.1",
     "rimraf": "^5.0.1",

packages/react/src/components/ActionButton/ActionButton.stories.js

@@ -5,7 +5,7 @@ import DefaultTheme from '../../theme/DefaultTheme';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: 'ActionButton',
+  title: 'Components/ActionButton',
   component: ActionButton,
 };
 

packages/react/src/components/Button/Button.stories.js

@@ -5,7 +5,7 @@ import DefaultTheme from '../../theme/DefaultTheme';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button,
 };
 

packages/react/src/components/Icon/Icon.stories.js

@@ -5,7 +5,7 @@ import { Icon } from '.';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: 'Icon',
+  title: 'Components/Icon',
   component: Icon,
 };
 

packages/react/src/components/Input/Input.stories.js

@@ -5,7 +5,7 @@ import { Input } from '.';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: 'Input',
+  title: 'Components/Input',
   component: Input,
 };
 

packages/react/src/components/Modal/Modal.stories.js

@@ -7,7 +7,7 @@ import { Button } from '../Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: 'Modal',
+  title: 'Components/Modal',
   component: Modal,
 };
 

packages/react/src/components/Skeleton/Skeleton.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Skeleton } from '.';
 
 export default {
-  title: 'Skeleton',
+  title: 'Components/Skeleton',
   component: Skeleton,
 };
 

packages/react/src/components/Throbber/Throbber.stories.js

@@ -5,7 +5,7 @@ import { Button } from '../Button';
 import { Throbber } from '.';
 
 export default {
-  title: 'Throbber',
+  title: 'Components/Throbber',
   component: Throbber,
 };