鱿鱼UI

Squid V2 的反应组件库

包的安装和使用

安装软件包 :

yarn add @0xsquid/ui

导入输入点中的样式 :

// src/main.tsx | src/pages/_app.tsx | etc...
import "@0xsquid/ui/dist/index.css";

用我们的主题提供者包起您的应用程序 <ThemeProvider /> 并指定您的主题 :

import { ThemeProvider, Button } from "@0xsquid/ui";

function App() {
  return (
    <ThemeProvider theme={yourTheme}>
      <Button label="Hello world" variant="primary" size="md" />
    </ThemeProvider>
  );
}

发展

安装依赖关系

yarn install

启动 Storybook dev 服务器

yarn storybook

构建软件包

要使用 Rollup 构建软件包, 请运行 :

yarn build

此命令将 :

1. 将 Tailwind CSS 类编译为 src/styles/compiled-tailwind.css
2. 捆绑源代码及其类型声明 dist/ 文件夹
3. 复制 src/styles/compiled-tailwind.css 改为 dist/index.css

缩写和格式

要格式化并插入代码, 运行 :

yarn format:fix

yarn lint:fix

文件夹结构

- src
  - index.ts <- barrel file
  - components
    - index.ts <- barrel file
    - buttons
      - index.ts <- barrel file
      - Button.tsx
    - lists
      - index.ts <- barrel file
      - HistoryItem.tsx
  - stories
    - buttons
      - Button.stories.tsx
    - lists
      - HistoryItem.stories.tsx

当创建新组件时, 不要忘记更新桶文件, 导出您的组件 index.ts 在相应的组件文件夹中存档。 您也可以安装 自动Barrel VSCode 扩展。 。 。 .

图像

如果您需要添加到某个需要包含在最后捆绑中的地方, 把它们转换成基数64 .

示例

.my-image {
-  background-image: url('my-image.png');
+  background-image: url('data:image/png;base64,iVBORw0....');
}

或者在反应组件中:

-  <img src="my-image.png" />
+  <img src="data:image/png;base64,iVBORw0..." />