@sesamehr / react-design-system

为Sesame HR设计系统反应组件和设计令牌。

📖 组件的文档 -这个包裹 故事书。真理的源头有它自己的方式 vue-storybook.sesametime.com.

安装

npm install @sesamehr/react-design-system react react-dom tailwindcss

使用

在应用程序入口处导入一次样式表：

import '@sesamehr/react-design-system/style.css';

该样式表只绘制这个包的组件。它没有携带 重置并且没有实用程序类，因此导入它不能重新设计应用程序的样式 周围-看 样式表不能做的事情.

导出每个组件 Ox 前缀:

import {
  OxAvatar,
  OxButton,
  OxFieldGroup,
  OxFieldLabel,
  OxFieldMessage,
  OxInputText,
} from '@sesamehr/react-design-system';
import { useState } from 'react';

export function Example() {
  const [email, setEmail] = useState('');

  return (
    <>
      <OxAvatar initials="SH" size="lg" dataTestid="user-avatar" />

      <OxFieldGroup variant="error">
        <OxFieldLabel htmlFor="email">Email</OxFieldLabel>
        <OxInputText
          id="email"
          field={email}
          onFieldChange={setEmail}
          placeholder="[email protected]"
        />
        <OxFieldMessage variant="error">Invalid email</OxFieldMessage>
      </OxFieldGroup>

      <OxButton variant="default">Save</OxButton>
    </>
  );
}

设计令牌

样式表已经包含了令牌。来 @reference 原始令牌层 从你自己的Tailwind设置：

@import '@sesamehr/react-design-system/assets/styles/mainTheme.css';

样式表不能做的事情

style.css 包含此包的组件规则及其令牌。它 故意做 不 包含:

• 起飞前的，或任何其他全局重置。组件假设为1 -它们是 写对 box-sizing: border-box， button { font: inherit } 和 Rest -但是安装它是应用程序的调用，而不是库的调用。如果你的 应用程序有顺风，你已经有了。如果没有：

  import '@sesamehr/react-design-system/preflight.css';
  

• 实用工具类。 否 .h-10,没有 .p-4,没有 .bg-brand。每个组件 有它自己的 ox类，并将声明编译到其中， 所以这里的任何东西都不会与您自己的同名实用程序发生冲突 顺风建筑从你的天平上散发出来。

组件规则在内部发布 @layer components这是顺风应用的所在地 已经对它们进行了排序：之后 base之前, utilities。你传入一个实用程序 赢了, <Button className="w-full"> 是全宽-不需要 !important.

令牌在an下发布 --ox- 前缀:覆盖 --ox-color-brand-500 重新主题，不是 --color-brand-500。没有前缀，这些是Tailwind的名字 自己使用，并宣布他们在 :root 会改变每一个 rounded-2xl 在您的应用程序中意味着。

许可证

MIT©Sesame HR