Storybook (piotrwitek#178)

chawax · piotrwitek · commit 80df5d4a7b8e · 2019-07-18T11:09:42.000+02:00
* Storybook configuration

* Stories examples

* Add storybook-static to .gitignore

* Custom Webpack configuration

* Add Storyshots

* Correct version
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,4 @@ jspm_packages
 
 temp/
 playground/dist
+playground/storybook-static
diff --git a/playground/.storybook/addons.js b/playground/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/playground/.storybook/config.js b/playground/.storybook/config.js
@@ -0,0 +1,10 @@
+import { configure } from '@storybook/react';
+import requireContext from 'require-context.macro';
+
+// We load every file in src directory ending with .stories.tsx
+
+const req = requireContext('../src', true, /.stories.tsx$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+configure(loadStories, module);
diff --git a/playground/.storybook/webpack.config.js b/playground/.storybook/webpack.config.js
@@ -0,0 +1,11 @@
+module.exports = ({ config, mode }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};
diff --git a/playground/package.json b/playground/package.json
@@ -16,7 +16,9 @@
     "ci-check": "npm run lint && npm run tsc && npm run test",
     "lint": "tslint -p ./",
     "tsc": "tsc -p ./ --noEmit",
-    "tsc:watch": "tsc -p ./ --noEmit -w"
+    "tsc:watch": "tsc -p ./ --noEmit -w",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@types/jest": "24.0.11",
@@ -53,5 +55,16 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "@storybook/addon-actions": "5.1.9",
+    "@storybook/addon-links": "5.1.9",
+    "@storybook/addon-storyshots": "5.1.9",
+    "@storybook/addons": "5.1.9",
+    "@storybook/react": "5.1.9",
+    "@types/storybook__addon-storyshots": "4.0.1",
+    "@types/storybook__react": "4.0.2",
+    "react-test-renderer": "16.8.6",
+    "require-context.macro": "1.0.4"
+  }
 }
