@canek-ui/ 材料设计系统

设计系统 卡内克。 组件 重构 MUI 7, 重构 CSS 变量, 重构和 API 一致 .

塔布拉-德康特尼多

• 起义组织
• 乌苏
• 构成部分
• 泰马
• 托肯斯·德德内尼奥
• 普罗耶克托岛
• 发展
• 召集会议
• 弗卢霍·德·特巴霍
• 公众
• 联系人
• 诉讼

起义组织

npm install @canek-ui/material-design-system @mui/material @mui/icons-material @emotion/react @emotion/styled

反应 18, MUI 7, @mui/icons-material 尔 @emotion/* 儿子们 同行依赖关系没有包含Huyen en el bund del paquete, el consumidor debe instalarlas explícitamente.

我们是:

pnpm add @canek-ui/material-design-system @mui/material @mui/icons-material @emotion/react @emotion/styled

我们的线:

yarn add @canek-ui/material-design-system @mui/material @mui/icons-material @emotion/react @emotion/styled

乌苏

构成部分suelto

import { CnButton } from "@canek-ui/material-design-system";
import "@canek-ui/material-design-system/styles.css";

export function SaveButton() {
  return (
    <CnButton variant="contained" color="primary">
      Guardar cambios
    </CnButton>
  );
}

铁道部

import { CanekThemeProvider, CnButton } from "@canek-ui/material-design-system";
import "@canek-ui/material-design-system/styles.css";

export function App() {
  return (
    <CanekThemeProvider mode="light">
      <CnButton variant="contained" color="primary">
        Guardar cambios
      </CnButton>
    </CanekThemeProvider>
  );
}

进口 del CSS es 义务. Los sorders de de deseño se exponen como CSS 变量预配置 --cn-* y 组分消耗。 Sin es 导入,Los 组分usan倒置 pero el theming no funciona.

构成部分

普罗克西摩斯: CnChip, (中文(简体) ), CnAlert, (中文(简体) ), CnAvatar, (中文(简体) ), CnInput, (中文(简体) ), CnForm, (中文(简体) ), CnDataTable。 。 。 .

CnButton

<CnButton
  variant="contained"        // "contained" | "outlined" | "text"
  color="primary"            // primary | secondary | success | warning | info | error | accent | neutral
  size="medium"              // "small" | "medium" | "large"
  shape="rounded"            // "rounded" | "pill" | "square"
  startIcon="add"            // string (usa CnIcon) o ReactNode
  endIcon="arrow_forward"
  loading={false}
  fullWidth={false}
  href="https://canek.mx"    // renderiza <a> en lugar de <button>
  target="_blank"
  onClick={() => {}}
>
  Guardar cambios
</CnButton>

CnIcon

<CnIcon
  name="check"               // string del registry
  size="md"                  // "xs" | "sm" | "md" | "lg" | "xl" | "2xl" o número
  color="success"            // primary | secondary | success | warning | error | info | accent | muted | subtle | inherit
  spin={false}
  pulse={false}
  rotate={0}
  label="Éxito"              // opcional, agrega role="img" y aria-label
/>

(原始内容存档于2018-10-21) (英语). El register incluye ~80 íconos comunes. 普德扩展器 registerIcons数字 :

import { registerIcons } from "@canek-ui/material-design-system";
import CustomIcon from "@mui/icons-material/CustomIcon";

registerIcons({
  custom_thing: CustomIcon,
});

泰马

CanekThemeProvider 接受情况a mode数字 :

• "light" - tema claro( 默认)
• "dark" -特玛·斯库罗

<CanekThemeProvider mode="dark">
  <App />
</CanekThemeProvider>

埃尔 mode 脚本 data-cn-theme="dark" 内 <html>, lo cual activa las varies oscuras de los sorders CSS. (原始内容存档于2018-09-29).

托肯斯·德德内尼奥

以多斯格式补充的符号 :

• CSS 变量 内 src/styles/tokens.css ——相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
• Objetos 类型脚本 内 src/tokens/ - 《宪法》第1款.

(原始内容存档于2018-10-21). Sobreescribir sor por proyecto

/* src/styles/app-tokens.css, importado después de @canek-ui/material-design-system/styles.css */
:root {
  --cn-color-brand-600: #3d5afe;
  --cn-radius-md: 6px;
  --cn-font-sans: "Inter", system-ui, sans-serif;
}

托肯斯不负责任

普罗耶克托岛

