Storybook 8.3
Storybook is the industry standard workshop for building, testing, and documenting UI components. Hundreds of thousands of developers use it daily, including teams at Microsoft, Spotify, and Ferrari. We recently announced our big bet on the future of UI testing. Component tests are the perfect companion to E2E tests, bringing coverage, control, speed, and reliability to complement E2E’s black box
PR TIMESフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®CI パイプラインを改善ã—ã¦ã€CI 処ç†æ™‚é–“ã¨Billable Time ã‚’50%を削減ã—ãŸè©± | PR TIMES 開発者ブãƒã‚°
ã“ã“ã‚“ã«ã¡ã¯PR TIMES開発本部ã®ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ³ã® Chanoknan ã§ã™ã€‚ PR TIMESã«ã¤ã„ã¦ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®CI パイプラインを改善ã«ã¤ã„ã¦ãŠè©±ã—ã—ã¾ã™ã€‚ PR TIMESã§ã¯ã€Reactã§æ›¸ã‹ã‚ŒãŸã™ã¹ã¦ã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ã‚³ãƒ¼ãƒ‰ã®ã‚³ãƒ¼ãƒ‰ã¯Monorepo ã¨ã—ã¦ç®¡ç†ã—ã¦ã„ã¾ã™ã€‚ ãã®Monorepoã®CI パイプラインã¯ã€ã‚·ã‚¹ãƒ†ãƒ 全体ã®Lintã€Type Checkã€Testã€Buildã‚’è¡Œã†ã‚ˆã†ã«CIパイプラインãŒè¨å®šã•ã‚Œã¦ãŠã‚Šã€ã“ã‚Œã«ã¯ã‹ãªã‚Šã®æ™‚é–“ãŒã‹ã‹ã‚Šã€GitHub Actionsã®Billable Timeã«ã‚‚影響を与ãˆã¾ã™ã€‚ã“れを緩和ã™ã‚‹ãŸã‚ã€CI処ç†æ™‚間を減らã™ãŸã‚ã®ã„ãã¤ã‹ã®æˆ¦ç•¥ã‚’実施ã—ã¦ã„ã¾ã™ã€‚詳細ã«ã¤ã„ã¦ã¯ã€ä»¥ä¸‹ã®è¨˜äº‹ã‚’å‚ç…§ã—ã¦ãã ã•ã„。 改善ã§ãる点を特定ã™ã‚‹ ã“ã®ä½œæ¥ã«å–り組むå‰ã€ç§ã¯CIパイプラインやGitHub Actionsã«ã¤ã„ã¦è©³ã—ãã‚ã‚Šã¾ã›ã‚“
Storybook 8.2
Storybook is the component workshop behind the world’s top design systems (Carbon, Polaris, Fluent, Lightning, etc.). Accordingly, it is often associated with building and documenting atomic components for reuse. But UI components come in many sizes and shapes. For teams at Faire, Yoobic, and Monday.com, Storybook is the tool of choice for “product UI†such as shopping carts, dashboards, chat widg
ã€Storybook8.1】ワンクリックã§Story作æˆï¼ä¿ºãŸã¡ã¯ã‚‚ã†Storyを書ã‹ãªãã¦ã„ã„ã®ã‹ã‚‚ã—ã‚Œãªã„。
ã“ã‚Œã§ã‚‚ã‚ã‚‚ã‚ã®ã‚»ãƒƒãƒˆã‚¢ãƒƒãƒ—ãŒå®Œäº†ã—ã€StorybookãŒç«‹ã¡ä¸ŠãŒã‚Šã¾ã™ã€‚ step2 自動作æˆã•ã‚ŒãŸãƒ•ã‚¡ã‚¤ãƒ«ã‚’削除ã™ã‚‹ã€‚ 上記ã®ã‚ャプãƒãƒ£ã«ã‚ã‚‹<Button/>・<Header/>・<Page/>ã¯è‡ªå‹•ä½œæˆã•ã‚ŒãŸExampleãªã®ã§ãã‚Œã«é–¢ã‚るファイルを削除ã—ã¦ãŠãã¾ã—ょã†ã€‚(ノイズã ã‹ã‚‰å‰Šé™¤ã™ã‚‹ã ã‘ã§ã™ã®ã§ã€ã”自由ã«ï¼) src/stories/以下ã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’å…¨ã¦å‰Šé™¤ã—ã¾ã™ã€‚ 一旦エラーãŒå‡ºã¾ã™ãŒã€è¡¨ç¤ºã™ã‚‹StoryãŒãªã„ã ã‘ãªã®ã§ç„¡è¦–ã—ã¦OKã§ã™ã€‚Step3以é™ã§Storyを作æˆã—ã¦ã„ãã¾ã—ょã†ã€‚ Step3 対象ã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¨ãã®Storyファイルを作æˆã™ã‚‹ã€‚ ãŠå¥½ããªã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¨ã€ãã®Storyファイルを手書ãã—ã¾ã—ょã†ã€‚ (下記ã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¯ã¨ã¦ã‚‚é©å½“ã§ã™...。) type Props = { children: string; disabled: boole
Portable stories for Playwright Component Tests
Storybook is the industry standard workshop for building, documenting, and testing UI components. It’s used by leading development teams at organizations like Shopify, Gov.UK, and NASA. One of the biggest benefits of developing in Storybook is that you get tests for free. Each isolated component example—or “storyâ€â€”is a UI test. And if you want to test data fetching and user interactions, Storybook
「実装例ã‹ã‚‰è¦‹ã‚‹ React ã®ãƒ†ã‚¹ãƒˆã®æ›¸ãæ–¹ã€ã‚’アップデートã™ã‚‹
社内ã®äººã‹ã‚‰ã€è‡ªåˆ†ãŒä»¥å‰æ›¸ã„ãŸæ¬¡ã®è¨˜äº‹ãŒã€Œä¾¿åˆ©ã§åŠ©ã‹ã£ãŸï¼æ›¸ã„ãŸæ™‚ã‹ã‚‰ä½•ã‹ã‚¢ãƒƒãƒ—デートã‚る？ã€ã£ã¦ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ãŒããŸã€‚ ãã‚“ãªä¾¿åˆ©ã ãªã‚“ã¦ã©ã†ã‚‚ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã™ã‚¦ãƒ•ãƒ•ã€ã¨æ€ã„ãªãŒã‚‰æ›¸ã„ãŸæ—¥ã‚’見ã¦ã¿ã‚‹ã¨ 2022-08-09 ã ã£ãŸã€‚ã‚‚ã†ã™ã 2 年経ã¨ã†ã¨ã—ã¦ã‚‹ã€‚時ã®æµã‚ŒãŒæ—©ãã¦æ€–ã„。 ã“ã®è¨˜äº‹ã«æ›¸ã‹ã‚ŒãŸå®Ÿè£…例ã¯ãƒªãƒã‚¸ãƒˆãƒªã«ã¾ã¨ã‚ã¦ã„ãŸã‚“ã ã‘ã©ã€å½“然ã€ä½•ã‹ãƒ¡ãƒ³ãƒ†ã‚’ã—ã¦ã„ãŸã‚ã‘ã‚‚ãªãã€2022 年当時ã®çŠ¶æ…‹ãŒãã®ã¾ã¾æ®‹ã£ã¦ã„ãŸã€‚ ã›ã£ã‹ã便利ã«æ€ã£ã¦ãれる人ãŒã„ãŸã®ã§ã€å†…容をアップデートã™ã‚‹ã€‚ アップデートã¾ã¨ã‚ メジャーãƒãƒ¼ã‚¸ãƒ§ãƒ³ã®ãƒªãƒªãƒ¼ã‚¹ã‚„ビルドツールã®çµ±ä¸€ã®è¦³ç‚¹ã§ Jest ã‹ã‚‰ Vitest ã«ç§»è¡Œ useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactã‚’ v15 ã«ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚¢ãƒƒãƒ— MSW ã‚’ v2 ã«ãƒ
Storybook 8
Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools. Today, I’m thrilled to announce the release of Storybook 8! This latest version of Storybook brings together 8,865 commits across 773 PRs from 218
Reactã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‹ã‚‰Storybookã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’自動生æˆã—ã¦ã¿ãŸ
ã¯ã˜ã‚㫠フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã¯ã€UIコンãƒãƒ¼ãƒãƒ³ãƒˆã®ã‚«ã‚¿ãƒã‚°ã¨ã—ã¦StorybookãŒç”¨ã„られるケースãŒã‚ã‚‹ã¨æ€ã„ã¾ã™ã€‚ Storybookã¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãƒ™ãƒ¼ã‚¹ã®UI開発ã®åŠ©ã‘ã¨ãªã‚‹ãƒ„ールã§ã€Reactã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’独立ã—ã¦è¦–覚的ã«ç¢ºèªã§ãã¾ã™ã€‚ ã—ã‹ã—ãªãŒã‚‰ç¹å¿™æ™‚ã‚„è¦æ¨¡ã®å¤§ãã„プãƒã‚¸ã‚§ã‚¯ãƒˆã«ãªã‚‹ã¨ã€ãƒ¡ãƒ³ãƒãƒ¼ã®å¢—減や開発工数ç‰ã§Storybookã®é–‹ç™ºã‚³ã‚¹ãƒˆãŒé«˜ãæ„Ÿã˜ã‚‰ã‚Œã‚‹çŠ¶æ³ãŒã‚ã‚‹ã¨æ€ã„ã¾ã™ã€‚ ãã“ã§æœ¬è¨˜äº‹ã§ã¯ã€ãªã‚‹ã¹ãStorybookã®é–‹ç™ºã‚³ã‚¹ãƒˆã‚’軽減ã—ã¦ã€Storybookã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’自動生æˆã™ã‚‹ä»•çµ„ã¿ã‚’考案ã—ã¦ã¿ã¾ã—ãŸã€‚ Storybookã¨ã¯ Storybookã¯ã€UIコンãƒãƒ¼ãƒãƒ³ãƒˆã‚’独立ã—ã¦é–‹ç™ºãƒ»è¡¨ç¤ºã™ã‚‹ãŸã‚ã®ãƒ„ールã§ã™ã€‚ React, Vue, Angularãªã©ã€æ§˜ã€…ãªãƒ•ãƒ¬ãƒ¼ãƒ ワークã«å¯¾å¿œã—ã¦ãŠã‚Šã€å„コンãƒãƒ¼ãƒãƒ³ãƒˆã®ç•°ãªã‚‹çŠ¶æ…‹ã‚„ãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ã‚’一覧ã§è¦‹ã‚‹
storybook-vite
2020/05/20 ã“ã‚“ã ã‘devDependencies 㧠インストールã•ã‚ŒãŸã€‚ babel 入るんãŒã‚„ã ãªã @babel/core: v7.18.0, @storybook/addon-actions: v6.5.3, @storybook/addon-essentials: v6.5.3, @storybook/addon-interactions: v6.5.3, @storybook/addon-links: v6.5.3, @storybook/builder-vite: v0.1.35, @storybook/react: v6.5.3, @storybook/testing-library: v0.0.11, babel-loader: v8.2.5, eslint-plugin-storybook: v0.5.12, package.json ã® scripts ã«
🎨Storybook@7入門：Next.js + TailwindCSSã¸ã®ã‚¹ãƒ†ãƒƒãƒ—ãƒã‚¤ã‚¹ãƒ†ãƒƒãƒ—組ã¿è¾¼ã¿ã‚¬ã‚¤ãƒ‰
Storybookã®ãƒ¡ã‚¸ãƒ£ãƒ¼ãƒãƒ¼ã‚¸ãƒ§ãƒ³ãŒ7ã«ã‚¢ãƒƒãƒ—デートã—ã¦ã‹ã‚‰ã—ã°ã‚‰ã経ã¡ã¾ã™ã€‚ ã—ã‹ã—ãªãŒã‚‰Next.jsã¨tailwindCSSã®çµ„ã¿åˆã‚ã›ã«Storybookを使用ã™ã‚‹è¨˜äº‹ãŒå°‘ãªã‹ã£ãŸãŸã‚〠組ã¿è¾¼ã‚€ãŸã‚ã«è¡Œã£ãŸã“ã¨ã‚’ã¾ã¨ã‚ã¾ã—ãŸã€‚ 動作確èªç’°å¢ƒã¯ä»¥ä¸‹ã®ã¨ãŠã‚Šã§ã™ã€‚ "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "
MSW を活用ã—㟠WebAPI リグレッションテスト
MSW ã¯ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ãƒ¬ãƒ™ãƒ«ã§ãƒªã‚¯ã‚¨ã‚¹ãƒˆã‚’インターセプトã™ã‚‹ã€è‡ªå‹•ãƒ†ã‚¹ãƒˆã§ä¾¿åˆ©ãªãƒ¢ãƒƒã‚¯ã‚µãƒ¼ãƒãƒ¼ã§ã™ã€‚éŽåŽ»è¨˜äº‹ã§ã‚‚紹介ã—ãŸã¨ãŠã‚Šã€ã‚¹ãƒ‘イ（モック関数）をãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ãƒ¬ãƒ™ãƒ«ã«å¿ã°ã›ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã™ã€‚実際㫠WebAPI ãŒå‘¼ã°ã‚ŒãŸæ™‚ã® Payload ã®æ¤œè¨¼ã¯ã€Jest 組ã¿è¾¼ã¿ã®ãƒ¢ãƒƒã‚¯æ©Ÿèƒ½ã§ã¯å®Ÿç¾ã§ããªã„é ˜åŸŸã§ã™ã€‚本稿ã¯ã€ŒWebAPI リグレッションテストã€ã‚’実施ã™ã‚‹ãŸã‚ã®ã€MSW 活用方法を解説ã—ã¾ã™ã€‚記事ã§ä½¿ç”¨ã—ã¦ã„るサンプルコードã¯ã“ã¡ã‚‰ã€‚ 課題ã®æ¦‚è¦ Web アプリケーションページã®ã»ã¨ã‚“ã©ã¯ã€Œ1.UI を表示ã—ï¼2.入力æ“作ã—ï¼3.WebAPI 通信ã—ï¼4.通信後処ç†ã‚’è¡Œã†ã€ã¨ã„ã†ä¸€é€£å‡¦ç†ãŒè²¬å‹™ã§ã™ã€‚ã“ã®ã‚ˆã†ãªãƒšãƒ¼ã‚¸ã«æ›¸ã‹ã‚Œã‚‹ãƒ†ã‚¹ãƒˆã¯ã€WebAPI 通信å‰å¾Œã«é›†ä¸ã—ãŒã¡ã§ã™ã€‚MSW を使用ã™ã‚‹ã¨ã€ä»¥ä¸‹ã®å›³ã®æ§˜ã«ã€Œé€ä¿¡å¾Œå‡¦ç†ã€ã¾ã§åˆ°é”å¯èƒ½ãªãŸã‚ã€ä¾‹ãˆã°ã€ŒWebAPI レスãƒãƒ³ã‚¹ãŒè¿”ã£
Storybook å˜ä½“ã§ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ãƒ†ã‚¹ãƒˆã‚’実施ã™ã‚‹
Storybook ã® Component Story Format 3.0 ã§ã¯æ–°æ©Ÿèƒ½ã¨ã—㦠play() 関数ãŒè¿½åŠ ã•ã‚Œã¾ã—ãŸã€‚ play() 関数㯠Storybook 上ã§ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ã‚¯ãƒªãƒƒã‚¯ã‚„フォーム入力ã®ã‚ˆã†ãªã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ãªæ“作を表ç¾ã§ãã¾ã™ã€‚ 以å‰ã¯ composeStories() 関数ã«ã‚ˆã‚Š Storybook 上ã§ä½œæˆã—ãŸã‚¹ãƒˆãƒ¼ãƒªãƒ¼ã‚’ Jest ã§å†åˆ©ç”¨ã™ã‚‹æ–¹æ³•ã‚’書ã„ãŸã®ã§ã™ãŒã€ã©ã†ã‚„ら Storybook ã®ã¿ã§å®Œçµã—ã¦ãƒ†ã‚¹ãƒˆã‚’実行ã§ãるよã†ã§ã™ã®ã§ã“ã¡ã‚‰ã‚’試ã—ã¦ã¿ã¾ã™ã€‚ Vite プãƒã‚¸ã‚§ã‚¯ãƒˆã®ä½œæˆ ã¾ãšã¯ä»¥ä¸‹ã‚³ãƒžãƒ³ãƒ‰ã§ Vite プãƒã‚¸ã‚§ã‚¯ãƒˆã‚’作æˆã—ã¾ã™ã€‚ $ npm init vite@latest my-vue-app -- --template vue-ts $ cd my-vue-app $ npm install Storybook ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ« 続
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®"ã¡ã‚‡ã†ã©ã„ã„"自動テストã®ã¯ã˜ã‚ã‹ãŸ - Atrae Tech Blog
Wevoxã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã‚’ã—ã¦ã„るタガミã§ã™ã€‚最近ã¯monorepo構æˆã«ç§»è¡Œä¸ã®Wevoxフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ†ã‚¹ãƒˆã‚„デザインシステムãªã©ã‚’ã„ã„æ„Ÿã˜ã«ã—よã†ã¨ã—ã¦ã„ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã§ã¯ã€Wevoxã¨ã„ã†SaaSプãƒãƒ€ã‚¯ãƒˆã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã«ãŠã‘る自動テストã®è©±ã‚’ã—ã¾ã™ã€‚Wevoxã¯ãƒªãƒªãƒ¼ã‚¹ã‹ã‚‰5年以上ãŒçµŒéŽã—ã€ãƒãƒ¼ãƒ ã®ãƒ¡ãƒ³ãƒãƒ¼ã‚‚増ãˆã€ã¾ãŸã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚‚巨大化ã—ã¦ã„ã¾ã™ã€‚ãã‚“ãªä¸ã§ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚‚"å¼å¹´é·å®®"ã‚’ã—ã¦ã€æ”¹å–„ã‚’ç¹°ã‚Šè¿”ã—ã¦ã„ã¾ã™ã€‚ä¸ã«ã¯ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚’ガラッã¨å¤‰ãˆã‚‹ã‚ˆã†ãªãƒªãƒ•ã‚¡ã‚¯ã‚¿ã‚‚ã‚ã‚Šã€æ‹…当ã™ã‚‹ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã«ã¨ã£ã¦ã¯ãƒ‡ã‚°ãƒ¬ã®å¿ƒé…ãŒä»˜ãçºã„ã¾ã™ã€‚ãã‚“ãªæ—¥ã€…変化ã™ã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚’支ãˆã‚‹ã®ãŒè‡ªå‹•ãƒ†ã‚¹ãƒˆã§ã™ã€‚ Wevoxã®é–‹ç™ºãƒãƒ¼ãƒ ã¯æ±ºã—ã¦å¤§äººæ•°ã§ã¯ã‚ã‚Šã¾ã›ã‚“。ãã‚“ãªãƒãƒ¼ãƒ ã§ã‚‚å“質ã®æ”¹å–„ã®ãŸã‚ã«ä¸€æ©ãšã¤æ”¹å–„ã—ã¤ã¤ã‚る経験をもã¨ã«ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®è‡ªå‹•ãƒ†ã‚¹ãƒˆãƒã‚¤ãƒ³ãƒˆã‚’ã„ãã¤ã‹ãŠä¼ãˆã—
Storybookã‚’å°Žå…¥ã™ã‚‹éš›ã«ã‚„ã‚‹ã¹ãã“ã¨3é¸
StorybookãŒãƒãƒ¼ã‚¸ãƒ§ãƒ³7ãŒãƒªãƒªãƒ¼ã‚¹ã•ã‚ŒãŸãŸã‚ã€åŠ ç†ã€ä¿®æ£ã—ã¦ãŠã‚Šã¾ã™ã€‚ ã¾ãŸã‚³ãƒ¼ãƒ‰ã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ã¨ã—ã¦hygenを推奨ã—ã¦ã„ã¾ã—ãŸãŒã€è¿½è¨˜å½“時2023/05時点ã§ã¯Plopを推奨ã—ã¾ã™ã€‚ ç†ç”±ã¯ã€Plopã¯ESM対応ãŒè‡ªç„¶ã¨ã§ãã‚‹ã‹ã‚‰ã§ã™ã€‚ ã¯ã˜ã‚㫠フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã¨ã—ã¦æ´»å‹•ã™ã‚‹ã¨ãŠãらã耳ã«ã™ã‚‹ã§ã‚ã‚ã†Storybook。 ãã®æœ‰ç”¨æ€§ãŒèªžã‚‰ã‚Œã‚‹ã“ã¨ã‚‚ã‚ã‚Œã°ã€æ™‚ã«æ‚ªåも耳ã«ã™ã‚‹ã“ã¨ã‚‚ã‚ã‚‹ã‹ã¨æ€ã„ã¾ã™ã€‚ Takepepeã•ã‚“ãŒä»¥ä¸‹ã®ã‚ˆã†ãª"ã‚ãˆã¦Storybookを使ã‚ãªã„ç†ç”±ã¯ãªã‚“ã§ã™ã‹"ã¨ã„ã†ã‚¢ãƒ³ã‚±ãƒ¼ãƒˆã‚’å–られã¦ãŠã‚Šã¾ã—ãŸã€‚ çµæžœã¯ã€ã€Œé¢å€’・メンテナンスコストãŒé«˜ã„ã€ã§ã—ãŸã€‚ 実際ã«ç§ã‚‚先輩ã«ã€ãƒ¡ãƒ³ãƒ†ãƒŠãƒ³ã‚¹ã‚³ã‚¹ãƒˆãŒæƒ³åƒã‚ˆã‚Šè¾›ãã€ã„ã„ã‚‚ã®ã§ã¯ãªã‹ã£ãŸã¨è¨€ã‚ã‚ŒãŸã“ã¨ãŒã‚ã‚Šã¾ã—ãŸã€‚ ã§ã™ãŒã€ç§ã¯æ‹…当ã—ãŸãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§Storybookã®å°Žå…¥ã«è¸ã¿åˆ‡ã‚Šã¾ã—ãŸã€‚ ãã‚Œã¯ã€ã“ã‚Œã‹ã‚‰
preact プãƒã‚¸ã‚§ã‚¯ãƒˆã«storybookã‚’å°Žå…¥ã™ã‚‹
English version is here preact + TS + goober 環境下㫠storybook を入れるã“ã¨ã«è‹¦åŠ´ã—ãŸã®ã§ãã®æ™‚ã®ãƒ¡ãƒ¢ã§ã™ã€‚ storybook ã®ä½œæˆã«å¤±æ•—ã™ã‚‹ preact + TS + goober ã§ä½•ã‹ã—らã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’作りã¾ã™ã€‚ import { h } from "preact" import { styled } from "goober" const _Button = styled("button")` background-color: red; ` export const Button = () => { return <_Button>ok</_Button> } import { h } from "preact" import { Button } from "./button" export default {
TypeScript + Storybook CSF3.0ã®æ›¸ãæ–¹ã¨ãƒ¦ãƒ‹ãƒƒãƒˆãƒ†ã‚¹ãƒˆã¸ã®å¿œç”¨
æ¦‚è¦ Storybook6.4ã‹ã‚‰ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã§CSF3ã®æ›¸ãæ–¹ãŒä½¿ãˆã‚‹ã‚ˆã†ã«ãªã£ãŸã®ã§ã€è‡ªåˆ†ãªã‚Šã«èª¿ã¹ãŸã“ã¨ã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚TypeScript + Reactã§èª¬æ˜Žã—ã¾ã™ã€‚ å…¬å¼ã®è¨˜äº‹ã¯ã“ã¡ã‚‰ ã“ã®è¨˜äº‹ã®å†…容ã¯ä»¥ä¸‹ã®ã¨ãŠã‚Šã§ã™ã€‚ CSF2ã‹ã‚‰CSF3ã®å¤‰æ›´ç‚¹ CSFã®æ—¢çŸ¥ã®å•é¡Œã¨å…¬å¼ã®å¯¾å¿œçŠ¶æ³ インタラクティブストーリーã®æ›¸ãæ–¹ CSF3ã§æ›¸ã„ãŸã‚¹ãƒˆãƒ¼ãƒªãƒ¼ã‚’ユニットテストã«å¿œç”¨ã™ã‚‹æ–¹æ³• ã“ã®è¨˜äº‹ã®èª¬æ˜Žã§ä½¿ã†ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ åå‰ã‚’入力ã—ã¦Submitボタンを押ã™ã¨ã€ãƒœã‚¿ãƒ³ã‚’押ã—ãŸæ™‚ã®å…¥åŠ›ãƒ†ã‚ストを下ã«è¡¨ç¤ºã™ã‚‹ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã™ã€‚ import { VFC, useState } from 'react' export type Props = { title: string } const SimpleFrom: VFC<Props> = ({ title }) => { const
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Visual Tests addon is here
Storybook7系をReact + Vite + TypeScriptã®æ§‹æˆã§å‹•ã‹ã™ã®ã«å‡ºãŸã‚¨ãƒ©ãƒ¼ã®è§£æ¶ˆ
TypeScript + Gatsby + Storybook環境ã§import aliasを利用ã™ã‚‹ | tamalog
Storybook ã®é–‹ç™ºç’°å¢ƒã§ React is not defined ãŒè¡¨ç¤ºã•ã‚ŒãŸå ´åˆã®å¯¾å‡¦
{{#tags}}- {{label}}
{{/tags}}