Build a React UI library clone from material UI
$ git clone https://github.com/ChaoTzuJung/material_ui_clone.git
$ cd material_ui_clone
$ yarn install && yarn run dev
open web -> http://localhost:9527/
open storybook -> http://localhost:6006/- Autocomplete
- Accordion
- Alert
- AppBar
- Avatar
- Backdrop
- Bottom Navigation
- Breadcrumbs
- Button
- Button group
- Card
- Checkbox
- Chip
- Collapse
- Date Picker
- Date Range Picker
- Date Time Picker
- Dialog
- Divider
- Floating action button
- Icons
- Image list
- List
- Links
- Masonry
- Menu
- Notification
- Pagination
- Paper
- Progress
- Radio
- Rating
- Select
- Skeleton
- Slider
- Snackbar
- Speed Dial
- Stepper
- Switch
- Table
- Tabs
- TextField
- Timeline
- Time Picker
- Toggle Buttons
- Tooltip
- TTransfer List
- Tree View
- Typography
- Dark Mode
- Use styled-components
├── .storybook/
│ ├── main.js [Storybook 主要的組態設定檔案]
│ └── preview.js [storybook 網頁的項目組態設定]
src/
├── assets/
├── docs/ [文件、style guides]
├── common/ [應用級別的通用元件]
├── containers(or pages)/
| ├── feature1/
| | ├── components/ [功能拆分出的專用元件]
| | └── feature1.tsx [容器元件]
├── helpers(or lib)/ [純資料邏輯處理相關、middleware]
│ ├── middleware.ts
│ └── utils.ts
├── Interface/
├── mocks/ [fake Api 相關]
├── redux(os store)/ [其實還沒仔細研究，之後再規劃]
| ├── index.ts [combineReducers]
| ├── module1.ts [reducer, action types, actions creators]
| └── module2.ts [reducer, action types, actions creators]
├── routes/
│ └── index.ts
└── index.tsx
├── stories/ [storybook component 相關的所有資料]
│ └── assets [storybook component 圖片]
reference：
- node v14.16.1 (lts/fermium)
- React 17
- Webpack 5
- Babel 7
- eslint 7
- husky 4
- editorconfig
- storybook version 6.3.0
- 排版工具 Prettier plugin
- html
- style
- ts/tsx/js/jsx
- json