feat(tokens): add chart color tokens

.changeset/add-chart-tokens-and-charts-package.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/tokens": patch
+---
+
+Add chart color tokens (chart-1 through chart-5) for light and dark themes

.changeset/config.json

@@ -6,7 +6,8 @@
     [
       "@tiny-design/react",
       "@tiny-design/icons",
-      "@tiny-design/tokens"
+      "@tiny-design/tokens",
+      "@tiny-design/charts"
     ]
   ],
   "linked": [],

apps/docs/package.json

@@ -10,14 +10,16 @@
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@stackblitz/sdk": "^1.11.0",
+    "@tiny-design/charts": "workspace:*",
     "@tiny-design/icons": "workspace:*",
     "@tiny-design/react": "workspace:*",
     "@tiny-design/tokens": "workspace:*",
     "codesandbox": "^2.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.0.0",
-    "react-runner": "^1.0.5"
+    "react-runner": "^1.0.5",
+    "recharts": "^2.15.0"
   },
   "devDependencies": {
     "@mdx-js/rollup": "^3.1.1",

apps/docs/src/components/sidebar-menu/index.tsx

@@ -46,6 +46,7 @@ export const SidebarMenu = (props: Props): React.ReactElement => {
                             isActive ? 'sidebar-menu__menu-item_active' : ''
                           }>
                           {item.title}
+                          {item.tag && item.tag}
                         </NavLink>
                       </li>
                     ))}
@@ -62,6 +63,7 @@ export const SidebarMenu = (props: Props): React.ReactElement => {
                       isActive ? 'sidebar-menu__menu-item_active' : ''
                     }>
                     {router.title}
+                    {router.tag && router.tag}
                   </NavLink>
                 </li>
               );

apps/docs/src/components/sidebar-menu/sidebar-menu.scss

@@ -34,7 +34,6 @@
   }
 
   &__menu-item {
-    line-height: 40px;
     font-size: 14px;
     position: relative;
     padding-left: 50px;
@@ -43,6 +42,11 @@
       text-decoration: none;
       color: var(--ty-color-text);
       transition: all 300ms;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding-right: 16px;
 
       &:hover {
         color: var(--ty-color-primary);
@@ -96,6 +100,11 @@
     padding: 0;
   }
 
+  &__tag {
+    font-size: 10px;
+    text-transform: uppercase;
+  }
+
   &__backdrop {
     display: none;
   }

apps/docs/src/index.tsx

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { MDXProvider } from '@mdx-js/react';
 import '@tiny-design/react/style/index.scss';
+import '@tiny-design/charts/style/index.scss';
 import './index.scss';
 import './utils/theme-persistence';
 

apps/docs/src/routers.tsx

@@ -1,11 +1,13 @@
-import { lazy } from 'react';
+import React, { lazy } from 'react';
+import { Tag } from '@tiny-design/react';
 import { SiteLocale } from './locale/types';
 
 export interface RouterItem {
   title: string;
   route?: string;
   component?: any;
   children?: RouterItem[];
+  tag?: React.ReactNode;
 }
 
 type LocalizedLazy = { en: any; zh: any };
@@ -147,6 +149,7 @@ const c = {
   inputOTP: ll(() => import('../../../packages/react/src/input-otp/index.md'), () => import('../../../packages/react/src/input-otp/index.zh_CN.md')),
   overlay: ll(() => import('../../../packages/react/src/overlay/index.md'), () => import('../../../packages/react/src/overlay/index.zh_CN.md')),
   waterfall: ll(() => import('../../../packages/react/src/waterfall/index.md'), () => import('../../../packages/react/src/waterfall/index.zh_CN.md')),
+  chart: ll(() => import('../../../packages/charts/src/index.md'), () => import('../../../packages/charts/src/index.zh_CN.md')),
 };
 
 export const getGuideMenu = (s: SiteLocale): RouterItem[] => {
@@ -168,8 +171,8 @@ export const getGuideMenu = (s: SiteLocale): RouterItem[] => {
     {
       title: s.guideMenu.groups.ai,
       children: [
-        { title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh) },
-        { title: s.guideMenu.cli, route: 'cli', component: pick(guide.cli, isZh) },
+        { title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh), tag: <Tag color="info">New</Tag> },
+        { title: s.guideMenu.cli, route: 'cli', component: pick(guide.cli, isZh), tag: <Tag color="info">New</Tag> },
       ],
     },
     {
@@ -254,6 +257,7 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
         { title: 'Timeline', route: 'timeline', component: pick(c.timeline, z) },
         { title: 'Tooltip', route: 'tooltip', component: pick(c.tooltip, z) },
         { title: 'Tree', route: 'tree', component: pick(c.tree, z) },
+        { title: 'Chart', route: 'chart', component: pick(c.chart, z), tag: <Tag color="info">New</Tag> },
       ],
     },
     {

apps/docs/vite.config.ts

@@ -9,6 +9,7 @@ import { readFileSync } from 'fs';
 const reactPkg = path.resolve(__dirname, '../../packages/react/package.json');
 const reactSrc = path.resolve(__dirname, '../../packages/react/src');
 const iconsSrc = path.resolve(__dirname, '../../packages/icons/src');
+const chartsSrc = path.resolve(__dirname, '../../packages/charts/src');
 
 const tinyVersion = JSON.parse(readFileSync(reactPkg, 'utf-8')).version;
 
@@ -31,6 +32,7 @@ export default defineConfig({
     alias: {
       '@tiny-design/react': reactSrc,
       '@tiny-design/icons': iconsSrc,
+      '@tiny-design/charts': chartsSrc,
     },
     dedupe: ['react', 'react-dom'],
   },

packages/charts/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tiny-design/charts",
+  "version": "1.6.1",
+  "description": "Theme-aware chart components for Tiny Design, built on Recharts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wangdicoder/tiny-design.git",
+    "directory": "packages/charts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./lib/*": "./lib/*",
+    "./es/*": "./es/*"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsdown",
+    "clean": "rimraf lib es"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "recharts": ">=2.0.0"
+  },
+  "dependencies": {
+    "@tiny-design/tokens": "workspace:*",
+    "classnames": "^2.3.1",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.15.0",
+    "rimraf": "^3.0.2",
+    "tsdown": "^0.21.1",
+    "typescript": "^5.4.0"
+  }
+}

