@datum-cloud/datum-ui (英语)

达通克云反应设计体系和组件库. 搭建在 阴影/ ui, (中文(简体) ), Radix 用户界面,以及 尾风 CSS v4。 。 。 .

安装

npm install @datum-cloud/datum-ui
# or
yarn add @datum-cloud/datum-ui
# or
pnpm add @datum-cloud/datum-ui
# or
bun add @datum-cloud/datum-ui

所需资源

• 反应 19
• 尾风 CSS v 4.0.7+ (v4.2.1+建议)

设置

1. 导入样式

在您的 CSS 文件后添加 datum- ui 样式, 在 Tailwind 后 :

/* app.css */
@import 'tailwindcss';
@import '@datum-cloud/datum-ui/styles';

/* Optional — import only if you use these components */
@import '@datum-cloud/datum-ui/grid';
@import '@datum-cloud/datum-ui/nprogress';

datum-ui 船舶未编译的 CSS 由您的 Tailwind 建筑在单一通道中处理。 样式导入会自动配置 Tailwind 来扫描 datum- ui 的组件, 用于类用 @source,所以公用事业喜欢 bg-primary 财务报告和审定财务报表 text-foreground 工作从盒子.

2. 添加主题提供者

包装您的应用程序 ThemeProvider 用于光/暗/系统主题切换:

import { ThemeProvider } from '@datum-cloud/datum-ui/theme'

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {/* your app */}
    </ThemeProvider>
  )
}

进口

每个组件都有自己的子路径导出. 只导入您需要的 :

import { Button } from '@datum-cloud/datum-ui/button'
import { Dialog } from '@datum-cloud/datum-ui/dialog'
import { Form, FormField, FormInput } from '@datum-cloud/datum-ui/form'

这让你的捆绑小。 一些组件需要额外的依赖性——检查下方组件表,以确定要安装什么.

共享出口

分类出口

一些具有共同的重依赖性的组件被分组在一个子路径下:

构成部分

基本组件

以"达通"为样式的"Shadcn"/"Radix"原始人周围的薄薄包裹. Radix UI 依赖性被捆绑 这些部件不需要额外安装.

特性组件

复杂,完全定制的组件,具有显著的业务逻辑.

每个组件的可树摇动子路径是其目录的kebab-case,例如. @datum-cloud/datum-ui/multi-select, (中文(简体) ), @datum-cloud/datum-ui/app-navigation, (中文(简体) ), @datum-cloud/datum-ui/grouped-table拾取者的家庭生活在 @datum-cloud/datum-ui/picker (见 分类出口) (中文(简体) ).

用法实例

有远见

import { Avatar, AvatarImage, AvatarFallback } from '@datum-cloud/datum-ui/avatar'

// With image and fallback
<Avatar>
  <AvatarImage src="https://example.com/avatar.jpg" alt="User Name" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>

// Custom size
<Avatar className="size-16">
  <AvatarImage src="https://example.com/avatar.jpg" alt="User Name" />
  <AvatarFallback className="text-lg">UN</AvatarFallback>
</Avatar>

// Fallback only (no image)
<Avatar>
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

按钮

import { Button } from '@datum-cloud/datum-ui/button'

// Variants: type × theme
<Button type="primary" theme="solid">Save</Button>
<Button type="danger" theme="outline">Delete</Button>
<Button type="secondary" theme="ghost">Cancel</Button>

类型

import { Title, Text, Paragraph, Code } from '@datum-cloud/datum-ui/typography'

<Title level={1}>Page Title</Title>
<Title level={3} color="primary">Section</Title>
<Text size="sm" color="secondary">Subtitle text</Text>
<Paragraph>Body paragraph with default styling.</Paragraph>
<Code copyable>npm install @datum-cloud/datum-ui</Code>

带有验证的表格

形式系统采用可插接适配器模式. 用适配器包装您的应用程序, 然后使用 Form.* 常规组件 :

import { Form } from '@datum-cloud/datum-ui/form'
import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
// or: import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  role: z.enum(['admin', 'user']),
})

// Wrap your app once with an adapter
function App() {
  return (
    <ConformAdapter>
      <MyForm />
    </ConformAdapter>
  )
}

// Form code is identical regardless of adapter
function MyForm() {
  return (
    <Form.Root schema={schema} onSubmit={handleSubmit}>
      <Form.Field name="name" label="Name" required>
        <Form.Input />
      </Form.Field>
      <Form.Field name="role" label="Role" required>
        <Form.Select placeholder="Select a role">
          <Form.SelectItem value="admin">Admin</Form.SelectItem>
          <Form.SelectItem value="user">User</Form.SelectItem>
        </Form.Select>
      </Form.Field>
      <Form.Submit>Save</Form.Submit>
    </Form.Root>
  )
}

