Mycelia 设计系统

React 组件库 反射 Aria 组件 财务报告和审定财务报表 香草摘录。 。 。 .

特征

• 默认可访问 - 建造在反应Aria组件上,以全面遵守《世界妇女宪章》
• 类型安全标志 - 作为TypeScript值或vanilla-extract主题合同提供的设计令牌
• 图像对齐 - 手提箱和部件与 Mycelia Figma 设计系统

安装

npm install @ecologi-action-ltd/mycelia

类型

Mycelia 使用过 汉肯·格罗特斯克 作为它的主要类型面。 将此添加到您的 HTML <head>数字 :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">

或导入您的 CSS :

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

设置

1. 导入样式

在您的应用程序的入口点导入 CSS 文件 :

import '@ecologi-action-ltd/mycelia/styles.css';

2. 应用主题

将主题类添加到根元素中。 从这里导入 @ecologi-action-ltd/mycelia/theme数字 :

import { myceliaTheme } from '@ecologi-action-ltd/mycelia/theme';

// In your root layout/component
<body className={myceliaTheme}>
  {children}
</body>

Next.js App路由器

下一个.js App路由器,您的 layout.tsx 应该看起来像:

import '@ecologi-action-ltd/mycelia/styles.css';
import { myceliaTheme } from '@ecologi-action-ltd/mycelia/theme';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className={myceliaTheme}>
        {children}
      </body>
    </html>
  );
}

客户端路由

链接组件要与客户端导航工作, 请将您的应用程序包入 RouterProvider。从一个单独的切入点导出,以避免需要 "use client" 在服务器组件中.

详细情况见 反应 Aria 路径文件。 。 。 .

Next.js App 路由器示例

创建客户端提供者组件 :

// app/providers.tsx
"use client";

import { RouterProvider } from '@ecologi-action-ltd/mycelia/router';
import { useRouter } from 'next/navigation';

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  return <RouterProvider navigate={router.push}>{children}</RouterProvider>;
}

然后在您的布局中使用 :

// app/layout.tsx
import '@ecologi-action-ltd/mycelia/styles.css';
import { myceliaTheme } from '@ecologi-action-ltd/mycelia/theme';
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={myceliaTheme}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

3. 使用组件

import { Button, Text } from '@ecologi-action-ltd/mycelia';

<Text variant="h1">Welcome to Mycelia</Text>
<Button variant="primary">Get Started</Button>

使用托肯斯语Name

托肯斯可以在自己的风格中直接被使用而不用香草-取出:

import { tokens } from '@ecologi-action-ltd/mycelia/tokens';

const styles = {
  backgroundColor: tokens.color.surface.primary.default,
  borderRadius: tokens.radius.md,
  padding: tokens.spacing['16'],
};

对于香草-extract用户,使用类型安全CSS可变访问的主题合同:

import { vars } from '@ecologi-action-ltd/mycelia/theme';
import { style } from '@vanilla-extract/css';

export const card = style({
  backgroundColor: vars.color.surface.primary.default,
  borderRadius: vars.radius.md,
});

文档

运行故事本以探索所有组件和符号 :

npm run storybook

发展

见 捐款额 用于建立和增加新的组成部分.

释放

这个项目使用 更改 用于版本管理和发布.

添加更改列表

当进行应当放行的更改时,创建一个更改站:

npm run changeset

这将促使你:

1. 选择更改类型( patch, 次要, 主要)
2. 撰写更改摘要

将在 .changeset/ - 用你的公关做这个.

何时添加更改列表

• 补丁: 错误修正,文档更新
• 小声: 新特性,不突破性改变
• 主要: 打破更改

跳过更改器进行内部更改,如CI更新或重构,不影响公共API.

如何释放工作

1. 有更改的 PR 合并到 main
2. 自动创建/更新“Version套件” PR
3. 当版本 PR 合并时, 软件包会发布到 npm

测试 PR 更改

PR预览包自动被发布. 通过 PR 注释中的链接安装 :

npm i https://pkg.pr.new/@ecologi-action-ltd/mycelia@<commit-hash>

许可证

麻省理工学院