@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/empty/stories.tsx

@@ -0,0 +1,278 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from './index';
+import { Button } from '@/components/button';
+import { Alert, AlertDescription } from '@/components/alert';
+import { InfoIcon } from 'lucide-react';
+
+const meta: Meta<typeof Empty> = {
+  title: '数据展示 · Data Display/Empty 空状态',
+  component: Empty,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="flex min-h-96 w-full items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/* -------------------------------------------------------------------------------------------------
+ * 页面级横向布局 — 大插图在左、标题/描述/按钮在右
+ * -----------------------------------------------------------------------------------------------*/
+
+const PageActions = () => (
+  <div className="flex gap-3">
+    <Button size="lg">返回上一级</Button>
+    <Button size="lg" variant="outline">
+      其他操作
+    </Button>
+  </div>
+);
+
+/** 403 — 没有访问权限。 */
+export const Status403: Story = {
+  name: '403 没有访问权限',
+  render: () => (
+    <Empty layout="horizontal" status="403" extra={<PageActions />} />
+  ),
+};
+
+/** 404 — 页面不存在。 */
+export const Status404: Story = {
+  name: '404 页面不存在',
+  render: () => (
+    <Empty layout="horizontal" status="404" extra={<PageActions />} />
+  ),
+};
+
+/** 500 — 服务器错误。 */
+export const Status500: Story = {
+  name: '500 服务器错误',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="500"
+      extra={
+        <div className="flex gap-3">
+          <Button size="lg">重试</Button>
+          <Button size="lg" variant="outline">
+            联系客服
+          </Button>
+        </div>
+      }
+    />
+  ),
+};
+
+/** 搜索结果为空。 */
+export const NoSearch: Story = {
+  name: '搜索结果为空',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="noSearch"
+      extra={
+        <Button size="lg" variant="outline">
+          清除筛选
+        </Button>
+      }
+    />
+  ),
+};
+
+/** 数据为空。 */
+export const NoData: Story = {
+  name: '数据为空',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="noData"
+      extra={<Button size="lg">新建</Button>}
+    />
+  ),
+};
+
+/** 暂无网络。 */
+export const NoNetwork: Story = {
+  name: '暂无网络',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="noNetwork"
+      extra={<Button size="lg">重试</Button>}
+    />
+  ),
+};
+
+/** 浏览器不兼容。 */
+export const BrowserError: Story = {
+  name: '浏览器不兼容',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="browserError"
+      extra={
+        <Button size="lg" variant="outline">
+          了解详情
+        </Button>
+      }
+    />
+  ),
+};
+
+/** 创建成功。 */
+export const CreateSuccess: Story = {
+  name: '创建成功',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="createSuccess"
+      extra={
+        <div className="flex gap-3">
+          <Button size="lg">查看详情</Button>
+          <Button size="lg" variant="outline">
+            继续创建
+          </Button>
+        </div>
+      }
+    />
+  ),
+};
+
+/** 创建失败。 */
+export const CreateError: Story = {
+  name: '创建失败',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="createError"
+      extra={<Button size="lg">重试</Button>}
+    />
+  ),
+};
+
+/** 导入数据。 */
+export const ImportData: Story = {
+  name: '导入数据',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="import"
+      extra={<Button size="lg">上传文件</Button>}
+    />
+  ),
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * 容器内使用 — 竖向、偏小,常见于表格 / 列表 / 卡片内的空态占位
+ * -----------------------------------------------------------------------------------------------*/
+
+/** 容器内使用 — 竖向布局,放在带边框的容器里,适合表格 / 列表无数据时的占位。 */
+export const InContainer: Story = {
+  name: '容器内使用',
+  render: () => (
+    <div className="w-full max-w-2xl rounded-md border border-border bg-card">
+      <Empty status="noData" />
+    </div>
+  ),
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * 带 message / 带图标
+ * -----------------------------------------------------------------------------------------------*/
+
+/** 使用 message 区域 — 在描述与按钮之间内嵌 Alert,补充上下文信息。 */
+export const WithMessage: Story = {
+  name: '使用 message 区域',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      status="404"
+      extra={
+        <div className="flex flex-col gap-4">
+          <Alert>
+            <InfoIcon />
+            <AlertDescription>
+              当前数据包:数据包名称名称数据包名称名称数据包名称名称
+            </AlertDescription>
+          </Alert>
+          <PageActions />
+        </div>
+      }
+    />
+  ),
+};
+
+/** 带图标 — 横向小尺寸,内联状态图标 + 标题/描述/按钮,适合抽屉、对话框 M/L 中的结果反馈。 */
+export const WithIcon: Story = {
+  name: '带图标',
+  render: () => (
+    <Empty
+      layout="horizontal"
+      size="sm"
+      status="success"
+      title="创建成功,标题居左对齐,标题(不含 icon)宽度根据文字内容自适应,超过 400px 后折行"
+      description="描述内容,文案居左对齐,宽度根据文字内容自适应,超出 400px 后折行,此样式适用于页面、抽屉、对话框 M/L 中的结果反馈。文字区域主要用于辅助信息说明,同时如有后续引导操作或者内容区,可在容器底部呈现。"
+      extra={<PageActions />}
+    />
+  ),
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * 辅助:尺寸 / 边框 / 完全组装
+ * -----------------------------------------------------------------------------------------------*/
+
+/** 三档尺寸对照 — sm / default / lg。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Empty size="sm" status="noData" />
+      <Empty size="default" status="noData" />
+      <Empty size="lg" status="noData" />
+    </div>
+  ),
+};
+
+/** 显式 bordered — 卡片态空状态,适合需要明确边界的容器内场景。 */
+export const Bordered: Story = {
+  render: () => (
+    <Empty
+      bordered
+      status="noData"
+      title="暂无数据"
+      description="点击下方按钮新建。"
+      extra={<Button>新建</Button>}
+    />
+  ),
+};
+
+/** 完全组装写法 — 绕过 status 预设,所有内容自定义。 */
+export const Composable: Story = {
+  render: () => (
+    <Empty>
+      <EmptyMedia>
+        <InfoIcon className="size-10 text-info" />
+      </EmptyMedia>
+      <EmptyHeader>
+        <EmptyTitle>自定义标题</EmptyTitle>
+        <EmptyDescription>
+          完全使用复合组件组装,适合需要精细控制的场景。
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button>开始</Button>
+      </EmptyContent>
+    </Empty>
+  ),
+};

package/src/components/field/index.tsx

@@ -0,0 +1,374 @@
+/**
+ * 表单字段 Field
+ *
+ * 表单控件的包装器，提供标签、描述和错误展示区域。
+ *
+ * @when
+ * - 表单控件的标准包装（label + input + error）
+ * - 表单验证错误展示
+ * - 必填项 / 可选项标记
+ */
+'use client';
+
+import { useMemo } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/label';
+import { Separator } from '@/components/separator';
+
+/**
+ * inset 布局下去除子控件自身边框/背景/focus ring 的 Tailwind 子选择器集。
+ * 参考 FilterBar outline 模式（ADR 0037 v2.3），仅适用带边框输入控件。
+ */
+const INSET_INNER_RESET = [
+  // Input
+  '[&_[data-slot=input]]:rounded-none',
+  '[&_[data-slot=input]]:!border-0',
+  '[&_[data-slot=input]]:bg-transparent',
+  '[&_[data-slot=input]]:!shadow-none',
+  '[&_[data-slot=input]]:!ring-0',
+  '[&_[data-slot=input]]:h-full',
+  // Textarea
+  '[&_[data-slot=textarea]]:rounded-none',
+  '[&_[data-slot=textarea]]:!border-0',
+  '[&_[data-slot=textarea]]:bg-transparent',
+  '[&_[data-slot=textarea]]:!shadow-none',
+  '[&_[data-slot=textarea]]:!ring-0',
+  // Select
+  '[&_[data-slot=select-trigger]]:rounded-none',
+  '[&_[data-slot=select-trigger]]:!border-0',
+  '[&_[data-slot=select-trigger]]:bg-transparent',
+  '[&_[data-slot=select-trigger]]:!shadow-none',
+  '[&_[data-slot=select-trigger]]:!ring-0',
+  '[&_[data-slot=select-trigger]]:h-full',
+  '[&_[data-slot=select-trigger]]:flex-1',
+  // InputNumber
+  '[&_[data-slot=input-number]]:rounded-none',
+  '[&_[data-slot=input-number]]:!border-0',
+  '[&_[data-slot=input-number]]:bg-transparent',
+  '[&_[data-slot=input-number]]:!shadow-none',
+  '[&_[data-slot=input-number]]:!ring-0',
+  '[&_[data-slot=input-number]]:h-full',
+  '[&_[data-slot=input-number]]:flex-1',
+  '[&_[data-slot=input-number]_button]:!border-0',
+  // InputIP
+  '[&_[data-slot=input-ip]]:rounded-none',
+  '[&_[data-slot=input-ip]]:!border-0',
+  '[&_[data-slot=input-ip]]:bg-transparent',
+  '[&_[data-slot=input-ip]]:!shadow-none',
+  '[&_[data-slot=input-ip]]:!ring-0',
+  '[&_[data-slot=input-ip]]:h-full',
+  '[&_[data-slot=input-ip]]:flex-1',
+  // InputGroup wrapper
+  '[&_[data-slot=input-group]]:rounded-none',
+  '[&_[data-slot=input-group]]:!border-0',
+  '[&_[data-slot=input-group]]:bg-transparent',
+  '[&_[data-slot=input-group]]:!shadow-none',
+  '[&_[data-slot=input-group]]:!ring-0',
+  '[&_[data-slot=input-group]]:h-full',
+  '[&_[data-slot=input-group]]:flex-1',
+  // DatePicker
+  '[&_[data-slot=date-picker]]:rounded-none',
+  '[&_[data-slot=date-picker]]:!border-0',
+  '[&_[data-slot=date-picker]]:bg-transparent',
+  '[&_[data-slot=date-picker]]:!shadow-none',
+  '[&_[data-slot=date-picker]]:!ring-0',
+  '[&_[data-slot=date-picker]]:h-full',
+  '[&_[data-slot=date-picker]]:flex-1',
+  // DateRangePicker
+  '[&_[data-slot=date-range-picker]]:rounded-none',
+  '[&_[data-slot=date-range-picker]]:!border-0',
+  '[&_[data-slot=date-range-picker]]:bg-transparent',
+  '[&_[data-slot=date-range-picker]]:!shadow-none',
+  '[&_[data-slot=date-range-picker]]:!ring-0',
+  '[&_[data-slot=date-range-picker]]:h-full',
+  '[&_[data-slot=date-range-picker]]:flex-1',
+  // TimePicker
+  '[&_[data-slot=time-picker]]:rounded-none',
+  '[&_[data-slot=time-picker]]:!border-0',
+  '[&_[data-slot=time-picker]]:bg-transparent',
+  '[&_[data-slot=time-picker]]:!shadow-none',
+  '[&_[data-slot=time-picker]]:!ring-0',
+  '[&_[data-slot=time-picker]]:h-full',
+  '[&_[data-slot=time-picker]]:flex-1',
+  // TimeRangePicker
+  '[&_[data-slot=time-range-picker]]:rounded-none',
+  '[&_[data-slot=time-range-picker]]:!border-0',
+  '[&_[data-slot=time-range-picker]]:bg-transparent',
+  '[&_[data-slot=time-range-picker]]:!shadow-none',
+  '[&_[data-slot=time-range-picker]]:!ring-0',
+  '[&_[data-slot=time-range-picker]]:h-full',
+  '[&_[data-slot=time-range-picker]]:flex-1',
+  // TreeSelect
+  '[&_[data-slot=tree-select]]:w-full',
+  '[&_[data-slot=tree-select]>button]:rounded-none',
+  '[&_[data-slot=tree-select]>button]:!border-0',
+  '[&_[data-slot=tree-select]>button]:bg-transparent',
+  '[&_[data-slot=tree-select]>button]:!shadow-none',
+  '[&_[data-slot=tree-select]>button]:!ring-0',
+  '[&_[data-slot=tree-select]>button]:h-full',
+  '[&_[data-slot=tree-select]>button]:w-full',
+  '[&_[data-slot=tree-select]>button]:min-w-0',
+  // CascaderSelect
+  '[&_[data-slot=cascader-select]]:w-full',
+  '[&_[data-slot=cascader-select]>button]:rounded-none',
+  '[&_[data-slot=cascader-select]>button]:!border-0',
+  '[&_[data-slot=cascader-select]>button]:bg-transparent',
+  '[&_[data-slot=cascader-select]>button]:!shadow-none',
+  '[&_[data-slot=cascader-select]>button]:!ring-0',
+  '[&_[data-slot=cascader-select]>button]:h-full',
+  '[&_[data-slot=cascader-select]>button]:w-full',
+  '[&_[data-slot=cascader-select]>button]:min-w-0',
+].join(' ');
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-5 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-5 [&>[data-slot=field-set]+[data-slot=field-set]]:mt-3 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  'group/field flex w-full data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col gap-1 *:w-full [&>.sr-only]:w-auto',
+        responsive:
+          'flex-col gap-1 *:w-full @[30rem]/field-group:grid @[30rem]/field-group:grid-cols-12 @[30rem]/field-group:gap-x-4 @[30rem]/field-group:gap-y-1 @[30rem]/field-group:items-start @[30rem]/field-group:[&>[data-slot=field-label]]:col-span-2 @[30rem]/field-group:[&>:not([data-slot=field-label])]:col-span-8 @[30rem]/field-group:[&>:not([data-slot=field-label])]:col-start-3 [&>.sr-only]:w-auto',
+        inset: 'flex-col gap-1',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+);
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * inset 模式的内部包装：共享边框容器，包含 FieldLabel + 控件。
+ * 在 inset 模式下由 FieldInsetBox 接管 label+input 的边框展示。
+ */
+function FieldInsetBox({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-inset-box"
+      className={cn(
+        'flex h-8 w-full items-center rounded-md border border-input bg-card',
+        'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+        'group-data-[invalid=true]/field:!border-destructive group-data-[invalid=true]/field:!shadow-none',
+        'group-data-[invalid=true]/field:focus-within:!border-destructive group-data-[invalid=true]/field:focus-within:ring-destructive/20',
+        INSET_INNER_RESET,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        'group/field-content flex flex-1 flex-col gap-1 leading-snug',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label flex w-fit gap-1 leading-8 group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        'group-data-[orientation=inset]/field:h-full group-data-[orientation=inset]/field:shrink-0 group-data-[orientation=inset]/field:items-center group-data-[orientation=inset]/field:pl-3 group-data-[orientation=inset]/field:pr-2 group-data-[orientation=inset]/field:leading-normal group-data-[orientation=inset]/field:text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-1 text-xs font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-left text-xs leading-normal font-normal text-muted-foreground [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a]:text-primary [&>a:hover]:text-primary/80',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2',
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-xs font-normal text-destructive -mt-1', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldInsetBox,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};