Storybook integration

.storybook/addons.ts

@@ -0,0 +1,3 @@
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-storysource/register';

.storybook/config.ts

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/react';
+import '@storybook/addon-console';
+
+configure(require.context('../packages', true, /\.stories\.tsx?$/), module)

.storybook/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path')
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+module.exports = ({ config }) => {
+
+// TypeScript loader (via Babel to match polkadot/apps)
+config.module.rules.push({
+  test: /\.(ts|tsx)$/,
+  exclude: /(node_modules)/,
+  use: [
+    {
+      loader: require.resolve('babel-loader'),
+      options: require('@polkadot/dev-react/config/babel')
+    },
+  ],
+});
+config.resolve.extensions.push('.ts', '.tsx');
+
+// TSConfig, uses the same file as packages
+config.resolve.plugins = config.resolve.plugins || [];
+config.resolve.plugins.push(
+  new TsconfigPathsPlugin({
+    configFile: path.resolve(__dirname, '../tsconfig.json'),
+  })
+);
+
+// Stories parser
+config.module.rules.push({
+    test: /\.stories\.tsx?$/,
+    loaders: [require.resolve('@storybook/source-loader')],
+    enforce: 'pre',
+});
+
+return config;
+};

README.md

@@ -40,3 +40,13 @@ To get started -
 4. Install the dependencies by running `yarn`
 5. Ready! Now you can launch the UI (assuming you have a local Polkadot Node running), via `yarn run start`
 6. Access the UI via [http://localhost:3000](http://localhost:3000)
+
+### Storybook
+
+There is a [StoryBook](https://storybook.js.org) implementation, the UI for which can be started with `yarn storybook` and then accessed in a browser via http://localhost:3001 (and the server will open a new browser tab by default when it starts).
+
+Story code can be placed anywhere in the `packages` directory, and will be detected as long as the file name ends in `.stories.tsx. Stories should be defined in the [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format) for consistency.
+
+There are several StoryBook addons available, the most useful of which is [Knobs](https://www.npmjs.com/package/@storybook/addon-knobs), which allows props to be altered in real time.
+
+Note that currently StoryBook only allows for stateless components; it has no connection to polkadot.js or any Substrate node. This means that existing components, which are often tightly coupled with the Polkadot API, cannot be used in storybook.

package.json

@@ -30,13 +30,16 @@
     "postinstall": "polkadot-dev-yarn-only",
     "test": "echo \"skipping tests\"",
     "vanitygen": "node packages/app-accounts/scripts/vanitygen.js",
-    "start": "cd packages/apps && webpack --config webpack.config.js"
+    "start": "cd packages/apps && webpack --config webpack.config.js",
+    "storybook": "start-storybook -p 3001"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
     "@polkadot/dev-react": "^0.31.1",
     "@polkadot/ts": "^0.1.73",
+    "@storybook/addon-knobs": "^5.2.5",
+    "@storybook/addon-storysource": "^5.2.5",
     "autoprefixer": "^9.6.1",
     "empty": "^0.10.1",
     "gh-pages": "^2.1.1",
@@ -51,9 +54,13 @@
     "postcss-sass": "^0.4.1",
     "postcss-simple-vars": "^5.0.0",
     "precss": "^4.0.0",
-    "source-map-explorer": "^2.0.1"
+    "source-map-explorer": "^2.0.1",
+    "tsconfig-paths-webpack-plugin": "^3.2.0"
   },
   "dependencies": {
+    "@storybook/addon-actions": "^5.2.5",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/react": "^5.2.5",
     "@types/lodash": "^4.14.138",
     "lodash": "^4.17.15"
   }

packages/joy-roles/src/index.css

@@ -0,0 +1,8 @@
+#storage-providers {
+    padding: 1em
+}
+
+#storage-providers::after {
+    color: #dd6655;
+    content: "This text was added by @polkadot/joy-roles/index.css!";
+}

packages/joy-roles/src/tabs/WorkingGroup.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { object, withKnobs } from '@storybook/addon-knobs';
+import { Actor } from '@joystream/types/roles';
+import { StorageAndDistribution } from "@polkadot/joy-roles/tabs/WorkingGroup"
+
+import '@polkadot/joy-roles/index.css';
+
+export default { 
+    title: 'Roles / Working groups tab',
+    decorators: [withKnobs],
+};
+
+export const StorageProvidersSection = () => {
+	const storageProviders:Actor[] = [
+		new Actor({member_id: 1, account: '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'}),
+		new Actor({member_id: 2, account: '5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'}),
+	];
+	return (
+		<div>
+			<StorageAndDistribution actors={object('Storage providers',storageProviders)} />
+		</div>
+	)
+}

packages/joy-roles/src/tabs/WorkingGroup.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Table } from 'semantic-ui-react';
+
+import { BareProps } from '@polkadot/react-components/types';
+import { Actor } from '@joystream/types/roles';
+
+type Props = BareProps & {
+    actors: Actor[]
+}
+
+export function StorageAndDistribution(props: Props) {
+    return (
+        <section id="storage-providers">
+            <Table>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell>ID</Table.HeaderCell>
+                        <Table.HeaderCell>Role</Table.HeaderCell>
+                        <Table.HeaderCell>Member account</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    {props.actors.map((actor) => (
+                        <Table.Row>
+                            <Table.Cell>{actor.member_id.toString()}!</Table.Cell>
+                            <Table.Cell>Storage and distribution</Table.Cell>
+                            <Table.Cell>{actor.account.toString()}!</Table.Cell>
+                        </Table.Row>
+                    ))}
+                </Table.Body>
+            </Table>
+        </section>
+    )
+}