npm - @demokit-ui/demokit - Versions diffs - 0.1.0 - Mend

@demokit-ui/demokit 0.1.0

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.

Files changed (231) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,128 @@
+# @demokit-ui/demokit
+`@demokit-ui/demokit` 是 DemoKit workspace 中可独立发布的 React 组件包，提供统一的组件导出、Provider 和样式入口。
+## 概览
+- 常用基础组件和页面拼装所需的通用能力
+- `DemoKitProvider`
+- 主题与全局上下文能力
+- 样式入口 `@demokit-ui/demokit/styles.css`
+## 安装
+```bash
+npm install @demokit-ui/demokit react react-dom
+```
+当前版本的 peer dependencies 为 `react@^19.1.0` 和 `react-dom@^19.1.0`。
+## 快速开始
+```tsx
+import '@demokit-ui/demokit/styles.css';
+import { DemoKitProvider, Button, Card } from '@demokit-ui/demokit';
+```
+```tsx
+<DemoKitProvider>
+  <App />
+</DemoKitProvider>
+```
+建议在应用入口只引入一次 `@demokit-ui/demokit/styles.css`，并在根节点使用 `DemoKitProvider`。
+`@demokit-ui/demokit/styles.css` 提供主题变量、基础 body 背景色、组件 CSS、`card-surface` 和 demo 布局 CSS。`DemoKitProvider` 会把当前主题同步到 `<html data-theme="...">`。
+## Tailwind v4 扫描
+当前样式入口是 Tailwind v4 CSS。消费项目需要让 Tailwind 扫描 `@demokit-ui/demokit` 的构建产物，否则包内部组件和 demo shell 里的 utility class 不会生成。
+在消费项目的全局 CSS 中：
+```css
+@import '@demokit-ui/demokit/styles.css';
+/* 路径相对当前 CSS 文件，按项目目录层级调整。 */
+@source '../node_modules/@demokit-ui/demokit/dist/**/*.{js,mjs,jsx,tsx,ts}';
+```
+如果全局 CSS 位于 `src/app/globals.css`，通常应改成：
+```css
+@source '../../node_modules/@demokit-ui/demokit/dist/**/*.{js,mjs,jsx,tsx,ts}';
+```
+## Demo1Shell 布局
+展示站的后台布局已经作为 `Demo1Shell` 从包中导出。已有项目想复用 demo 页面布局时，应从包导入 `Demo1Shell`，不要复制 `src/showcase` 或内部 layout 源码。
+```tsx
+import { Demo1Shell } from '@demokit-ui/demokit';
+```
+`@demokit-ui/demokit/styles.css` 已包含 demo1 布局样式。若项目需要单独引入这部分样式，也可以使用：
+```css
+@import '@demokit-ui/demokit/demo1.css';
+```
+注意：demo1 布局样式依赖 `Demo1Shell` 生成的 `.demo1`、`.sidebar`、`.header`、`.wrapper` 等结构和 body class。只复制页面 JSX、不使用 `Demo1Shell`，会出现“取不到 demo 样式”的效果。
+## 背景与图表颜色
+Showcase 页面视觉不只来自组件本身，还依赖共享基础：
+- `BackgroundDecor`：玻璃主题和 navy 主题的页面背景
+- `card-surface`：主题感知的卡片表面
+- `useChartPalette()`：主题感知的图表调色板
+```tsx
+import { BackgroundDecor, useChartPalette } from '@demokit-ui/demokit';
+```
+如果使用 `Demo1Shell`，它已经内置 `BackgroundDecor`。如果是自定义布局，需要在页面根部显式渲染 `BackgroundDecor`。
+## 页面内容边界
+Showcase 和 starter 页面里的指标卡、图表、表格、Tabs、假数据和文案都只是示例内容，不是组件库强制的页面结构。正式页面应基于真实业务的信息架构重建内容：列表页用表格和筛选，详情页用信息块和操作区，表单页用表单布局，仪表盘才使用指标卡和图表。
+## 导出内容
+包的公开导出主要包括：
+- 组件库统一导出
+- `DemoKitProvider`
+- `Demo1Shell`
+- 主题、设置和 Tooltip 相关 Provider
+- `theme-toggle`
+- `chart-palette`
+- `APP_SETTINGS`、配置类型和 `cn` 等辅助导出
+## 本地开发
+以下命令需要在仓库根目录执行：
+```bash
+npm install --legacy-peer-deps
+npm run build:kit
+```
+## 发布前检查
+```bash
+npm run build:kit
+npm run pack:kit
+```
+`npm run pack:kit` 会在本地生成可发布 tarball，用于验证包产物是否完整。
+## 使用建议
+- 优先通过 `@demokit-ui/demokit` 的统一导出引用组件
+- 在应用入口使用 `DemoKitProvider` 初始化主题和全局上下文
+- 通用能力优先沉淀回组件包，应用代码专注页面组装和业务逻辑
+## License
+MIT

