EWS 全球设计系统

EWS(Erco Web Solutions)应用的综合设计系统,提供可再使用的React组件,图标和公用设施.

特征

• 🎨 一致设计: 所有 EWS 应用程序的统一设计语言
• 📦 国家防范机制一揽子计划: 在任何反应项目中易于安装和使用
• 📚 故事书: 交互式组件文档和测试
• 🎯 类型脚本: 带有类型定义的完整类型脚本支持
• 🎨 可自定义: 弹性主题和型式选项
• ♿ 可访问: 采用无障碍最佳做法.

安装

pnpm add @ews-admin/global-design-system

快速启动

import { Button, Input, ArrowRight } from "@ews-admin/global-design-system";

function App() {
  return (
    <div>
      <Button variant="ews-primary" rightIcon={<ArrowRight />}>
        Click me
      </Button>
      <Input label="Email" placeholder="Enter your email" type="email" />
    </div>
  );
}

构成部分

按钮

具有多变和大小的多变按钮组件.

<Button variant="ews-primary" size="md" loading={false}>
  Button Text
</Button>

道具 :

• variant: “ 初级 ” “ 二级 ” “ 成功 ” “ 警告 ” “ 错误 ” “ 线外 ”
• size:'s''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
• loading:布尔
• fullWidth:布尔
• leftIcon: 反应节点
• rightIcon: 反应节点

投入

具有验证状态和图标的灵活输入组件.

<Input
  label="Email"
  placeholder="Enter your email"
  variant="default"
  helperText="We'll never share your email"
/>

道具 :

• variant: 'default' qq 'error' qq '成功'
• size:'s''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
• label字符串
• helperText字符串
• error字符串
• leftIcon: 反应节点
• rightIcon: 反应节点

图标

设计系统包括一套常用图标:

import { ArrowRight, Check, Search } from '@ews/global-design-system';

<ArrowRight size="md" color="#2563eb" />
<Check size="lg" />
<Search size="sm" />

公用事业

类名工具

import { cn } from "@ews-admin/global-design-system";

const className = cn("px-4 py-2", "bg-blue-500", "text-white");

格式化公用事业

import { formatCurrency, formatDate } from "@ews-admin/global-design-system";

formatCurrency(1234.56); // "$1,234.56"
formatDate(new Date()); // "December 7, 2023"

ID 生成

import { generateId } from "@ews/global-design-system";

const id = generateId("prefix"); // "prefix-abc123def"

发展

先决条件

• 节点.js 16+
• pnpm( 建议) 或 npm

设置

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build the package
pnpm build

# Run linting
pnpm lint

# Run type checking
pnpm type-check

故事书

设计系统包括用于组件文件和测试的综合故事书:

pnpm storybook

访问 http://localhost:6006 阅读故事书.

出版

出版的前提条件

1. 登录到 npm :

   npm login
   

2. 创建 @ews-admin 组织 (如果尚未创建):

   • 转到 : https://www.npmjs.com/org/create (中文(简体) )
   • 组织名称 : ews-admin
   • 选择 免费 计划

出版步骤

1. 构建软件包 :

   pnpm build
   

2. 发布到 npm :

   pnpm publish:public
   

3. 校验出版物 :

   pnpm view
   

版本管理

• 补丁版本 (错误修正) : pnpm publish:patch
• 次要版本 (新特点): pnpm publish:minor
• 主要版本 (破碎变化): pnpm publish:major

附加脚本

• 清理构建目录数字 : pnpm clean
• 从零开始重建数字 : pnpm rebuild
• 仅版本 (不出版):
  • pnpm version:patch
  • pnpm version:minor
  • pnpm version:major

项目结构

src/
├── components/          # React components
│   ├── Button/
│   └── Input/
├── icons/              # Icon components
│   ├── Icon.tsx
│   ├── ArrowRight.tsx
│   ├── Check.tsx
│   └── Search.tsx
├── utils/              # Utility functions
│   └── index.ts
├── styles/             # Global styles
│   └── index.css
└── index.ts           # Main export file

stories/               # Storybook stories
├── Components/
├── Icons/
└── Utils/

主办于此

看我们的主站台 这里

捐款

1. 叉子存储器
2. 创建特性分支
3. 做你的改变
4. 为新组件添加故事
5. 运行测试和起伏
6. 提交拉动请求

许可证

麻省理工学院许可证 - 详情见LICENSE文件.

支助

如需提问和支持,请与EWS开发团队联系.