@flipdish/ui-library

Flipdish 产品的再设计组件库 尾风 CSS v4, (中文(简体) ), 无标题 UI 原始人,还有 反射 Aria 组件。今天,Web-first,与回放土著(通过 原生窗口支持每个部分的推广.

内部设计体系,公开发布. 这个软件包是为Flipdish的品牌和工具而构建和调制的. 它在公用npm注册号上,这样它就可以被分享到Flipdish微前端和app上——它不是作为通用的UI工具包.

Flipdish设计系统的一部分:

安装

pnpm add @flipdish/ui-library @flipdish/ui-tokens @flipdish/ui-icons

关于完整的设置行走(Vite 配置、 CSS 条目、 提供者、 第一个组件),见 开始安装。 。 。 .

同伴依赖关系

共享——要求在每个平台:

网络 :

原生反应 :

lightningcss 必须被钉住 1.30.1。 。 。 . 本地窗口 v5 + react-native-css 可以击出 failed to deserialize 版本错误 >=1.30.2 (见《大会正式记录,第五十八届会议,补编第6号》) 本地窗口安装指南) (中文(简体) ). 这只会影响  应用软件的安装 —— 图书馆自己的版本针不能向消费者传播 —— 所以把这个添加到您的应用软件中 package.json数字 :

{ "overrides": { "lightningcss": "1.30.1" } }

(单位:千美元)pnpm 工程: 在顶层嵌入 "pnpm" 键代替 - { "pnpm": { "overrides": { "lightningcss": "1.30.1" } } }. ) (中文(简体) )

具体组成部分的同行依赖性

少数部分由较大的第三方图书馆作为后盾 选项 同行——导入 Button 永远不要在图表或丰富文本堆栈中拉出。 只为您实际使用的组件安装对等点; 缺失的对等点会导致构建/运行时间出错 .

尾风设置

从您的 CSS 条目导入库共享运行时间 在这个精确的层顺序中数字 :

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import '@flipdish/ui-tokens/css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import '@flipdish/ui-library/styles';
@import 'tailwindcss/utilities.css' layer(utilities);

原生反应

组成部分是: 网络首选,并选择每个组件。在React上有一个组件 只有在有 .native.tsx 执行;其余仅限网页,而且 故意无法从 RN 应用程序中解析 .

用于全博览会的走通(Metro Cfig, 土著Wind CSS条目, TypeScript, 第一部) 见 开始 —— 安装( 反应) (原始内容)。 。 。 . 下文概述要点.

可在今天的土著反应中找到: Avatar, (中文(简体) ), Button,加上 cx, (中文(简体) ), testIdUtils 财务报告和审定财务报表 isReactComponent 公用事业。 故事书是现场参考:每个组件的docs页面 携带一个 原生反应 部分详细列出平台支持的道具,以及 页:1 平台 在工具栏中切换将它的故事与 React 原生重现 执行.

各个平台的导入路径相同——地铁通过 react-native 出口条件数字 :

// Resolves to the web build under Vite/webpack, the native build under Metro.
import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';

react-native >= 0.81 是有负载的, 不只是一个版本的地板。 每一个公众的子路径 此包通过通配符曝光 exports 地图, 而 Metro 只咨询 exports 并启用软件包导出 — 从 Metro 0.82 / RN 0.79 继续默认。 打开 任何更古老的, 这个包的子路径 根本没有解决.

尾风设置( NativeWind)

使用 styles.native 条目,不 styles。网络运行时间宣布 Tailwind 插件, ::-webkit-scrollbar 水电费 html编号 :input 重新使用在 NEVIND 下, 联 合 国 @source 为类扫描网页构建输出.

在你的应用 global.css —— 从根组件和点导入的文件 withNativewind 时值 metro.config.js数字 :

@import 'tailwindcss/theme.css' layer(theme);
@import '@flipdish/ui-tokens/css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);

/* NativeWind's own theme variables — required by its Metro transformer. */
@import 'nativewind/theme';

@import '@flipdish/ui-library/styles.native';
@import 'tailwindcss/utilities.css';