diff --git a/playground/src/components/__snapshots__/class-counter-with-default-props.stories.storyshot b/playground/src/components/__snapshots__/class-counter-with-default-props.stories.storyshot
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ClassCounterWithDefaultProps with defaut initial count 1`] = `
+<div>
+  <span>
+    ClassCounterWithDefaultProps
+    : 
+    0
+  </span>
+  <button
+    onClick={[Function]}
+    type="button"
+  >
+    Increment
+  </button>
+</div>
+`;
+
+exports[`Storyshots ClassCounterWithDefaultProps with initial count set 1`] = `
+<div>
+  <span>
+    ClassCounterWithDefaultProps
+    : 
+    5
+  </span>
+  <button
+    onClick={[Function]}
+    type="button"
+  >
+    Increment
+  </button>
+</div>
+`;
diff --git a/playground/src/components/__snapshots__/class-counter.stories.storyshot b/playground/src/components/__snapshots__/class-counter.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ClassCounter default 1`] = `
+<div>
+  <span>
+    ClassCounter
+    : 
+    0
+  </span>
+  <button
+    onClick={[Function]}
+    type="button"
+  >
+    Increment
+  </button>
+</div>
+`;
diff --git a/playground/src/components/__snapshots__/fc-counter.stories.storyshot b/playground/src/components/__snapshots__/fc-counter.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots FCCounter default 1`] = `
+<div>
+  <span>
+    FCCounter
+    : 
+    0
+  </span>
+  <button
+    onClick={[Function]}
+    type="button"
+  >
+    Increment
+  </button>
+</div>
+`;
diff --git a/playground/src/components/__snapshots__/fc-spread-attributes.stories.storyshot b/playground/src/components/__snapshots__/fc-spread-attributes.stories.storyshot
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots FCSpreadAttributes default 1`] = `
+<div
+  className="classy"
+  style={
+    Object {
+      "backgroundColor": "lightcyan",
+    }
+  }
+>
+  I'll spread every property you give me!
+</div>
+`;
diff --git a/playground/src/components/__snapshots__/generic-list.stories.storyshot b/playground/src/components/__snapshots__/generic-list.stories.storyshot
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots GenericList default 1`] = `
+<div>
+  <div>
+    Rosamonte Especial
+  </div>
+  <div>
+    Aguantadora Despalada
+  </div>
+  <div>
+    Taragui Vitality
+  </div>
+</div>
+`;
diff --git a/playground/src/components/__snapshots__/mouse-provider.stories.storyshot b/playground/src/components/__snapshots__/mouse-provider.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots MouseProvider default 1`] = `
+<div
+  onMouseMove={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+>
+  <p>
+    The mouse position is 
+    0
+    , 
+    0
+  </p>
+</div>
+`;
diff --git a/playground/src/components/class-counter-with-default-props.stories.tsx b/playground/src/components/class-counter-with-default-props.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { ClassCounterWithDefaultProps } from '../components';
+
+storiesOf('ClassCounterWithDefaultProps', module)
+  .add('with defaut initial count', () => (
+    <ClassCounterWithDefaultProps label={'ClassCounterWithDefaultProps'} />
+  ))
+  .add('with initial count set', () => (
+    <ClassCounterWithDefaultProps
+      label={'ClassCounterWithDefaultProps'}
+      initialCount={5}
+    />
+  ));
diff --git a/playground/src/components/class-counter.stories.tsx b/playground/src/components/class-counter.stories.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { ClassCounter } from '../components';
+
+storiesOf('ClassCounter', module).add('default', () => (
+  <ClassCounter label={'ClassCounter'} />
+));
diff --git a/playground/src/components/fc-counter.stories.tsx b/playground/src/components/fc-counter.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { FCCounter } from '../components';
+
+storiesOf('FCCounter', module).add('default', () => (
+  <FCCounter
+    label={'FCCounter'}
+    count={0}
+    onIncrement={action('onIncrement')}
+  />
+));
diff --git a/playground/src/components/fc-spread-attributes.stories.tsx b/playground/src/components/fc-spread-attributes.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { FCSpreadAttributes } from '../components';
+
+storiesOf('FCSpreadAttributes', module).add('default', () => (
+  <FCSpreadAttributes
+    className={'classy'}
+    style={{ backgroundColor: 'lightcyan' }}
+  >
+    {`I'll spread every property you give me!`}
+  </FCSpreadAttributes>
+));
diff --git a/playground/src/components/generic-list.stories.tsx b/playground/src/components/generic-list.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { IUser, User } from '../models';
+import { GenericList } from '../components';
+
+const users = [
+  new User('Rosamonte', 'Especial'),
+  new User('Aguantadora', 'Despalada'),
+  new User('Taragui', 'Vitality'),
+];
+
+export class UserList extends GenericList<IUser> {}
+
+storiesOf('GenericList', module).add('default', () => (
+  <UserList
+    items={users}
+    itemRenderer={item => <div key={item.id}>{item.fullName}</div>}
+  />
+));
diff --git a/playground/src/components/mouse-provider.stories.tsx b/playground/src/components/mouse-provider.stories.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { MouseProvider } from '../components';
+
+storiesOf('MouseProvider', module).add('default', () => (
+  <MouseProvider
+    render={mouse => (
+      <p>
+        The mouse position is {mouse.x}, {mouse.y}
+      </p>
+    )}
+  />
+));
diff --git a/playground/src/storyshots.test.ts b/playground/src/storyshots.test.ts
@@ -0,0 +1,8 @@
+import initStoryshots, {
+  multiSnapshotWithOptions,
+} from '@storybook/addon-storyshots';
+
+initStoryshots({
+  integrityOptions: { cwd: __dirname },
+  test: multiSnapshotWithOptions({}),
+});

Original file line number	Diff line number	Diff line change
`@@ -38,3 +38,4 @@ jspm_packages`
`38`	`38`
`39`	`39`	`temp/`
`40`	`40`	`playground/dist`
	`41`	`+playground/storybook-static`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import '@storybook/addon-actions/register';`
	`2`	`+import '@storybook/addon-links/register';`