design-zystem 1.0.198 → 1.0.202

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.
Files changed (7) hide show
  1. package/README.md +64 -160
  2. package/dist/index.css +118 -0
  3. package/dist/index.d.mts +718 -0
  4. package/dist/index.d.ts +718 -0
  5. package/dist/index.js +3941 -883
  6. package/dist/index.mjs +3875 -0
  7. package/package.json +28 -10
package/README.md CHANGED
@@ -1,195 +1,99 @@
1
1
  # DesignSystem — design-zystem
2
2
 
3
- The internal React component library shared across all DevCar web applications. Published as a private npm package (`design-zystem`).
3
+ Internal React component library shared across all DevCar web apps. Published as the `design-zystem` npm package.
4
4
 
5
- ## Overview
5
+ ## Tech stack
6
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.
7
+ | Category | Technology |
8
+ | ---------- | --------------------------------------- |
9
+ | Framework | React 18 |
10
+ | Styling | styled-components 6 |
11
+ | Build | tsup (CJS + ESM) |
12
+ | TypeScript | strict, full .d.ts |
13
+ | Storybook | v10 (Vite) |
14
+ | Tests | vitest + jsdom + @testing-library/react |
8
15
 
9
- ## Tech Stack
16
+ ## Setup
10
17
 
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`) |
18
+ ```bash
19
+ npm install
20
+ npx playwright install chromium # required once for Storybook browser tests
21
+ ```
19
22
 
20
- ## Package Info
23
+ ## Scripts
21
24
 
22
- ```json
23
- {
24
- "name": "design-zystem",
25
- "version": "1.0.197",
26
- "main": "dist/index.js"
27
- }
25
+ ```bash
26
+ npm run build # tsup → dist/ (CJS + ESM + .d.ts)
27
+ npm run storybook # Storybook dev server on :6006
28
+ npm test # behavioral unit tests (jsdom)
29
+ npm publish # build + publish to npm
28
30
  ```
29
31
 
30
- ## Prerequisites
32
+ ## Storybook
31
33
 
32
- - Node.js >= 18
33
- - npm >= 9
34
- - npm access to publish the package (private registry or npm account with access)
34
+ `npm run storybook` launches a local dev server on `:6006` with interactive docs and stories for all 35+ components. Each component has an auto-generated **Docs** page (props table + live playground) and multiple variant stories.
35
35
 
36
- ## Installation (as a dependency)
36
+ A static version can be generated with `npm run build-storybook` (outputs to `storybook-static/`) for deployment to a hosting service — not committed to the repo.
37
37
 
38
- In any DevCar web project:
38
+ ## Structure
39
39
 
40
- ```bash
41
- npm install design-zystem
40
+ ```
41
+ src/
42
+ index.tsx # barrel export
43
+ Components/ # one folder per component
44
+ <Name>/
45
+ <Name>.tsx # component + exported interface <Name>Props
46
+ <Name>.css
47
+ <Name>.stories.tsx
48
+ data/
49
+ colors.ts # color palette
50
+ globalMethods.ts # shared helpers
51
+ __tests__/ # behavioral tests (vitest + @testing-library/react)
52
+ dist/ # generated — do not edit
42
53
  ```
43
54
 
44
- Or with a specific version:
55
+ ## Components
45
56
 
46
- ```bash
47
- npm install design-zystem@1.0.197
48
- ```
57
+ ### Layout
49
58
 
50
- ## Development Setup
59
+ `Box` · `Col` · `Row` · `Grid` · `PageContainer` · `Divider` · `Bulk`
51
60
 
52
- ```bash
53
- # Clone the repository
54
- git clone <repo-url>
55
- cd DesignSystem
61
+ ### Typography & media
56
62
 
57
- # Install dependencies
58
- npm install
63
+ `Text` · `Bubble` · `Link` · `Icon` · `Image`
59
64
 
60
- # Build the library
61
- npm run build
62
- ```
65
+ ### Inputs
63
66
 
64
- ## Available Scripts
67
+ `Button` · `Input` · `Checkbox` · `Radio` · `Switch` · `Select` · `MultiSelect` · `DatePicker`
65
68
 
66
- ```bash
67
- # Build the library (outputs to dist/)
68
- npm run build
69
+ ### Navigation
69
70
 
70
- # Build and publish to npm (runs build automatically via prepublishOnly)
71
- npm publish
72
- ```
71
+ `Tabs` · `IconTabs` · `Stepper` · `Options`
73
72
 
74
- ## Project Structure
73
+ ### Overlays
75
74
 
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
- ```
75
+ `Modal` · `NewModal` · `ModalConfirmation` · `Drawer` · `Popover` · `Tooltip`
112
76
 
113
- ## Component Catalogue
77
+ ### Data
114
78
 
115
- ### Layout
79
+ `List` · `ListItem` · `Table` · `CardSkeleton`
116
80
 
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'
81
+ ## Usage
166
82
 
