New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,426
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
componentslibrary2
1. npm init --y 2. npm install react 3. npm install @babel/core babel-loader -D 4. npm install -D styled-components 5. npm install @storybook/react @storybook/addon-knobs -D 6. npm install webpack webpack-cli html-webpack-plugin webpack-dev-server webpack
npm install componentslibrary2
Last updated over 1 year ago
2
Downloads per week
Readme View on GitHub

Setup steps

  1. npm init --y
  2. npm install react
  3. npm install @babel/core babel-loader -D
  4. npm install -D styled-components
  5. npm install @storybook/react @storybook/addon-knobs -D
  6. npm install webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware -D
  7. npx sb init
  8. Anadir en el packege-json
"scripts" :{
    "storybook":"start-story-book -p 6006"
}

Publicar en npm

  • Loguearse en npm: npm login ==> no es necesario si se esta registrado en npm
  • Publicar: npm publish --access public ==> cada vez que se publique se debe cambiar la version en el package.json
  • NOTA: si no se tiene usuario creado en npm, se creara automaticamente, y se debe verificar el usuario por correo para que se permita la publicacion del package en npm, y cada vez que se publique una nueva version se debe cambiar en el package.json

Usar StoryBook en GitHubPages para probar los componentes

  1. npm install @storybook/storybook-deployer -D (NOTA: el proyecto se debe agregar a un repositorio de github)
  2. Agregar en el package.json:
"scripts": {
  //...
  "deploy-storybook": "storybook-to-ghpages"
}
  1. Publicar en GitHubPages ejecutando:
npm run deploy-storybook

NOTA: primero de debe ejecutar: build-storybook y luego: deploy-storybook

Join the community
6,316 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI