组件-lib
由TypeScript,Tailwind v4和shadcn/ui所建的可再用再激活组件库.
发展
npm run dev: 开始当地游乐场(index.html+ 键src/main.tsx)用于手动组件测试.npm run build: 运行类型检查, 发布声明文件, 并构建库包 .npm run lint:运行ESLint跨代码库.npm run format:check:不重写文件而检查格式化.
出版
软件包发布从GitHub Actions开始,公开发布到npm.
在使用工作流程之前, 添加一个名为 propose 的秘密 NPM_TOKEN 在 GitHub 中:
- 以发布权限创建 npm 访问令牌
@ah-automation.nl/component-lib。 。 。 . - 在 GitHub 中,打开寄存器设置.
- 转到 机密和变量 > 翻译: 行动。 。 。 .
- 添加此令牌为名为寄存器的秘密
NPM_TOKEN。 。 。 .
要发布新版本 :
- 打开 GitHub 仓库 .
- 转到 行动。 。 。 .
- 选择 发布软件包。 。 。 .
- 点击 运行工作流程。 。 。 .
- 选择
patch, (中文(简体) ),minor,或major。 。 。 . - 运行工作流程.
工作流程验证库, 凸起 package.json 财务报告和审定财务报表 package-lock.json创建 vX.Y.Z git 标签, 以 npm publish --access public,然后推动释放承诺并标记回到 main。 。 。 .
库输出
构建输出生成于 dist/数字 :
dist/index.js:无害环境管理图书馆条目。 它每个源文件再导出一个模块(dist/components/…, (中文(简体) ),dist/hooks/…, (中文(简体) ),dist/lib/…)),所以消费者捆绑商只包括组件一个应用程序的进口.dist/index.d.ts: 导出类型脚本.dist/styles.css:为消费者编译风格.
运行时间 dependencies (recharts, cmdk,.) 不捆绑到 dist/;它们作为进口,并安装在包件旁边. package.json 只标记 CSS 具有副作用,所以未使用的模块是树形的.
消费者使用量
import { Button } from "component-lib";
import "component-lib/styles.css";
export function Example() {
return <Button>Click me</Button>;
}
SidebarNav 在另一个反应工程中
import * as React from "react";
import { Home, FolderKanban, Settings, LogOut } from "lucide-react";
import {
Button,
SidebarNav,
type SidebarNavGroup,
type SidebarNavItem,
} from "component-lib";
import "component-lib/styles.css";
const items: SidebarNavItem[] = [
{ label: "Home", route: "/home", icon: Home, order: 0 },
{ label: "Settings", route: "/settings", icon: Settings, order: 20 },
];
const groups: SidebarNavGroup[] = [
{
id: "projects",
label: "Projects",
icon: FolderKanban,
order: 10,
items: [
{ label: "Overview", route: "/projects", badge: "3" },
{ label: "Active", route: "/projects/active" },
],
},
];
export function AppLayout() {
const [activeRoute, setActiveRoute] = React.useState("/home");
return (
<div className="flex min-h-screen">
<SidebarNav
items={items}
groups={groups}
activeRoute={activeRoute}
defaultCollapsed={false}
onItemClick={(item, event) => {
// remove this preventDefault if you want normal anchor navigation
event.preventDefault();
setActiveRoute(item.route);
}}
logo={
<div className="flex items-center gap-2">
<div className="size-7 rounded-md bg-primary" />
<span className="text-sm font-semibold">My Product</span>
</div>
}
footer={
<Button
variant="outline"
className="w-full justify-start group-data-[collapsible=icon]:justify-center"
>
<LogOut />
<span className="group-data-[collapsible=icon]:hidden">Logout</span>
</Button>
}
/>
<main className="min-w-0 flex-1 p-6">
<h1 className="text-xl font-semibold">Active route: {activeRoute}</h1>
</main>
</div>
);
}
注释:
- 导入
"component-lib/styles.css"一次在应用根. defaultCollapsed设置初始侧边栏状态.onItemClick是可选的。 保留href行为,或截取和途径手动.groups支持使用相撞的单层嵌入路由SidebarGroup节.order支持平面间混合排序items财务报告和审定财务报表groups(平稳回落保留了链接的输入顺序).
在另一个 React 工程中降下标题
import { Fish } from "lucide-react";
import {
DropdownHeader,
type DropdownHeaderGroup,
type DropdownHeaderItem,
} from "@ah-automation.nl/component-lib";
const items: DropdownHeaderItem[] = [
{ label: "Orders", route: "/orders", order: 2 },
{
label: "Refresh",
order: 3,
onClick: (event) => {
event.preventDefault();
refreshData();
},
},
];
const groups: DropdownHeaderGroup[] = [
{
id: "purchase",
label: "Purchase",
order: 1,
items: [
{ label: "Inventory", route: "/inventory" },
{ label: "Add item", route: "/inventory/new" },
],
},
];
export function Navigation() {
return (
<DropdownHeader
items={items}
groups={groups}
activeRoute="/inventory"
logo={<Fish className="size-6" />}
onItemClick={(item, event) => {
if (item.route == null) {
return;
}
event.preventDefault();
window.history.pushState(null, "", item.route);
}}
/>
);
}
该组件使大屏幕上的下放组和内含,
在较小的屏幕上可折叠导航菜单。 通过已翻译的标签和
当耗用应用程序使用客户端路由时会拦截链接点击. 项目
无路径需要 onClick 操作和渲染为按钮.