@ dashboardpack/ core (中文(简体) )
共享的UI组件、提供者、数据模块和公用事业 盘片包 模板 (Apex, Zenith, Flux, Ember).
这是一个 仅限来源 软件包。 它不译出类型Script和TSX——没有建造步骤,没有 dist/自己编译.
安装
npm install @dashboardpack/core
添加到 transpilePackages 内 next.config.ts 所以 Next.js 汇编源代码 :
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
transpilePackages: ["@dashboardpack/core"],
};
export default nextConfig;
因为套件输出出生道("./*": "./*"),导入时要反映目录布局:
import { Button } from "@dashboardpack/core/components/ui/button";
import { PageHeader } from "@dashboardpack/core/components/shared/page-header";
import { orders } from "@dashboardpack/core/lib/data";
import { cn } from "@dashboardpack/core/lib/utils";
里面的东西
| 路径 | 目录 |
|---|---|
components/ui/ | 35 shadcn/ui风格原始人(按钮,卡,对话框,形式,活-区域, |
components/shared/ | PageHeader, (中文(简体) ), EmptyState, (中文(简体) ), ConfirmDialog, (中文(简体) ), DataTable, (中文(简体) ), LazyChart, (中文(简体) ), DateRangePicker |
providers/ | ThemeProvider (暗/淡/系统+) resolvedTheme, (中文(简体) ), SidebarProvider (拼接,布局模式,容器模式,方向) |
lib/data-provider/ | DataProvider 接口,模拟/REST/固定执行,以及 useList 编号 : useOne 编号 : useMutation |
lib/navigation/ | 节点类型加 toTree 编号 : toFlat 编号 : toSitemap 编号 : activeLeaf 编号 : validateRegistry |
lib/rbac/ | can, (中文(简体) ), effectivePermissions, (中文(简体) ), permissionGroups, (中文(简体) ), Can, (中文(简体) ), RequirePermission, (中文(简体) ), usePermissions |
lib/schemas/ | 用户和角色形式的共享 Zod 方案 |
lib/data/ | 每页的模拟数据(订单、产品、客户、发票、用户、角色、分析、聊天、邮件、坎班、日历、文件、通知) |
lib/data/paginate.ts | paginate() 编辑 perPage: "all" 发送器 |
lib/data/types.ts | 共享类型脚本接口, PERMISSION_KEYS 财务报告和审定财务报表 PermissionKey |
lib/i18n/ | useTranslations() 钩和信件文件( en, de, f) |
lib/utils.ts | cn() 财务报告和审定财务报表 generateInitials() |
替换模拟数据
页面交谈a DataProvider,而不是模拟模块,所以切换到真实的 API
是模板中的一行更改 :
// src/lib/data/provider.ts
export const dataProvider = createMockProvider({ baseUrl: "/api" });
// export const dataProvider = createRestProvider({ baseUrl: process.env.NEXT_PUBLIC_API_URL! });
createMockProvider 通过 HTTP 获取静态 JSON, 因此加载、 错误和重试
州是真实的,即使没有后端. createRestProvider 写得很乐观
和回滚失败. createFixtureProvider 用于测试,与 failNext()
财务报告和审定财务报表 setLatency()。 。 。 .
摩克突变为内相并重置于重装上. 这是故意的: 他们会让访客的编辑 漂出运来的固定装置, 所以演示会 停止复制.
权限不是安全
lib/rbac 门UI支付。 作为静态 HTML 的船载模板
它在公开的JSON文档中的数据, 所以所有的东西已经在客户端上,没有
客户端检查可以改变这一点。 用于隐藏和禁用控件,并强制
服务器上相同的规则。 模块的源头说 同样的事情,在顶部,
这是故意的.
同伴依赖关系
所有组件导入都是对等依赖,所以消耗模板控制了版本. 反应19和Next.js 16是基线. 见 peerDependencies 内 package.json 用于完整列表和支持的区域.
唯一的运行时间 dependencies 为: @radix-ui/react-slot 财务报告和审定财务报表 sugar-high。 。 。 .
对照模板开发
执行 没有 使用情况 npm link。此软件包将端点依赖性安装到此
消费者从这里解决他们
这样 react-hook-form 从两个路径和类型脚本报告装入两次 Control<T>
从每份副本中取出一个不同的类型,产生数十个“不可转让”错误
在真正的安装中不存在。 还安排了消费者 preserveSymlinks: true 财务报告和审定财务报表
resolve.symlinks = false,所以无论怎样,链接都会通过同义路径解决.
复制已公布的文件, 复制 npm install 确切的说:
./tools/sync-to-consumer.sh ../apex-dashboard
然后运行模板自己的 npm run verify。 。 。 .
检查
npm run verify # typecheck + check:rsc + check:package + tests
check:rsc- 如果模块没有,则失败"use client"进口radix-ui枪管 参见下面的服务器组件安全部分;这是对 1.1.3中运输的坠毁.check:package- 失败, 如果柏油丸会运送测试文件, dev工具或一个 建立缓存,或者如果缺少文件记录的切入点.exports: { "./*": "./*" }提供导入时的安全网,所以缺少的文件是运行时的失败 顾客.
贡献: 响应服务器组件安全
这里的大多数组件是客户端组件并带有 "use client" 指令。 有几个是故意的 没有 客户端组件 - button.tsx, (中文(简体) ), breadcrumb.tsx, (中文(简体) ), card.tsx, (中文(简体) ), badge.tsx, (中文(简体) ), avatar.tsx, (中文(简体) ), input.tsx, (中文(简体) ), textarea.tsx, (中文(简体) ), progress.tsx, (中文(简体) ), skeleton.tsx ——这样模板就可以从服务器组件中制取它们,例如 not-found.tsx, (中文(简体) ), layout.tsx,或错误的页面.
永不导入 radix-ui 文件的枪管没有 "use client"。 。 。 .
枪管热切地评估了每个原始的Radix 进口, 有几个人叫 React.createContext() 在模块范围。 在反应服务器组件图中 createContext 不存在,所以导入会崩溃页面 :
TypeError: React.createContext is not a function
它是否真的崩溃取决于消耗的捆绑者是否摇动了管子,这使得它在一些机器而不是其他机器上发生故障. 导入单个原始软件包 :
// Wrong — pulls in every Radix primitive
import { Slot } from "radix-ui";
// Right — only what is needed, and free of module-scope createContext
import * as Slot from "@radix-ui/react-slot";
您可通过下列方式验证更改:
node --conditions=react-server -e "require('<package-name>')"
如果这样 createContext is not a function,该软件包无法从服务器组件导入.
这条规则在1.2.0中引起运回回归——见 变动情况。 。 。 .
许可证
麻省理工学院