• Stars
    star
    390
  • Rank 110,242 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Code for Learn Storybook

Chromatic

Chromatic's Intro to Storybook tutorial code

This repository holds the main React and Storybook configuration files for the Intro to Storybook tutorial.

πŸš… Quick start

  1. Clone the repository.

    Run the following command to clone the repository.

    # Clone the template
    git clone https://github.com/chromaui/learnstorybook-code.git
  2. Install the dependencies.

    Navigate into your newly cloned repository and install the necessary dependencies.

    # Navigate to the directory
    cd learnstorybook-code/
    
    # Install the dependencies
    yarn
  3. Open the source code and start editing!

    Open the learnstorybook-code directory in your code editor of choice browse what's inside!

  4. Browse your stories!

    Run yarn storybook to see your component's stories at http://localhost:6006

πŸ”Ž What's inside?

A quick look at the top-level files and directories included with this template.

.
β”œβ”€β”€ .storybook
β”œβ”€β”€ node_modules
β”œβ”€β”€ public
β”œβ”€β”€ src
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .index.html
β”œβ”€β”€ LICENSE
β”œβ”€β”€ package.json
β”œβ”€β”€ yarn.lock
β”œβ”€β”€ vite.config.js
└── README.md
  1. .storybook: This directory contains Storybook's configuration files.

  2. node_modules: This directory contains all of the modules of code that your project depends on (npm packages).

  3. public: This directory will contain the development and production build of the site.

  4. src: This directory will contain all of the code related to what you will see on your application.

  5. .gitignore: This file tells git which files it should not track or maintain during the development process of your project.

  6. .index.html: This is the HTML page that is served when generating a development or production build.

  7. LICENSE: The template is licensed under the MIT licence.

  8. package.json: Standard manifest file for Node.js projects, which typically includes project specific metadata (such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project.

  9. yarn.lock: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Do not change it manually).

  10. vite.config.js: This is the configuration file for Vite, a build tool that aims to provide a faster and leaner development experience for modern web projects.

  11. README.md: A text file containing useful reference information about the project.

Contribute

If you encounter an issue with the template, we encourage you to open an issue in this template's repository.

Learning Storybook

  1. Read our introductory tutorial at Learn Storybook.
  2. Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
  3. See our official documentation at Storybook.

More Repositories

1

learnstorybook.com

Static site and content for Storybook tutorials
JavaScript
2,400
star
2

chromatic-cli

Chromatic CLI: `npx chromatic`
TypeScript
288
star
3

action

GitHub Action for publishing your Storybook to Chromatic
132
star
4

storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
TypeScript
86
star
5

learnstorybook-design-system

JavaScript
73
star
6

intro-storybook-react-template

Boilerplate template for the Intro to Storybook tutorial for React
CSS
26
star
7

ui-testing-guide-code

JavaScript
22
star
8

addon-visual-tests

Visual Tests addon for Storybook
TypeScript
21
star
9

react-chromatic

Visual Regression Testing for React
JavaScript
21
star
10

learnstorybook-design-system-example-app

JavaScript
17
star
11

learnstorybook-design-system-template

Boilerplate template for the Design Systems for Developers tutorial
JavaScript
15
star
12

storybook-addon-outline

A storybook addon for visually debugging CSS layout and alignment
JavaScript
15
star
13

intro-storybook-react-native-template

Boilerplate template for the Intro to Storybook tutorial for React Native
JavaScript
13
star
14

intro-storybook-vue-template

Boilerplate template for the Intro to Storybook tutorial for Vue
Vue
10
star
15

intro-storybook-svelte-template

About Boilerplate template for the Intro to Storybook tutorial for Svelte
CSS
10
star
16

intro-storybook-angular-template

Boilerplate template for the Intro to Storybook tutorial for Angular
HTML
9
star
17

shapes

Demo Storybook showcasing shapes
TypeScript
8
star
18

chromatic-e2e

Archive end-to-end tests to be replayed in Storybook and Chromatic
TypeScript
8
star
19

tetra

Style Guide + UI Library for Chromatic and Storybook marketing sites
TypeScript
7
star
20

storybook-chromatic

JavaScript
5
star
21

learnstorybook-visual-testing-code

Code repository for the Visual Testing handbook
JavaScript
3
star
22

simple-app

JavaScript
3
star
23

intro-storybook-ember-template

Boilerplate template for the Intro to Storybook tutorial for Ember
CSS
3
star
24

ng-storybook-workshop

TypeScript
2
star
25

task-completed-checker-action

βœ…βŒ A GitHub action that checks if all tasks are completed in the pull requests.
TypeScript
2
star
26

storybook-chroma

JavaScript
2
star
27

gitlab-webhook-proxy

JavaScript
2
star
28

storybook-template-react

JavaScript
2
star
29

vite-project

A repro to test out Vite features and the vite-plugin-turbosnap package
TypeScript
1
star
30

chromatic-runtime-api-example

JavaScript
1
star
31

modes-demo

TypeScript
1
star
32

interactive-demo

JavaScript
1
star
33

test-next-app-mar-3-21

JavaScript
1
star
34

signed-webhook-examples

Go
1
star
35

github-webhook-proxy

JavaScript
1
star
36

ui-testing-handbook-react-template

Boilerplate template for the UI Testing Handbook for React
CSS
1
star