Generate UI Component libraries with React and Tailwindcss

React Tailwind Blocks - Starter

Generate UI Component libraries with React

Report a bug

Table of Contents

1. Introduction
2. Getting Started
3. Create a Component
4. Test and Lint
5. Build, deploy and install your package
6. Contributing

Introduction

About

This project has been created to generate component libraries in React.

It is based on React, Tailwindcss, and Storybook. With this starter you can start writing isolated and tested components, ready to publish and consume as packages in npm.

The Storybook is here

The demo package is published in npm

Built with

Getting Started

Use Github templete or:

git clone https://github.com/ansango/rtb-starter.git

and install the dependencies:

yarn install # or npm install

Then run in your terminal:

yarn start # npm start

This runs a script manager, then you can choose what you want to do. 😄

⚠️ The CLI works fine in bash, but in powershell the arrows do not allow you to select anything, so you will have to create the files manually. This is a bug in the Node core on Windows.

back to top

Create a Component

Open your terminal and run:

 yarn cli # or select "cli" option in the Script Manager

With the CLI you can choose what you want to create, choose a component and type a name:

This generates template files to coding a component. You will find all the files in src/components folder. Your component folder contains:

• Component.tsx file:

import { FC } from "react";
import * as cn from "./SampleComponentStyles";

export type SampleComponentProps = {
  /**
   * Description of options in Storybook
   */
  option?: "option__one" | "option__two" | "option__three",
  /**
   * Optional click handler
   */
  onClick?: () => void,
  /**
   * Class Name override
   */
  className?: string,
};

/**
 * Description of SampleComponent component displayed in Storybook
 */

const SampleComponent: FC<SampleComponentProps> = ({
  option = "option__one",
  className,
  ...props
}) => {
  const cnOption = cn.options[option];
  const styles = className ?? cnOption;
  return (
    <div className={styles} {...props}>
      <span>SampleComponent</span>
    </div>
  );
};

export default SampleComponent;

• ComponentStyle.ts file, to write Tailwind classes as blocks:

/**
 ** Write your tailwind classes as objects and strings and import them in your component
 */

export const options = {
  option__one: "bg-red-500 text-white font-bold py-2 px-4 rounded max-w-xs cursor-pointer",
  option__two: "bg-green-500 text-white font-bold py-2 px-4 rounded max-w-sm cursor-pointer",
  option__three: "bg-blue-500 text-white font-bold py-2 px-4 rounded max-w-md cursor-pointer",
};

• Component.test.tsx file, to testing your component:

/**
 *? SampleComponent Test
 */

import { render, screen } from "@testing-library/react";

import SampleComponent from "./SampleComponent";

describe("<SampleComponent />", () => {
  it("should render", () => {
    render(<SampleComponent />);
    expect(screen.getByText("SampleComponent")).toBeInTheDocument();
  });
});

• Componente.stories.tsx file to write your Storybook component:

/**
 * ? SampleComponent Story
 */

import { ComponentStory, ComponentMeta } from "@storybook/react";
import SampleComponent from "./SampleComponent";

export default {
  title: 'Samples/SampleComponent',
  component: SampleComponent,
} as ComponentMeta<typeof SampleComponent>;

const Template: ComponentStory<typeof SampleComponent> = (args) => <SampleComponent {...args} />;

export const OptionOne = Template.bind({});

OptionOne.args = {
  option: "option__one",
};

export const CustomClass = Template.bind({});

CustomClass.args = {
  className: "bg-yellow-500 text-white font-bold py-2 px-4 rounded max-w-lg cursor-pointer",
};

back to top

Create plain Docs pages

Storybook supports .mdx files, so we will create our flat documentation this way. To do this we go back to our CLI and select the docs option. Type a section and a name and that's all 😄

This generates template file write "plain" docs as Markdown files. You will find all the files in src/docs folder. Your doc file contains:

import { Meta } from "@storybook/addon-docs";

<Meta title="Sample/Sample" />import { Meta } from "@storybook/addon-docs";

# Sample

...

back to top

Test and Lint

You can run tests:

Or you can also run unit tests in watch mode:

You can run lint, ESLint:

Before you can commit to your repository ESLint and all tests will be run, if they fail Husky will not let you commit.

back to top

Build, deploy and install your package

Build and deploy your Storybook

It's easy, to compile your Storybook in /storybook-static folder run:

Easy to do at Vercel.

back to top

Build and publish your library

Build runs by Rollup and its entry point is src/index.ts file.

Please make sure that all your components are being imported and exported in this file.

// src/index.ts

import Button from "./components/Button/Button";
export { Button };

Then run:

You can find the bundle in /dist folder to be published at npm

To publish run npm publish (after login npm login)

back to top

Install your own library

Simple, install it!

yarn add {awesome-library} # or npm i {awesome-library}

Because we use Tailwindcss, we have to install and configure it. Read the docs.

You have to add the following in your tailwind.config.js:

module.exports = {
  content: [
    "./components/**/*.{html,js}",
    "./pages/**/*.{html,js}",
    "./node_modules/awesome-library/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
};

See more

These are current peerDependencies you must be in your new project (package.json):

{
  "dependencies": {
    "postcss": "^8.4.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "tailwindcss": "^3.0.16"
  }
}

If you have problems, please open an issue

back to top

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

back to top

Stars are welcome! ⭐⭐⭐

License

Distributed under the MIT License. See LICENSE.txt for more information.