bb-web-ds
v1.0.1
Published
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.
Downloads
85
Readme
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
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:
- Run `npm install` to install the components.
- Import the desired components in your project:
import { ComponentName } from "magenta-ds"
Folder Structure
src/
├── components/
│ ├── atoms/
│ ├── molecules/
│ └── organisms/
├── playground/
│ ├── atoms/
│ ├── molecules/
│ └── organisms/
Contributing
- Fork this repository.
- Create a new branch: `git checkout -b feature/your-feature-name`.
- Commit your changes: `git commit -m 'Add some feature'`.
- Push the branch: `git push origin feature/your-feature-name`.
- 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
Happy coding!