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

chore: add shadcn integration for remix

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-19 22:45:11 +08:00
parent c011186c37
commit 99627e396d
12 changed files with 19401 additions and 18283 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/remix-template/app/root.tsx
View file

@ -7,13 +7,17 @@ import {
} from "@remix-run/react"; } from "@remix-run/react";
import { Analytics } from "@vercel/analytics/react"; import { Analytics } from "@vercel/analytics/react";
import "./styles.css"; import "./styles.css";
import "@repo/ui/src/styles/globals.css";
export function Layout({ children }: { children: React.ReactNode }) { export function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<meta charSet="utf-8" /> <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 /> <Meta />
<Links /> <Links />
</head> </head>

40
apps/remix-template/app/routes/shadcn.tsx Normal file
View 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
View 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
View file

@ -0,0 +1 @@
export { default } from "@repo/ui/postcss.config";

1106
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -1,9 +1,10 @@
{ {
"name": "kitchen-sink", "name": "ecommerce-template",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "turbo run build", "build": "turbo run build",
"clean": "turbo run clean", "clean": "turbo run clean",
"clean:node_modules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
"dev": "turbo run dev", "dev": "turbo run dev",
"format": "prettier --write \"**/*.{ts,tsx,md}\"", "format": "prettier --write \"**/*.{ts,tsx,md}\"",
"lint": "turbo run lint", "lint": "turbo run lint",

58
packages/ui/package.json
View file

@ -13,20 +13,25 @@
"dev": "bunchee --watch", "dev": "bunchee --watch",
"check-types": "tsc --noEmit", "check-types": "tsc --noEmit",
"lint": "eslint src/", "lint": "eslint src/",
"test": "jest" "test": "jest",
"clean": "rm -rf dist"
}, },
"jest": { "jest": {
"preset": "@repo/jest-presets/browser" "preset": "@repo/jest-presets/browser"
}, },
"devDependencies": { "devDependencies": {
"@jest/globals": "^29.7.0", "@jest/globals": "^29.7.0",
"@remix-run/dev": "^2.15.2",
"@remix-run/node": "^2.15.2",
"@repo/eslint-config": "*", "@repo/eslint-config": "*",
"@repo/jest-presets": "*", "@repo/jest-presets": "*",
"@repo/typescript-config": "*", "@repo/typescript-config": "*",
"@types/node": "^22.15.3", "@tailwindcss/postcss": "^4.1.10",
"@types/node": "^22.15.32",
"bunchee": "^6.4.0", "bunchee": "^6.4.0",
"eslint": "^9.29.0", "eslint": "^9.29.0",
"jest": "^29.7.0", "jest": "^29.7.0",
"tailwindcss": "^4.1.10",
"typescript": "5.8.2" "typescript": "5.8.2"
}, },
"peerDependencies": { "peerDependencies": {
@ -56,18 +61,57 @@
"default": "./dist/cjs/link.js" "default": "./dist/cjs/link.js"
} }
}, },
"./globals.css": "./src/styles/globals.css",
"./postcss.config": "./postcss.config.mjs", "./postcss.config": "./postcss.config.mjs",
"./lib/*": "./src/lib/*.ts", "./src/styles/globals.css": "./src/styles/globals.css",
"./components/*": "./src/components/*.tsx", "./lib/utils": {
"./hooks/*": "./src/hooks/*.ts" "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": { "dependencies": {
"@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-slot": "^1.2.3",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.517.0", "lucide-react": "^0.517.0",
"next-themes": "^0.4.6",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"tw-animate-css": "^1.3.4" "tw-animate-css": "^1.3.4",
"zod": "^3.25.67"
} }
} }

27
packages/ui/src/components/button.tsx
View file

@ -1,23 +1,24 @@
import * as React from "react"; import * as React from "react"
import { Slot } from "@radix-ui/react-slot"; import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"; 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( 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: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: 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: 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: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", "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", link: "text-primary underline-offset-4 hover:underline",
}, },
size: { size: {
@ -32,7 +33,7 @@ const buttonVariants = cva(
size: "default", size: "default",
}, },
} }
); )
function Button({ function Button({
className, className,
@ -42,9 +43,9 @@ function Button({
...props ...props
}: React.ComponentProps<"button"> & }: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
asChild?: boolean; asChild?: boolean
}) { }) {
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button"
return ( return (
<Comp <Comp
@ -52,7 +53,7 @@ function Button({
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
{...props} {...props}
/> />
); )
} }
export { Button, buttonVariants }; export { Button, buttonVariants }

4
packages/ui/src/styles/globals.css
View file

@ -1,10 +1,10 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css";
@source "../../../apps/**/*.{ts,tsx}"; @source "../../../apps/**/*.{ts,tsx}";
@source "../../../components/**/*.{ts,tsx}"; @source "../../../components/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}"; @source "../**/*.{ts,tsx}";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {

3
turbo.json
View file

@ -27,6 +27,9 @@
"dependsOn": ["^build"], "dependsOn": ["^build"],
"cache": false, "cache": false,
"persistent": true "persistent": true
},
"clean": {
"cache": false
} }
} }
} }