design-zystem 1.0.197 → 1.0.198
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 +195 -0
- package/dist/index.js +43 -43
- package/package.json +10 -2
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# DesignSystem — design-zystem
|
|
2
|
+
|
|
3
|
+
The internal React component library shared across all DevCar web applications. Published as a private npm package (`design-zystem`).
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
**design-zystem** is a proprietary UI component library built with React and styled-components. It provides 35+ consistent, reusable components used across `Check`, `ClientOffice`, and `DeliveryApp`. The library is compiled via Webpack into a UMD bundle and published to npm.
|
|
8
|
+
|
|
9
|
+
## Tech Stack
|
|
10
|
+
|
|
11
|
+
| Category | Technology |
|
|
12
|
+
| ---------------------- | --------------------------------- |
|
|
13
|
+
| Framework | React 18 |
|
|
14
|
+
| Styling | styled-components 6 |
|
|
15
|
+
| Build Tool | Webpack 5 |
|
|
16
|
+
| Transpiler | Babel |
|
|
17
|
+
| Output Format | UMD (Universal Module Definition) |
|
|
18
|
+
| TypeScript Definitions | Yes (`dist/index.d.ts`) |
|
|
19
|
+
|
|
20
|
+
## Package Info
|
|
21
|
+
|
|
22
|
+
```json
|
|
23
|
+
{
|
|
24
|
+
"name": "design-zystem",
|
|
25
|
+
"version": "1.0.197",
|
|
26
|
+
"main": "dist/index.js"
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Prerequisites
|
|
31
|
+
|
|
32
|
+
- Node.js >= 18
|
|
33
|
+
- npm >= 9
|
|
34
|
+
- npm access to publish the package (private registry or npm account with access)
|
|
35
|
+
|
|
36
|
+
## Installation (as a dependency)
|
|
37
|
+
|
|
38
|
+
In any DevCar web project:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install design-zystem
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Or with a specific version:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm install design-zystem@1.0.197
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Development Setup
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# Clone the repository
|
|
54
|
+
git clone <repo-url>
|
|
55
|
+
cd DesignSystem
|
|
56
|
+
|
|
57
|
+
# Install dependencies
|
|
58
|
+
npm install
|
|
59
|
+
|
|
60
|
+
# Build the library
|
|
61
|
+
npm run build
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Available Scripts
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
# Build the library (outputs to dist/)
|
|
68
|
+
npm run build
|
|
69
|
+
|
|
70
|
+
# Build and publish to npm (runs build automatically via prepublishOnly)
|
|
71
|
+
npm publish
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Project Structure
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
DesignSystem/
|
|
78
|
+
├── src/
|
|
79
|
+
│ ├── Components/ # All UI components
|
|
80
|
+
│ │ ├── Box/
|
|
81
|
+
│ │ ├── Button/
|
|
82
|
+
│ │ ├── Bubble/
|
|
83
|
+
│ │ ├── Bulk/
|
|
84
|
+
│ │ ├── CardSkeleton/
|
|
85
|
+
│ │ ├── Checkbox/
|
|
86
|
+
│ │ ├── Col/
|
|
87
|
+
│ │ ├── DatePicker/
|
|
88
|
+
│ │ ├── Divider/
|
|
89
|
+
│ │ ├── Drawer/
|
|
90
|
+
│ │ ├── Grid/
|
|
91
|
+
│ │ ├── Icon/
|
|
92
|
+
│ │ ├── IconTabs/
|
|
93
|
+
│ │ ├── Image/
|
|
94
|
+
│ │ ├── Input/
|
|
95
|
+
│ │ ├── Link/
|
|
96
|
+
│ │ ├── List/
|
|
97
|
+
│ │ ├── Modal/
|
|
98
|
+
│ │ ├── ModalConfirmation/
|
|
99
|
+
│ │ ├── MultiSelect/
|
|
100
|
+
│ │ ├── NewModal/
|
|
101
|
+
│ │ └── Options/
|
|
102
|
+
│ ├── data/ # Design tokens (colors, spacing, etc.)
|
|
103
|
+
│ ├── design-zystem.d.ts # TypeScript definitions
|
|
104
|
+
│ └── index.jsx # Package entry point (exports all components)
|
|
105
|
+
├── dist/ # Compiled output (generated by build)
|
|
106
|
+
│ ├── index.js # UMD bundle
|
|
107
|
+
│ └── index.d.ts # TypeScript declarations
|
|
108
|
+
├── webpack.config.js # Webpack build configuration
|
|
109
|
+
├── babel.config.js # Babel transpiler configuration
|
|
110
|
+
└── package.json
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Component Catalogue
|
|
114
|
+
|
|
115
|
+
### Layout
|
|
116
|
+
|
|
117
|
+
| Component | Description |
|
|
118
|
+
| --------- | ------------------------------------------- |
|
|
119
|
+
| `Box` | Flexible container with styled-system props |
|
|
120
|
+
| `Col` | Column layout helper |
|
|
121
|
+
| `Grid` | CSS grid wrapper |
|
|
122
|
+
| `Divider` | Horizontal/vertical separator |
|
|
123
|
+
|
|
124
|
+
### Forms & Inputs
|
|
125
|
+
|
|
126
|
+
| Component | Description |
|
|
127
|
+
| ------------- | ------------------------------------- |
|
|
128
|
+
| `Input` | Text input with label and error state |
|
|
129
|
+
| `Checkbox` | Styled checkbox |
|
|
130
|
+
| `MultiSelect` | Multi-value select dropdown |
|
|
131
|
+
| `DatePicker` | Date picker component |
|
|
132
|
+
| `Button` | Styled button with variants |
|
|
133
|
+
|
|
134
|
+
### Data Display
|
|
135
|
+
|
|
136
|
+
| Component | Description |
|
|
137
|
+
| -------------- | ---------------------------- |
|
|
138
|
+
| `List` | Generic list renderer |
|
|
139
|
+
| `Icon` | Icon wrapper (FontAwesome) |
|
|
140
|
+
| `Image` | Responsive image |
|
|
141
|
+
| `CardSkeleton` | Loading skeleton placeholder |
|
|
142
|
+
| `Bulk` | Bulk action controls |
|
|
143
|
+
|
|
144
|
+
### Overlays & Interactions
|
|
145
|
+
|
|
146
|
+
| Component | Description |
|
|
147
|
+
| ------------------- | -------------------------------- |
|
|
148
|
+
| `Modal` | Standard modal dialog |
|
|
149
|
+
| `NewModal` | Enhanced modal with improved API |
|
|
150
|
+
| `ModalConfirmation` | Confirmation dialog |
|
|
151
|
+
| `Drawer` | Side panel drawer |
|
|
152
|
+
| `Options` | Dropdown options menu |
|
|
153
|
+
|
|
154
|
+
### Other
|
|
155
|
+
|
|
156
|
+
| Component | Description |
|
|
157
|
+
| ---------- | ------------------------- |
|
|
158
|
+
| `Bubble` | Chat/notification bubble |
|
|
159
|
+
| `Link` | Styled anchor link |
|
|
160
|
+
| `IconTabs` | Tab navigation with icons |
|
|
161
|
+
|
|
162
|
+
## Usage Example
|
|
163
|
+
|
|
164
|
+
```jsx
|
|
165
|
+
import { Button, Input, Modal } from 'design-zystem'
|
|
166
|
+
|
|
167
|
+
function MyComponent() {
|
|
168
|
+
return (
|
|
169
|
+
<>
|
|
170
|
+
<Input label="Email" placeholder="email@example.com" />
|
|
171
|
+
<Button variant="primary">Submit</Button>
|
|
172
|
+
</>
|
|
173
|
+
)
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## Publishing a New Version
|
|
178
|
+
|
|
179
|
+
1. Make your changes in `src/`
|
|
180
|
+
2. Update the `version` in `package.json`
|
|
181
|
+
3. Run `npm publish` — this triggers `prepublishOnly` which runs `npm run build` automatically
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
# Example: bump patch version and publish
|
|
185
|
+
npm version patch
|
|
186
|
+
npm publish
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Related Projects
|
|
190
|
+
|
|
191
|
+
| Project | Description |
|
|
192
|
+
| ------------------------------- | ------------------ |
|
|
193
|
+
| [Check](../Check) | Uses design-zystem |
|
|
194
|
+
| [ClientOffice](../ClientOffice) | Uses design-zystem |
|
|
195
|
+
| [DeliveryApp](../DeliveryApp) | Uses design-zystem |
|