packages/charts/src/chart-container.tsx

@@ -0,0 +1,58 @@
+import React, { useId, useMemo } from 'react';
+import classNames from 'classnames';
+import { ResponsiveContainer } from 'recharts';
+import { ChartContextProvider } from './chart-context';
+import { ChartStyle } from './chart-style';
+import { ChartConfig } from './types';
+
+const PREFIX = 'ty-chart';
+
+export interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  config: ChartConfig;
+  children: React.ReactElement;
+}
+
+/**
+ * ChartContainer wraps Recharts charts with:
+ * 1. A ResponsiveContainer for auto-sizing
+ * 2. CSS custom properties (--color-KEY) injected via inline styles
+ * 3. ChartConfig provided via React context for tooltip/legend
+ */
+const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(
+  ({ config, children, className, style, id, ...props }, ref) => {
+    const uniqueId = useId();
+    const chartId = id || `chart-${uniqueId}`;
+
+    // Build --color-KEY CSS custom properties from config
+    const colorVars = useMemo(() => {
+      const vars: Record<string, string> = {};
+      for (const [key, value] of Object.entries(config)) {
+        if (value.color) {
+          vars[`--color-${key}`] = value.color;
+        }
+      }
+      return vars;
+    }, [config]);
+
+    return (
+      <ChartContextProvider config={config}>
+        <ChartStyle id={chartId} config={config} />
+        <div
+          ref={ref}
+          data-chart={chartId}
+          className={classNames(PREFIX, className)}
+          style={{ ...colorVars, ...style } as React.CSSProperties}
+          {...props}
+        >
+          <ResponsiveContainer>
+            {children}
+          </ResponsiveContainer>
+        </div>
+      </ChartContextProvider>
+    );
+  }
+);
+
+ChartContainer.displayName = 'ChartContainer';
+
+export default ChartContainer;

packages/charts/src/chart-context.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+import { ChartConfig } from './types';
+
+interface ChartContextValue {
+  config: ChartConfig;
+}
+
+const ChartContext = createContext<ChartContextValue | null>(null);
+
+export function useChart(): ChartContextValue {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+  return context;
+}
+
+export function ChartContextProvider({
+  config,
+  children,
+}: {
+  config: ChartConfig;
+  children: React.ReactNode;
+}) {
+  return (
+    <ChartContext.Provider value={{ config }}>{children}</ChartContext.Provider>
+  );
+}

packages/charts/src/chart-legend.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Legend as RechartsLegend } from 'recharts';
+import { useChart } from './chart-context';
+
+const PREFIX = 'ty-chart-legend';
+
+export const ChartLegend = RechartsLegend;
+
+export interface ChartLegendContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  payload?: Array<{
+    value?: string;
+    dataKey?: string;
+    color?: string;
+    type?: string;
+  }>;
+  nameKey?: string;
+  hideIcon?: boolean;
+  verticalAlign?: 'top' | 'bottom';
+}
+
+export const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  ChartLegendContentProps
+>(
+  (
+    {
+      payload,
+      nameKey,
+      hideIcon = false,
+      verticalAlign = 'bottom',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          PREFIX,
+          `${PREFIX}_${verticalAlign}`,
+          className
+        )}
+        {...props}
+      >
+        {payload.map((entry) => {
+          const key = nameKey
+            ? (entry.dataKey || entry.value)
+            : entry.dataKey || entry.value;
+          const itemConfig = key ? config[key] : undefined;
+          const displayName = itemConfig?.label || entry.value || key;
+          const color =
+            entry.color || (itemConfig?.color ? `var(--color-${key})` : undefined);
+
+          const IconComponent = itemConfig?.icon;
+
+          return (
+            <div
+              key={String(key)}
+              className={`${PREFIX}__item`}
+            >
+              {!hideIcon && (
+                IconComponent ? (
+                  <IconComponent />
+                ) : (
+                  <span
+                    className={`${PREFIX}__icon`}
+                    style={{ backgroundColor: color }}
+                  />
+                )
+              )}
+              <span className={`${PREFIX}__label`}>{displayName}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+ChartLegendContent.displayName = 'ChartLegendContent';