Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ansango/rtb-starter
A starter UI library generator based in React, Tailwind and Storybook
https://github.com/ansango/rtb-starter
eslint jest plop prettier react react-unit-testing reactjs rollup storybook tailwindcss typescript
Last synced: 20 days ago
JSON representation
A starter UI library generator based in React, Tailwind and Storybook
- Host: GitHub
- URL: https://github.com/ansango/rtb-starter
- Owner: ansango
- License: mit
- Created: 2022-01-29T00:46:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-31T20:14:19.000Z (about 3 years ago)
- Last Synced: 2024-11-22T02:50:15.642Z (3 months ago)
- Topics: eslint, jest, plop, prettier, react, react-unit-testing, reactjs, rollup, storybook, tailwindcss, typescript
- Language: JavaScript
- Homepage: rtb-starter.vercel.app
- Size: 1.62 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
Generate UI Component libraries with **React** and **Tailwindcss**
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Table of Contents
- Introduction
- Getting Started
- Create a Component
- Test and Lint
- Build, deploy and install your package
- Contributing
## Introduction
### About
This project has been created to generate component libraries in [React](https://reactjs.org/).
It is based on [React](https://reactjs.org/), [Tailwindcss](https://tailwindcss.com/), and [Storybook](https://storybook.js.org/). With this starter you can start writing isolated and tested components, ready to publish and consume as packages in [npm](https://www.npmjs.com/).
> The Storybook is **[here](https://rtb-starter.vercel.app/)**
> The demo package is published in **[npm](https://www.npmjs.com/package/rtb-starter)**
### Built with
## Getting Started
Use Github templete or:
```bash
git clone https://github.com/ansango/rtb-starter.git
```
and install the dependencies:
```bash
yarn install # or npm install
```
Then run in your terminal:
```bash
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](https://github.com/SBoudrias/Inquirer.js/issues/793).**
## Create a Component
Open your terminal and run:
```bash
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:
```jsx
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 = ({
option = "option__one",
className,
...props
}) => {
const cnOption = cn.options[option];
const styles = className ?? cnOption;
return (
SampleComponent
);
};
export default SampleComponent;
```
- `ComponentStyle.ts` file, to write Tailwind classes as blocks:
```js
/**
** 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:
```jsx
/**
*? SampleComponent Test
*/
import { render, screen } from "@testing-library/react";
import SampleComponent from "./SampleComponent";
describe("", () => {
it("should render", () => {
render();
expect(screen.getByText("SampleComponent")).toBeInTheDocument();
});
});
```
- `Componente.stories.tsx` file to write your Storybook component:
```jsx
/**
* ? SampleComponent Story
*/
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SampleComponent from "./SampleComponent";
export default {
title: 'Samples/SampleComponent',
component: SampleComponent,
} as ComponentMeta;
const Template: ComponentStory = (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",
};
```
### 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:
```md
import { Meta } from "@storybook/addon-docs";
import { Meta } from "@storybook/addon-docs";
# Sample
...
```
## Test and Lint
You can run tests:
Or you can also run unit tests in **watch mode**:
You can run lint, [ESLint](https://eslint.org/):
> Before you can commit to your repository [ESLint](https://eslint.org/) and all tests will be run, if they fail [Husky](https://typicode.github.io/husky/#/) will not let you commit.
## 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](https://vercel.com/).
### Build and publish your library
Build runs by [Rollup](https://rollupjs.org/) and its entry point is `src/index.ts` file.
Please make sure that **all your components** are being imported and exported in this file.
```js
// 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](https://docs.npmjs.com/cli/v8/commands/npm-publish)
> To publish run `npm publish` (after login `npm login`)
### Install your own library
Simple, install it!
```bash
yarn add {awesome-library} # or npm i {awesome-library}
```
Because we use Tailwindcss, we have to install and configure it. [Read the docs](https://tailwindcss.com/docs/installation).
You have to add the following in your `tailwind.config.js`:
```js
module.exports = {
content: [
"./components/**/*.{html,js}",
"./pages/**/*.{html,js}",
"./node_modules/awesome-library/dist/**/*.{js,ts,jsx,tsx}",
],
// ...
};
```
> [See more](https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries)
These are current `peerDependencies` you must be in your new project (`package.json`):
```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](https://github.com/ansango/rtb-starter/issues)
## 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
> [Stars are welcome!](https://github.com/ansango/rtb-starter) ⭐⭐⭐
## License
Distributed under the MIT License. See [`LICENSE.txt`](https://github.com/ansango/rtb-starter/blob/main/LICENSE.txt) for more information.
[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
[license-url]: https://github.com/ansango/rtb-starter/blob/main/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/ansango
