Add docs in storybook

Author: erik_ritter

.storybook/main.js

@@ -3,6 +3,14 @@ const path = require('path');
 const toPath = (_path) => path.join(process.cwd(), _path);
 
 module.exports = {
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
   stories: ['../**/*.stories.tsx'],
   webpackFinal: async (config) => {
     return {

packages/components/src/components/Address/Address.stories.tsx

@@ -1,13 +1,17 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Address } from '.';
 
 import { useWallet, Provider } from '@web3-ui/hooks';
 import { Button } from '@chakra-ui/react';
 
-storiesOf('Address', module).add('Default', () => <Address value='testaddress.eth' />);
+export default {
+  title: 'Components/Address',
+  component: Address,
+};
+
+export const Default = () => <Address value='testaddress.eth' />;
 
-const WithWallet = () => {
+const AddressUsingProvider = () => {
   const { connected, connectWallet, connection } = useWallet();
 
   return (
@@ -20,8 +24,8 @@ const WithWallet = () => {
   );
 };
 
-storiesOf('Address', module).add('WithWallet', () => (
+export const WithWallet = () => (
   <Provider network='rinkeby'>
-    <WithWallet />
+    <AddressUsingProvider />
   </Provider>
-));
+);

packages/components/src/components/Address/Address.tsx

@@ -2,9 +2,15 @@ import { Input } from '@chakra-ui/react';
 import React from 'react';
 
 export interface AddressProps {
+  /**
+   * The address to display
+   */
   value: string;
 }
 
+/**
+ * A component to display an address
+ */
 export const Address: React.FC<AddressProps> = ({ value }) => {
   return <Input value={value} />;
 };

packages/components/src/components/NFT/NFT.stories.tsx

@@ -1,13 +1,17 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { NFT } from '.';
 
-storiesOf('NFT', module).add('Renders an NFT', () => (
+export default {
+  title: 'Components/NFT',
+  component: NFT,
+};
+
+export const Default = () => (
   <NFT
     tokenId='1'
     name='Dev #1'
     imageUrl='https://storage.opensea.io/files/acef01b1f111088c40a0d86a4cd8a2bd.svg'
     assetContractName='Devs for Revolution'
     assetContractSymbol='DEVS'
   />
-));
+);

packages/components/src/components/NFT/NFT.tsx

@@ -2,18 +2,30 @@ import React from 'react';
 import { Box, Heading, Image, Flex, Tag, Text } from '@chakra-ui/react';
 
 export interface NFTProps {
+  /**
+   * The id for the NFT, unique within the contract
+   */
   tokenId: string;
+  /**
+   * The name of the NFT, potentially null
+   */
   name: string | null;
+  /**
+   * The image of the NFT, cached from OpenSea
+   */
   imageUrl: string;
+  /**
+   * The name of the NFT collection
+   */
   assetContractName: string;
+  /**
+   * The symbol for the NFT collection
+   */
   assetContractSymbol: string;
 }
 
 /**
- * @dev Component to display an NFT given render params
- *
- * TODO: Add a component that fetchs the NFT data from the blockchain and uses this component to
- * display it
+ * Component to display an NFT given render params
  */
 export const NFT = ({
   tokenId,

packages/components/src/components/NFTGallery/NFTGallery.stories.tsx

@@ -1,11 +1,11 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { NFTGallery } from '.';
 
-storiesOf('NFTGallery', module).add('Renders a list of nfts owned by an account', () => (
-  <NFTGallery address='0x1A16c87927570239FECD343ad2654fD81682725e' />
-));
+export default {
+  title: 'Components/NFTGallery',
+  component: NFTGallery,
+};
 
-storiesOf('NFTGallery', module).add('Renders an error when OpenSea fails', () => (
-  <NFTGallery address='bad_address' />
-));
+export const Default = () => <NFTGallery address='0x1A16c87927570239FECD343ad2654fD81682725e' />;
+
+export const WithAnError = () => <NFTGallery address='bad_address' />;

packages/components/src/components/NFTGallery/NFTGallery.tsx

@@ -5,7 +5,13 @@ import { VStack, Heading, Grid, Alert, AlertIcon } from '@chakra-ui/react';
 import { NFT } from '../NFT';
 
 export interface NFTGalleryProps {
+  /**
+   * The owner of the NFTs
+   */
   address: string;
+  /**
+   * The number of columns in the grid
+   */
   gridWidth?: number;
 }
 
@@ -20,7 +26,7 @@ export interface OpenSeaAsset {
 }
 
 /**
- * @dev Component to display a grid of NFTs owned by an address. It uses the OpenSea API to fetch
+ * Component to display a grid of NFTs owned by an address. It uses the OpenSea API to fetch
  * the NFTs.
  */
 export const NFTGallery = ({ address, gridWidth = 4 }: NFTGalleryProps) => {

packages/hooks/src/stories/ConnectWallet.stories.tsx

@@ -1,9 +1,12 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Button } from '@chakra-ui/react';
 import { Provider, useWallet } from '..';
 
-const Default = () => {
+export default {
+  title: 'Hooks/useWallet',
+};
+
+const DefaultUsingProvider = () => {
   const { connection, connectWallet, disconnectWallet, connected } = useWallet();
 
   if (connected) {
@@ -15,11 +18,11 @@ const Default = () => {
     );
   }
 
-  return <button onClick={connectWallet}>Connect Wallet</button>;
+  return <Button onClick={connectWallet}>Connect Wallet</Button>;
 };
 
-storiesOf('ConnectWallet', module).add('Default', () => (
+export const Default = () => (
   <Provider network='rinkeby'>
-    <Default />
+    <DefaultUsingProvider />
   </Provider>
-));
+);