167
- function MyComponent() {
168
- return (
169
- <>
170
- <Input label="Email" placeholder="email@example.com" />
171
- <Button variant="primary">Submit</Button>
172
- </>
173
- )
174
- }
83
+ ```tsx
84
+ import { Button, Input, Modal } from 'design-zystem'
175
85
  ```
176
86
 
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
87
+ ## Publishing a new version
182
88
 
183
- ```bash
184
- # Example: bump patch version and publish
185
- npm version patch
186
- npm publish
187
- ```
89
+ 1. Bump `version` in `package.json`
90
+ 2. `npm publish` — triggers `prepublishOnly` → `npm run build` automatically
91
+ 3. Update `design-zystem` version in `ClientOffice/package.json` + `DeliveryApp/package.json`
188
92
 
189
- ## Related Projects
93
+ ## Related projects
190
94
 
191
- | Project | Description |
192
- | ------------------------------- | ------------------ |
193
- | [Check](../Check) | Uses design-zystem |
194
- | [ClientOffice](../ClientOffice) | Uses design-zystem |
195
- | [DeliveryApp](../DeliveryApp) | Uses design-zystem |
95
+ | Project | Description |
96
+ | ------------ | ------------------ |
97
+ | ClientOffice | Uses design-zystem |
98
+ | DeliveryApp | Uses design-zystem |
99
+ | Check | Uses design-zystem |
package/dist/index.css ADDED
@@ -0,0 +1,118 @@
1
+ /* src/Components/DatePicker/DatePicker.css */
2
+ .date-picker-container {
3
+ position: relative;
4
+ }
5
+ .date-picker-popup {
6
+ position: absolute;
7
+ top: 0;
8
+ right: 56px;
9
+ z-index: 50;
10
+ background-color: white;
11
+ border: 1px solid #e5e7eb;
12
+ border-radius: 8px;
13
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
14
+ min-width: max-content;
15
+ }
16
+ .date-picker-content {
17
+ display: flex;
18
+ }
19
+ .calendar-container {
20
+ padding: 16px;
21
+ width: 320px;
22
+ }
23
+ .calendar-header {
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: space-between;
27
+ margin-bottom: 16px;
28
+ }
29
+ .calendar-nav-button {
30
+ padding: 4px;
31
+ border-radius: 4px;
32
+ background: none;
33
+ border: none;
34
+ cursor: pointer;
35
+ }
36
+ .calendar-nav-button:hover {
37
+ background-color: #f3f4f6;
38
+ }
39
+ .calendar-nav-icon {
40
+ width: 20px;
41
+ height: 20px;
42
+ }
43
+ .calendar-month-title {
44
+ font-size: 18px;
45
+ font-weight: 600;
46
+ }
47
+ .calendar-days-header {
48
+ display: grid;
49
+ grid-template-columns: repeat(7, 1fr);
50
+ gap: 4px;
51
+ margin-bottom: 8px;
52
+ }
53
+ .calendar-day-name {
54
+ font-size: 12px;
55
+ font-weight: 500;
56
+ color: #6b7280;
57
+ text-align: center;
58
+ padding: 8px 0;
59
+ }
60
+ .calendar-days-grid {
61
+ display: grid;
62
+ grid-template-columns: repeat(7, 1fr);
63
+ gap: 4px;
64
+ }
65
+ .calendar-day-button {
66
+ padding: 8px;
67
+ font-size: 14px;
68
+ border-radius: 4px;
69
+ transition: all 0.15s;
70
+ background: none;
71
+ border: none;
72
+ cursor: pointer;
73
+ }
74
+ .calendar-day-disabled {
75
+ color: #d1d5db;
76
+ cursor: not-allowed;
77
+ }
78
+ .calendar-day-button:not(.calendar-day-disabled):hover {
79
+ background-color: #eff6ff;
80
+ }
81
+ .calendar-day-in-range {
82
+ background-color: #dbeafe;
83
+ color: #1d4ed8;
84
+ }
85
+ .calendar-day-selected {
86
+ background-color: #3b82f6;
87
+ color: white;
88
+ }
89
+ .calendar-day-selected:hover {
90
+ background-color: #2563eb;
91
+ }
92
+ .calendar-day-today {
93
+ background-color: #f3f4f6;
94
+ font-weight: 600;
95
+ }
96
+ .selected-dates-display {
97
+ margin-top: 16px;
98
+ padding: 12px;
99
+ background-color: #f9fafb;
100
+ border-radius: 4px;
101
+ font-size: 14px;
102
+ }
103
+ .selected-dates-text {
104
+ color: #4b5563;
105
+ }
106
+ .select-end-date-hint {
107
+ color: #2563eb;
108
+ margin-left: 8px;
109
+ }
110
+ .reset-button {
111
+ padding: 8px 16px;
112
+ background-color: #9ca3af;
113
+ color: white;
114
+ border-radius: 4px;
115
+ font-size: 14px;
116
+ border: none;
117
+ cursor: pointer;
118
+ }