Skip to content

Commit 6a548d0

Browse files
hyobanhyoban
committed
chore: update example
1 parent 6f2b350 commit 6a548d0

File tree

9 files changed

+1138
-451
lines changed

9 files changed

+1138
-451
lines changed

‎package.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "unocss-preset-shadcn",
33
"type": "module",
44
"version": "0.2.1",
5-
"packageManager": "pnpm@8.11.0",
5+
"packageManager": "pnpm@8.12.1",
66
"description": "use shadcn ui with unocss",
77
"author": "Stephen Zhou <hi@hyoban.cc>",
88
"license": "MIT",
@@ -54,29 +54,29 @@
5454
"unocss-preset-animations": "^1.0.1"
5555
},
5656
"devDependencies": {
57-
"@antfu/eslint-config": "^2.1.2",
57+
"@antfu/eslint-config": "^2.4.6",
5858
"@antfu/ni": "^0.21.12",
59-
"@antfu/utils": "^0.7.6",
59+
"@antfu/utils": "^0.7.7",
6060
"@ianvs/prettier-plugin-sort-imports": "^4.1.1",
61-
"@types/node": "^20.10.1",
62-
"@typescript-eslint/eslint-plugin": "^6.13.1",
63-
"@typescript-eslint/parser": "^6.13.1",
64-
"@unocss/preset-mini": "^0.56.0",
65-
"bumpp": "^9.2.0",
61+
"@types/node": "^20.10.5",
62+
"@typescript-eslint/eslint-plugin": "^6.14.0",
63+
"@typescript-eslint/parser": "^6.14.0",
64+
"@unocss/preset-mini": "^0.56.5",
65+
"bumpp": "^9.2.1",
6666
"changelogen": "^0.5.5",
67-
"eslint": "^8.54.0",
68-
"eslint-config-prettier": "^9.0.0",
67+
"eslint": "^8.56.0",
68+
"eslint-config-prettier": "^9.1.0",
6969
"eslint-plugin-unicorn": "^49.0.0",
7070
"esno": "^4.0.0",
71-
"lint-staged": "^15.1.0",
72-
"pnpm": "^8.11.0",
73-
"prettier": "^3.1.0",
71+
"lint-staged": "^15.2.0",
72+
"pnpm": "^8.12.1",
73+
"prettier": "^3.1.1",
7474
"rimraf": "^5.0.5",
7575
"simple-git-hooks": "^2.9.0",
76-
"typescript": "^5.3.2",
76+
"typescript": "^5.3.3",
7777
"unbuild": "^2.0.0",
78-
"vite": "^5.0.4",
79-
"vitest": "^1.0.0-beta.6"
78+
"vite": "^5.0.10",
79+
"vitest": "^1.0.4"
8080
},
8181
"simple-git-hooks": {
8282
"pre-commit": "pnpm format:check && pnpm lint && pnpm typecheck && pnpm test -- run && pnpm build"

‎playground/components.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{
22
"$schema": "https://ui.shadcn.com/schema.json",
3-
"aliases": {
4-
"components": "@/components",
5-
"utils": "@/lib/utils"
6-
},
7-
"rsc": false,
83
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
96
"tailwind": {
10-
"baseColor": "neutral",
117
"config": "tailwind.config.js",
128
"css": "app/globals.css",
9+
"baseColor": "neutral",
1310
"cssVariables": true
1411
},
15-
"tsx": true
12+
"aliases": {
13+
"components": "@/components",
14+
"utils": "@/lib/utils"
15+
}
1616
}

‎playground/index.html

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" class="h-full">
33
<head>
44
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite + React + TS</title>
7+
<title>Vite + React + TS + UnoCSS + shadcn</title>
8+
<script>
9+
!(function () {
10+
var e =
11+
window.matchMedia &&
12+
window.matchMedia("(prefers-color-scheme: dark)").matches,
13+
t = localStorage.getItem("use-dark") || "system"
14+
;('"dark"' === t || (e && '"light"' !== t)) &&
15+
document.documentElement.classList.toggle("dark", !0)
16+
})()
17+
</script>
18+
<style>
19+
html.dark {
20+
color-scheme: dark;
21+
}
22+
</style>
723
</head>
8-
<body>
9-
<div id="root"></div>
24+
<body class="h-full">
25+
<div id="root" class="h-full"></div>
26+
<script>
27+
!(function () {
28+
var currentColor = localStorage.getItem("currentColor") || '"neutral"'
29+
var currentRadius = localStorage.getItem("currentRadius") || "0.5"
30+
document.body.classList.add(`theme-${currentColor.slice(1, -1)}`)
31+
document.body.style.setProperty("--radius", `${currentRadius}rem`)
32+
})()
33+
</script>
1034
<script type="module" src="/src/main.tsx"></script>
1135
</body>
1236
</html>

‎playground/package.json

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
{
2+
"name": "playground",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"build": "vite build",
7+
"dev": "vite",
8+
"preview": "vite preview"
9+
},
210
"dependencies": {
311
"@radix-ui/react-slot": "^1.0.2",
4-
"@unocss/reset": "^0.57.7",
12+
"@unocss/reset": "^0.58.0",
513
"class-variance-authority": "^0.7.0",
614
"clsx": "^2.0.0",
7-
"lucide-react": "^0.294.0",
15+
"foxact": "^0.2.27",
16+
"lucide-react": "^0.298.0",
817
"react": "^18.2.0",
918
"react-dom": "^18.2.0",
10-
"tailwind-merge": "^2.0.0",
11-
"unocss-preset-shadcn": "workspace:^"
19+
"tailwind-merge": "^2.1.0"
1220
},
1321
"devDependencies": {
14-
"@types/react": "^18.2.37",
15-
"@types/react-dom": "^18.2.15",
16-
"@vitejs/plugin-react": "^4.2.0",
17-
"typescript": "^5.2.2",
18-
"unocss": "^0.57.7",
19-
"vite": "^5.0.0"
20-
},
21-
"name": "playground",
22-
"private": true,
23-
"scripts": {
24-
"build": "tsc && vite build",
25-
"dev": "vite",
26-
"preview": "vite preview"
27-
},
28-
"type": "module"
22+
"@types/react": "^18.2.45",
23+
"@types/react-dom": "^18.2.18",
24+
"@vitejs/plugin-react": "^4.2.1",
25+
"typescript": "^5.3.3",
26+
"unocss": "^0.58.0",
27+
"unocss-preset-animations": "^1.0.1",
28+
"unocss-preset-shadcn": "workspace:^",
29+
"vite": "^5.0.10"
30+
}
2931
}

