191 lines
6.1 KiB
HTML
191 lines
6.1 KiB
HTML
<h1 id="awesome-storybook-awesome">Awesome Storybook <a
|
||
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="https://storybook.js.org"><img src="storybook-logo.svg" align="right" width="80"></a></p>
|
||
<blockquote>
|
||
<p>A curated list of awesome resources about Storybook’s ecosystem
|
||
:art:</p>
|
||
</blockquote>
|
||
<p><a href="https://storybook.js.org">Storybook</a> is a frontend tool
|
||
for building UI components faster and easier.</p>
|
||
<p>Contributions welcome. Add links through pull requests or create an
|
||
issue to start a discussion.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#official-resources">Official resources</a></li>
|
||
<li><a href="#community-resources">Community resources</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#talks">Talks</a></li>
|
||
<li><a href="#blog-posts">Blog posts</a></li>
|
||
<li><a href="#contributing">Contributing</a></li>
|
||
</ul>
|
||
<h2 id="official-resources">Official resources</h2>
|
||
<ul>
|
||
<li><a href="https://storybook.js.org">Website</a></li>
|
||
<li><a href="https://storybook.js.org/docs">Docs</a></li>
|
||
<li><a href="https://storybook.js.org/showcase">Showcase</a></li>
|
||
<li><a href="https://storybook.js.org/blog">Blog</a></li>
|
||
<li><a href="https://storybook.js.org/tutorials/">Tutorials</a></li>
|
||
<li><a href="https://x.com/storybookjs">X</a></li>
|
||
<li><a href="https://github.com/storybookjs">GitHub</a></li>
|
||
<li><a href="https://medium.com/storybookjs">Medium</a></li>
|
||
<li><a href="https://discord.gg/storybook">Discord</a></li>
|
||
<li><a href="https://github.com/storybookjs/brand">Brand’s
|
||
materials</a></li>
|
||
<li><a
|
||
href="https://master--5ccbc373887ca40020446347.chromatic.com/">Design
|
||
system</a></li>
|
||
</ul>
|
||
<h2 id="community-resources">Community resources</h2>
|
||
<ul>
|
||
<li><a href="https://dev.to/t/storybook">DEV.to #storybook</a> - Posts
|
||
about Storybook on DEV.to blogging platform.</li>
|
||
<li><a
|
||
href="https://github.com/DAN-AKL/storybook-documentation-primitives">Documentation
|
||
Primitives</a> - Custom DocBlocks for Storybook Docs.</li>
|
||
</ul>
|
||
<h2 id="examples">Examples</h2>
|
||
<ul>
|
||
<li><a href="https://decathlon.github.io/vitamin-web">Decathlon - Design
|
||
System</a></li>
|
||
<li><a href="https://primer.github.io/storybook/">GitHub - Design
|
||
System</a></li>
|
||
<li><a href="https://react-dates.github.io/react-date">Airbnb -
|
||
react-date</a></li>
|
||
<li><a
|
||
href="https://mashmatrix.github.io/react-lightning-design-system/">Salesforce
|
||
- Design System</a></li>
|
||
<li><a href="https://quantum.okta.design/">Auth0/OKta - Quantum Design
|
||
System</a></li>
|
||
<li><a
|
||
href="https://axafrance.github.io/react-toolkit/latest/storybook/">AXA
|
||
France - Design System</a></li>
|
||
<li><a
|
||
href="https://github.com/shared-components/shared-react-components-example">Shared
|
||
React Components Boilerplate</a></li>
|
||
<li><a href="https://www.apideck.design/">Apideck - Components</a></li>
|
||
<li><a href="https://qui-max.netlify.app/?path=/story/intro--page">Qui -
|
||
Vue 2/3 Design system</a></li>
|
||
<li><a
|
||
href="https://mistica-web.vercel.app/?path=/story/welcome--welcome">Mística
|
||
- Design system</a></li>
|
||
<li><a href="https://recharts.org/en-US/storybook">Recharts -
|
||
Storybook</a></li>
|
||
</ul>
|
||
<h2 id="tutorials">Tutorials</h2>
|
||
<details>
|
||
<summary>
|
||
2022
|
||
</summary>
|
||
<ul>
|
||
<li><a
|
||
href="https://snipcart.com/blog/storybook-react-tutorial-example">Storybook
|
||
React: A Beginner’s Tutorial to UI Components</a></li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
2020
|
||
</summary>
|
||
<ul>
|
||
<li><a
|
||
href="https://davidyeiser.com/tutorials/storybook-react-with-dark-mode">Simple
|
||
Storybook React Setup with Dark Mode Integration</a></li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
2018
|
||
</summary>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=va-JzrmaiUM">Adding
|
||
Storybook Style Guide to a Create React App</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=_jttw14T52o">Build your
|
||
components with Storybook</a></li>
|
||
</ul>
|
||
</details>
|
||
<h2 id="talks">Talks</h2>
|
||
<details>
|
||
<summary>
|
||
2019
|
||
</summary>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=zMpSwo03aKo">Storybook, le
|
||
playground qu’il vous faut pour vos composants UI! (FR)</a></li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
2018
|
||
</summary>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=XN398jfTwQI">VueNYC - Learn
|
||
Storybook</a></li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
2017
|
||
</summary>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=E2c183LS4lA">React
|
||
Storybook Tutorial with Examples - Getting Started with React
|
||
Storybook</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=PF0Vi-iIyoo">React
|
||
Storybook: Design, Dev, Doc, Debug Components - React Conf 2017</a></li>
|
||
</ul>
|
||
</details>
|
||
<h2 id="blog-posts">Blog posts</h2>
|
||
<details>
|
||
<summary>
|
||
2019
|
||
</summary>
|
||
<ul>
|
||
<li><a
|
||
href="https://dev.to/loicgoyet/how-i-manage-to-make-my-storybook-project-the-most-efficient-possible-2d8o">How
|
||
I manage to make my Storybook project the most efficient
|
||
possible</a></li>
|
||
<li><a
|
||
href="https://medium.com/storybookjs/instant-accessibility-qa-linting-in-storybook-4a474b0f5347">Real-time
|
||
accessibility testing with Storybook</a></li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
2018
|
||
</summary>
|
||
<ul>
|
||
<li><a href="https://auth0.com/blog/using-storybook-with-vuejs/">Using
|
||
Storybook with VueJS</a></li>
|
||
<li><a
|
||
href="https://www.nickyt.co/blog/setting-up-storybook-for-preact-p5a/">Setting
|
||
up Storybook for Preact</a></li>
|
||
<li><a
|
||
href="https://auth0.com/blog/setting-up-a-component-library-with-react-and-storybook/">Setting
|
||
Up a Component Library with React and Storybook</a></li>
|
||
<li><a
|
||
href="https://dev.to/madhu/storybook---ui-component-development-tool-for-react-vue-and-angular-article-focusing-on-react-29od">Storybook
|
||
- UI component development tool for React, Vue, and Angular (Article
|
||
focusing on React)</a></li>
|
||
<li><a
|
||
href="https://www.chromatic.com/blog/storybook-vs-styleguidist/">Storybook
|
||
vs Styleguidist</a></li>
|
||
</ul>
|
||
</details>
|
||
<details>
|
||
<summary>
|
||
2017
|
||
</summary>
|
||
<ul>
|
||
<li><a href="https://spin.atomicobject.com/storybook-tests-react/">Five
|
||
Reasons to Use Storybook Tests</a></li>
|
||
</ul>
|
||
</details>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Contributions welcome! Read the <a
|
||
href="CONTRIBUTING.md">contribution guidelines</a> first.</p>
|
||
<p><a href="https://github.com/lauthieb/awesome-storybook">storybook.md
|
||
Github</a></p>
|