๋ฒ๊ทธ ์ค๋ช
StencilJs ํ๋ก์ ํธ์ ๋
ธ๋ธ ์ ๋์จ์ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ ๊ธฐ์ ์ ์ผ๋ก ์๋ํ๊ณ ์์ต๋๋ค (์คํ ๋ฆฌ ๋ด์์ ๊ตฌ์ฑ ์์ prob๋ฅผ ์ค์ ํ๋ฉด ๋ณ๊ฒฝ๋ฉ๋๋ค. ์ : ์คํ ๋ฆฌ ํ์ผ์ ํ์ธํ ๋ค์ ๊ตฌ์ฑ ์์๊ฐ ๊ทธ๊ฒ์-๊ทธ๋ฆฌ๊ณ ๊ทธ๋ ์ต๋๋ค). ํ์ง๋ง ์ ๋์จ ํจ๋์ด ๋ณด์ด์ง ์์ต๋๋ค. ๋ชจ๋ ์ค์ ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ํํ๋ค๊ณ ์๊ฐํฉ๋๋ค (addons.js, package.json ๋ฑ).
์คํ์ค์ธ ์คํ ๋ฆฌ ๋ถ์์ ์ ๋์จ ํ์ ์ต์ ์ ์ ํํ์ง๋ง ์๋ฌด๊ฒ๋ ํ์๋์ง ์์ต๋๋ค.
๋ด๊ฐ ์คํํ๋ ๋ฐฉ๋ฒ์ npm run storybook
์ฌํํ๋ ค๋ฉด
๋์์ ์ฌํํ๋ ๋จ๊ณ :
์์๋๋ ํ๋
์ฌ์ฉํ ์ ๋์จ์ด ์ค์น๋์ด ์์ผ๋ฉด ์ ๋์จ ํจ๋์ด ํ์ ๋ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค.
์คํฌ๋ฆฐ ์ท
์ฝ๋ ์กฐ๊ฐ
์๋๋ ๋ด .storybook / addons.js์
๋๋ค.
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
์๋๋ ๋ด package.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();
});
}
์๋๋ ๋ด ์ด์ผ๊ธฐ์ ๋๋ค.
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
์ถ๊ฐ ์ปจํ ์คํธ
๋๋๋ก UI๋ ๋ก์ปฌ ์ ์ฅ์์ ๋ฐ๋ผ ์ ๋์จ ํจ๋์ด ์จ๊ฒจ์ง๋ ์ฌ๋ฏธ์๋ ์ํ๊ฐ๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ์ฝ์์์ localStorage.clear()
๋ฅผ ์คํํ๊ณ ํ์ด์ง๋ฅผ ํ๋ ๋ค์๋ก๋ํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค.
๋ค, ๊ทธ๋ ๊ฒํ๊ณ ์๋ํ์ต๋๋ค. ์ค๋ณต ๋ฌธ์ ๋ก ์ธํด ์ฃ์กํฉ๋๋ค. ๋์ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!
๋ฒ๊ทธ ์ฃ์กํฉ๋๋ค! ์๋ํ๊ฒ๋์ด ๊ธฐ์ฉ๋๋ค!
๋๋๋ก UI๋ ๋ก์ปฌ ์ ์ฅ์์ ๋ฐ๋ผ ์ ๋์จ ํจ๋์ด ์จ๊ฒจ์ง๋ ์ฌ๋ฏธ์๋ ์ํ๊ฐ๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ์ฝ์์์
localStorage.clear()
๋ฅผ ์คํํ๊ณ ํ์ด์ง๋ฅผ ํ๋ ๋ค์๋ก๋ํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค.
์ด๊ฒ์ ๋์ ํ๋ฃจ๋ฅผ ๊ตฌํ๋ค, tvm @shilman
๋ซ์์ผํ ์ง ํ์คํ์ง ์์ต๋๋ค.์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๊น? ์ด๊ฒ์ ์์ฃผ ๋ฐ์ํฉ๋๋ค
์ฌ๊ฐ. ์ด ๋ฒ๊ทธ๋ฅผ ์์ ํ๋ ๋ฐฉ๋ฒ์ ์์ ๋ด์ผํฉ๋๋ค.
์์ ์ ๋ํ ํํธ๋ฅผ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ์๊ตฌ์ ์ธ ์์ ์ ๊ธฐ๋
๋์์ด๋๋ค๋ฉด ๋
ธ๋ธ ํจํค์ง๋ฅผ ์ถ๊ฐ ํ ์งํ์ด ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ์ต๋๋ค. ํจ๋์ ํ์ํ๊ธฐ ์ํด ๋ด๊ฐ ํ ๊ฒ์ ...
๋ฉ๋ด๋ก ์ด๋ํ์ฌ (๋ณด์ด์ง ์๋) ํจ๋์ ๋ฐฉํฅ์ ๋ณ๊ฒฝํ๋ ๊ฒ๋ฟ์ด์์ต๋๋ค. ๋ง๋ฒ์ฒ๋ผ ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ๋ํ๋๊ณ ๋์ค์ ๋ค์ ํ์ ํ ์์์์ต๋๋ค.
๋์์ด ๋ ์๋ ์๊ณ ์๋ ์๋ ์์ต๋๋ค!
๋ก์ปฌ ์ ์ฅ์ ์ง์ฐ๊ธฐ / ์ํฌ๋ฆฟ ์ฐฝ ์ด๊ธฐ๊ฐ ์๋ํ์ง ์๋๋ค๋ ์ ์ ์ ์ธํ๋ฉด์ด ๋ฌธ์ ๋ ๋ฐ์ํฉ๋๋ค. Elements ์ฝ์์์ ํจ๋์ ์ฐพ์์ ํ์๋๋๋ก ํ ์ ์์ผ๋ฉฐ ๋ ธ๋ธ๊ฐ ์ ๋๋ก ์๋ํฉ๋๋ค.
์
๋ฐ์ดํธ : ์ ํ ํ ํ ์๋ํ๊ธฐ ์์ํ์ต๋๋ค.
panelPosition: 'bottom'
...์
addonPanelInRight: true
๊ตฌ์ฑ์์. ๊ทธ๋ฐ ๋ค์ ๋ค์ panelPosition: 'bottom'
๋ก ๋ณ๊ฒฝํ๋ฉด ๊ณ์ ์๋ํ์ง๋ง ์ํฌ๋ฆฟ ์ฐฝ์์๋ ์๋ํ์ง ์์์ต๋๋ค. ์ด๊ฒ์ด ์ ์ฉํ ์ ๋ณด์ธ์ง ํ์คํ์ง ์์
๊ฐ์ ๋ฌธ์ ๊ฐ ์์๋๋ฐ ๋ฐฉํฅ์ ๋ฐ๊พธ๋ ๊ฒ์ด ๋์์ด๋์์ง๋ง ๋ค๋ฅธ ์ด์ผ๊ธฐ๋ฅผ ์ ํํ ๋๋ง๋ค ๊ณ์ ์ฌ๋ผ์ง๋๋ค. 3 : 2 ๋น์จ ํ๋ฉด (Surface Book)๊ณผ ๊ด๋ จ์ด ์๋ค๊ณ ์๊ฐํ๋๋ฐ ๊ทธ ๋๋ฌธ์ ๋ฐ์คํฌํฑ์ผ๋ก ์ทจ๊ธ๋์ง ์์ ์๋ ์์ต๋๋ค.
๋ฐ์คํฌํฑ, ํฌ๋กฌ์์ ๋์ผํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค. ๋ค์ ๋งํ์ง๋ง ๋ฐฉํฅ์ ๋ฐ๊พธ๋ ๊ฒ์ด ๋์์ด๋์์ง๋ง ๋ค๋ฅธ ์ด์ผ๊ธฐ๋ฅผ ์ ํํ ๋๋ง๋ค ๊ณ์ ์ฌ๋ผ์ง๋๋ค.
์ด ํ์ด์ง๋ฅผ ๋ณด๊ฒ๋์ด ๊ธฐ์ฉ๋๋ค. ์ค๋์ด ์ง์ฆ๋๋ ๋ฒ๊ทธ๋ฅผ ๋ง๋ฌ๊ณ localStorage.clear()
์์ ํ์ต๋๋ค. ๋ํ ์๊ตฌ์ ์ธ ์์ ์ ๊ธฐ๋ํฉ๋๋ค.
๋ฐฉ๊ธ Storybook 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",
});
์๋ง๋ ์ด๊ฒ์ ๊ทผ๋ณธ์ ์ธ ๋ฌธ์ ๋ฅผ ์ฐพ๊ฑฐ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐพ๋ ๋ค๋ฅธ ์ฌ๋๋ค์ ์ฐพ๋ ๋ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.)
Storybook 6.x์์์ด ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ์ผ๋ฉฐ localStorage.clear () ์๋ฃจ์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
๋น ๋ฅธ ์์ ์ผ๋ก localStorage.clear ()์ +1 (^ 6.0.18)
๊ทธ๋ฆฌ๊ณ @milenaNeumann ๐ ๐
์ด ์ํ์์๋ ๋ค์์ด ํด๊ฒฐ ๋์ง ์์ต๋๋ค .
๋น ๋ฅด๊ณ ๋๋ฌ์ด ์์ :
์ฅ๊ธฐ ์์ (๋ชจ๋ ๊ฒฝ์ฐ์์ ํด๊ฒฐ๋๋ ๊ฒ์ผ๋ก ๋ณด์ด๋ฉฐ @milenaNeumann์ ์ํ) :
npm i @storybook/addons
.storybook / manager.js :
import { addons } from "@storybook/addons";
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
๊ฐ์. ๊ฐ์ด๋๋ฅผ ๋ฐ๋ฅด๊ณ ๋์ผํ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ์๋ฌด๊ฒ๋ ํด๊ฒฐ๋์ง ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ฌธ์ ํญ์ผ๋ก ์ด๋ํ์ฌ ์ฌ๊ธฐ์ ๋ด ์ธ์๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.
ํธ์ง : npm-check-updates๋ก ๋ชจ๋ ํจํค์ง๋ฅผ ์ ๋ฐ์ดํธํ์ฌ์ด ์์ ์ ์ํํ๋๋ก ๊ด๋ฆฌํ์ต๋๋ค.
ํ์คํํ๊ธฐ ์ํด์ : ์ด๊ฒ์ Knobs๊ฐ์๋ Storybook _before_๋ฅผ ๋ณธ ์ฌ์ฉ์์๊ฒ๋ง ๋ฐ์ํด์ผํฉ๋๋ค. ๋ง์ฃ ? ์์ ํ ์๋ก์ด ๋ฐฉ๋ฌธ์๋ ์ํฅ์๋ฐ์ง ์์์ผํฉ๋๋ค.
๋๋ฅผ ์ํด ์์ ์ด๋ ๊ฒ๋ ์๋ํ์ง ์์์ง๋ง main.js์ ์ปจํธ๋กค ์ ๋์จ์ ์ถ๊ฐํ์ฌ ์์ ํ์ต๋๋ค.
module.exports = {
addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
stories: ['./src/stories/*.stories.js'],
};
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋๋ก UI๋ ๋ก์ปฌ ์ ์ฅ์์ ๋ฐ๋ผ ์ ๋์จ ํจ๋์ด ์จ๊ฒจ์ง๋ ์ฌ๋ฏธ์๋ ์ํ๊ฐ๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ์ฝ์์์
localStorage.clear()
๋ฅผ ์คํํ๊ณ ํ์ด์ง๋ฅผ ํ๋ ๋ค์๋ก๋ํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค.