mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-23 08:32:59 +05:30
Configure storybook
This commit is contained in:
parent
76679f03a6
commit
c93a1368f7
3
.storybook/addons.js
Normal file
3
.storybook/addons.js
Normal file
@ -0,0 +1,3 @@
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-links/register';
|
||||
import '@storybook/addon-viewport/register';
|
13
.storybook/config.tsx
Normal file
13
.storybook/config.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
|
||||
import storyDecorator from './storyDecorator';
|
||||
|
||||
const req = require.context('../packages/app', true, /\.story\.[tj]sx?$/);
|
||||
|
||||
function loadStories() {
|
||||
req.keys().forEach(filename => req(filename));
|
||||
}
|
||||
|
||||
addDecorator(storyDecorator);
|
||||
|
||||
configure(loadStories, module);
|
12
.storybook/storyDecorator.js
Normal file
12
.storybook/storyDecorator.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import { ContextProvider } from 'app/shell';
|
||||
import { browserHistory } from 'app/services/history';
|
||||
import storeFactory from 'app/storeFactory';
|
||||
|
||||
const store = storeFactory();
|
||||
|
||||
export default story => (
|
||||
<ContextProvider store={store} history={browserHistory}>
|
||||
{story()}
|
||||
</ContextProvider>
|
||||
);
|
14
.storybook/webpack.config.js
Normal file
14
.storybook/webpack.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
const rootConfig = require('../webpack.config');
|
||||
|
||||
module.exports = async ({ config }) => ({
|
||||
...config,
|
||||
resolve: rootConfig.resolve,
|
||||
module: {
|
||||
...config.module,
|
||||
// our rules should satisfy all storybook needs,
|
||||
// so replace all storybook defaults with our rules
|
||||
rules: rootConfig.module.rules,
|
||||
},
|
||||
|
||||
resolveLoader: rootConfig.resolveLoader,
|
||||
});
|
@ -43,7 +43,9 @@
|
||||
"build:webpack": "webpack --colors -p --bail",
|
||||
"build:quiet": "yarn run clean && yarn run build:webpack --quiet",
|
||||
"build:dll": "node ./packages/scripts/build-dll.js",
|
||||
"build:serve": "http-server --proxy https://dev.account.ely.by ./dist"
|
||||
"build:serve": "http-server --proxy https://dev.account.ely.by ./dist",
|
||||
"sb": "start-storybook -p 9009 --ci",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
@ -110,6 +112,11 @@
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
"@babel/preset-typescript": "^7.7.4",
|
||||
"@babel/runtime-corejs3": "^7.7.4",
|
||||
"@storybook/addon-actions": "^5.2.8",
|
||||
"@storybook/addon-links": "^5.2.8",
|
||||
"@storybook/addon-viewport": "^5.2.8",
|
||||
"@storybook/addons": "^5.2.8",
|
||||
"@storybook/react": "^5.2.8",
|
||||
"@types/jest": "^24.0.23",
|
||||
"@types/webpack-env": "^1.14.1",
|
||||
"@typescript-eslint/eslint-plugin": "^2.9.0",
|
||||
|
@ -96,3 +96,8 @@
|
||||
background: #95a5a6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
53
packages/app/components/ui/form/Button.story.tsx
Normal file
53
packages/app/components/ui/form/Button.story.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import Button from './Button';
|
||||
|
||||
storiesOf('ui/form', module).add('Button', () => (
|
||||
<>
|
||||
<div>
|
||||
<Button label="Green Button" />{' '}
|
||||
<Button label="Blue Button" color="blue" />{' '}
|
||||
<Button label="DarkBlue Button" color="darkBlue" />{' '}
|
||||
<Button label="Violet Button" color="violet" />{' '}
|
||||
<Button label="LightViolet Button" color="lightViolet" />{' '}
|
||||
<Button label="Orange Button" color="orange" />{' '}
|
||||
<Button label="Red Button" color="red" />{' '}
|
||||
<Button label="Black Button" color="black" />{' '}
|
||||
<Button label="White Button" color="white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Disabled buttons</h2>
|
||||
<Button disabled label="Green Button" />{' '}
|
||||
<Button disabled label="Blue Button" color="blue" />{' '}
|
||||
<Button disabled label="DarkBlue Button" color="darkBlue" />{' '}
|
||||
<Button disabled label="Violet Button" color="violet" />{' '}
|
||||
<Button disabled label="LightViolet Button" color="lightViolet" />{' '}
|
||||
<Button disabled label="Orange Button" color="orange" />{' '}
|
||||
<Button disabled label="Red Button" color="red" />{' '}
|
||||
<Button disabled label="Black Button" color="black" />{' '}
|
||||
<Button disabled label="White Button" color="white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Button sizes</h2>
|
||||
<Button label="Default button" /> <Button label="Small button" small />{' '}
|
||||
<br />
|
||||
<br />
|
||||
<Button label="Block button" block />
|
||||
<br />
|
||||
<Button label="Small block button" small block />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Loading button</h2>
|
||||
<Button loading label="Green Button" />{' '}
|
||||
<Button loading label="Blue Button" color="blue" />{' '}
|
||||
<Button loading label="DarkBlue Button" color="darkBlue" />{' '}
|
||||
<Button loading label="Violet Button" color="violet" />{' '}
|
||||
<Button loading label="LightViolet Button" color="lightViolet" />{' '}
|
||||
<Button loading label="Orange Button" color="orange" />{' '}
|
||||
<Button loading label="Red Button" color="red" />{' '}
|
||||
<Button loading label="Black Button" color="black" />{' '}
|
||||
<Button loading label="White Button" color="white" />
|
||||
</div>
|
||||
</>
|
||||
));
|
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import buttons from 'app/components/ui/buttons.scss';
|
||||
import { COLOR_GREEN } from 'app/components/ui';
|
||||
import { MessageDescriptor } from 'react-intl';
|
||||
import { Color } from 'app/components/ui';
|
||||
|
||||
import buttons from '../buttons.scss';
|
||||
import FormComponent from './FormComponent';
|
||||
|
||||
export default class Button extends FormComponent<
|
||||
|
@ -14,5 +14,5 @@
|
||||
"resolveJsonModule": false,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["@types", "packages", "config"]
|
||||
"include": ["@types", "packages", "config", ".storybook"]
|
||||
}
|
||||
|
@ -131,7 +131,7 @@ const webpackConfig = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user