afiqzudinhadi/ecommerce-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: update root readme and add readme @repo/ui

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-22 20:44:04 +08:00
parent 9d53f3e854
commit d8cc5f0ac9
2 changed files with 43 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -21,12 +21,6 @@ This Turborepo includes the following packages and apps:
- `@repo/ui`: shared UI components for frontend use.
- A dummy React UI library (which contains `<CounterButton>` and `<Link>` components)
- And shadcn/ui components (which contains `<Button>` and `<Card>` components)
- Building the UI will require exporting the components in the `package.json` file.
- For `Vite` apps, `vite-tsconfig-paths` package is required to ensure the UI components are properly built and available for use.
- For `Next.js` apps, the `next.config.ts` file needs to have `transpilePackages: ["@repo/ui"]` to ensure the UI components are properly built and available for use.
- Although not required, adding ` "paths": {
"@repo/ui/*": ["../../packages/ui/src/*"]
}` in the `tsconfig.json` file of each app can help with TypeScript path resolution during development.
Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
@ -39,7 +33,4 @@ This Turborepo has some additional tools already setup for you:
- [Jest](https://jestjs.io) test runner for all things JavaScript
- [Prettier](https://prettier.io) for code formatting
- [shadcn/ui](https://ui.shadcn.com/docs/monorepo) for UI components
- To use the CLI, run `npx shadcn@latest add <component-name>` in the `@repo/ui` package directory.
- It can also be run at each app directory and the CLI will automatically add it to the shared `@repo/ui` package but each app will need its own `components.json` file.
- [Tailwind CSS v4](https://tailwindcss.com/) for styling and to use shadcn/ui
- Each app needs its own tailwind.config.js file and postcss.config.js file but they all extend from the shared `@repo/ui/tailwind.config.js` and `@repo/ui/postcss.config.js` files.

43
packages/ui/README.md Normal file
View file

@ -0,0 +1,43 @@
# @repo/ui
Shared UI components for frontend use. This package has already been set up with dummy **React UI library** (`<CounterButton>` and `<Link>` components) and **shadcn/ui** components (`<Button>` and `<Card>`).
## What's inside?
This repo includes the following packages and apps:
### Apps and Packages
- `tailwindcss`: Tailwind CSS configuration for styling
- `postcss`: PostCSS configuration for processing CSS
- `shadcn/ui`: shadcn/ui components for UI
### Building and Running
Building the UI will require exporting the components in the `package.json` file.
For `Vite` apps, `vite-tsconfig-paths` package is required to ensure the UI components are properly built and available for use.
For `Next.js` apps, the `next.config.ts` file needs to have `transpilePackages: ["@repo/ui"]` to ensure the UI components are properly built and available for use.
Although not required, adding:
```
"paths": {
"@repo/ui/*": ["../../packages/ui/src/*"]
}
```
in the `tsconfig.json` file of **each app** can help with TypeScript path resolution during development.
### More Information
#### [shadcn/ui](https://ui.shadcn.com/docs/monorepo) for UI components
To use the CLI, run `npx shadcn@latest add <component-name>` in the `@repo/ui` package directory.
It can also be run at each app directory and the CLI will automatically install `@radix-ui/react-slot` add the components to the shared `@repo/ui` package. Each app will need its own `components.json` file and the `paths` in the `tsconfig.json` file should be updated accordingly.
#### [Tailwind CSS v4](https://tailwindcss.com/) for styling and to use shadcn/ui
Each app needs its own `tailwind.config.js`file and `postcss.config.js` file but they all extend from the shared `@repo/ui/tailwind.config.js` and `@repo/ui/postcss.config.js` files.