chore: add shadcn integration for remix
This commit is contained in:
parent
c011186c37
commit
99627e396d
12 changed files with 19401 additions and 18283 deletions
|
|
@ -7,13 +7,17 @@ import {
|
|||
} from "@remix-run/react";
|
||||
import { Analytics } from "@vercel/analytics/react";
|
||||
import "./styles.css";
|
||||
import "@repo/ui/src/styles/globals.css";
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1"
|
||||
/>
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
|
|
|
|||
40
apps/remix-template/app/routes/shadcn.tsx
Normal file
40
apps/remix-template/app/routes/shadcn.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Button } from "@repo/ui/components/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@repo/ui/components/card";
|
||||
import { Link } from "@repo/ui/link";
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<main className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
|
||||
<Card className="w-full max-w-md shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl font-bold text-center">
|
||||
Welcome to the Remix Homepage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center gap-6">
|
||||
<p className="text-gray-600 text-center">
|
||||
This homepage uses{" "}
|
||||
<span className="font-semibold">shadcn/ui</span>{" "}
|
||||
components from{" "}
|
||||
<span className="font-mono">@repo/ui</span>.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Button asChild>
|
||||
<Link href="https://remix.run/">Learn Remix</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="https://ui.shadcn.com/">
|
||||
Explore shadcn/ui
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
20
apps/remix-template/components.json
Normal file
20
apps/remix-template/components.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "../../packages/ui/src/styles/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"hooks": "@/hooks",
|
||||
"lib": "@/lib",
|
||||
"utils": "@repo/ui/lib/utils",
|
||||
"ui": "@repo/ui/components"
|
||||
}
|
||||
}
|
||||
1
apps/remix-template/postcss.config.mjs
Normal file
1
apps/remix-template/postcss.config.mjs
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default } from "@repo/ui/postcss.config";
|
||||
1106
package-lock.json
generated
1106
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"name": "kitchen-sink",
|
||||
"name": "ecommerce-template",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "turbo run build",
|
||||
"clean": "turbo run clean",
|
||||
"clean:node_modules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
|
||||
"dev": "turbo run dev",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
||||
"lint": "turbo run lint",
|
||||
|
|
|
|||
|
|
@ -13,20 +13,25 @@
|
|||
"dev": "bunchee --watch",
|
||||
"check-types": "tsc --noEmit",
|
||||
"lint": "eslint src/",
|
||||
"test": "jest"
|
||||
"test": "jest",
|
||||
"clean": "rm -rf dist"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "@repo/jest-presets/browser"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jest/globals": "^29.7.0",
|
||||
"@remix-run/dev": "^2.15.2",
|
||||
"@remix-run/node": "^2.15.2",
|
||||
"@repo/eslint-config": "*",
|
||||
"@repo/jest-presets": "*",
|
||||
"@repo/typescript-config": "*",
|
||||
"@types/node": "^22.15.3",
|
||||
"@tailwindcss/postcss": "^4.1.10",
|
||||
"@types/node": "^22.15.32",
|
||||
"bunchee": "^6.4.0",
|
||||
"eslint": "^9.29.0",
|
||||
"jest": "^29.7.0",
|
||||
"tailwindcss": "^4.1.10",
|
||||
"typescript": "5.8.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -56,18 +61,57 @@
|
|||
"default": "./dist/cjs/link.js"
|
||||
}
|
||||
},
|
||||
"./globals.css": "./src/styles/globals.css",
|
||||
"./postcss.config": "./postcss.config.mjs",
|
||||
"./lib/*": "./src/lib/*.ts",
|
||||
"./components/*": "./src/components/*.tsx",
|
||||
"./hooks/*": "./src/hooks/*.ts"
|
||||
"./src/styles/globals.css": "./src/styles/globals.css",
|
||||
"./lib/utils": {
|
||||
"import": {
|
||||
"types": "./dist/es/lib/utils.d.mts",
|
||||
"default": "./dist/es/lib/utils.mjs"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/cjs/lib/utils.d.ts",
|
||||
"default": "./dist/cjs/lib/utils.js"
|
||||
}
|
||||
},
|
||||
"./components/button": {
|
||||
"import": {
|
||||
"types": "./dist/es/components/button.d.mts",
|
||||
"default": "./dist/es/components/button.mjs"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/cjs/components/button.d.ts",
|
||||
"default": "./dist/cjs/components/button.js"
|
||||
}
|
||||
},
|
||||
"./components/card": {
|
||||
"import": {
|
||||
"types": "./dist/es/components/card.d.mts",
|
||||
"default": "./dist/es/components/card.mjs"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/cjs/components/card.d.ts",
|
||||
"default": "./dist/cjs/components/card.js"
|
||||
}
|
||||
}
|
||||
},
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"button": [
|
||||
"src/components/button.tsx"
|
||||
],
|
||||
"card": [
|
||||
"src/components/card.tsx"
|
||||
]
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.517.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tw-animate-css": "^1.3.4"
|
||||
"tw-animate-css": "^1.3.4",
|
||||
"zod": "^3.25.67"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
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";
|
||||
import { cn } from "@repo/ui/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
|
|
@ -32,7 +33,7 @@ const buttonVariants = cva(
|
|||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
|
|
@ -42,9 +43,9 @@ function Button({
|
|||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean;
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
|
|
@ -52,7 +53,7 @@ function Button({
|
|||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants };
|
||||
export { Button, buttonVariants }
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@source "../../../apps/**/*.{ts,tsx}";
|
||||
@source "../../../components/**/*.{ts,tsx}";
|
||||
@source "../**/*.{ts,tsx}";
|
||||
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@
|
|||
"dependsOn": ["^build"],
|
||||
"cache": false,
|
||||
"persistent": true
|
||||
},
|
||||
"clean": {
|
||||
"cache": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue