@ 精心建造/ saas- kit

一个安装用于精心建造的SaaS组件、产品表面和帮助者.

精心建造SaaS Kit是存在的,所以每一个新的B2B产品都不必从零开始重塑相同的表格,表格,过滤器,工作表,设置,文件,通知,日历和仪表板模式.

如果您想要管理 npm 导入和共享应用程序的升级, 请使用此软件包 。 使用 @carefully-built/cli 当您想要从可编辑组件源中弹出到应用程序时.

组件预览

安装

bun add @carefully-built/saas-kit

import { Button, SmartTable, TableToolbar, ResponsiveSheet } from "@carefully-built/saas-kit";

套件包括模块化的小心构建套件作为依赖性. 您的应用程序仍应安装它实际使用的框架对等依赖, 如 React, Next.js, Convex, WorkOS, Radix原始语, React Hook Form, TipTap, FullCalendar, 以及 Recharts.

软件包模块

从根部导入共享的UI原始物,或者从子路径导入一个产品区域.

子路径导入示例 :

import { DashboardPageLayout } from "@carefully-built/saas-kit/app-shell";
import { AuthLoginPage } from "@carefully-built/saas-kit/auth-pages/pages";
import { createWorkOSWidgetTokenResponse } from "@carefully-built/saas-kit/server";
import { createSuperAdminPage } from "@carefully-built/saas-kit/next";

UI 完整登记

每个公用UI模块导出 @carefully-built/ui 可通过 @carefully-built/saas-kit 和通过CLI登记.

一些条目从一个模块中导出多个相关的组件,钩子,帮助器,以及类型. TypeScript自动完成将在安装工具包后显示完整的API.

使用 CLI 可编辑源

当一个组件成为可以直接编辑的本地代码时使用 CLI .

bunx @carefully-built/cli list
bunx @carefully-built/cli add button
bunx @carefully-built/cli add smart-table
bunx @carefully-built/cli add responsive-sheet

CLI 复制组件源及其本地依赖性关闭到您的应用程序中 。 它读取了常见的影子项目公约,例如: components.json 别名和 tsconfig.json 路径.

导入 vs 弹出

从 @carefully-built/saas-kit 当:

• 您需要软件包更新和错误修正
• 组件应保持共享应用程序
• 特定产品的差异可以通过道具,槽来处理, className,或 classes

使用 @carefully-built/cli add 当:

• 组件需要本地产品行为
• 设计需要偏离共享软件包
• 您想要拥有并编辑消费应用程序中的每行
• 组件应当遵循应用程序的正常源控工作流程

复制和本地化

每一个用户界面字符串仍然是标签/配置道具. 默认跟随风筝语言:英语没有提供者,意大利语有 KitLocaleProvider数字 :

import { KitLocaleProvider } from '@carefully-built/saas-kit';

<KitLocaleProvider locale="it">{children}</KitLocaleProvider>;

迄今本地化: ui (重叠、表格工具栏、可搜索选择、空和出错状态、文件投放区、用户拾取器), forms 字段,则, auth-pages (页数、表格、社会按钮、组织选择、法律同意、验证) search 命令调色板。 服务器侧认证动作消息保留在内 config.messages。 。 。 .