180 lines
8.3 KiB
HTML
180 lines
8.3 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="#tutorials">Tutorials</a></li>
|
||
<li><a href="#presentations">Presentations</a></li>
|
||
<li><a href="#blog-posts">Blog posts</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#addons">Addons</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/basics/introduction/">Documentation</a></li>
|
||
<li><a href="https://github.com/storybookjs">GitHub
|
||
organization</a></li>
|
||
<li><a href="https://storybook.js.org/use-cases/">Use cases</a></li>
|
||
<li><a href="https://storybook.js.org/team/">Team</a></li>
|
||
</ul>
|
||
<h2 id="community-resources">Community resources</h2>
|
||
<ul>
|
||
<li><a href="https://twitter.com/storybookjs">Twitter</a></li>
|
||
<li><a href="https://discordapp.com/invite/UUt2PJb">Discord</a></li>
|
||
<li><a href="https://medium.com/storybookjs">Medium</a></li>
|
||
<li><a href="https://dev.to/t/storybook">DEV.to</a></li>
|
||
<li><a href="https://github.com/storybookjs/brand">Brand’s materials</a>
|
||
- Materials for your articles and talks about Storybook.</li>
|
||
<li><a href="https://storybooks-official.netlify.com">Design system</a>
|
||
- Storybook’s website design system.</li>
|
||
<li><a
|
||
href="https://github.com/storybookjs/storybook-deployer">Storybook
|
||
Deployer</a> - Package for deploying your storybook as a static
|
||
site.</li>
|
||
<li><a
|
||
href="https://github.com/DAN-AKL/storybook-documentation-primitives">Documentation
|
||
Primitives</a> - Custom DocBlocks for Storybook Docs.</li>
|
||
</ul>
|
||
<h2 id="tutorials">Tutorials</h2>
|
||
<ul>
|
||
<li><a href="https://www.learnstorybook.com/">Learn Storybook</a> - A
|
||
set of tutorials to learn Storybook.</li>
|
||
<li><a
|
||
href="https://dzone.com/articles/practical-guide-to-storybook-driven-development">Practical
|
||
Guide to Storybook-Driven Development</a> - A tutorial on how to use the
|
||
Storybook tool as a means of templating and driving forward your
|
||
development efforts.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=va-JzrmaiUM">Adding
|
||
Storybook Style Guide to a Create React App</a> - A tutorial on how to
|
||
add Storybook in an application generated with Create React App.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=_jttw14T52o">Build your
|
||
components with Storybook</a> - A tutorial on how to create your
|
||
components and exposing them in a Storybook.</li>
|
||
<li><a
|
||
href="https://davidyeiser.com/tutorials/storybook-react-with-dark-mode">Storybook
|
||
React with Full Dark Mode Integration</a> - A tutorial on how to
|
||
integrate Storybook’s dark mode toggle with your React components.</li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/storybook-react-tutorial-example">Intro
|
||
to Storybook with React [Tutorial & Example]</a> - Learn how to
|
||
build UI components in Storybook with React for better collaboration
|
||
from design to implementation.</li>
|
||
</ul>
|
||
<h2 id="presentations">Presentations</h2>
|
||
<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>
|
||
<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>
|
||
<li><a href="https://www.youtube.com/watch?v=XN398jfTwQI">VueNYC - Learn
|
||
Storybook</a></li>
|
||
</ul>
|
||
<h2 id="blog-posts">Blog posts</h2>
|
||
<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> -
|
||
A set of useful tips to help you manage a Storybook project.</li>
|
||
<li><a
|
||
href="https://medium.com/storybookjs/storybook-5-2-794958b9b111">Storybook
|
||
5.2</a> - World-class design systems infrastructure.</li>
|
||
<li><a
|
||
href="https://medium.com/storybookjs/storybook-docspage-e185bc3622bf">Storybook
|
||
DocsPage</a> - Beautiful documentation, instantly.</li>
|
||
<li><a
|
||
href="https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a">Storybook
|
||
Docs sneak peek</a> - Turning stories into living documentation.</li>
|
||
<li><a
|
||
href="https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8">Storybook
|
||
5.0</a> - A features’ showcase about the biggest release to date.</li>
|
||
<li><a
|
||
href="https://medium.com/storybookjs/instant-accessibility-qa-linting-in-storybook-4a474b0f5347">Real-time
|
||
accessibility testing with Storybook</a> - A comprehensive overview of
|
||
the accessibility testing tools offered in Storybook.</li>
|
||
<li><a href="https://auth0.com/blog/using-storybook-with-vuejs/">Using
|
||
Storybook with VueJS</a> - Learn how to build a component library with
|
||
Vue and Storybook to create modular and reusable components.</li>
|
||
<li><a
|
||
href="https://www.iamdeveloper.com/posts/setting-up-storybook-for-preact-p5a/">Setting
|
||
up Storybook for Preact</a> - A handy guide allowing us to add storybook
|
||
easily on a Preact project.</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> - Learn how to set
|
||
up a component library with React and Storybook to create modular and
|
||
reusable components that can be shared across projects.</li>
|
||
<li><a
|
||
href="https://dev.to/madhusudhansrinivas/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> - A brief presentation of Storybook and how to
|
||
setup on a React application.</li>
|
||
<li><a
|
||
href="https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06">Storybook
|
||
vs Styleguidist</a> - A comparison of the top UI component
|
||
explorers.</li>
|
||
<li><a
|
||
href="https://spin.atomicobject.com/2017/11/20/storybook-tests-react/">Five
|
||
Reasons to Use Storybook Tests</a> - A complete walkthrough of different
|
||
testing solutions for Storybook: Easy Cross-Browser Visual Checks,
|
||
Interaction Testing and StoryShots for Snapshot Testing.</li>
|
||
</ul>
|
||
<h2 id="examples">Examples</h2>
|
||
<ul>
|
||
<li><a href="https://storybooks-official.netlify.com">Storybook Design
|
||
System</a></li>
|
||
<li><a href="https://decathlon.github.io/vitamin-web">Decathlon Design
|
||
System (Vitamin)</a></li>
|
||
<li><a href="https://primer.github.io/storybook/">GitHub Design
|
||
System</a></li>
|
||
<li><a href="https://airbnb.io/react-dates/">Airbnb
|
||
(react-dates)</a></li>
|
||
<li><a
|
||
href="https://mashmatrix.github.io/react-lightning-design-system/">Salesforce
|
||
Design System</a></li>
|
||
<li><a href="https://auth0-cosmos.now.sh/sandbox/">Auth0 Design
|
||
System</a></li>
|
||
<li><a
|
||
href="https://axaguildev.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://github.com/Qvant-lab/qui-max">Qui - Vue 2/3 Design
|
||
system</a></li>
|
||
<li><a
|
||
href="https://mistica-web.vercel.app/?path=/story/welcome-welcome--mistica">Mística
|
||
Design system</a></li>
|
||
</ul>
|
||
<h2 id="addons">Addons</h2>
|
||
<p>The official & community addons lists are available on the
|
||
Storybook’s <a href="https://storybook.js.org/addons/">Addon
|
||
Page</a>.</p>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Contributions welcome! Read the <a
|
||
href="CONTRIBUTING.md">contribution guidelines</a> first.</p>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p>To the extent possible under law, <a
|
||
href="https://lauthieb.github.io">Laurent Thiebault</a> has waived all
|
||
copyright and related or neighboring rights to this work.</p>
|