sag-storybook

Introduction

Storybook is a user interface development environment and playground for UI components. The tool enables developers to create interactive UI components in isolation, which helps in building and maintaining complex user interfaces.

Getting Started

TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:

1. Installation process In Strorybook project: Use the Storybook CLI to install it in a single command. Run this inside your existing project’s root directory: npx storybook@latest init
   Storybook init command needs to be installed into a project (react project) that is already set up with a framework.

To create new Storybook project for Chromatic, first open new terminal, install chromatic package: npm install --save-dev chromatic Then create a new react Storybook probect, use one command: npx sb init Select project type: react

Publish your Storybook On the command line, publish to Chromatic’s secure CDN for the first time with the following command: npx chromatic --project-token=

2. Software dependencies Storybook will look into your project's dependencies during its install process and provide you with the best configuration available. The installation will make the following changes to your local environment: Install the required dependencies. Setup the necessary scripts to run and build Storybook. Add the default Storybook configuration.

3. Latest releases

4. API references

5. Deployment Storybook components in other applications:

Publish your Storybook: Once your Storybook is built, you can publish it to a hosting service like GitHub Pages, Netlify, or AWS S3. This will make your Storybook accessible via a URL.

Once your Storybook is published, you can install your components in other applications. You can do this by adding a dependency to your package.json file and then importing the component from your Storybook.

For example, let's say you have a component called Button in your Storybook. To install this component in another application, you would add the following to your package.json file: { "dependencies": { "@your-username/your-storybook": "1.0.0" } } Then, you can import the Button component like this: import { Button } from '@your-username/your-storybook';

Use your Storybook components in other applications: Once you've installed your Storybook components in another application, you can use them just like any other component. For example, you could use the Button component like this:

import React from 'react'; import { Button } from '@your-username/your-storybook';

function MyComponent() { return ( Click me! ); }

Build and Test

TODO: Describe and show how to build your code and run the tests.

First, build your own components in: \stories Every component must include 3 files, for example the 'Button' component: button.css - defines the style of the button Button.jsx - includes React js code that defines the button Button.stories.jsx - A *.stories.js file defines all the stories for a component. Each story has a corresponding sidebar item.

When you completed creating your component, check that everything worked by running: npm run storybook It will start Storybook locally in a new browser tab (port 6006), In sidebar item click on a story, it renders in the Canvas an isolated preview iframe. Navigate between stories by clicking on them in the sidebar. If you want to learn more: https://storybook.js.org/docs/react/get-started/browse-stories

Contribute

TODO: Explain how other users and developers can contribute to make your code better.

You can create or improve existed stories for your UI components in the src/stories directory. A story is a functional use case of a UI component. For example, if you have a button component, you might create stories for "Primary Button", "Secondary Button", "Disabled Button", etc. You can also add addons to Storybook to extend its functionality. Addons can do things like display component props, simulate different device sizes, and more. To add an addon, follow the instructions provided in the addon's documentation. Users and developers may use addons to investigate the functionality of components, get ideas what to improve, and in case of developers may try to change a code of components to make it better.