canek-ui-design-system/
├── .github/
│   └── workflows/
│       └── ci.yml                 # CI: lint + typecheck + test + build
├── .storybook/
│   ├── main.ts                    # configuración del Storybook
│   └── preview.tsx                # decorators globales (theme, tokens)
├── scripts/
│   └── copy-css.mjs               # copia tokens.css a dist/ después del build
├── src/
│   ├── components/
│   │   ├── CnButton/
│   │   │   ├── CnButton.tsx
│   │   │   ├── CnButton.stories.tsx
│   │   │   ├── CnButton.test.tsx
│   │   │   └── index.ts
│   │   └── CnIcon/
│   │       ├── CnIcon.tsx
│   │       ├── icons.ts           # registry nombre → componente
│   │       ├── CnIcon.stories.tsx
│   │       ├── CnIcon.test.tsx
│   │       └── index.ts
│   ├── styles/
│   │   └── tokens.css             # CSS variables (light + dark)
│   ├── theme/
│   │   ├── CanekThemeProvider.tsx
│   │   └── index.ts
│   ├── tokens/
│   │   └── index.ts               # tokens como objetos TS
│   └── index.ts                   # barrel público del paquete
├── .editorconfig
├── .gitignore
├── .npmignore
├── .nvmrc                         # Node 22
├── .prettierrc
├── LICENSE
├── README.md
├── eslint.config.js
├── package.json
├── tsconfig.json
├── vite.config.ts
├── vitest.config.ts
└── vitest.setup.ts

发展

请求

• 节点.js >=20.0.0 (第22和26个节点。).
• 无 >=10.0.0。 。 。 .
• 图形 (中文(简体) ).
• 虚拟系统 复授记. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}这简直是一团糟 .editorconfig y 配置 prettier/ESLint que se aplican automáticamente. 中国植物物种信息数据库.

虚拟版本 :

node --version
npm --version
git --version

正式设置

git clone [email protected]:CanekDevs/canek-ui-design-system.git
cd canek-ui-design-system
npm install

视窗, si npm install 警告书 install-scripts (npm 11+),aprueba los 脚本为 esbuilt:

npm install-scripts approve esbuild
npm rebuild esbuild

脚本不负责任

故事书

故事书 as la fuente de verdad 视觉设计系统. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}卡达 vive con sus stories al lado:

npm run storybook

布尔 http://localhost:6006. Cada 构件 平起平起平起地 Default más stories de various, tamaños, colores y estados. 中国植物物种信息数据库.

承诺蚁群

npm run typecheck && npm run lint && npm run test && npm run build

(原始内容存档于2013-10-12). Los Cuatro deben pasar. 西阿尔古诺·法尔塔 没有承诺.

召集会议

提交

格式化 :

<tipo>(<scope>): <descripción corta> - por: <Nombre Apellido>

(原始内容存档于2018-09-26). Tipos válidos: feat, (中文(简体) ), fix, (中文(简体) ), refactor, (中文(简体) ), style, (中文(简体) ), docs, (中文(简体) ), chore, (中文(简体) ), test, (中文(简体) ), ci, (中文(简体) ), perf。 。 。 .

范围 válidos: kebab-case 中包含的button, (中文(简体) ), icon, (中文(简体) ), chip, (中文(简体) ), theme, (中文(简体) ), tokens(一) 执行 repo (原始内容存档于2018-10-21). para cambios globales.

埃让普洛斯:

feat(icon): add CnIcon with registry and semantic tokens - por: Angel Rodriguez
fix(button): respect loadingPosition for center spinner - por: Angel Rodriguez
docs: expand README with developer setup - por: Angel Rodriguez
chore(deps): bump mui to 7.3.11 - por: Angel Rodriguez

分支

埃让普洛: feature/cn-chip, (中文(简体) ), fix/icon-spin-direction, (中文(简体) ), chore/upgrade-storybook。 。 。 .

埃斯蒂洛·克迪戈

• 血清凝血剂 código(VMs例外,无aplica a este repo)。 (原始内容存档于2013-10-12). Si un bloade necessita commentario, refactízalo.
• type 卢森堡 interface en TypeScript.
• Funciones flecha (法语) 卢森堡 function (例外情况) forwardRef (原始内容存档于2017-10-12). que lo requiere.
• const 伤心 let。 。 。 .
• 破坏结构 减道具.
• 别名 @/ 进口量 src/。 。 。 .
• 红外线 código, 承诺odocs.

构成部分

Cada 组件 nuevo sigue esta estructura:

src/components/CnNombre/
├── CnNombre.tsx
├── CnNombre.stories.tsx
├── CnNombre.test.tsx
└── index.ts

Yse 输出a desde src/index.ts数字 :

