# @serverless-cd/goat-ui

> ## 组件库预览

Latest version **0.0.31** (published 2024-08-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @serverless-cd/goat-ui
pnpm add @serverless-cd/goat-ui
yarn add @serverless-cd/goat-ui
bun add @serverless-cd/goat-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.31 |
| Published | 2024-08-21 |
| First published | 2024-02-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 21 |
| Unpacked size | 8.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | loganhz, windwaving, andymanastorm, lowkeyrd, ls_nodejs, huipeng, hazel0928, kwtboom, fengc123, wssgryx, xsahxl, heimanba |

## Links

- npm: https://www.npmjs.com/package/@serverless-cd/goat-ui
- Repository: http://gitlab.alibaba-inc.com/goat/goat-ui
- npm.io page: https://npm.io/package/@serverless-cd/goat-ui

## Dependencies (21)

- [qs](https://npm.io/package/qs.md) ^6.11.2
- [astro](https://npm.io/package/astro.md) ^4.2.1
- [color](https://npm.io/package/color.md) ^4.2.3
- [culor](https://npm.io/package/culor.md) ^0.0.14
- [sharp](https://npm.io/package/sharp.md) ^0.32.5
- [unpic](https://npm.io/package/unpic.md) ^3.16.0
- [culori](https://npm.io/package/culori.md) ^4.0.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [preact](https://npm.io/package/preact.md) ^10.20.1
- [daisyui](https://npm.io/package/daisyui.md) ^4.7.2
- [astro-icon](https://npm.io/package/astro-icon.md) ^1.1.0
- [typescript](https://npm.io/package/typescript.md) ^5.3.3
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.4.1
- [tsparticles](https://npm.io/package/tsparticles.md) ^2.10.1
- [@astrolib/seo](https://npm.io/package/@astrolib/seo.md) ^1.0.0-beta.5
- [@types/culori](https://npm.io/package/@types/culori.md) ^2.1.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.2.1
- [@astrojs/preact](https://npm.io/package/@astrojs/preact.md) ^3.1.1
- [@astrojs/tailwind](https://npm.io/package/@astrojs/tailwind.md) ^5.1.0
- [astro-auto-import](https://npm.io/package/astro-auto-import.md) ^0.4.2
- [tsparticles-engine](https://npm.io/package/tsparticles-engine.md) ^2.10.1

## Recent versions

- 0.0.31 (latest) — 2024-08-21
- 0.0.30 — 2024-08-21
- 0.0.29-beta.4 — 2024-08-21
- 0.0.29 — 2024-07-17
- 0.0.29-beta.1 — 2024-07-16
- 0.0.28 — 2024-04-18
- 0.0.27-beta.3 — 2024-04-15
- 0.0.27-beta.1 — 2024-04-09
- 0.0.27 — 2024-04-08
- 0.0.26-beta.4 — 2024-04-08
- 0.0.26-beta.3 — 2024-04-08
- 0.0.26-beta.2 — 2024-04-07
- 0.0.26-beta.1 — 2024-03-29
- 0.0.26 — 2024-03-28
- 0.0.25-beta.3 — 2024-03-27
- … 31 more at https://npm.io/package/@serverless-cd/goat-ui/versions

## README

# 组件库开发文档

## 组件库预览

https://unpkg.com/@serverless-cd/goat-ui/example/dist/index.html

## 开发

### 组件库结构

`src/` 组件开发目录 <br />
`src/ui` 普通组件 <br />
`src/widgets` 业务组件 <br />
`example/` 组件测试与预览目录

### 开发规范

> 以 src/ui/Test 下组件为例

1. `src/ui（widgets）/`目录下新建目录，如`src/ui/Test/`
2. 使用`index.ts`导出需要被导出的组件
3. 使用`xxx.mdx`测试组件
4. 启动 demo：`npm run demo`
5. 在`src/index.ts`中导出组件

**注意事项： src 下新增目录（文件）需要重新启动`npm run demo`**

**注意事项：删除 src 下目录（文件）需要检查`example/src/content/docs/ui`或`example/src/content/docs/widgets`下是否有对应的`xxx.mdx`一并删除**

## 使用

### 组件库

1. `astro.config.js`中配置：

```js
import { autoImportComponents } from "@serverless-cd/goat-ui/src/utils";
import icon from "astro-icon";
export default defineConfig({
  integrations: [
    starlight(),
    autoImportComponents(), //必须在starlight()后面注入
    icon(),
  ],
});
```

2. 在任意.mdx 文件中使用组件
   `<Test />`

### goatUIPlugin

> 提供默认 goat ui 主题

1. 按照[官方文档](https://starlight.astro.build/guides/css-and-tailwind/#tailwind-css)配置 tailwind
2. 在`tailwind.config.js`中配置：

- 使用 goat UI 默认主题配置：

```js
import { goatuiPlugins } from "@serverless-cd/goat-ui/src/plugins";
import { GOAT_UI_CONTENT_PATH } from "@serverless-cd/goat-ui/src/common";
/** @type {import('tailwindcss').Config} */
export default {
  content: [GOAT_UI_CONTENT_PATH],
  plugins: [...goatuiPlugins],
};
```

- 自定义主题配置

其中 accent 和 gray 支持按照字符串和对象格式配置

```js
import {
  goatuiPlugins,
} from "@serverless-cd/goat-ui/src/plugins";
import {GOAT_UI_CONTENT_PATH} from '@serverless-cd/goat-ui/src/common'
const accent = {
  200: "#BEFFB3",
  600: "#36FF39",
  900: "#187559",
  950: "#134F33",
};
const gray = {
  100: "#F9AEA4",
  200: "#F68787",
  300: "#F65D5D",
  400: "#F83D3D",
  500: "#F73838",
  700: "#F52323",
  800: "#F64538",
  900: "#F02D2D",
};
/** @type {import('tailwindcss').Config} */
export default {
  content: [GOAT_UI_CONTENT_PATH],
  plugins: [...goatuiPlugins],
  daisyui: {
    themes: [
      {
        light: {
          gray: "#cccccc",
          accent: "#00ffff",
          primary: "#ff00ff",
          secondary: "#ff00ff",
          neutral: "#ff00ff",
          "base-100": "#ffffff",
          info: "#0000ff",
          success: "#00ff00",
          warning: "#00ff00",
          error: "#ff0000",
        },
      },
      {
        dark: {
          accent : {
  200: "#BEFFB3",
  600: "#36FF39",
  900: "#187559",
  950: "#134F33",
};
          gray:{
  100: "#F9AEA4",
  200: "#F68787",
  300: "#F65D5D",
  400: "#F83D3D",
  500: "#F73838",
  700: "#F52323",
  800: "#F64538",
  900: "#F02D2D",
}
        },
      },
    ],
  },
};
```


## 组件开发规范

1. 组件开发中避免使用 script 标签 （需要存在的话，要拿出来讨论）

> 如果组件中存在 script 标签，并且设置 is:inline 指令，则会在使用该组件的页面中，自动将 script 标签中的内容插入到页面中，多次使用时会生成重复的 script 内容。
> 如果组件中存在 script 标签，不设置 is:inline 指令，则会在使用该组件的页面中，自动将 script 标签中的内容插入到页面中，多次使用时不会生成重复的 script 内容。


2. 组件开发中避免使用 style 标签 （以 [tailwindcss](https://tailwindcss.com/docs/text-color) 为主）

> 如果组件中存在 style 标签，则会在使用该组件的页面中，自动将 style 标签中的内容插入到页面中，多次使用时会生成重复的style内容。

---
_Source: https://npm.io/package/@serverless-cd/goat-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._