package/dist/app/background-decor.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function BackgroundDecor(): import("react/jsx-runtime").JSX.Element;

package/dist/app/background-decor.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { AuroraBackground as i } from "../kit/components/decorative/aurora-background/aurora-background.js";
+function t() {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: "pointer-events-none fixed inset-0 -z-10 overflow-hidden",
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "absolute inset-0 transition-opacity duration-500",
+            style: { opacity: "var(--decor-opacity)" },
+            children: /* @__PURE__ */ a(i, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "absolute inset-0 transition-opacity duration-500",
+            style: { opacity: "var(--decor-navy-opacity)" },
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                className: "absolute inset-0",
+                style: { background: "var(--background)" }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  t as BackgroundDecor
+};

package/dist/app/container.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const containerVariants: (props?: ({
+    width?: "fixed" | "fluid" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ContainerProps extends VariantProps<typeof containerVariants> {
+    children?: ReactNode;
+    width?: 'fixed' | 'fluid';
+    className?: string;
+}
+export declare function Container({ children, width, className }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app/container.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cva as e } from "class-variance-authority";
+import { cn as s } from "../lib/utils.js";
+import { useSettings as f } from "../providers/settings-provider.js";
+const m = e("mx-auto w-full min-w-0 px-[var(--dk-container-x)]", {
+  variants: {
+    width: {
+      fixed: "max-w-[min(100%,1320px)]",
+      fluid: ""
+    }
+  },
+  defaultVariants: {
+    width: "fixed"
+  }
+});
+function u({ children: t, width: i, className: n = "" }) {
+  const { settings: a } = f(), o = i ?? a.container ?? "fixed";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "container",
+      className: s(m({ width: o }), n),
+      children: t
+    }
+  );
+}
+export {
+  u as Container
+};

package/dist/app/demo1-shell.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { ElementType, ReactNode } from 'react';
+import { MenuConfig } from '../config/types';
+export interface Demo1ShellBrand {
+    title: string;
+    shortTitle?: string;
+    href?: string;
+    logoIcon?: ElementType;
+    logoSrc?: string;
+    logoAlt?: string;
+}
+export interface Demo1ShellSearchItem {
+    title: string;
+    hint?: string;
+    path?: string;
+}
+export interface Demo1ShellNotification {
+    id: string;
+    title: string;
+    desc: string;
+    time: string;
+    unread?: boolean;
+    type?: 'info' | 'warning' | 'success';
+}
+export interface Demo1ShellUser {
+    name: string;
+    description?: string;
+    initials?: string;
+    permissionsPath?: string;
+}
+export interface Demo1ShellProps {
+    menu: MenuConfig;
+    brand?: Demo1ShellBrand;
+    titleFallback?: string;
+    footer?: ReactNode;
+    disabledBadgeLabel?: ReactNode;
+    searchPlaceholder?: string;
+    searchQuickNav?: Demo1ShellSearchItem[];
+    searchRecent?: Demo1ShellSearchItem[];
+    notifications?: Demo1ShellNotification[];
+    user?: Demo1ShellUser;
+    children?: ReactNode;
+}
+export declare function Demo1Shell({ menu, brand, titleFallback, footer, disabledBadgeLabel, searchPlaceholder, searchQuickNav, searchRecent, notifications, user, children, }: Demo1ShellProps): import("react/jsx-runtime").JSX.Element;