рдмрдЧ рдХрд╛ рд╡рд░реНрдгрди рдХрд░реЗрдВ
рдореИрдВ рдЕрдкрдиреЗ рд╕реНрдЯреИрдВрд╕рд┐рд▓рдЬреЗрд╕ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдХреЗ рд▓рд┐рдП рдиреЙрдмреНрд╕ рдПрдбрдСрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдпрд╣ рддрдХрдиреАрдХреА рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ (рдпрджрд┐ рдореИрдВ рдХрд╣рд╛рдиреА рдХреЗ рднреАрддрд░ рдШрдЯрдХ рд╕рдВрднрд╛рд╡рдирд╛ рдХреЛ рд╕реЗрдЯ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рддреЛ рдпрд╣ рдмрджрд▓ рд░рд╣рд╛ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП: рдХрд╣рд╛рдиреА рдлрд╝рд╛рдЗрд▓ рдФрд░ рдлрд┐рд░ рдШрдЯрдХ рдХреЛ рджреЗрдЦреЗрдВ, рдЖрдк рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ рдпрд╣ рд╕реЗрдЯрд┐рдВрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рдпрд╣ - рдФрд░ рдпрд╣ рдХрд░рддрд╛ рд╣реИ)ред рд▓реЗрдХрд┐рди рдореИрдВ addons рдкреИрдирд▓ рдирд╣реАрдВ рджреЗрдЦ рд╕рдХрддрд╛ред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕рднреА рд╕реЗрдЯ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рдХрд┐рдП рдЧрдП рд╣реИрдВ (addons.js, package.json, рдЖрджрд┐)ред
рдореИрдВрдиреЗ рд░рдирд┐рдВрдЧ рд╕реНрдЯреЛрд░реАрдмреБрдХ рдХреЗ рдЕрдВрджрд░ рд╢реЛ рдПрдбрдСрдиреНрд╕ рдСрдкреНрд╢рди рдХреЛ рдЪреБрдирдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ рд▓реЗрдХрд┐рди рдХреБрдЫ рднреА рдкреНрд░рджрд░реНрд╢рд┐рдд рдирд╣реАрдВ рд╣реБрдЖ рд╣реИред
рдореИрдВ рдХреИрд╕реЗ рдЪрд▓ рд░рд╣рд╛ рд╣реВрдБ рдпрд╣ npm run storybook
рдкреНрд░рдЬрдирди рдХрд░рдирд╛
рд╡реНрдпрд╡рд╣рд╛рд░ рдХреЛ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрджрдо:
рдЕрдкреЗрдХреНрд╖рд┐рддреН рд╡реНрдпрд╡рд╣рд╛рд░
рдпрджрд┐ рдореИрдВ рдПрдХ рдРрдбрдСрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реНрдерд╛рдкрд┐рдд рд╣реИ, рддреЛ рдореБрдЭреЗ addons рдкреИрдирд▓ рджреЗрдЦрдиреЗ рдХреА рдЙрдореНрдореАрдж рд╣реИ
рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ
рдХреЛрдб рдХреЗ рдЯреБрдХрдбрд╝реЗ
рдиреАрдЪреЗ рдореЗрд░реА .storybook / addons.js рд╣реИ
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
рдиреАрдЪреЗ рдореЗрд░рд╛ рдкреИрдХреЗрдЬ рд╣реИред json
"scripts": {
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"stencil.dev": "stencil build --dev --watch --docs",
"storybook.dev": "./node_modules/.bin/start-storybook -p 8008 -c .storybook -s ./dist",
"storybook": "npm run build && ./node_modules/.bin/concurrently \"npm run stencil.dev\" \"npm run storybook.dev\"",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watch",
"generate": "stencil generate"
},
"dependencies": {
"@ionic/core": "^4.9.1"
},
"devDependencies": {
"@stencil/core": "^1.7.0",
"@stencil/less": "^1.0.0",
"@stencil/utils": "0.0.5",
"@stencil/webpack": "0.0.6",
"@storybook/addon-a11y": "5.2.3",
"@storybook/addon-actions": "5.2.3",
"@storybook/addon-knobs": "5.2.3",
"@storybook/addon-storysource": "5.2.3",
"@storybook/addon-viewport": "5.2.3",
"@storybook/addons": "5.2.3",
"@storybook/cli": "5.2.3",
"@storybook/html": "5.2.3",
"@storybook/polymer": "5.2.3",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"lit-html": "1.1.1",
"polymer-webpack-loader": "2.0.3",
"ts-loader": "^5.4.5",
"concurrently": "^4.1.0"
}
рдиреАрдЪреЗ рдореЗрд░реА .storybook / config.js рд╣реИ
import { addDecorator, addParameters, configure } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
import 'sumai-frontend';
addParameters({
options: {
/**
* name to display in the top left corner
* <strong i="6">@type</strong> {String}
*/
name: 'Sumai Components',
/**
* URL for name in top left corner to link to
* <strong i="7">@type</strong> {String}
*/
url: '#',
/**
* show story component as full screen
* <strong i="8">@type</strong> {Boolean}
*/
isFullscreen: false,
/**
* display panel that shows a list of stories
* <strong i="9">@type</strong> {Boolean}
*/
showNav: true,
/**
* display panel that shows addon configurations
* <strong i="10">@type</strong> {Boolean}
*/
showPanel: true,
/**
* display floating search box to search through stories
* <strong i="11">@type</strong> {Boolean}
*/
showSearchBox: false,
/**
* show addon panel as a vertical panel on the right
* <strong i="12">@type</strong> {string}
*/
addonPanelInRight: true,
/**
* sorts stories
* <strong i="13">@type</strong> {Boolean}
*/
sortStoriesByKind: false,
/**
* regex for finding the hierarchy separator
* <strong i="14">@example</strong>:
* null - turn off hierarchy
* /\// - split by `/`
* /\./ - split by `.`
* /\/|\./ - split by `/` or `.`
* <strong i="15">@type</strong> {Regex}
*/
hierarchySeparator: null,
/**
* regex for finding the hierarchy root separator
* <strong i="16">@example</strong>:
* null - turn off multiple hierarchy roots
* /\|/ - split by `|`
* <strong i="17">@type</strong> {Regex}
*/
hierarchyRootSeparator: null,
/**
* sidebar tree animations
* <strong i="18">@type</strong> {Boolean}
*/
sidebarAnimations: true,
/**
* id to select an addon panel
* <strong i="19">@type</strong> {String}
*/
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
/**
* enable/disable shortcuts
* <strong i="20">@type</strong> {Boolean}
*/
enableShortcuts: true // true by default
}
});
const req = require.context('../src/components', true, /story.tsx$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
addDecorator(withA11y);
addDecorator(withKnobs);
// HMR interface
if (module.hot) {
// Capture hot update
module.hot.accept('sumai-frontend', () => {
document.location.reload();
});
}
рдиреАрдЪреЗ рдореЗрд░реА рдХрд╣рд╛рдиреА рд╣реИ редtsx
import { storiesOf } from "@storybook/polymer";
import { text } from "@storybook/addon-knobs";
storiesOf("Basic Components", module)
.add("Modal", () => {
const el = document.createElement("sumai-full-width-image");
el.name = text('Name', 'Namey');
return el;
});
рд╕рд┐рд╕реНрдЯрдо:
System:
OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
CPU: (4) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.16.0 - /bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 75.0.3770.80
Firefox: 69.0.2
npmPackages:
@storybook/addon-a11y: 5.2.3 => 5.2.3
@storybook/addon-actions: 5.2.3 => 5.2.3
@storybook/addon-knobs: 5.2.3 => 5.2.3
@storybook/addon-storysource: 5.2.3 => 5.2.3
@storybook/addon-viewport: 5.2.3 => 5.2.3
@storybook/addons: 5.2.3 => 5.2.3
@storybook/cli: 5.2.3 => 5.2.3
@storybook/html: 5.2.3 => 5.2.3
@storybook/polymer: 5.2.3 => 5.2.3
рдЕрддрд┐рд░рд┐рдХреНрдд рд╕рдВрджрд░реНрдн
рдХрднреА-рдХрднреА рдпреВрдЖрдИ рдПрдХ рдордЬрд╛рдХрд┐рдпрд╛ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЬрд╣рд╛рдВ рд╕реНрдерд╛рдиреАрдп рднрдВрдбрд╛рд░рдг рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдПрдбрдСрди рдкреИрдирд▓ рдЫрд┐рдкрд╛ рд╣реЛрддрд╛ рд╣реИред рдЙрд╕ рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрдВрд╕реЛрд▓ рдореЗрдВ localStorage.clear()
рдЪрд▓ рд░рд╣рд╛ рд╣реИ рдФрд░ рдкреГрд╖реНрда рдХреЛ рд╣рд╛рд░реНрдб-рд░реАрд▓реЛрдб рдХрд░рдиреЗ рд╕реЗ рдЗрд╕реЗ рдареАрдХ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред
рд╣рд╛рдБ, рдореИрдВрдиреЗ рдРрд╕рд╛ рдХрд┐рдпрд╛ рд╣реИ рдФрд░ рдпрд╣ рдХрд╛рдо рдХрд┐рдпрд╛ рд╣реИ, рдирд┐рд░рд░реНрдердХ рдореБрджреНрджреЗ рдХреЗ рд▓рд┐рдП рдЦреЗрдж рд╣реИ, рдЖрдкрдХреА рдорджрдж рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж!
рдмрдЧ рдХреЗ рд▓рд┐рдП рдХреНрд╖рдорд╛ рдХрд░реЗрдВ! рдореИрдВ рдЦреБрд╢ рд╣реВрдВ рдХрд┐ рдЖрдкрдХрд╛ рдпрд╣ рдЪрд▓рдиреЗ рд▓рдЧрд╛!
рдХрднреА-рдХрднреА рдпреВрдЖрдИ рдПрдХ рдордЬрд╛рдХрд┐рдпрд╛ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЬрд╣рд╛рдВ рд╕реНрдерд╛рдиреАрдп рднрдВрдбрд╛рд░рдг рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдПрдбрдСрди рдкреИрдирд▓ рдЫрд┐рдкрд╛ рд╣реЛрддрд╛ рд╣реИред рдЙрд╕ рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрдВрд╕реЛрд▓ рдореЗрдВ
localStorage.clear()
рдЪрд▓ рд░рд╣рд╛ рд╣реИ рдФрд░ рдкреГрд╖реНрда рдХреЛ рд╣рд╛рд░реНрдб-рд░реАрд▓реЛрдб рдХрд░рдиреЗ рд╕реЗ рдЗрд╕реЗ рдареАрдХ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред
рдЗрд╕рдиреЗ рдореЗрд░рд╛ рджрд┐рди рдмрдЪрд╛рдпрд╛, tvm @shilman
рдирд┐рд╢реНрдЪрд┐рдд рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЗрд╕реЗ рдмрдВрдж рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП - рдХреНрдпрд╛ рдпрд╣ рдареАрдХ рдирд╣реАрдВ рд╣реИ? рдРрд╕рд╛ рдЕрдХреНрд╕рд░ рд╣реЛрддрд╛ рд╣реИ
рдлрд┐рд░ рд╕реЗ рдЦреЛрд▓рдиреЗред рд╣рдореЗрдВ рдпрд╣ рдкрддрд╛ рд▓рдЧрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдХрд┐ рдЗрд╕ рдмрдЧ рдХреЛ рдХреИрд╕реЗ рдареАрдХ рдХрд┐рдпрд╛ рдЬрд╛рдПред
рдЗрд╕реЗ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рд╕рдВрдХреЗрдд рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рд╕реНрдерд╛рдпреА рд╕рдорд╛рдзрд╛рди рдХреЗ рд▓рд┐рдП рддрддреНрдкрд░ рд╣реИрдВ
рдпрджрд┐ рдпрд╣ рдорджрдж рдХрд░рддрд╛ рд╣реИ, рддреЛ рдореИрдВ рдмрд╕ рдиреЙрдмреНрд╕ рдкреИрдХреЗрдЬ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рддреБрд░рдВрдд рдмрд╛рдж рдЗрд╕ рдмрдЧ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ред рдкреИрдирд▓ рдХреЛ рджрд┐рдЦрд╛рдИ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдореИрдВрдиреЗ ...
рдореЗрдиреВ рдкрд░ рдЬрд╛рдирд╛ рдФрд░ (рдЕрджреГрд╢реНрдп) рдкреИрдирд▓ рдХреЗ рдЙрдиреНрдореБрдЦреАрдХрд░рдг рдХреЛ рдмрджрд▓рдирд╛ рдерд╛ред рдпрд╣ рдЬрд╛рджреБрдИ рд░реВрдк рд╕реЗ рдКрд░реНрдзреНрд╡рд╛рдзрд░ рдЕрднрд┐рд╡рд┐рдиреНрдпрд╛рд╕ рдореЗрдВ рджрд┐рдЦрд╛рдИ рджрд┐рдпрд╛, рдФрд░ рдореИрдВ рдЗрд╕реЗ рдмрд╛рдж рдореЗрдВ рд╡рд╛рдкрд╕ рдШреБрдорд╛рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдерд╛ред
рд╢рд╛рдпрдж рд╡рд╣ рдорджрдж рдХрд░реЗрдЧрд╛, рд╢рд╛рдпрдж рдирд╣реАрдВ!
рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рднреА рдЪрд▓ рд░рд╣рд╛ рд╣реВрдВ, рд╕рд┐рд╡рд╛рдп рдЗрд╕рдХреЗ рдХрд┐ рд╕реНрдерд╛рдиреАрдп рднрдВрдбрд╛рд░рдг рдХреЛ рд╕рд╛рдл рдХрд░рдирд╛ / рдЧреБрдкреНрдд рдЦрд┐рдбрд╝рдХреА рдЦреЛрд▓рдирд╛ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдореБрдЭреЗ рддрддреНрд╡ рдХрдВрд╕реЛрд▓ рдореЗрдВ рдкреИрдирд▓ рдорд┐рд▓ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ рджрд┐рдЦрд╛рдИ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдордЬрдмреВрд░ рдХрд░ рд╕рдХрддрд╛ рд╣реИ, рдФрд░ knobs рдареАрдХ рдХрд╛рдо рдХрд░рддреЗ рд╣реИрдВред
рдЕрдкрдбреЗрдЯ: рдореЗрд░реЗ рджреНрд╡рд╛рд░рд╛ рд╕реНрд╡рд┐рдЪ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рдЗрд╕рдиреЗ рдХрд╛рдо рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд░ рджрд┐рдпрд╛
panelPosition: 'bottom'
рд╕реЗрд╡рд╛
addonPanelInRight: true
рд╡рд┐рдиреНрдпрд╛рд╕ рдореЗрдВред рдФрд░ рдлрд┐рд░ рдЬрдм рдореИрдВрдиреЗ рдЗрд╕реЗ рд╡рд╛рдкрд╕ panelPosition: 'bottom'
рдмрджрд▓ рджрд┐рдпрд╛, рддреЛ рдпрд╣ рдХрд╛рдо рдХрд░рдирд╛ рдЬрд╛рд░реА рд░рдЦрд╛ рд▓реЗрдХрд┐рди рдПрдХ рдЧреБрдкреНрдд рд╡рд┐рдВрдбреЛ рдореЗрдВ рдХрд╛рдо рдирд╣реАрдВ рдХрд┐рдпрд╛ред рдпрдХреАрди рдирд╣реАрдВ рд╣реЛрддрд╛ рдХрд┐ рдпрд╣ рдЙрдкрдпреЛрдЧреА рдЬрд╛рдирдХрд╛рд░реА рд╣реИ
рдПрдХ рд╣реА рдореБрджреНрджрд╛ рдерд╛, рдмрджрд▓рддреЗ рдЕрднрд┐рд╡рд┐рдиреНрдпрд╛рд╕ рдореЗрдВ рдорджрдж рдорд┐рд▓реА рд▓реЗрдХрд┐рди рдЬрдм рднреА рдореИрдВ рджреВрд╕рд░реА рдХрд╣рд╛рдиреА рдХрд╛ рдЪрдпрди рдХрд░рддрд╛ рд╣реВрдВ рддреЛ рдпрд╣ рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреА рд╣реИред рдореЗрд░рд╛ рдорд╛рдирдирд╛ тАЛтАЛрд╣реИ рдХрд┐ рдпрд╣ 3: 2 рдЕрдиреБрдкрд╛рдд рд╕реНрдХреНрд░реАрди (рд╕рд░рдлреЗрд╕ рдмреБрдХ) рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рд╡рд╣ рдЗрд╕реЗ рдбреЗрд╕реНрдХрдЯреЙрдк рдХреЗ рдХрд╛рд░рдг рдирд╣реАрдВ рдорд╛рди рд░рд╣рд╛ рд╣реЛ?
рдбреЗрд╕реНрдХрдЯреЙрдк рдкрд░ рдПрдХ рд╣реА рдореБрджреНрджрд╛ рдерд╛, рдХреНрд░реЛрдоред рдлрд┐рд░ рд╕реЗ, рдЕрднрд┐рд╡рд┐рдиреНрдпрд╛рд╕ рдХреЛ рдмрджрд▓рдиреЗ рдореЗрдВ рдорджрдж рдорд┐рд▓реА рд▓реЗрдХрд┐рди рдЬрдм рднреА рдореИрдВ рджреВрд╕рд░реА рдХрд╣рд╛рдиреА рдХрд╛ рдЪрдпрди рдХрд░рддрд╛ рд╣реВрдВ рддреЛ рдпрд╣ рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреА рд╣реИред
рдЦреБрд╢реА рд╣реИ рдХрд┐ рдореИрдВ рдЗрд╕ рдкреГрд╖реНрда рдкрд░ рдЖрдпрд╛ рд╣реВрдВред рдореИрдВрдиреЗ рдЖрдЬ рдЗрд╕ рдирд┐рд░рд╛рд╢рд╛рдЬрдирдХ рдмрдЧ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд┐рдпрд╛ рдФрд░ localStorage.clear()
рдЗрд╕реЗ рдареАрдХ рдХрд┐рдпрд╛ред рд╕реНрдерд╛рдпреА рд░реВрдк рд╕реЗ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рддрддреНрдкрд░ рд╣реИрдВред
рдЕрд░реЗ, рдореИрдВ рд╕рд┐рд░реНрдл рд╕реНрдЯреЛрд░реАрдмреБрдХ 6.0.10 рдкрд░ рдЗрд╕ рдмрдЧ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ рдерд╛, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдмрджрд▓рдХрд░ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рдлрд┐рдХреНрд╕ рдорд┐рд▓рд╛:
рдореЗрд░реЗ рдкрд╛рд╕ showPanel
рдФрд░ panelPosition
рдореЗрд░реЗ preview.js
рдЗрд╕ рддрд░рд╣ рд╕реЗ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдП рдЧрдП рд╣реИрдВ:
// preview.js
addParameters({
options: {
showPanel: true,
panelPosition: "bottom",
},
});
рдЗрдиреНрд╣реЗрдВ manager.js
рд▓реЗ рдЬрд╛рдиреЗ рд╕реЗ рдореЗрд░реЗ рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рд╣реЛ рдЧрдИ:
// manager.js
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЖрдкрдХреЛ рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рд╕рдорд╕реНрдпрд╛ рдпрд╛ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреА рддрд▓рд╛рд╢ рдХрд░ рд░рд╣реЗ рдЕрдиреНрдп рд▓реЛрдЧреЛрдВ рдХреЛ рдЦреЛрдЬрдиреЗ рдореЗрдВ рдорджрдж рдХрд░рддрд╛ рд╣реЛ;)
рд╕реНрдЯреЛрд░реАрдмреБрдХ 6.x рдореЗрдВ рдпрд╣ рдЖрдпрд╛, localStorage.clear () рд╕рдорд╛рдзрд╛рди рдиреЗ рдЗрд╕реЗ рдареАрдХ рдХрд┐рдпрд╛ред
рдПрдХ рддреНрд╡рд░рд┐рдд рдлрд┐рдХреНрд╕ рдХреЗ рд░реВрдк рдореЗрдВ рд▓реЛрдХрд▓рд╕реНрдЯреЛрд░реЗрдЬ.рдХреНрд▓реЗрдпрд░ () рдкрд░ +1 (^ 6.0.18)
рдФрд░ @milenaNeumann @ ena рднреА
рдЬрдм рдЗрд╕ рдЕрд╡рд╕реНрдерд╛ рдореЗрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд╣рд▓ рдирд╣реАрдВ рд╣реЛрдЧрд╛:
рддреНрд╡рд░рд┐рдд рдФрд░ рдЧрдВрджреЗ рд╕реБрдзрд╛рд░:
рджреАрд░реНрдШрдХрд╛рд▓рд┐рдХ рд╕реБрдзрд╛рд░ (рдпрд╣ рд╕рднреА рдорд╛рдорд▓реЛрдВ рдореЗрдВ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд▓рдЧрддрд╛ рд╣реИ, @milenaNeumann рдХреЛ рд╕рд╣рд╛рд░рд╛ рджреЗрддрд╛ рд╣реИ):
npm i @storybook/addons
.storybook / manager.js :
import { addons } from "@storybook/addons";
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
рд╡рд╣реАред рдЧрд╛рдЗрдб рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкреАрдЫрд╛ рдХрд┐рдпрд╛ рдФрд░ рдореИрдВ рдПрдХ рд╣реА рдореБрджреНрджрд╛ рд░рд╣рд╛ рд╣реВрдБ, рдпрд╣рд╛рдБ рдХреБрдЫ рднреА рдореЗрд░реЗ рд▓рд┐рдП рдЗрд╕реЗ рдареАрдХ рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореИрдВ рдбреЙрдХреНрд╕ рдЯреИрдм рдкрд░ рдЬрд╛ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рд╡рд╣рд╛рдВ рдЕрдкрдирд╛ рдЖрд░реНрдЧ рд╕реЗрдЯ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред
рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВ: npm-check-рдЕрдкрдбреЗрдЯ рдХреЗ рд╕рд╛рде рдореЗрд░реЗ рд╕рднреА рдкреИрдХреЗрдЬреЛрдВ рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░рдХреЗ рдЗрд╕ рдХрд╛рдо рдХреЛ рдХрд░рдиреЗ рдореЗрдВ рд╕рдлрд▓ рд░рд╣реЗред
рдмрд╕ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП: рдпрд╣ рдХреЗрд╡рд▓ рдЙрди рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдЬрд┐рдиреНрд╣реЛрдВрдиреЗ рд╕реНрдЯреЛрд░реАрдмреБрдХ _before_ рджреЗрдЦрд╛ рдерд╛, рдЙрд╕рдХреЗ рдкрд╛рд╕ рдиреЙрдмреНрд╕ рдереЗ, рд╣реИ рдирд╛? рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдирдП рдЖрдЧрдВрддреБрдХреЛрдВ рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред
рдореЗрд░реЗ рд▓рд┐рдП рдЙрдкрд░реЛрдХреНрдд рдореЗрдВ рд╕реЗ рдХрд┐рд╕реА рдиреЗ рднреА рдХрд╛рдо рдирд╣реАрдВ рдХрд┐рдпрд╛, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЗрд╕реЗ main.js рдореЗрдВ рдирд┐рдпрдВрддреНрд░рдг рдПрдбрдСрди рдЬреЛрдбрд╝рдХрд░ рдЗрд╕реЗ рдареАрдХ рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдмреА рд╣рд╛рд╕рд┐рд▓ рдХреА:
module.exports = {
addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
stories: ['./src/stories/*.stories.js'],
};
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдХрднреА-рдХрднреА рдпреВрдЖрдИ рдПрдХ рдордЬрд╛рдХрд┐рдпрд╛ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЬрд╣рд╛рдВ рд╕реНрдерд╛рдиреАрдп рднрдВрдбрд╛рд░рдг рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдПрдбрдСрди рдкреИрдирд▓ рдЫрд┐рдкрд╛ рд╣реЛрддрд╛ рд╣реИред рдЙрд╕ рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрдВрд╕реЛрд▓ рдореЗрдВ
localStorage.clear()
рдЪрд▓ рд░рд╣рд╛ рд╣реИ рдФрд░ рдкреГрд╖реНрда рдХреЛ рд╣рд╛рд░реНрдб-рд░реАрд▓реЛрдб рдХрд░рдиреЗ рд╕реЗ рдЗрд╕реЗ рдареАрдХ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред