vite-shadcn-ui-cli 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/eslint.config.js +16 -11
- package/package.json +45 -24
- package/src/App.tsx +8 -0
- package/src/components/ui/button.tsx +57 -57
- package/src/request.ts +55 -0
- package/src/utils/index.ts +44 -0
- package/tsconfig.app.json +2 -2
- package/tsconfig.node.json +2 -2
- package/vite.config.ts +18 -6
- package/src/components/ui/chart.tsx +0 -365
- package/src/components/ui/sonner.tsx +0 -31
- package/src/components/ui/toaster.tsx +0 -35
package/eslint.config.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
import js from '@eslint/js'
|
2
|
-
import globals from 'globals'
|
3
|
-
import reactHooks from 'eslint-plugin-react-hooks'
|
4
|
-
import reactRefresh from 'eslint-plugin-react-refresh'
|
5
|
-
import tseslint from 'typescript-eslint'
|
1
|
+
import js from '@eslint/js';
|
2
|
+
import globals from 'globals';
|
3
|
+
import reactHooks from 'eslint-plugin-react-hooks';
|
4
|
+
import reactRefresh from 'eslint-plugin-react-refresh';
|
5
|
+
import tseslint from 'typescript-eslint';
|
6
6
|
|
7
7
|
export default tseslint.config(
|
8
8
|
{ ignores: ['dist'] },
|
@@ -19,10 +19,15 @@ export default tseslint.config(
|
|
19
19
|
},
|
20
20
|
rules: {
|
21
21
|
...reactHooks.configs.recommended.rules,
|
22
|
-
'react-refresh/only-export-components': [
|
23
|
-
|
24
|
-
|
25
|
-
|
22
|
+
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
|
23
|
+
'@typescript-eslint/no-explicit-any': 'off',
|
24
|
+
'@typescript-eslint/no-unused-vars': 'off',
|
25
|
+
'no-unused-vars': 'off',
|
26
|
+
'@typescript-eslint/no-floating-promises': 'off',
|
27
|
+
'react-hooks/exhaustive-deps': 'off',
|
28
|
+
'react/no-unescaped-entities': 'off',
|
29
|
+
'react-refresh/only-export-components': 'off',
|
30
|
+
'@typescript-eslint/ban-ts-comment': 'off',
|
26
31
|
},
|
27
|
-
}
|
28
|
-
)
|
32
|
+
}
|
33
|
+
);
|
package/package.json
CHANGED
@@ -1,48 +1,69 @@
|
|
1
1
|
{
|
2
2
|
"name": "vite-shadcn-ui-cli",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.15",
|
4
4
|
"description": "A CLI tool to bootstrap Vite projects with shadcn UI components",
|
5
5
|
"main": "index.js",
|
6
6
|
"bin": {
|
7
7
|
"create-vite-shadcn-ui": "./index.js"
|
8
8
|
},
|
9
|
-
"type":"module",
|
9
|
+
"type": "module",
|
10
10
|
"scripts": {
|
11
|
-
"dev": "vite",
|
11
|
+
"dev": "vite --host",
|
12
12
|
"build": "tsc -b && vite build",
|
13
13
|
"lint": "eslint .",
|
14
14
|
"preview": "vite preview"
|
15
15
|
},
|
16
16
|
"dependencies": {
|
17
|
+
"@radix-ui/react-accordion": "^1.2.3",
|
18
|
+
"@radix-ui/react-alert-dialog": "^1.1.6",
|
19
|
+
"@radix-ui/react-aspect-ratio": "^1.1.2",
|
20
|
+
"@radix-ui/react-avatar": "^1.1.3",
|
21
|
+
"@radix-ui/react-checkbox": "^1.1.4",
|
22
|
+
"@radix-ui/react-collapsible": "^1.1.3",
|
23
|
+
"@radix-ui/react-context-menu": "^2.2.6",
|
24
|
+
"@radix-ui/react-dialog": "^1.1.6",
|
25
|
+
"@radix-ui/react-dropdown-menu": "^2.1.6",
|
26
|
+
"@radix-ui/react-hover-card": "^1.1.6",
|
27
|
+
"@radix-ui/react-label": "^2.1.2",
|
28
|
+
"@radix-ui/react-menubar": "^1.1.6",
|
29
|
+
"@radix-ui/react-navigation-menu": "^1.2.5",
|
30
|
+
"@radix-ui/react-popover": "^1.1.6",
|
31
|
+
"@radix-ui/react-progress": "^1.1.2",
|
32
|
+
"@radix-ui/react-radio-group": "^1.2.3",
|
33
|
+
"@radix-ui/react-scroll-area": "^1.2.3",
|
34
|
+
"@radix-ui/react-select": "^2.1.6",
|
35
|
+
"@radix-ui/react-separator": "^1.1.2",
|
36
|
+
"@radix-ui/react-slider": "^1.2.3",
|
17
37
|
"@radix-ui/react-slot": "^1.1.1",
|
38
|
+
"@radix-ui/react-switch": "^1.1.3",
|
39
|
+
"@radix-ui/react-tabs": "^1.1.3",
|
40
|
+
"@radix-ui/react-toast": "^1.2.6",
|
41
|
+
"@radix-ui/react-toggle": "^1.1.2",
|
42
|
+
"@radix-ui/react-toggle-group": "^1.1.2",
|
43
|
+
"@radix-ui/react-tooltip": "^1.1.8",
|
44
|
+
"ahooks": "^3.8.4",
|
45
|
+
"axios": "^1.7.9",
|
46
|
+
"chalk": "^4.1.2",
|
18
47
|
"class-variance-authority": "^0.7.1",
|
48
|
+
"commander": "^11.0.0",
|
49
|
+
"ora": "^6.0.0",
|
50
|
+
"simple-git": "^3.8.0",
|
19
51
|
"clsx": "^2.1.1",
|
52
|
+
"cmdk": "^1.0.4",
|
53
|
+
"dayjs": "^1.11.13",
|
54
|
+
"echarts": "^5.6.0",
|
55
|
+
"embla-carousel-react": "^8.5.2",
|
56
|
+
"input-otp": "^1.4.2",
|
20
57
|
"lucide-react": "^0.473.0",
|
21
58
|
"react": "^18.3.1",
|
59
|
+
"react-day-picker": "^9.5.1",
|
22
60
|
"react-dom": "^18.3.1",
|
61
|
+
"react-hook-form": "^7.54.2",
|
62
|
+
"react-resizable-panels": "^2.1.7",
|
63
|
+
"react-router": "^7.1.5",
|
23
64
|
"tailwind-merge": "^2.6.0",
|
24
65
|
"tailwindcss-animate": "^1.0.7",
|
25
|
-
"
|
26
|
-
"chalk": "^4.1.2",
|
27
|
-
"ora": "^6.0.0",
|
28
|
-
"commander": "^11.0.0"
|
29
|
-
},
|
30
|
-
"devDependencies": {
|
31
|
-
"@eslint/js": "^9.17.0",
|
32
|
-
"@types/node": "^22.10.7",
|
33
|
-
"@types/react": "^18.3.18",
|
34
|
-
"@types/react-dom": "^18.3.5",
|
35
|
-
"@vitejs/plugin-react": "^4.3.4",
|
36
|
-
"autoprefixer": "^10.4.20",
|
37
|
-
"eslint": "^9.17.0",
|
38
|
-
"eslint-plugin-react-hooks": "^5.0.0",
|
39
|
-
"eslint-plugin-react-refresh": "^0.4.16",
|
40
|
-
"globals": "^15.14.0",
|
41
|
-
"postcss": "^8.5.1",
|
42
|
-
"tailwindcss": "^3.4.17",
|
43
|
-
"typescript": "~5.6.2",
|
44
|
-
"typescript-eslint": "^8.18.2",
|
45
|
-
"vite": "^6.0.5"
|
66
|
+
"vaul": "^1.1.2"
|
46
67
|
},
|
47
68
|
"keywords": [
|
48
69
|
"vite",
|
package/src/App.tsx
CHANGED
@@ -1,7 +1,15 @@
|
|
1
|
+
import { useEffect } from 'react';
|
1
2
|
import './App.css';
|
2
3
|
import { Button } from '@/components/ui/button';
|
4
|
+
import { get } from './request';
|
3
5
|
|
4
6
|
function App() {
|
7
|
+
useEffect(() => {
|
8
|
+
// 发送 GET 请求
|
9
|
+
get('/user', { id: 1 }).then((res) => {
|
10
|
+
console.log('User Info:', res);
|
11
|
+
});
|
12
|
+
}, []);
|
5
13
|
return (
|
6
14
|
<>
|
7
15
|
<div>
|
@@ -1,57 +1,57 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
import { Slot } from "@radix-ui/react-slot"
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
4
|
-
|
5
|
-
import { cn } from "@/lib/utils"
|
6
|
-
|
7
|
-
const buttonVariants = cva(
|
8
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
9
|
-
{
|
10
|
-
variants: {
|
11
|
-
variant: {
|
12
|
-
default:
|
13
|
-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
14
|
-
destructive:
|
15
|
-
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
16
|
-
outline:
|
17
|
-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
18
|
-
secondary:
|
19
|
-
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
20
|
-
ghost: "hover:bg-accent hover:text-accent-foreground",
|
21
|
-
link: "text-primary underline-offset-4 hover:underline",
|
22
|
-
},
|
23
|
-
size: {
|
24
|
-
default: "h-9 px-4 py-2",
|
25
|
-
sm: "h-8 rounded-md px-3 text-xs",
|
26
|
-
lg: "h-10 rounded-md px-8",
|
27
|
-
icon: "h-9 w-9",
|
28
|
-
},
|
29
|
-
},
|
30
|
-
defaultVariants: {
|
31
|
-
variant: "default",
|
32
|
-
size: "default",
|
33
|
-
},
|
34
|
-
}
|
35
|
-
)
|
36
|
-
|
37
|
-
export interface ButtonProps
|
38
|
-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
39
|
-
VariantProps<typeof buttonVariants> {
|
40
|
-
asChild?: boolean
|
41
|
-
}
|
42
|
-
|
43
|
-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
44
|
-
({ className, variant, size, asChild = false, ...props }, ref) => {
|
45
|
-
const Comp = asChild ? Slot : "button"
|
46
|
-
return (
|
47
|
-
<Comp
|
48
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
49
|
-
ref={ref}
|
50
|
-
{...props}
|
51
|
-
/>
|
52
|
-
)
|
53
|
-
}
|
54
|
-
)
|
55
|
-
Button.displayName = "Button"
|
56
|
-
|
57
|
-
export { Button, buttonVariants }
|
1
|
+
import * as React from "react"
|
2
|
+
import { Slot } from "@radix-ui/react-slot"
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
4
|
+
|
5
|
+
import { cn } from "@/lib/utils"
|
6
|
+
|
7
|
+
const buttonVariants = cva(
|
8
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
9
|
+
{
|
10
|
+
variants: {
|
11
|
+
variant: {
|
12
|
+
default:
|
13
|
+
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
14
|
+
destructive:
|
15
|
+
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
16
|
+
outline:
|
17
|
+
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
18
|
+
secondary:
|
19
|
+
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
20
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
21
|
+
link: "text-primary underline-offset-4 hover:underline",
|
22
|
+
},
|
23
|
+
size: {
|
24
|
+
default: "h-9 px-4 py-2",
|
25
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
26
|
+
lg: "h-10 rounded-md px-8",
|
27
|
+
icon: "h-9 w-9",
|
28
|
+
},
|
29
|
+
},
|
30
|
+
defaultVariants: {
|
31
|
+
variant: "default",
|
32
|
+
size: "default",
|
33
|
+
},
|
34
|
+
}
|
35
|
+
)
|
36
|
+
|
37
|
+
export interface ButtonProps
|
38
|
+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
39
|
+
VariantProps<typeof buttonVariants> {
|
40
|
+
asChild?: boolean
|
41
|
+
}
|
42
|
+
|
43
|
+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
44
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
45
|
+
const Comp = asChild ? Slot : "button"
|
46
|
+
return (
|
47
|
+
<Comp
|
48
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
49
|
+
ref={ref}
|
50
|
+
{...props}
|
51
|
+
/>
|
52
|
+
)
|
53
|
+
}
|
54
|
+
)
|
55
|
+
Button.displayName = "Button"
|
56
|
+
|
57
|
+
export { Button, buttonVariants }
|
package/src/request.ts
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* @description 请求基础配置
|
5
|
+
*/
|
6
|
+
const axiosInstance: AxiosInstance = axios.create({
|
7
|
+
baseURL: '/api', // API 基础 URL
|
8
|
+
timeout: 5000, // 超时时间 5s
|
9
|
+
withCredentials: true, // 允许跨域携带凭证
|
10
|
+
headers: {
|
11
|
+
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
|
12
|
+
},
|
13
|
+
});
|
14
|
+
|
15
|
+
/**
|
16
|
+
* @description 请求拦截器
|
17
|
+
*/
|
18
|
+
axiosInstance.interceptors.request.use(
|
19
|
+
(config: InternalAxiosRequestConfig) => {
|
20
|
+
// 可以在此处添加 token
|
21
|
+
return config;
|
22
|
+
},
|
23
|
+
(error) => {
|
24
|
+
return Promise.reject(error);
|
25
|
+
}
|
26
|
+
);
|
27
|
+
|
28
|
+
/**
|
29
|
+
* @description 响应拦截器
|
30
|
+
*/
|
31
|
+
axiosInstance.interceptors.response.use(
|
32
|
+
(response: AxiosResponse) => {
|
33
|
+
return response.data;
|
34
|
+
},
|
35
|
+
(error) => {
|
36
|
+
console.error('请求出错:', error);
|
37
|
+
return Promise.reject(error);
|
38
|
+
}
|
39
|
+
);
|
40
|
+
|
41
|
+
/**
|
42
|
+
* @description 封装 GET 请求
|
43
|
+
*/
|
44
|
+
export function get<T>(url: string, params?: object): Promise<T> {
|
45
|
+
return axiosInstance.get<T>(url, { params }).then((response) => response.data); // ✅ 提取出 AxiosResponse 中的数据部分
|
46
|
+
}
|
47
|
+
|
48
|
+
/**
|
49
|
+
* @description 封装 POST 请求
|
50
|
+
*/
|
51
|
+
export function post<T>(url: string, data?: object): Promise<T> {
|
52
|
+
return axiosInstance.post<T>(url, data).then((response) => response.data); // ✅ 提取出 AxiosResponse 中的数据部分
|
53
|
+
}
|
54
|
+
|
55
|
+
export default axiosInstance;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
/**
|
2
|
+
* @description 函数防抖
|
3
|
+
* @param func 需要进行防抖的函数
|
4
|
+
* @param delay 时间间隔(毫秒)
|
5
|
+
* @returns 返回一个防抖后的函数
|
6
|
+
*/
|
7
|
+
export function debounce<T extends (...args: any[]) => void>(func: T, delay: number): T {
|
8
|
+
let timer: NodeJS.Timeout | null = null;
|
9
|
+
|
10
|
+
return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
|
11
|
+
if (timer) clearTimeout(timer);
|
12
|
+
|
13
|
+
timer = setTimeout(() => {
|
14
|
+
func.apply(this, args);
|
15
|
+
}, delay);
|
16
|
+
} as T;
|
17
|
+
}
|
18
|
+
|
19
|
+
/**
|
20
|
+
* @description 函数节流
|
21
|
+
* @param func 需要进行节流的函数
|
22
|
+
* @param delay 时间间隔(毫秒)
|
23
|
+
* @returns 返回一个节流后的函数
|
24
|
+
*/
|
25
|
+
export function throttle<T extends (...args: any[]) => void>(func: T, delay: number): T {
|
26
|
+
let lastExecTime = 0;
|
27
|
+
let timer: NodeJS.Timeout | null = null;
|
28
|
+
|
29
|
+
return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
|
30
|
+
const currentTime = Date.now();
|
31
|
+
const elapsedTime = currentTime - lastExecTime;
|
32
|
+
|
33
|
+
if (!timer || elapsedTime >= delay) {
|
34
|
+
func.apply(this, args);
|
35
|
+
lastExecTime = currentTime;
|
36
|
+
} else {
|
37
|
+
if (timer) clearTimeout(timer);
|
38
|
+
timer = setTimeout(() => {
|
39
|
+
func.apply(this, args);
|
40
|
+
lastExecTime = Date.now();
|
41
|
+
}, delay - elapsedTime);
|
42
|
+
}
|
43
|
+
} as T;
|
44
|
+
}
|
package/tsconfig.app.json
CHANGED
package/tsconfig.node.json
CHANGED
package/vite.config.ts
CHANGED
@@ -1,12 +1,24 @@
|
|
1
|
-
import path from
|
2
|
-
import react from
|
3
|
-
import { defineConfig } from
|
4
|
-
|
1
|
+
import path from 'path';
|
2
|
+
import react from '@vitejs/plugin-react';
|
3
|
+
import { defineConfig } from 'vite';
|
4
|
+
|
5
5
|
export default defineConfig({
|
6
6
|
plugins: [react()],
|
7
|
+
server: {
|
8
|
+
port: 8888,
|
9
|
+
cors: true, // 允许跨域
|
10
|
+
hmr: true, // 开启热更新
|
11
|
+
proxy: {
|
12
|
+
"/api": {
|
13
|
+
target: "http://baidu.com", // 设置要代理到的主机名
|
14
|
+
changeOrigin: true,
|
15
|
+
},
|
16
|
+
},
|
17
|
+
},
|
18
|
+
base: './',
|
7
19
|
resolve: {
|
8
20
|
alias: {
|
9
|
-
|
21
|
+
'@': path.resolve(__dirname, './src'),
|
10
22
|
},
|
11
23
|
},
|
12
|
-
})
|
24
|
+
});
|
@@ -1,365 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
|
3
|
-
import * as React from "react"
|
4
|
-
import * as RechartsPrimitive from "recharts"
|
5
|
-
|
6
|
-
import { cn } from "@/lib/utils"
|
7
|
-
|
8
|
-
// Format: { THEME_NAME: CSS_SELECTOR }
|
9
|
-
const THEMES = { light: "", dark: ".dark" } as const
|
10
|
-
|
11
|
-
export type ChartConfig = {
|
12
|
-
[k in string]: {
|
13
|
-
label?: React.ReactNode
|
14
|
-
icon?: React.ComponentType
|
15
|
-
} & (
|
16
|
-
| { color?: string; theme?: never }
|
17
|
-
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
18
|
-
)
|
19
|
-
}
|
20
|
-
|
21
|
-
type ChartContextProps = {
|
22
|
-
config: ChartConfig
|
23
|
-
}
|
24
|
-
|
25
|
-
const ChartContext = React.createContext<ChartContextProps | null>(null)
|
26
|
-
|
27
|
-
function useChart() {
|
28
|
-
const context = React.useContext(ChartContext)
|
29
|
-
|
30
|
-
if (!context) {
|
31
|
-
throw new Error("useChart must be used within a <ChartContainer />")
|
32
|
-
}
|
33
|
-
|
34
|
-
return context
|
35
|
-
}
|
36
|
-
|
37
|
-
const ChartContainer = React.forwardRef<
|
38
|
-
HTMLDivElement,
|
39
|
-
React.ComponentProps<"div"> & {
|
40
|
-
config: ChartConfig
|
41
|
-
children: React.ComponentProps<
|
42
|
-
typeof RechartsPrimitive.ResponsiveContainer
|
43
|
-
>["children"]
|
44
|
-
}
|
45
|
-
>(({ id, className, children, config, ...props }, ref) => {
|
46
|
-
const uniqueId = React.useId()
|
47
|
-
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
|
48
|
-
|
49
|
-
return (
|
50
|
-
<ChartContext.Provider value={{ config }}>
|
51
|
-
<div
|
52
|
-
data-chart={chartId}
|
53
|
-
ref={ref}
|
54
|
-
className={cn(
|
55
|
-
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
56
|
-
className
|
57
|
-
)}
|
58
|
-
{...props}
|
59
|
-
>
|
60
|
-
<ChartStyle id={chartId} config={config} />
|
61
|
-
<RechartsPrimitive.ResponsiveContainer>
|
62
|
-
{children}
|
63
|
-
</RechartsPrimitive.ResponsiveContainer>
|
64
|
-
</div>
|
65
|
-
</ChartContext.Provider>
|
66
|
-
)
|
67
|
-
})
|
68
|
-
ChartContainer.displayName = "Chart"
|
69
|
-
|
70
|
-
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
71
|
-
const colorConfig = Object.entries(config).filter(
|
72
|
-
([_, config]) => config.theme || config.color
|
73
|
-
)
|
74
|
-
|
75
|
-
if (!colorConfig.length) {
|
76
|
-
return null
|
77
|
-
}
|
78
|
-
|
79
|
-
return (
|
80
|
-
<style
|
81
|
-
dangerouslySetInnerHTML={{
|
82
|
-
__html: Object.entries(THEMES)
|
83
|
-
.map(
|
84
|
-
([theme, prefix]) => `
|
85
|
-
${prefix} [data-chart=${id}] {
|
86
|
-
${colorConfig
|
87
|
-
.map(([key, itemConfig]) => {
|
88
|
-
const color =
|
89
|
-
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
90
|
-
itemConfig.color
|
91
|
-
return color ? ` --color-${key}: ${color};` : null
|
92
|
-
})
|
93
|
-
.join("\n")}
|
94
|
-
}
|
95
|
-
`
|
96
|
-
)
|
97
|
-
.join("\n"),
|
98
|
-
}}
|
99
|
-
/>
|
100
|
-
)
|
101
|
-
}
|
102
|
-
|
103
|
-
const ChartTooltip = RechartsPrimitive.Tooltip
|
104
|
-
|
105
|
-
const ChartTooltipContent = React.forwardRef<
|
106
|
-
HTMLDivElement,
|
107
|
-
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
108
|
-
React.ComponentProps<"div"> & {
|
109
|
-
hideLabel?: boolean
|
110
|
-
hideIndicator?: boolean
|
111
|
-
indicator?: "line" | "dot" | "dashed"
|
112
|
-
nameKey?: string
|
113
|
-
labelKey?: string
|
114
|
-
}
|
115
|
-
>(
|
116
|
-
(
|
117
|
-
{
|
118
|
-
active,
|
119
|
-
payload,
|
120
|
-
className,
|
121
|
-
indicator = "dot",
|
122
|
-
hideLabel = false,
|
123
|
-
hideIndicator = false,
|
124
|
-
label,
|
125
|
-
labelFormatter,
|
126
|
-
labelClassName,
|
127
|
-
formatter,
|
128
|
-
color,
|
129
|
-
nameKey,
|
130
|
-
labelKey,
|
131
|
-
},
|
132
|
-
ref
|
133
|
-
) => {
|
134
|
-
const { config } = useChart()
|
135
|
-
|
136
|
-
const tooltipLabel = React.useMemo(() => {
|
137
|
-
if (hideLabel || !payload?.length) {
|
138
|
-
return null
|
139
|
-
}
|
140
|
-
|
141
|
-
const [item] = payload
|
142
|
-
const key = `${labelKey || item.dataKey || item.name || "value"}`
|
143
|
-
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
144
|
-
const value =
|
145
|
-
!labelKey && typeof label === "string"
|
146
|
-
? config[label as keyof typeof config]?.label || label
|
147
|
-
: itemConfig?.label
|
148
|
-
|
149
|
-
if (labelFormatter) {
|
150
|
-
return (
|
151
|
-
<div className={cn("font-medium", labelClassName)}>
|
152
|
-
{labelFormatter(value, payload)}
|
153
|
-
</div>
|
154
|
-
)
|
155
|
-
}
|
156
|
-
|
157
|
-
if (!value) {
|
158
|
-
return null
|
159
|
-
}
|
160
|
-
|
161
|
-
return <div className={cn("font-medium", labelClassName)}>{value}</div>
|
162
|
-
}, [
|
163
|
-
label,
|
164
|
-
labelFormatter,
|
165
|
-
payload,
|
166
|
-
hideLabel,
|
167
|
-
labelClassName,
|
168
|
-
config,
|
169
|
-
labelKey,
|
170
|
-
])
|
171
|
-
|
172
|
-
if (!active || !payload?.length) {
|
173
|
-
return null
|
174
|
-
}
|
175
|
-
|
176
|
-
const nestLabel = payload.length === 1 && indicator !== "dot"
|
177
|
-
|
178
|
-
return (
|
179
|
-
<div
|
180
|
-
ref={ref}
|
181
|
-
className={cn(
|
182
|
-
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
183
|
-
className
|
184
|
-
)}
|
185
|
-
>
|
186
|
-
{!nestLabel ? tooltipLabel : null}
|
187
|
-
<div className="grid gap-1.5">
|
188
|
-
{payload.map((item, index) => {
|
189
|
-
const key = `${nameKey || item.name || item.dataKey || "value"}`
|
190
|
-
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
191
|
-
const indicatorColor = color || item.payload.fill || item.color
|
192
|
-
|
193
|
-
return (
|
194
|
-
<div
|
195
|
-
key={item.dataKey}
|
196
|
-
className={cn(
|
197
|
-
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
198
|
-
indicator === "dot" && "items-center"
|
199
|
-
)}
|
200
|
-
>
|
201
|
-
{formatter && item?.value !== undefined && item.name ? (
|
202
|
-
formatter(item.value, item.name, item, index, item.payload)
|
203
|
-
) : (
|
204
|
-
<>
|
205
|
-
{itemConfig?.icon ? (
|
206
|
-
<itemConfig.icon />
|
207
|
-
) : (
|
208
|
-
!hideIndicator && (
|
209
|
-
<div
|
210
|
-
className={cn(
|
211
|
-
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
212
|
-
{
|
213
|
-
"h-2.5 w-2.5": indicator === "dot",
|
214
|
-
"w-1": indicator === "line",
|
215
|
-
"w-0 border-[1.5px] border-dashed bg-transparent":
|
216
|
-
indicator === "dashed",
|
217
|
-
"my-0.5": nestLabel && indicator === "dashed",
|
218
|
-
}
|
219
|
-
)}
|
220
|
-
style={
|
221
|
-
{
|
222
|
-
"--color-bg": indicatorColor,
|
223
|
-
"--color-border": indicatorColor,
|
224
|
-
} as React.CSSProperties
|
225
|
-
}
|
226
|
-
/>
|
227
|
-
)
|
228
|
-
)}
|
229
|
-
<div
|
230
|
-
className={cn(
|
231
|
-
"flex flex-1 justify-between leading-none",
|
232
|
-
nestLabel ? "items-end" : "items-center"
|
233
|
-
)}
|
234
|
-
>
|
235
|
-
<div className="grid gap-1.5">
|
236
|
-
{nestLabel ? tooltipLabel : null}
|
237
|
-
<span className="text-muted-foreground">
|
238
|
-
{itemConfig?.label || item.name}
|
239
|
-
</span>
|
240
|
-
</div>
|
241
|
-
{item.value && (
|
242
|
-
<span className="font-mono font-medium tabular-nums text-foreground">
|
243
|
-
{item.value.toLocaleString()}
|
244
|
-
</span>
|
245
|
-
)}
|
246
|
-
</div>
|
247
|
-
</>
|
248
|
-
)}
|
249
|
-
</div>
|
250
|
-
)
|
251
|
-
})}
|
252
|
-
</div>
|
253
|
-
</div>
|
254
|
-
)
|
255
|
-
}
|
256
|
-
)
|
257
|
-
ChartTooltipContent.displayName = "ChartTooltip"
|
258
|
-
|
259
|
-
const ChartLegend = RechartsPrimitive.Legend
|
260
|
-
|
261
|
-
const ChartLegendContent = React.forwardRef<
|
262
|
-
HTMLDivElement,
|
263
|
-
React.ComponentProps<"div"> &
|
264
|
-
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
265
|
-
hideIcon?: boolean
|
266
|
-
nameKey?: string
|
267
|
-
}
|
268
|
-
>(
|
269
|
-
(
|
270
|
-
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
271
|
-
ref
|
272
|
-
) => {
|
273
|
-
const { config } = useChart()
|
274
|
-
|
275
|
-
if (!payload?.length) {
|
276
|
-
return null
|
277
|
-
}
|
278
|
-
|
279
|
-
return (
|
280
|
-
<div
|
281
|
-
ref={ref}
|
282
|
-
className={cn(
|
283
|
-
"flex items-center justify-center gap-4",
|
284
|
-
verticalAlign === "top" ? "pb-3" : "pt-3",
|
285
|
-
className
|
286
|
-
)}
|
287
|
-
>
|
288
|
-
{payload.map((item) => {
|
289
|
-
const key = `${nameKey || item.dataKey || "value"}`
|
290
|
-
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
291
|
-
|
292
|
-
return (
|
293
|
-
<div
|
294
|
-
key={item.value}
|
295
|
-
className={cn(
|
296
|
-
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
|
297
|
-
)}
|
298
|
-
>
|
299
|
-
{itemConfig?.icon && !hideIcon ? (
|
300
|
-
<itemConfig.icon />
|
301
|
-
) : (
|
302
|
-
<div
|
303
|
-
className="h-2 w-2 shrink-0 rounded-[2px]"
|
304
|
-
style={{
|
305
|
-
backgroundColor: item.color,
|
306
|
-
}}
|
307
|
-
/>
|
308
|
-
)}
|
309
|
-
{itemConfig?.label}
|
310
|
-
</div>
|
311
|
-
)
|
312
|
-
})}
|
313
|
-
</div>
|
314
|
-
)
|
315
|
-
}
|
316
|
-
)
|
317
|
-
ChartLegendContent.displayName = "ChartLegend"
|
318
|
-
|
319
|
-
// Helper to extract item config from a payload.
|
320
|
-
function getPayloadConfigFromPayload(
|
321
|
-
config: ChartConfig,
|
322
|
-
payload: unknown,
|
323
|
-
key: string
|
324
|
-
) {
|
325
|
-
if (typeof payload !== "object" || payload === null) {
|
326
|
-
return undefined
|
327
|
-
}
|
328
|
-
|
329
|
-
const payloadPayload =
|
330
|
-
"payload" in payload &&
|
331
|
-
typeof payload.payload === "object" &&
|
332
|
-
payload.payload !== null
|
333
|
-
? payload.payload
|
334
|
-
: undefined
|
335
|
-
|
336
|
-
let configLabelKey: string = key
|
337
|
-
|
338
|
-
if (
|
339
|
-
key in payload &&
|
340
|
-
typeof payload[key as keyof typeof payload] === "string"
|
341
|
-
) {
|
342
|
-
configLabelKey = payload[key as keyof typeof payload] as string
|
343
|
-
} else if (
|
344
|
-
payloadPayload &&
|
345
|
-
key in payloadPayload &&
|
346
|
-
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
347
|
-
) {
|
348
|
-
configLabelKey = payloadPayload[
|
349
|
-
key as keyof typeof payloadPayload
|
350
|
-
] as string
|
351
|
-
}
|
352
|
-
|
353
|
-
return configLabelKey in config
|
354
|
-
? config[configLabelKey]
|
355
|
-
: config[key as keyof typeof config]
|
356
|
-
}
|
357
|
-
|
358
|
-
export {
|
359
|
-
ChartContainer,
|
360
|
-
ChartTooltip,
|
361
|
-
ChartTooltipContent,
|
362
|
-
ChartLegend,
|
363
|
-
ChartLegendContent,
|
364
|
-
ChartStyle,
|
365
|
-
}
|
@@ -1,31 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
|
3
|
-
import { useTheme } from "next-themes"
|
4
|
-
import { Toaster as Sonner } from "sonner"
|
5
|
-
|
6
|
-
type ToasterProps = React.ComponentProps<typeof Sonner>
|
7
|
-
|
8
|
-
const Toaster = ({ ...props }: ToasterProps) => {
|
9
|
-
const { theme = "system" } = useTheme()
|
10
|
-
|
11
|
-
return (
|
12
|
-
<Sonner
|
13
|
-
theme={theme as ToasterProps["theme"]}
|
14
|
-
className="toaster group"
|
15
|
-
toastOptions={{
|
16
|
-
classNames: {
|
17
|
-
toast:
|
18
|
-
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
19
|
-
description: "group-[.toast]:text-muted-foreground",
|
20
|
-
actionButton:
|
21
|
-
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
22
|
-
cancelButton:
|
23
|
-
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
24
|
-
},
|
25
|
-
}}
|
26
|
-
{...props}
|
27
|
-
/>
|
28
|
-
)
|
29
|
-
}
|
30
|
-
|
31
|
-
export { Toaster }
|
@@ -1,35 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
|
3
|
-
import { useToast } from "@/hooks/use-toast"
|
4
|
-
import {
|
5
|
-
Toast,
|
6
|
-
ToastClose,
|
7
|
-
ToastDescription,
|
8
|
-
ToastProvider,
|
9
|
-
ToastTitle,
|
10
|
-
ToastViewport,
|
11
|
-
} from "@/components/ui/toast"
|
12
|
-
|
13
|
-
export function Toaster() {
|
14
|
-
const { toasts } = useToast()
|
15
|
-
|
16
|
-
return (
|
17
|
-
<ToastProvider>
|
18
|
-
{toasts.map(function ({ id, title, description, action, ...props }) {
|
19
|
-
return (
|
20
|
-
<Toast key={id} {...props}>
|
21
|
-
<div className="grid gap-1">
|
22
|
-
{title && <ToastTitle>{title}</ToastTitle>}
|
23
|
-
{description && (
|
24
|
-
<ToastDescription>{description}</ToastDescription>
|
25
|
-
)}
|
26
|
-
</div>
|
27
|
-
{action}
|
28
|
-
<ToastClose />
|
29
|
-
</Toast>
|
30
|
-
)
|
31
|
-
})}
|
32
|
-
<ToastViewport />
|
33
|
-
</ToastProvider>
|
34
|
-
)
|
35
|
-
}
|