BB-Web-storybook

This repository contains the Storybook setup for our BB-Web-storybook project. Storybook is a tool for developing UI components in isolation, allowing for easy testing, documentation, and design collaboration.

Table of Contents

• Getting Started
• Installation
• Tech Stack
• Scripts
• Folder Structure
• Contributing
• Useful Links

Getting Started

Follow these steps to set up Storybook in your development environment.

Prerequisites

• Node.js (v14.x or higher)
• NPM

Ensure that these are installed on your machine before proceeding.

Installation

Clone the repository and install the dependencies.

git clone <your-repo-url>
cd BB-Web-storybook
npm install

Running Storybook

To start Storybook, run the following command:

npm run storybook

This will launch Storybook in development mode. You can view it by navigating to http://localhost:6006 in your browser.

Tech Stack

• Repository Name: BB-Web-storybook
• Package Manager: NPM
• Linting: ESLint
• Code Formatting: Prettier
• NPM Package: We have our own NPM package for this Storybook, available at magenta-ds.
• Folder Structure: See below for our project folder structure.

Scripts

• `npm run storybook`: Starts the Storybook development server.
• `npm run build-storybook`: Builds the static Storybook site for deployment.
• `npm run lint`: Runs linter (ESLint).
• `npm run prettier`: Formats the code using Prettier.

Using Storybook in Other Projects

To use the components from this Storybook in other projects, follow the steps below:

1. Run `npm install` to install the components.
2. Import the desired components in your project:

import { ComponentName } from "magenta-ds"

Folder Structure

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   └── organisms/
├── playground/
│   ├── atoms/
│   ├── molecules/
│   └── organisms/

Contributing

1. Fork this repository.
2. Create a new branch: `git checkout -b feature/your-feature-name`.
3. Commit your changes: `git commit -m 'Add some feature'`.
4. Push the branch: `git push origin feature/your-feature-name`.
5. Submit a pull request.

Code Style

Make sure to follow the established code style for consistency. Use Prettier for formatting:

npm run prettier

Useful Links

• Storybook Documentation
• React Documentation

Happy coding!