Merge pull request #60 from etr2460/erik-ritter--consolidate-storybook

Consolidate storybook and update docs

Author: Erik Ritter

packages/components/.storybook/main.js renamed to .storybook/main.js

@@ -3,16 +3,16 @@ const path = require('path');
 const toPath = (_path) => path.join(process.cwd(), _path);
 
 module.exports = {
-  stories: ['../src/**/*.stories.tsx'],
+  stories: ['../**/*.stories.tsx'],
   webpackFinal: async (config) => {
     return {
       ...config,
       resolve: {
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          '@emotion/core': toPath('../../node_modules/@emotion/react'),
-          'emotion-theming': toPath('../../node_modules/@emotion/react'),
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
         },
       },
     };

packages/components/.storybook/preview.js renamed to .storybook/preview.js

@@ -19,7 +19,7 @@ nvm install
 yarn install
 ```
 
-To verify setup, run the Storybook for one of the packages with either `yarn storybook:components` or `yarn storybook:hooks`. You can develop new or existing components and verify functionality in the Storybook.
+To verify setup, run the Storybook with  `yarn storybook`. You can develop new or existing components/hooks and verify functionality in the Storybook.
 
 Run all unit tests with `yarn test`. Run unit tests on only the package you're working on with `yarn test packages/<PACKAGE_NAME_HERE>`.
 

CONTRIBUTING.md

@@ -21,8 +21,7 @@
     "test": "jest",
     "test:watch": "yarn test --watch",
     "test:coverage": "jest --coverage --colors",
-    "storybook:components": "yarn workspace @web3-ui/components storybook",
-    "storybook:hooks": "yarn workspace @web3-ui/hooks storybook",
+    "storybook": "start-storybook -p 9001 -s ./packages/components/src/assets -c .storybook",
     "postinstall": "preconstruct dev"
   },
   "devDependencies": {

package.json

@@ -21,7 +21,6 @@
     "build": "preconstruct build",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,js,jsx}\"",
     "format:check": "prettier --list-different \"src/**/*.{ts,tsx,json,js,jsx}\"",
-    "storybook": "start-storybook -p 9001 -s ./src/assets -c .storybook",
     "pre-commit-hook": "yarn lint-staged"
   },
   "main": "dist/web3-ui-components.cjs.js",

packages/components/package.json

@@ -24,9 +24,7 @@
     "test": "jest --maxWorkers=2",
     "test:watch": "yarn test --watch",
     "test:coverage": "jest --coverage --colors --maxWorkers=2",
-    "pre-commit-hook": "yarn lint-staged",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "pre-commit-hook": "yarn lint-staged"
   },
   "main": "dist/web3-ui-hooks.cjs.js",
   "module": "dist/web3-ui-hooks.esm.js",

packages/hooks/.storybook/main.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
+import { Button } from '@chakra-ui/react';
 import { Provider, useWallet } from '..';
 
 const Default = () => {
@@ -8,7 +9,7 @@ const Default = () => {
   if (connected) {
     return (
       <div>
-        <button onClick={disconnectWallet}>Disconnect wallet</button>
+        <Button onClick={disconnectWallet}>Disconnect wallet</Button>
         <p>{connection.ens || connection.userAddress}</p>
       </div>
     );