├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── package.json └── storybook-logo.svg /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 'node' 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at thiebault.laurent@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a [Contributor Code of Conduct](code-of-conduct.md). By participating in this project you agree to abide by its terms. 4 | 5 | - Search previous suggestions before making a new one, as yours may be a duplicate. 6 | - Suggested packages should be tested and documented. 7 | - Make an individual pull request for each suggestion. 8 | - Use the following format: `[PACKAGE](LINK) - DESCRIPTION.` 9 | - New categories, or improvements to the existing categorization are welcome. 10 | - Keep descriptions short and simple, but descriptive. 11 | - End all descriptions with a full stop/period. 12 | - Suggested blog posts or presentations must be ordered from newest to oldest. 13 | - Check your spelling and grammar. 14 | - Make sure your text editor is set to remove trailing whitespace. 15 | 16 | ## Adding something to this list 17 | 18 | If you have something awesome to contribute to an awesome list, this is how you do it. 19 | 20 | You'll need a [GitHub account](https://github.com/join)! 21 | 22 | 1. Click on the `README.md` file: ![Step 2 Click on Readme.md](https://cloud.githubusercontent.com/assets/170270/9402920/53a7e3ea-480c-11e5-9d81-aecf64be55eb.png) 23 | 2. Now click on the edit icon. ![Step 3 - Click on Edit](https://cloud.githubusercontent.com/assets/170270/9402927/6506af22-480c-11e5-8c18-7ea823530099.png) 24 | 3. You can start editing the text of the file in the in-browser editor. Make sure you follow guidelines above. You can use [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). ![Step 4 - Edit the file](https://cloud.githubusercontent.com/assets/170270/9402932/7301c3a0-480c-11e5-81f5-7e343b71674f.png) 25 | 4. Say why you're proposing the changes, and then click on "Propose file change". ![Step 5 - Propose Changes](https://cloud.githubusercontent.com/assets/170270/9402937/7dd0652a-480c-11e5-9138-bd14244593d5.png) 26 | 5. Submit the [pull request](https://help.github.com/articles/using-pull-requests/)! 27 | 28 | ## Updating your Pull Request 29 | 30 | Sometimes, a maintainer of an awesome list will ask you to edit your Pull Request before it is included. This is normally due to spelling errors or because your PR didn't match this list guidelines. 31 | 32 | [Here](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) is a write up on how to change a Pull Request, and the different ways you can do that. 33 | 34 | ## Thanks! 35 | 36 | Thank you for your suggestions! 37 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # CC0 1.0 Universal 2 | 3 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED HEREUNDER. 4 | 5 | ### Statement of Purpose 6 | 7 | The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work"). 8 | 9 | Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others. 10 | 11 | For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights. 12 | 13 | 1. __Copyright and Related Rights.__ A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following: 14 | 15 | i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work; 16 | 17 | ii. moral rights retained by the original author(s) and/or performer(s); 18 | 19 | iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work; 20 | 21 | iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below; 22 | 23 | v. rights protecting the extraction, dissemination, use and reuse of data in a Work; 24 | 25 | vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and 26 | 27 | vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof. 28 | 29 | 2. __Waiver.__ To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose. 30 | 31 | 3. __Public License Fallback.__ Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose. 32 | 33 | 4. __Limitations and Disclaimers.__ 34 | 35 | a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document. 36 | 37 | b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law. 38 | 39 | c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work. 40 | 41 | d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work. 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Storybook [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) 2 | 3 | [](https://storybook.js.org) 4 | 5 | > A curated list of awesome resources about Storybook's ecosystem :art: 6 | 7 | [Storybook](https://storybook.js.org) is a frontend tool for building UI components faster and easier. 8 | 9 | Contributions welcome. Add links through pull requests or create an issue to start a discussion. 10 | 11 | ## Contents 12 | 13 | - [Official resources](#official-resources) 14 | - [Community resources](#community-resources) 15 | - [Tutorials](#tutorials) 16 | - [Presentations](#presentations) 17 | - [Blog posts](#blog-posts) 18 | - [Examples](#examples) 19 | - [Addons](#addons) 20 | 21 | ## Official resources 22 | 23 | - [Website](https://storybook.js.org) 24 | - [Documentation](https://storybook.js.org/docs/basics/introduction/) 25 | - [GitHub organization](https://github.com/storybookjs) 26 | - [Use cases](https://storybook.js.org/use-cases/) 27 | - [Team](https://storybook.js.org/team/) 28 | 29 | ## Community resources 30 | 31 | - [Twitter](https://twitter.com/storybookjs) 32 | - [Discord](https://discordapp.com/invite/UUt2PJb) 33 | - [Medium](https://medium.com/storybookjs) 34 | - [DEV.to](https://dev.to/t/storybook) 35 | - [Brand's materials](https://github.com/storybookjs/brand) - Materials for your articles and talks about Storybook. 36 | - [Design system](https://storybooks-official.netlify.com) - Storybook's website design system. 37 | - [Storybook Deployer](https://github.com/storybookjs/storybook-deployer) - Package for deploying your storybook as a static site. 38 | - [Documentation Primitives](https://github.com/DAN-AKL/storybook-documentation-primitives) - Custom DocBlocks for Storybook Docs. 39 | 40 | ## Tutorials 41 | 42 | - [Learn Storybook](https://www.learnstorybook.com/) - A set of tutorials to learn Storybook. 43 | - [Practical Guide to Storybook-Driven Development](https://dzone.com/articles/practical-guide-to-storybook-driven-development) - A tutorial on how to use the Storybook tool as a means of templating and driving forward your development efforts. 44 | - [Adding Storybook Style Guide to a Create React App](https://www.youtube.com/watch?v=va-JzrmaiUM) - A tutorial on how to add Storybook in an application generated with Create React App. 45 | - [Build your components with Storybook](https://www.youtube.com/watch?v=_jttw14T52o) - A tutorial on how to create your components and exposing them in a Storybook. 46 | - [Storybook React with Full Dark Mode Integration](https://davidyeiser.com/tutorials/storybook-react-with-dark-mode) - A tutorial on how to integrate Storybook’s dark mode toggle with your React components. 47 | - [Intro to Storybook with React [Tutorial & Example]](https://snipcart.com/blog/storybook-react-tutorial-example) - Learn how to build UI components in Storybook with React for better collaboration from design to implementation. 48 | 49 | ## Presentations 50 | 51 | - [Storybook, le playground qu'il vous faut pour vos composants UI! (FR)](https://www.youtube.com/watch?v=zMpSwo03aKo) 52 | - [React Storybook Tutorial with Examples - Getting Started with React Storybook](https://www.youtube.com/watch?v=E2c183LS4lA) 53 | - [React Storybook: Design, Dev, Doc, Debug Components - React Conf 2017](https://www.youtube.com/watch?v=PF0Vi-iIyoo) 54 | - [VueNYC - Learn Storybook](https://www.youtube.com/watch?v=XN398jfTwQI) 55 | 56 | ## Blog posts 57 | 58 | - [How I manage to make my Storybook project the most efficient possible](https://dev.to/loicgoyet/how-i-manage-to-make-my-storybook-project-the-most-efficient-possible-2d8o) - A set of useful tips to help you manage a Storybook project. 59 | - [Storybook 5.2](https://medium.com/storybookjs/storybook-5-2-794958b9b111) - World-class design systems infrastructure. 60 | - [Storybook DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) - Beautiful documentation, instantly. 61 | - [Storybook Docs sneak peek](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) - Turning stories into living documentation. 62 | - [Storybook 5.0](https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8) - A features' showcase about the biggest release to date. 63 | - [Real-time accessibility testing with Storybook](https://medium.com/storybookjs/instant-accessibility-qa-linting-in-storybook-4a474b0f5347) - A comprehensive overview of the accessibility testing tools offered in Storybook. 64 | - [Using Storybook with VueJS](https://auth0.com/blog/using-storybook-with-vuejs/) - Learn how to build a component library with Vue and Storybook to create modular and reusable components. 65 | - [Setting up Storybook for Preact](https://www.iamdeveloper.com/posts/setting-up-storybook-for-preact-p5a/) - A handy guide allowing us to add storybook easily on a Preact project. 66 | - [Setting up a Component Library with React and Storybook](https://auth0.com/blog/setting-up-a-component-library-with-react-and-storybook/) - Learn how to set up a component library with React and Storybook to create modular and reusable components that can be shared across projects. 67 | - [Storybook - UI component development tool for React, Vue, and Angular (Article focusing on React)](https://dev.to/madhusudhansrinivas/storybook---ui-component-development-tool-for-react-vue-and-angular-article-focusing-on-react-29od) - A brief presentation of Storybook and how to setup on a React application. 68 | - [Storybook vs Styleguidist](https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06) - A comparison of the top UI component explorers. 69 | - [Five Reasons to Use Storybook Tests](https://spin.atomicobject.com/2017/11/20/storybook-tests-react/) - A complete walkthrough of different testing solutions for Storybook: Easy Cross-Browser Visual Checks, Interaction Testing and StoryShots for Snapshot Testing. 70 | 71 | ## Examples 72 | 73 | - [Storybook Design System](https://storybooks-official.netlify.com) 74 | - [Decathlon Design System (Vitamin)](https://decathlon.github.io/vitamin-web) 75 | - [GitHub Design System](https://primer.github.io/storybook/) 76 | - [Airbnb (react-dates)](https://airbnb.io/react-dates/) 77 | - [Salesforce Design System](https://mashmatrix.github.io/react-lightning-design-system/) 78 | - [Auth0 Design System](https://auth0-cosmos.now.sh/sandbox/) 79 | - [AXA France Design System](https://axaguildev.github.io/react-toolkit/latest/storybook) 80 | - [Shared React Components Boilerplate](https://github.com/shared-components/shared-react-components-example) 81 | - [Apideck Components](https://www.apideck.design/) 82 | - [Qui - Vue 2/3 Design system](https://github.com/Qvant-lab/qui-max) 83 | - [Mística Design system](https://mistica-web.vercel.app/?path=/story/welcome-welcome--mistica) 84 | - [Recharts](https://recharts.org/en-US/storybook) 85 | 86 | ## Addons 87 | 88 | The official & community addons lists are available on the Storybook's [Addon Page](https://storybook.js.org/addons/). 89 | 90 | ## Contributing 91 | 92 | Contributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first. 93 | 94 | ## License 95 | 96 | [![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/) 97 | 98 | To the extent possible under law, [Laurent Thiebault](https://lauthieb.github.io) has waived all copyright and related or neighboring rights to this work. 99 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awesome-storybook", 3 | "version": "1.0.0", 4 | "description": "A curated list of awesome resources about Storybook's ecosystem", 5 | "scripts": { 6 | "test": "awesome-lint" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/lauthieb/awesome-storybook.git" 11 | }, 12 | "keywords": [ 13 | "awesome", 14 | "awesome-list", 15 | "storybook" 16 | ], 17 | "author": "Laurent THIEBAULT", 18 | "license": "CC0-1.0", 19 | "bugs": { 20 | "url": "https://github.com/lauthieb/awesome-storybook/issues" 21 | }, 22 | "homepage": "https://github.com/lauthieb/awesome-storybook#readme", 23 | "devDependencies": { 24 | "awesome-lint": "*" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /storybook-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | storybook-icon/default 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | --------------------------------------------------------------------------------