Skip to content

Commit e54d851

Browse files
danieldelcoredanieldelcore
authored
📚 Introduces storybook (#156)
1 parent d47074b commit e54d851

File tree

9 files changed

+7875
-339
lines changed

9 files changed

+7875
-339
lines changed

‎.gitignore

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ node_modules
1313
# ignore env file used for GH info fetching in version
1414
.env
1515

16-
1716
# ignore yarn.locks generated in packages
18-
packages/**/**/yarn.lock
17+
packages/**/**/yarn.lock
18+
19+
# ignore storybook static
20+
storybook-static

‎.storybook/.babelrc

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-flow",
6+
"@babel/preset-typescript"
7+
],
8+
"plugins": [
9+
"emotion",
10+
["@babel/plugin-proposal-class-properties", { "loose": true }],
11+
"@babel/plugin-transform-runtime",
12+
"babel-plugin-extract-react-types"
13+
]
14+
}

‎.storybook/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
3+
addons: []
4+
};

‎.storybook/preview.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
}

‎package.json

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
{
22
"name": "extract-react-types-mono-repo",
33
"version": "0.0.0",
4+
"private": true,
45
"license": "MIT",
56
"scripts": {
7+
"start": "run-p start:*",
8+
"start:watch": "preconstruct watch",
9+
"start:stories": "start-storybook -p 6006",
610
"test": "jest",
711
"test:watch": "jest --watch",
812
"changeset": "changeset",
913
"apply-changesets": "changeset version",
1014
"release": "yarn build && changeset publish",
1115
"postinstall": "preconstruct dev",
12-
"dev:pretty-proptypes": "bolt w pretty-proptypes run dev",
1316
"lint": "yarn eslint \"./**/*.js\"",
1417
"validate": "yarn lint && yarn test && yarn flow",
1518
"build": "preconstruct build",
1619
"clean": "yarn delete:modules && yarn delete:dist",
1720
"delete:dist": "bolt ws exec --parallel -- rm -rf dist",
18-
"delete:modules": "bolt ws exec --parallel -- rm -rf node_modules && rm -rf node_modules"
19-
},
20-
"bolt": {
21-
"workspaces": [
22-
"packages/*"
23-
]
21+
"delete:modules": "bolt ws exec --parallel -- rm -rf node_modules && rm -rf node_modules",
22+
"build-storybook": "build-storybook",
23+
"deploy-storybook": "storybook-to-ghpages"
2424
},
25+
"workspaces": [
26+
"packages/*"
27+
],
2528
"preconstruct": {
2629
"packages": [
2730
"packages/extract-react-types",
@@ -43,6 +46,7 @@
4346
"@changesets/changelog-github": "^0.2.1",
4447
"@changesets/cli": "^2.8.0",
4548
"@emotion/core": "^10.0.14",
49+
"@preconstruct/cli": "^2.0.0",
4650
"ast-pretty-print": "^2.0.1",
4751
"babel-errors": "^1.1.1",
4852
"babel-eslint": "^10.0.1",
@@ -66,7 +70,6 @@
6670
"eslint-plugin-react": "^7.12.4",
6771
"jest-in-case": "^1.0.2",
6872
"jest-watch-typeahead": "^0.4.2",
69-
"preconstruct": "^0.0.81",
7073
"react-markings": "^1.2.0",
7174
"resolve": "^1.10.1",
7275
"strip-indent": "^2.0.0"
@@ -77,14 +80,22 @@
7780
"@babel/preset-env": "^7.4.4",
7881
"@babel/preset-flow": "^7.0.0",
7982
"@babel/preset-react": "^7.0.0",
83+
"@babel/preset-typescript": "^7.0.0",
84+
"@storybook/addon-actions": "^6.1.14",
85+
"@storybook/addon-essentials": "^6.1.14",
86+
"@storybook/addon-links": "^6.1.14",
87+
"@storybook/react": "^6.1.14",
88+
"@storybook/storybook-deployer": "^2.8.7",
8089
"babel-jest": "^24.7.1",
90+
"babel-loader": "^8.2.2",
8191
"babel-plugin-emotion": "^10.0.14",
8292
"enzyme": "^3.3.0",
8393
"enzyme-adapter-react-16": "^1.1.1",
8494
"flow-bin": "^0.98.0",
8595
"jest": "^24.7.1",
8696
"jest-in-case": "^1.0.2",
8797
"jsdom": "^11.7.0",
98+
"npm-run-all": "^4.1.5",
8899
"prettier": "^1.13.7",
89100
"react": "^16.3.1",
90101
"react-addons-test-utils": "^15.6.2",

‎stories/FlowComponent.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// @flow
2+
3+
/* eslint-disable no-unused-vars */
4+
/* eslint-disable react/no-unused-prop-types */
5+
6+
import React from 'react';
7+
8+
type FlowComponentProps = {
9+
// This prop is a string
10+
stringProp: string,
11+
// This prop is a number
12+
numberProp: number,
13+
// This prop is a boolean
14+
booleanProp: boolean,
15+
// This prop is a array<string>
16+
arrayStringProp: Array<string>,
17+
// This prop is a array<number>
18+
arrayNumberProp: Array<number>,
19+
// This prop is a array<boolean>
20+
arrayBooleanProp: Array<boolean>,
21+
// This prop is a function
22+
functionProp: (name: string, age: number) => void,
23+
// This prop is an any
24+
anyProp: any,
25+
// This prop is a mixed
26+
mixedProp: mixed,
27+
// This prop is a union
28+
unionProp: 'hello' | 'world'
29+
};
30+
31+
const FlowComponent = (props: FlowComponentProps) => <p>Hello World</p>;
32+
33+
FlowComponent.defaultProps = {
34+
stringProp: 'hello',
35+
numberProp: 0,
36+
booleanProp: true,
37+
arrayStringProp: ['foo', 'bar', 'baz'],
38+
arrayNumberProp: [0, 1, 2, 3],
39+
arrayBooleanProp: [true, false, true, false],
40+
functionProp: (name: string, age: number) => {
41+
// eslint-disable-next-line no-console
42+
console.log(name, age);
43+
},
44+
anyProp: 'any',
45+
mixedProp: 'mixed',
46+
unionProp: 'hello'
47+
};
48+
49+
export default FlowComponent;

‎stories/Props.stories.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// @flow
2+
import React from 'react';
3+
4+
import Props from 'pretty-proptypes';
5+
import FlowComponent from './FlowComponent';
6+
import TypeScriptComponent from './TypeScriptComponent';
7+
8+
export default {
9+
title: 'Example/Props',
10+
component: Props
11+
};
12+
13+
const Template = args => args.component;
14+
15+
export const Flow = Template.bind({});
16+
17+
Flow.args = {
18+
component: <Props component={FlowComponent} heading="Primitive types" />
19+
};
20+
21+
export const TypeScript = Template.bind({});
22+
23+
TypeScript.args = {
24+
component: <Props component={TypeScriptComponent} heading="Primitive types" />
25+
};

‎stories/TypeScriptComponent.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* eslint-disable no-unused-vars */
2+
/* eslint-disable react/no-unused-prop-types */
3+
4+
import React from 'react';
5+
6+
interface DummyInterface {
7+
id: number;
8+
text: string;
9+
due: Date;
10+
}
11+
12+
type TypeScriptComponentProps = {
13+
// This prop is a string
14+
stringProp: string;
15+
// This prop is a number
16+
numberProp: number;
17+
// This prop is a boolean
18+
booleanProp: boolean;
19+
// This prop is a array<string>
20+
arrayStringProp: Array<string>;
21+
// This prop is a array<number>
22+
arrayNumberProp: Array<number>;
23+
// This prop is a array<boolean>
24+
arrayBooleanProp: Array<boolean>;
25+
// This prop is a function
26+
functionProp: (name: string, age: number) => void;
27+
// This prop is an any
28+
anyProp: any;
29+
// This prop is a union
30+
unionProp: 'hello' | 'world';
31+
// This prop uses typescripts the unknown type
32+
unknownProp: unknown;
33+
// This prop uses an unknown typescript keyword "keyof" and so will result in a bail-out
34+
unsupportedProp: keyof DummyInterface;
35+
};
36+
37+
const TypeScriptComponent = (props: TypeScriptComponentProps) => <p>Hello World</p>;
38+
39+
TypeScriptComponent.defaultProps = {
40+
stringProp: 'hello',
41+
numberProp: 0,
42+
booleanProp: true,
43+
arrayStringProp: ['foo', 'bar', 'baz'],
44+
arrayNumberProp: [0, 1, 2, 3],
45+
arrayBooleanProp: [true, false, true, false],
46+
functionProp: (name: string, age: number) => {
47+
// eslint-disable-next-line no-console
48+
console.log(name, age);
49+
},
50+
anyProp: 'any',
51+
unionProp: 'hello',
52+
unknownProp: 'hello',
53+
unsupportedProp: 'text'
54+
};
55+
56+
export default TypeScriptComponent;

0 commit comments

Comments
 (0)