@equinor/stratus-ui (英语)

使用基于 UI 原始文件的回放组件库 Equinor 设计系统 (EDS) 符号。 船舶作为无害环境管理+CJS,并附有捆绑的CSS主题文件.

📚 故事书文档

安装

yarn add @equinor/stratus-ui

同伴依赖关系

yarn add react react-dom

使用量

在您的应用程序中导入组件和主题 CSS :

import "@equinor/stratus-ui/theme.css";
import { Box } from "@equinor/stratus-ui";

function App() {
  return <Box p={16} gap={8}>Hello Stratus</Box>;
}

发展

yarn install          # Install dependencies
yarn build            # Build library (types + Vite)
yarn test             # Run Vitest tests
yarn lint             # oxlint (fast pass) then ESLint
yarn storybook        # Launch Storybook on port 6006
yarn generate-icons   # Regenerate icon components from @equinor/eds-icons

项目结构

src/
  index.ts            # Public API — all exports
  components/         # UI components (one folder each)
  icons/              # Generated icon components
  utils/              # Internal utilities (cn, polymorphic, cssProps, etc.)
  theme/              # CSS theme files (EDS tokens mapping)
  styles/             # Global/shared styles

组件文件夹布局

ComponentName/
  ComponentName.tsx          # Implementation
  ComponentName.css          # Plain CSS with .stratus-* selectors
  ComponentName.stories.tsx  # Storybook story
  __tests__/
    ComponentName.test.tsx   # Vitest tests

公约

• 类型脚本 到处都是
• 没有默认导出 (缩写是例外——生成代码)
• 普通 CSS 软件 与 .stratus-* 前缀选择器( 没有 CSS 模块, 没有 Tailwind)
• 所有公共出口都经过 src/index.ts 直接( 无每个组件桶文件)
• 组件使用 forwardRefWithAs 多态性 as 道具支持
• CSS 变量的使用 --stratus-* 命名空间
• 间距快手道具( S)p, (中文(简体) ), m, (中文(简体) ), px, (中文(简体) ), mt)通过 CSSProps + 键 extractCSSProps()
• 类别名称 cn() 工具
• 测试使用 Vitest + Testing Library + vitest- axe; 每个组件应有一个 a11y 测试

许可证

私人——只使用Equinor内部.