react-storybook

📖 Check out our Storybook

💿 Install a npm package

Install the package with npm:

npm install @davidkei/react-storybook

To prevent TailwindCSS from purging your styles, add the following line to your tailwind.config.js:

module.exports = {
  mode: "jit",
  purge: {
    content: [
      'node_modules/@davidkei/react-storybook/dist/**/*.{js,jsx,md,mdx,ts,tsx}',
      './src/**/*.{js,jsx,md,mdx,ts,tsx,txt}'
    ],
  },
  plugins: [
    require('@davidkei/react-storybook/davidkeiui')
  ],
}

⚡ Quick Start

import { Button } from '@davidkei/react-storybook';

export default (props) => {
  return <Button size="default" variant="default">Button</Button>
}

🔌 Contributing

Overview

React Storybook is a popular tool for developing UI components in isolation. It provides a development environment where developers can create, test, and showcase their components independently from the main application. This document serves as a guide for contributing to React Storybook by providing step-by-step instructions on how to set up a local development environment, make code changes, and submit pull requests. It also serves as a guide for contributing to React Storybook using Chromatic for visual testing and npm for package publishing.

Prerequisites

Before you start contributing to React Storybook, ensure that you have the following prerequisites:

• Node.js and npm installed on your machine.
• Familiarity with React, JavaScript or Typescript and TailwindCSS.
• Basic knowledge of Git.

Setting Up Local Development Environment

To contribute to React Storybook, follow these steps to set up your local development environment:

• Clone the React-Storybook repository from GitLab:

  git clone https://gitlab.com/aptive-environmental/react-storybook

• Install project dependencies by running the following command in the terminal:

  cd react-storybook
  npm install

• Start the development server by running the following command:

  npm run storybook

It will start a local server at localhost:6006 with all components rendered.

Making Code Changes

Once you have set up your local development environment, you can start making code changes. Follow these guidelines when contributing to React Storybook:

• Create a new branch for your changes:

  git checkout -b my-feature-branch

• Make necessary code changes and ensure that the tests pass by running:

  npm test

• Test your changes in the Storybook environment to ensure they work as expected.

• Commit your changes with descriptive commit messages:

  git commit -m "Add new feature"

• Push your changes to the remote repository:

  git push origin my-feature-branch

Submitting a Merge Request

After making code changes and committing them to your branch, follow these steps to submit a pull request:

• Visit the React Storybook repository on Gitlab.

• Switch to the branch where you made your changes.

• Click on the "New merge request" button.

• Provide a descriptive title and explanation of your changes in the merge request description.

• Assign relevant reviewers to ensure proper code review.

• Click on the "Create merge request" button to submit your contribution.

Congratulations! You have successfully contributed to React Storybook. Now, wait for the code review and feedback from the maintainers.

Visual Testing with Chromatic

Chromatic is a visual testing tool that helps identify visual regressions in UI components. Follow these steps to integrate Chromatic into your React Storybook contribution:

• Sign up for a free account at https://www.chromatic.com.

• Update chromatic token in package.json.

  "chromatic": npx chromatic --project-token <your-project-token>

• Run the following command:

  npm run chromatic

When finished, you'll get a link https://random-uuid.chromatic.com to your published Storybook. Share the link with your team to get feedback. We published Storybook with one command, but manually running a command every time we want to get feedback on UI implementation is repetitive. Ideally, we'd publish the latest version of components whenever we push code. We'll need to continuously deploy Storybook.

Publishing to npm

Once you have made code changes and validated them using Chromatic, follow these steps to publish your changes as an npm package:

• Update package.json: Ensure that the package.json file in the root directory of your project contains the correct information for your package. Make sure to specify the appropriate name, version, author, description, and other relevant fields.

  • Make sure that the name of your package in the package.json file matches this convention:

    "name": "@my-org/package-name"

  • Update the version number in the package.json file according to Semantic Versioning guidelines.

• Create or edit the .npmrc file in the same directory as your package.json. Include the following lines in the .npmrc file:

  //registry.npmjs.org/:_authToken="${NPM_TOKEN}"

• Build the React Storybook project by running the following command:

  npm run build

• Publish the package to npm by running:

  npm publish

• Verify that the package is published successfully on the npm registry.

Publishing to GitLab Package Registry

Once you have made code changes and validated them using Chromatic, follow these steps to publish your changes as an gitlab package registry:

• Update package.json: Ensure that the package.json file in the root directory of your project contains the correct information for your package. Make sure to specify the appropriate name, version, author, description, and other relevant fields.

  • Make sure that the name of your package in the package.json file matches this convention:

    "name": "@my-org/package-name"

  • Update the version number in the package.json file according to Semantic Versioning guidelines.

• Create or edit the .npmrc file in the same directory as your package.json. Include the following lines in the .npmrc file:

  @scope:registry=https://gitlab.com/api/v4/projects/46167059/packages/npm/
  //gitlab.com/api/v4/projects/46167059/packages/npm/:"${your_gitlab_token}"

• Build the React Storybook project by running the following command:

  npm run build

• Publish the package to gitlab package registry by running:

  npm publish

• Verify that the package is published successfully on the gitlab package registry.

Congratulations! You have successfully published your changes to npm and gitlab.