Yanz Ui
Yanz-ui
Monorepo UI for Frontend React Components
This monorepo project is designed to provide a comprehensive and efficient development environment for creating reusable UI components using React, Turbo, TypeScript, Changeset, NPM, Storybook, Tailwind CSS, and more. By adopting a monorepo structure, this project promotes code sharing, collaboration, and centralized management of UI components.
What's inside?
This Turborepo includes the following packages/apps:
Apps and Packages
ui-components: a stub React component libraryui-library: a stub React component libraryeslint-config-custom:eslintconfigurations (includeseslint-config-nextandeslint-config-prettier)tsconfig:tsconfig.jsons used throughout the monorepo
Each package/app is 100% TypeScript.
Utilities
This Turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
Build
To build all apps and packages, run the following command:
yarn build
Develop
To develop all apps and packages, run the following command:
yarn dev
Features
React: Build robust and interactive UI components using the popular JavaScript library React. Turbo: Utilize Turbo, a performant React rendering engine, to optimize component rendering and enhance the overall user experience. TypeScript: Develop components with strong static typing and improved tooling using TypeScript. Changeset: Effortlessly manage versioning and publishing of components using Changeset, a tool for managing changelogs and releases. NPM: Publish and share components easily through the NPM package registry. Storybook: Visually showcase and document components using Storybook, a UI development environment with a live component explorer. Tailwind CSS: Leverage the power of Tailwind CSS, a utility-first CSS framework, to rapidly style and customize components. Getting Started Follow the steps below to set up the development environment and start building UI components:
Clone this repository: git clone https://github.com/dammyayans/Yan-ui.git Install project dependencies: yarn Run the development server: yarn storybook Open Storybook in your browser: http://localhost:6006 Contributing Contributions are welcome! If you'd like to contribute to this project, please follow these guidelines:
Fork the repository and create a new branch for your feature or bug fix. Commit your changes with descriptive commit messages. Submit a pull request to the main branch of this repository. Ensure that your code passes all tests and linting checks.
Remote Caching
Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:
Useful Links
Learn more about the power of Turborepo:
