这是什么

React UI组件是可重复使用的组件库,用于使用Club Med品牌指南构建网络应用程序.

有用链接

• Figma 三叉戟 UI
• Jira董事会
• 故事书稳定版本
• 故事书版
• 文档

所需资源

• 反应 18
• 尾风 4

安装

npm install --save @clubmed/trident-icons @clubmed/trident-ui react react-dom
npm install --save-dev tailwindcss @tailwindcss/vite

yarn add @clubmed/trident-icons @clubmed/trident-ui react react-dom
yarn add -D tailwindcss @tailwindcss/vite

pnpm add @clubmed/trident-icons @clubmed/trident-ui react react-dom
pnpm add -D tailwindcss @tailwindcss/vite

使用 vite 可以安装 @tailwindcss/vite 而不是使用邮箱。 见 尾风花纹文档

配置

添加 @tailwindcss/vite 给您的 vite.config.ts 插件 :

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

然后,在你的风格 index.css 文件 :

@import '@clubmed/trident-ui/style.css';
@source '../node_modules/@clubmed/trident-ui/ui/**/*.js'; /* Important, this line is required to make Tailwind CSS work with Trident UI components */
@source '../node_modules/@clubmed/trident-ui/chunks/**/*.js'; /* Important, this line is required to make Tailwind CSS work with Trident UI components */

@source 必须是相对于导入文件的文件,并且必须指向 ui 图书馆目录。 这需要让Tailwind CSS与三叉戟UI组件配合,因为它需要扫描源文件来生成正确的样式.

尾风合并配置

三叉戟 UI 使用自定义运出的设计符 text-* 水电费(text-b5, (中文(简体) ), text-h2等),其行为类似字体大小的帮助者. 当消费者依赖时 tailwind-merge 要组成分类,这些符号必须登记为印刷工具;否则 tailwind-merge 可能错误地把它们当作文本颜色类, 并丢弃有效的样式( 例如 ) twMerge('text-b5', 'text-white') 将删除 text-white) (中文(简体) ).

为了获得正确的行为,你可以重新使用我们暴露的帮助者:

import { twMerge } from '@clubmed/trident-ui/helpers/twMerge';

// twMerge('text-b5', 'text-white') -> 'text-b5 text-white'

如果您需要自定义 tailwind-merge 在您的应用中,请用我们的打字符扩展:

import { extendTailwindMerge } from 'tailwind-merge';

export const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      text: ['b6', 'b5', 'b4', 'b3', 'b2', 'b1', 'b0', 'h5', 'h4', 'h3', 'h2', 'h1', 'h0'],
    },
  },
});

两种方法都确保三叉戟UI类安全地与您的覆盖合并.

使用量

您可以直接从是目录导入任何组件 。 例如,按钮组件可以导入,并且 使用情况如下:

import { useState } from 'react';
import { Button } from '@clubmed/trident-ui/ui/buttons/Button';

export function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Button onClick={() => setCount((count) => count + 1)}>count is {count}</Button>
    </>
  );
}

库配置

您可以使用 TridentUIConfigProvider 配置三叉戟 UI 库中的某些选项 :

import './index.css';
import App from './App';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { TridentUIConfigProvider } from '@clubmed/trident-ui';
import { IconsProvider } from '@clubmed/trident-ui/atoms/Icons/contexts/IconsContext.js';
import Actions from '@clubmed/trident-ui/atoms/Icons/svg/Actions';

const baseName = (window as any).basename || '/';

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <TridentUIConfigProvider
      value={{
        locale: 'fr-FR',
      }}
    >
      <IconsProvider icons={[Actions]}>
        <App />
      </IconsProvider>
    </TridentUIConfigProvider>
  </React.StrictMode>,
);

选项

• locale - 用于组件的地块。 默认为 fr-FR。 。 。 .

图标配置

三叉戟 UI 提供了加载图标的新方法. 你可以用这个 IconProvider 从特定组中装入图标的组件. 目前,有两个图标提供者:

• SvgIcon Provider:使用懒惰加载的SVG来显示图标.
• SvgUseicon Provider:使用本地Svg使用属性来加载并显示图标.

对于每个提供者,您都有按组名拆分的图标子集:

• 行动
• 活 动
• 品牌
• 科维德
• 粮食
• 快乐的照顾
• 地点
• 度假地 * (仅供 SVG 使用)
• 会议室
• 服务
• 社会
• 运输
• 公用事业

默认情况下, 没有设置图标提供者 。 您必须在代码中导入子集图标如下 :

Svg 模式 :

import Actions from '@clubmed/trident-ui/atoms/Icons/svg/Actions'; // load only the Actions subset using SVG mode
import { Icon } from '@clubmed/trident-ui/atoms/Icons/Icon';

function App() {
  return (
    <IconsProvider icons={[Actions]}>
      <Icon name="ArrowDefaultLeft" />
    </IconsProvider>
  );
}

您可以混合使用 SVG 和 SVG 使用模式 :

import Actions from '@clubmed/trident-ui/atoms/Icons/svg-use/Actions'; // load the Actions subset
import Brand from '@clubmed/trident-ui/Icons/svg/Brand';

