@thairath/tr-design-system 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/dist/index.esm.js +1417 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +1421 -0
- package/dist/index.js.map +1 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# 📚 Design System Storybook
|
|
2
|
+
|
|
3
|
+
This repository contains the Design System for [Your Project/Organization], built with [React + Storybook].
|
|
4
|
+
It follows the **Atomic Design Methodology** to ensure consistency and reusability across the UI.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 🚀 Getting Started
|
|
9
|
+
|
|
10
|
+
### 1. Install dependencies
|
|
11
|
+
```bash
|
|
12
|
+
npm install
|
|
13
|
+
# or
|
|
14
|
+
yarn install
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### 2. Run Storybook
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm run storybook
|
|
21
|
+
# or
|
|
22
|
+
yarn storybook
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Open your browser and go to: http://localhost:6006
|
|
26
|
+
|
|
27
|
+
## 🧱 Structure
|
|
28
|
+
This Design System follows Atomic Design principles:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
src/
|
|
32
|
+
└── components/
|
|
33
|
+
├── atoms/
|
|
34
|
+
├── molecules/
|
|
35
|
+
├── organisms/
|
|
36
|
+
└── templates/
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Each component is:
|
|
40
|
+
|
|
41
|
+
- Documented in Storybook
|
|
42
|
+
- Themed using [e.g., Tailwind, styled-components, etc.]
|
|
43
|
+
- Tested (optional)
|
|
44
|
+
|
|
45
|
+
## 🧩 Technologies Used
|
|
46
|
+
- React
|
|
47
|
+
- Storybook
|
|
48
|
+
- [TypeScript] (optional)
|
|
49
|
+
- [Tailwind CSS / Styled-Components] (optional)
|
|
50
|
+
- [Figma Tokens] (if connected)
|
|
51
|
+
- [Jest / Testing Library] (if added)
|
|
52
|
+
|
|
53
|
+
## 🛠Scripts
|
|
54
|
+
|
|
55
|
+
| Command | Description |
|
|
56
|
+
|-----------------------------|--------------------------------------|
|
|
57
|
+
| `npm run storybook` | Start Storybook locally |
|
|
58
|
+
| `npm run build-storybook` | Build Storybook as a static site |
|
|
59
|
+
| `npm run lint` | Run linter for code quality check |
|
|
60
|
+
| `npm run format` | Format code using Prettier |
|
|
61
|
+
| `npm test` | Run tests (if configured) |
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
## 📦 Build for Deployment
|
|
65
|
+
To build the static version of Storybook:
|
|
66
|
+
```bash
|
|
67
|
+
npm run build-storybook
|
|
68
|
+
```
|
|
69
|
+
The static files will be output in the storybook-static/ directory.
|
|
70
|
+
You can deploy it to platforms like Vercel, Netlify, or host it internally.
|