doc: update readme
This commit is contained in:
parent
0039016707
commit
9d53f3e854
3 changed files with 17 additions and 124 deletions
29
README.md
29
README.md
|
|
@ -1,17 +1,9 @@
|
|||
# Turborepo kitchen sink starter
|
||||
|
||||
This Turborepo starter is maintained by the Turborepo core team.
|
||||
This Turborepo starter is scaffolded at 2025/06/19 using the [kitchen-sink template](https://vercel.com/templates/monorepos/turborepo-kitchensink) which is maintained by the Turborepo core team. It is heavily modified as a starter template for new Turborepos e-commerce projects but could also be used as a general-purpose monorepo starter.
|
||||
|
||||
This example also shows how to use [Workspace Configurations](https://turborepo.com/docs/core-concepts/monorepos/configuring-workspaces).
|
||||
|
||||
## Using this example
|
||||
|
||||
Run the following command:
|
||||
|
||||
```sh
|
||||
npx create-turbo@latest -e kitchen-sink
|
||||
```
|
||||
|
||||
## What's inside?
|
||||
|
||||
This Turborepo includes the following packages and apps:
|
||||
|
|
@ -21,12 +13,20 @@ This Turborepo includes the following packages and apps:
|
|||
- `express-template`: an [Express](https://expressjs.com/) server
|
||||
- `next-template`: a [Next.js](https://nextjs.org/) app
|
||||
- `vite-template`: a [Vite](https://vitejs.dev/) single page app
|
||||
- `remix-template`: a [Remix](https://remix.run/) blog
|
||||
- `remix-template`: a [Remix](https://remix.run/) app
|
||||
- `@repo/eslint-config`: ESLint configurations used throughout the monorepo
|
||||
- `@repo/typescript-config`: tsconfig.json's used throughout the monorepo
|
||||
- `@repo/jest-presets`: Jest configurations
|
||||
- `@repo/logger`: isomorphic logger (a small wrapper around console.log)
|
||||
- `@repo/ui`: a dummy React UI library (which contains `<CounterButton>` and `<Link>` components)
|
||||
- `@repo/typescript-config`: tsconfig.json's used throughout the monorepo
|
||||
- `@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/).
|
||||
|
||||
|
|
@ -38,3 +38,8 @@ This Turborepo has some additional tools already setup for you:
|
|||
- [ESLint](https://eslint.org/) for code linting
|
||||
- [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.
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@repo/ui/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
Loading…
Add table
Add a link
Reference in a new issue