styles.native 贡献了一件事: @source "./native",它告诉 Tailwind 到 扫描此软件包的 React Circuit 构建输出, 以便内部的类字符串 Avatar, (中文(简体) ), Button (和每个) (b) 产生公用事业。 没有它,这些部件就变成无型 -- 尾风忽略 node_modules 除非一个来源被明确宣布.

暗模式通过 Nerifind 遵循设备颜色方案 useColorScheme. (网络 运行时间代替再映射 dark: 打开 [data-theme="dark"],它没有RN等同物. )

这个 @source 镜像什么 ./styles 已经在网上做了,在其中证明 生产。 准确 上方的导入顺序 仿照了NeignWind v5的文献记录 安装且尚未针对真正的 Expo 应用程序执行 (a) 下述预先核查.

类型脚本设置

添加数据 react-native 应用程序的条件 tsconfig.json 因此 TypeScript 解析 同样的文件 Metro 做 :

{
  "compilerOptions": {
    "moduleResolution": "bundler", // or "node16" / "nodenext"
    "customConditions": ["react-native"],
  },
}

没有它,你得到 网络 类型定义 - Avatar 似乎会接受 src 财务报告和审定财务报表 badge(b) 既非当地执行所支持的initials 页:1 由本地支持).

导入尚未可用的组件

TypeScript和Metro都拒绝,因此错误无法到达设备:

error TS2305: Module '"@flipdish/ui-library/components/atoms/Button"'
              has no exported member 'Button'.

Unable to resolve module .../dist/native/components/atoms/Button/index.js

将 Tailwind CSS 扫描到子树

当您的应用程序不拥有整个页面时——一个部件,一个嵌入器,一个故事本预览,一个多用户主机,或者一个微前端——它的Tailwind v4输出(用户) 财务报告和审定财务报表 Preflight resets)可以渗入或与周围的CSS相冲突. 固定是把每个被排放的选取者 都放入应用程序的单个元素之下: UIProvider是因为 scopeId 邮票 data-mfe-scope 上面的标本根。 绝不进入主机集装箱代号(#flipdish-micro-frontend)或身份证明的结合;几个应用软件共享这些容器,因此规则在它们之间漏出.

@flipdish/ui-library/utilities/cssScopeUtils 船舶 createScopedPrefixTransform一个小型工厂 postcss-prefix-selector 合并范围界定规则(范围) :root编号 :html 这样 @theme 只有树下才有标志和底打字级联,请离开 :host 财务报告和审定财务报表 @keyframes 单步,从不双前缀等),所以您会写出一行来代替复制的活字化转换.

安装同伴插件( 可选的端口) :

pnpm add -D postcss-prefix-selector

然后添加到您的 PostCSS 配置中 :

// postcss.config.mjs
import prefixSelector from 'postcss-prefix-selector';
import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';

// Your Portal microFrontendWindowName; must match <UIProvider scopeId="sale-service">.
const SCOPE = '[data-mfe-scope="sale-service"]';

export default {
  plugins: [
    prefixSelector({
      prefix: SCOPE,
      transform: createScopedPrefixTransform(SCOPE),
    }),
  ],
};

尾风的输出变得平淡 [data-mfe-scope="sale-service"] .px-4 { … },每个下游工具(Vite,闪电)都会理解.

选项

createScopedPrefixTransform(scopeSelector, options?)数字 :

createScopedPrefixTransform('[data-tailwind]', {
  shouldScope: (file) => !file || !file.includes('node_modules'),
  scopeBody: true,
});

为什么是PostCSS而不是Tailwind的 important(#selector)? 吗? 尾风v4's important(...) 语法释放出非标准 @media important(...) 闪电在微分化过程中无法解析的块,所以范围界定是作为PostCSS通过Tailwind输出完成的.

微前端为一用例;同样的变换适用于部件,嵌入式,故事本和多租户UI.

文档

完整组件文件、互动实例和设计指南在 故事书。 。 。 .

更改日志

见 变动情况 为释放历史.

捐款

这个包裹住在 flipdish-design-system 单相机 贡献者文件——文件夹常规,无标题的UI组件如何被调整,网络/本地文件分割,依赖性规则——与源并存.