@batoanng/mui-组件
一个完全打入、可主题和可访问的组件库 反应, (中文(简体) ), 类型脚本,以及 材料UI(MUI)它遵循原子设计原则和拥有完整主题系统、钩子、测试设施的船只,并形成支持,以加速多个项目的UI发展.
* 特性
- 建造在 毛里求斯
- 由原子设计(原子、分子、形式)组织
- 演示支持( Light/ Dark 模式、 象征性调色板、 打印)
- 自定义钩和公用事业
- 准备使用
ThemeProvider财务报告和审定财务报表CssBaseline - 开发者工具:故事本、Vitest、ESLint、Pretier
- 在npm上发表和部署的故事书: (原始内容存档于2018-09-21) (英语). mui-communists-batoanng.vercel.app
* 安装
npm install @batoanng/mui-components
如果您尚未安装同伴依赖关系, 也必须安装 :
npm install react react-dom @mui/material @mui/icons-material @mui/utils @emotion/react @emotion/styled framer-motion react-hook-form
一些出口需要可选的对等依赖:
npm install @mui/x-date-pickers react-dropzone react-idle-timer
QQ 快速启动
将您的应用程序包入主题提供者 :
import { defaultTheme } from '@batoanng/mui-components';
import { CssBaseline, ThemeProvider } from '@mui/material';
export default function App() {
return (
<ThemeProvider theme={defaultTheme}>
<CssBaseline />
{/* Your app components */}
</ThemeProvider>
);
}
使用组件 :
import { Button } from '@batoanng/mui-components';
<Button variant="contained">Click me</Button>;
构件结构
src/
├── components/
│ ├── atoms/ # Base building blocks (e.g., Button, Label)
│ ├── molecules/ # Compound components (e.g., IdleTimer)
│ ├── form/ # Input controls and validation-aware forms (integrated with react-hook-form)
│ └── index.ts # Entry point for all component exports
所有部件均通过下列方式再出口: @batoanng/mui-components数字 :
import { FormTextField } from '@batoanng/mui-components';
测试工具是从单独的子路径输出的,所以生产捆绑不包括测试库:
import { render, screen } from '@batoanng/mui-components/test-utils';
QQ 主题系统
位于 src/theme/它包括:
- 光和暗主题创建函数
- 自定义间距、 弧度、 阴影、 打印
- 颜色调色板符合品牌/UI标志
用法 :
import { defaultTheme, createDefaultTheme } from '@batoanng/mui-components';
const lightTheme = createDefaultTheme({}); // Light theme is default
const darkTheme = createDefaultTheme({ darkTheme: true });
<ThemeProvider theme={lightTheme}>...</ThemeProvider>
<ThemeProvider theme={darkTheme}>...</ThemeProvider>
发展
常见命令 :
pnpm dev # Start Storybook
pnpm test # Run unit tests with Vitest
pnpm lint # Run ESLint
pnpm format # Format with Prettier
pnpm build # Build library output
pnpm clean # Remove local build, Storybook, cache, and package install artifacts
Linting是通过本地平面配置入口配置的 eslint.config.mjs,其构成为:
@batoanng/eslint-config@batoanng/eslint-config/typed@batoanng/eslint-config/test
· 故事本
在线查看完整组件库 :
👉 https://mui-communitys-batoanng.vercel.app/ 页面存档备份,存于互联网档案馆
本地运行 :
pnpm dev
软件包大小
检查已发布的软件包 npm pack --dry-run。本地文件夹大小可以大得多,因为被忽略的文件夹如 node_modules/.cache 财务报告和审定财务报表 storybook-static 在开发期间创建.