React Tailwind Blocks - Starter

Generate UI Component libraries in 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.

Built with

Plop.js

Husky

Getting Started

Use this 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

This script runs Storybook in the development mode at http://localhost:6006

back to top

Create a Component

Open your terminal and run:

 yarn generate:c

 yarn generate:c

This script 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 your own Component Generators

To generate the templates I use plop. You can create other modules in other different dependencies. Checkout src/generators/sample base.

Then add your script into package.json and run!

{
  "scripts": {
    "generate:s": "plop --plopfile generators/sample/generator.js"
  }
}

back to top

Test and Lint

You can run unit tests in watch mode or run all serial tests in current process:

 yarn test:watch #watch mode
 yarn test:ci #current process

You can also run ESlint, tests and coverage:

 yarn test

Or run ESLint:

  yarn lint

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, run the following script to compile your Storybook in /storybook-static folder:

 yarn build:dist

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 the following script and you can find the bundle in /dist folder to be published at npm:

 yarn build:dist

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.