‎playground/src/App.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import { Button } from "@/components/ui/button"
1+
import { ThemeSwitch } from "@/components/theme-switch"
22

33
export default function ButtonDemo() {
4-
return <Button>Button</Button>
4+
return (
5+
<div className="h-full flex flex-col justify-center items-center">
6+
<ThemeSwitch />
7+
</div>
8+
)
59
}

‎playground/src/components/theme-switch.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Button } from "@/components/ui/button"
2+
import { useLocalStorage } from "foxact/use-local-storage"
3+
4+
const builtinColors = [
5+
"zinc",
6+
"slate",
7+
"stone",
8+
"gray",
9+
"neutral",
10+
"red",
11+
"rose",
12+
"orange",
13+
"green",
14+
"blue",
15+
"yellow",
16+
"violet",
17+
] as const
18+
const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1] as const
19+
20+
export function ThemeSwitch() {
21+
const [currentColor, setCurrentColor] = useLocalStorage<
22+
(typeof builtinColors)[number]
23+
>("currentColor", "neutral")
24+
25+
const [currentRadius, setCurrentRadius] = useLocalStorage<
26+
(typeof builtinRadiuses)[number]
27+
>("currentRadius", 0.5)
28+
29+
return (
30+
<div className="space-y-4">
31+
<p>Color</p>
32+
<div className="grid grid-cols-6 gap-2">
33+
{builtinColors.map((color) => (
34+
<Button
35+
key={color}
36+
onClick={() => {
37+
document.body.classList.remove(`theme-${currentColor}`)
38+
document.body.classList.add(`theme-${color}`)
39+
setCurrentColor(color)
40+
}}
41+
variant={color === currentColor ? "default" : "secondary"}
42+
>
43+
{color}
44+
</Button>
45+
))}
46+
</div>
47+
<p>Radius</p>
48+
<div className="flex gap-2">
49+
{builtinRadiuses.map((radius) => (
50+
<Button
51+
key={radius}
52+
onClick={() => {
53+
document.body.style.setProperty("--radius", `${radius}rem`)
54+
setCurrentRadius(radius)
55+
}}
56+
variant={radius === currentRadius ? "default" : "secondary"}
57+
>
58+
{radius}
59+
</Button>
60+
))}
61+
</div>
62+
</div>
63+
)
64+
}

‎playground/tsconfig.json

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
{
22
"compilerOptions": {
3-
"target": "ES2020",
4-
"jsx": "react-jsx",
5-
"lib": ["ES2020", "DOM", "DOM.Iterable"],
3+
/* Base Options: */
4+
"esModuleInterop": true,
5+
"skipLibCheck": true,
6+
"target": "es2022",
7+
"allowJs": true,
8+
"resolveJsonModule": true,
9+
"moduleDetection": "force",
10+
"isolatedModules": true,
11+
12+
/* Strictness */
13+
"strict": true,
14+
"noUncheckedIndexedAccess": true,
15+
16+
/* If NOT transpiling with TypeScript: */
17+
"moduleResolution": "Bundler",
18+
"module": "ESNext",
19+
"noEmit": true,
20+
21+
/* If your code runs in the DOM: */
22+
"lib": ["es2022", "dom", "dom.iterable"],
23+
624
"useDefineForClassFields": true,
25+
"allowImportingTsExtensions": true,
26+
"jsx": "react-jsx",
27+
28+
/* Aliases */
729
"baseUrl": ".",
8-
"module": "ESNext",
9-
"moduleResolution": "bundler",
1030
"paths": {
1131
"@/*": ["./src/*"]
12-
},
13-
"resolveJsonModule": true,
14-
"allowImportingTsExtensions": true,
15-
"strict": true,
16-
"noFallthroughCasesInSwitch": true,
17-
"noUnusedLocals": true,
18-
"noUnusedParameters": true,
19-
"noEmit": true,
20-
"isolatedModules": true,
21-
"skipLibCheck": true
32+
}
2233
},
23-
"references": [{ "path": "./tsconfig.node.json" }],
24-
"include": ["src"]
34+
"include": ["src"],
35+
"references": [{ "path": "./tsconfig.node.json" }]
2536
}

‎playground/uno.config.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import { defineConfig, presetUno } from "unocss"
2-
import { presetShadcn } from "unocss-preset-shadcn"
1+
import { defineConfig, presetIcons, presetUno, UserConfig } from "unocss"
2+
import presetAnimations from "unocss-preset-animations"
3+
import { builtinColors, presetShadcn } from "unocss-preset-shadcn"
34

45
export default defineConfig({
56
presets: [
67
presetUno(),
7-
presetShadcn({
8-
color: "red",
8+
presetIcons({
9+
scale: 1.2,
910
}),
11+
presetAnimations(),
12+
presetShadcn(builtinColors.map((c) => ({ color: c }))),
1013
],
1114
})

0 commit comments

Comments
 (0)