function App() {
  return (
    <IconsProvider icons={[Actions, Brand]}>
      <Icon name="ArrowDefaultLeft" />
      <Icon name="ClubMed" />
    </IconsProvider>
  );
}

在这种情况下,图标组件会自动使用相应的图标Resolver来加载并显示图标.

注册自定义图标

三叉戟 UI 提供功能来注册任何外部 Svg 图标而无需重新开发 a 自定义图标组件。 刚刚使用 resolver 从 SvgIconResolver 或者说 SvgUseIconResolver 添加您的新图标 :

import { resolver } from '@/atoms/Icons/svg/SvgIconResolver';

const CustomIcons = resolver([
  {
    name: 'MyCustomIcon',
    group: 'custom',
    element: lazy(() => import('./MyCustomIcon.svg?react')),
    // viewBox: '0 0 30 30', // default '0 0 30 30'
    // aspectRatio: 1, // default '1'
    // orientation: 'left' // apply rotation to the icon
  },
]);

function App() {
  return (
    <IconsProvider icons={[CustomIcons]}>
      <Icon name="MyCustomIcon" />
    </IconsProvider>
  );
}

从 v1 迁移到 v2

1. 在开始迁移前更新三叉戟UI的最新v1发布.
2. 在Button v2和Card v2上移动您的代码基础.
3. 替换包含任何导入路径 atoms 或者说 molecules 与 ui 路径段.
4. 路径中的不行为现在进入了小范围。 (例如: molecules/Buttons/Button - > (中文) ui/buttons/button) (中文(简体) ).
5. 直接从 @clubmed/trident-icons。 。 。 .
6. 将格式调用更新到 v2 统一签名 : onChange(event, value)。 。 。 .
   • v1 模式类 onChange={(name, value) => ...} 必须是 onChange={(event, value) => ...}。 。 。 .
   • 当你仍然需要字段名称时,请从 event.currentTarget.name。 。 。 .
   • 对于类似复选框的组件,将直接事件替换为 (单位:千美元)event.target.checked)与第二个论证(value) (中文(简体) ).

此时,请检查您是否没有在路径和组件上出现任何问题,然后移动到下一步.

您可以更新到 Tailwind 4 和 三叉戟 UI v2:

• 尾风4不再读 tailwind.config.ts 或由 三叉戟 UI 运出预设; 将配置重命名为 tailwind.config.legacy.(js|ts)。 。 。 .
• 采用 Tailwind 4 语法更新( 例如) @layer, (中文(简体) ), @utility) (中文(简体) ).

将样式添加到您的 index.css 文件 :

@import '@clubmed/trident-ui/style.css';

狦 custom.css 文件使用三叉戟 UI 类或变量,并在最上方添加此内容 :

@reference "@clubmed/trident-ui/style.css";

.button {
}

应足够:)

了解问题

目前,由于 SVG 源代码不正确,一些字体模式的图标无法正确渲染 清理干净了.

游戏配置

如果您正在使用 Jest, 您可以在您的配置中添加以下 jest.config.js 文件 :

{
  moduleNameMapper: {
    "^@clubmed/trident-ui/(.*)$": dirname(require.resolve("@clubmed/trident-ui")) + "$1"
  },
  // add also this line can solve issue:
  transformIgnorePatterns: ["/node_modules/(?!@clubmed/trident-ui)/.*"]
}

无障碍测试

要测试访问权限错误( 目前在库中负债) , 您需要激活选项 parameters.a11y.test 改为 error 并进行测试:

npm run test

捐款

请阅读 捐款额 详细介绍我们的行为守则和向我们提交拉动请求的程序.

许可证

版权 2024 - 今天 QQ Club Med

允许以源和二进制形式进行再分配和使用,无论是否修改,但必须符合下列条件:

1. 源代码再分配必须保留上述版权通知,本条件清单和以下免责声明.

2. 以二进制形式的再分配必须转载上述版权通知,本条件清单以及随分发而提供的文件和(或)其他材料中的下列免责声明.

3. 未经具体事先书面许可,不得使用版权持有人的姓名或撰稿人的姓名认可或推广从该软件衍生出的产品.

这种软件是由治安维持者和贡献者提供的,“安全”和任何扩张或军事攻击,包括但不限制为某一特定目的制造的危机和损失。 任何直接、直接、意外、特别、紧急、紧急、或后果的转让(包括、但不限制、采购非物质货物或服务;使用、数据、或买卖的损耗;或商业干涉),无论以何种方式造成、使用、限制、限制或限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用或限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用或限制使用、限制使用、限制使用、限制使用、限制使用、限制使用或限制使用、限制使用、限制使用、限制、限制使用或限制使用、限制使用、限制使用、限制、限制使用、限制使用或限制使用、限制使用、限制使用、限制使用、限制、限制使用、限制使用、限制或限制使用、限制使用、限制使用、限制、限制使用、限制、限制、限制使用、限制、限制、限制使用、限制或限制使用、限制使用、限制.