export { CnNombre } from "./components/CnNombre";
export type { CnNombreProps } from "./components/CnNombre";

弗卢霍·德·特巴霍

1. 干地 main

git checkout main
git pull
git checkout -b feature/cn-chip

2. 发展

# Iterar en Storybook
npm run storybook

# Correr tests mientras trabajas
npm run test:watch

3. 特大待办事宜

npm run typecheck && npm run lint && npm run test && npm run build

4. 委员会

git add src/components/CnChip
git add src/index.ts
git commit -m "feat(chip): add CnChip with color variants - por: Angel Rodriguez"

农卡 git add . {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我可没胆量 (原始内容存档于2013-10-12). Siempre archivos especificos por ruta.

5. 推进和PR

git push -u origin feature/cn-chip

(原始内容存档于2018-09-26) (英语). Abre un Pull request en GitHub hacia main数字 :

• 蒂图洛: 小额承付本金(feat(chip): add CnChip) (中文(简体) ).
• 德克丽普西翁: qué hace el 组件,qué 变体 añade,截图 del Story Book.
• 审查者: (原始内容存档于2018-09-29) (英语). almenos uno del confuto.

6. 合并

(原始内容存档于2019-09-25). Una vez apobado y CI en verde:

• 平面并合并 (建议) o 合并执行. 农卡 重组和合并 波克重写了SHA.
• Borra la rama después del 合并.

7. 当地实际

git checkout main
git pull
git branch -d feature/cn-chip

公众

核对列表 antes de publicar

• CI en verde en (法语) main。 。 。 .
• 托多斯输了对巴桑的测试npm run test) (中文(简体) ).
• 埃尔建立基因拉 dist/ 罪恶警告.
• El ChangeGELOG o el professen los cambios. (原始内容存档于2018-09-29). El ChangeGELOG o el profession.
• (原始内容存档于2013-10-12). versión se decidió rightamente (ver abajo).

语义版本

万国海 0.x.y, (中文(简体) ), cada nuevo 组件为非次要。 。 。 . CnButton → v0.1.0。 。 。 . CnIcon → v0.2.0。 。 。 . CnChip → v0.3.0Cuando cierres la API de los parties más usados y estés listo para producción, salas a) 维基语录链接:名人名言 - 分类 v1.0.0。 。 。 .

宣传

# 1. Actualizar versión (esto crea commit + tag automáticamente)
npm version minor
# o
npm version patch
# o
npm version major

# 2. Push con tags
git push --follow-tags

# 3. Publicar a npm
npm publish --access public

npm publish 要求2FA 行动在tucenta。 (原始内容存档于2018-10-21) (英语). Te pedirá Optport de 6 dígitos.

公共权利

• https://www.npmjs.com/package/@canek-ui/material-design-system
• npm view @canek-ui/material-design-system

恶性销售

没有自己 puede replazar una versión ya publicada. 是公关 0.2.0 骗取错误 :

# Deprecar la versión (los consumidores nuevos no la verán)
npm deprecate @canek-ui/[email protected] "Bug en CnIcon. Usar 0.2.1"

# Publicar la versión corregida
npm version patch
git push --follow-tags
npm publish --access public

联系人

1. 分叉(si eres externo) o 分支直取 (si eres del confuto).
2. (原始内容存档于2013-10-12). Sigue el flujo de trabajo de arriba.
3. (c) 与《公约》第2条有关的其他事项, type 没有 interface, funciones flecha等).
4. 无效公关:
   • (原始内容存档于2018-10-21). Descripción Clara del Cambio.
   • (原始内容存档于2018-10-21). Screenshots del Storybook si es un communite nuevo.
   • (原始内容存档于2017-10-29). Link al issue relacionado si aplica.
5. 回答一个LOS评论.

红外线 :

核查清单:

• src/components/CnNuevo/CnNuevo.tsx 执行会议.
• src/components/CnNuevo/CnNuevo.stories.tsx (原始内容存档于2018-10-21). con stories de todas las splantes.
• src/components/CnNuevo/CnNuevo.test.tsx {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}con test de los comportamientos clave. {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
• src/components/CnNuevo/index.ts 输了出口.
• 导出 en src/index.ts。 。 。 .
• 欢呼吧 构成部分 读取.
• 显式 que npm run typecheck && npm run lint && npm run test && npm run build p.
• 故事书上的Probar que todas las stories companizan sin errores en Consola. (原始内容存档于2018-09-29). Probar en Storybook que todas las stories companizan sin fairs en Consola.

诉讼

麻省理工学院 卡内克垂直 自由主义。 。 。 .