地图

import {
  Map, MapTileLayer, MapMarker, MapPopup, MapZoomControl,
} from '@datum-cloud/datum-ui/map'

<div className="h-[500px] w-full">
  <Map center={[51.505, -0.09]} zoom={13}>
    <MapTileLayer />
    <MapZoomControl position="topright" />
    <MapMarker position={[51.505, -0.09]}>
      <MapPopup>Hello from London!</MapPopup>
    </MapMarker>
  </Map>
</div>

对话框

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription,
} from '@datum-cloud/datum-ui/dialog'

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm</DialogTitle>
      <DialogDescription>Are you sure?</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

土司

import { ThemeProvider } from '@datum-cloud/datum-ui/theme'
import { Toaster, useToast } from '@datum-cloud/datum-ui/toast'

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <Toaster />
      <MyComponent />
    </ThemeProvider>
  )
}

function MyComponent() {
  const { toast } = useToast()
  return <Button onClick={() => toast.success('Saved!')}>Save</Button>
}

任务队列

import {
  TaskQueueProvider, TaskQueueDropdown, useTaskQueue,
} from '@datum-cloud/datum-ui/task-queue'

<TaskQueueProvider config={{ concurrency: 3 }}>
  <TaskQueueDropdown />
  <MyComponent />
</TaskQueueProvider>

function MyComponent() {
  const { enqueue } = useTaskQueue()

  const handleUpload = () => {
    enqueue({
      id: 'upload-1',
      label: 'Uploading file.pdf',
      run: async () => { /* upload logic */ },
    })
  }

  return <Button onClick={handleUpload}>Upload</Button>
}

他们

ThemeProvider 支持光、暗和系统主题模式:

import { ThemeProvider } from '@datum-cloud/datum-ui/theme'

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

访问当前主题 :

import { useTheme } from '@datum-cloud/datum-ui/theme'

const { theme, setTheme, resolvedTheme } = useTheme()

同伴依赖关系

需求

这些依赖关系是: 所需经费 来使用 datum-ui :

npm install react react-dom tailwindcss lucide-react

• 反应 19+ 财务报告和审定财务报表 反应 DOM 19+: 框架要求
• 尾风 CSS v4 (v4.0.7+,v4.2.1+建议):用于造型
• 清晰的反应: 整个组件使用的图标库

所有 Radix UI 软件包都被捆绑 -你不需要单独安装.

可选( 组件- 特定)

许多组件需要额外的包. 只安装您使用的东西 :

替换 npm install 与 yarn add, (中文(简体) ), pnpm add,或 bun add 给您的包管理器.

# Forms — Conform adapter
npm install @conform-to/react @conform-to/zod zod

# Forms — React Hook Form adapter (alternative)
npm install react-hook-form @hookform/resolvers zod

# Maps (Map, MapMarker, MapPopup, etc.)
npm install leaflet react-leaflet leaflet-draw leaflet.fullscreen leaflet.markercluster react-leaflet-markercluster

# Charts (ChartContainer, ChartTooltip, etc.)
npm install recharts

# Code editor (CodeEditor, CodeEditorTabs)
npm install @monaco-editor/react monaco-editor

# Date pickers (Calendar, CalendarDatePicker, TimeRangePicker)
npm install react-day-picker date-fns date-fns-tz

# File upload (Dropzone)
npm install react-dropzone

# Number formatting (InputNumber)
npm install react-number-format

# Stepper (multi-step flows)
npm install @stepperize/react

# Toast notifications (Toast, Toaster)
npm install sonner

# Progress bar (NProgress)
npm install nprogress

# Data grid (Grid - virtualized tables)
npm install @tanstack/react-virtual

# Data Table (DataTable component)
npm install @tanstack/react-table

# Data Table with URL state (optional)
npm install nuqs

# Animations (motion components)
npm install motion

窗体适配器

形式系统支持可插接适配器. 选择一个并包装您的应用程序 :

这个 Form.* 组件 API 与两个适配器相同。 切换适配器只需更改根提供器 -- 不需要更改格式代码 .

见 读取格式 详细文件.

技术堆栈

• 反应 19 有服务器组件支持
• 尾风 CSS v4 (v4.0.7+)用于造型——由消费者建造处理的未压缩CSS
• Radix 用户界面 为方便原始人
• 简历 以变式为基础的构件API(类-变相授权)
• 类型脚本 ——按出口类型完全输入

链接

• GitHub 图像
• 无

许可证

麻省理工学院

可选: Canela 字体

Datum- branded surfaces 可以选择 Canela 文本用于 font-title 尾风工具 :

import '@datum-cloud/datum-ui/styles/canela'

不导入此文件的消费者使用默认系统字体堆栈在符文中声明——没有视觉降解.