@josephavelez77/design-system 0.0.1 → 0.1.1
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 +180 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +12 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2633 -2152
- package/dist/tokens/index.css +1 -1
- package/dist/tokens/variables.css +1 -1
- package/package.json +7 -4
package/README.md
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
# Base Design System
|
|
2
|
+
|
|
3
|
+
An open-source React component library for enterprise software tools, built with design tokens, dark/light theming, and full TypeScript support.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @josephavelez77/design-system
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer dependencies
|
|
14
|
+
|
|
15
|
+
Install these in your consuming project if you haven't already:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react react-dom \
|
|
19
|
+
@fortawesome/fontawesome-svg-core \
|
|
20
|
+
@fortawesome/free-solid-svg-icons \
|
|
21
|
+
@fortawesome/free-regular-svg-icons \
|
|
22
|
+
@fortawesome/react-fontawesome
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Setup
|
|
28
|
+
|
|
29
|
+
### 1. Import the design tokens (CSS variables + fonts)
|
|
30
|
+
|
|
31
|
+
Add this **once** at your app root (e.g. `main.tsx` or `_app.tsx`):
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import '@josephavelez77/design-system/styles'
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This imports all CSS custom properties (colors, spacing, typography, etc.) and loads the three fonts used by the system: **DM Sans**, **DM Serif Display**, and **JetBrains Mono**.
|
|
38
|
+
|
|
39
|
+
### 2. Set a theme
|
|
40
|
+
|
|
41
|
+
The library ships dark mode as the default (`:root`). To opt into light mode, apply `data-theme="light"` to your root element:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<html data-theme="light">
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Or toggle it dynamically:
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
document.documentElement.setAttribute('data-theme', 'light')
|
|
51
|
+
document.documentElement.removeAttribute('data-theme') // back to dark
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 3. Use components
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { Button, Alert, Badge, DataGrid } from '@josephavelez77/design-system'
|
|
58
|
+
|
|
59
|
+
export function App() {
|
|
60
|
+
return (
|
|
61
|
+
<>
|
|
62
|
+
<Alert severity="success" title="Saved!" />
|
|
63
|
+
<Button variant="primary">Click me</Button>
|
|
64
|
+
</>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Available components
|
|
72
|
+
|
|
73
|
+
| Component | Description |
|
|
74
|
+
|---|---|
|
|
75
|
+
| `Accordion` / `AccordionGroup` | Collapsible content panels |
|
|
76
|
+
| `Alert` | Inline status messages (success, error, warning, info) |
|
|
77
|
+
| `AttributeChip` | Key/value label chip |
|
|
78
|
+
| `Avatar` | User avatar (image, initials, or icon) |
|
|
79
|
+
| `Badge` | Numeric or status badge overlay |
|
|
80
|
+
| `Breadcrumb` | Navigational breadcrumb trail |
|
|
81
|
+
| `Button` | Primary action button with variants and emphasis levels |
|
|
82
|
+
| `ButtonGroup` | Grouped set of related buttons |
|
|
83
|
+
| `Card` | Generic content card container |
|
|
84
|
+
| `ChartCard` | Card with an embedded bar chart |
|
|
85
|
+
| `Checkbox` / `CheckboxGroup` | Checkbox input and grouped set |
|
|
86
|
+
| `Chip` | Compact filter or selection chip |
|
|
87
|
+
| `DataGrid` | Full-featured data table with sorting and overflow actions |
|
|
88
|
+
| `DateField` | Date text input |
|
|
89
|
+
| `DatePicker` | Calendar-based date picker |
|
|
90
|
+
| `Dialog` | Modal dialog with configurable actions |
|
|
91
|
+
| `Divider` | Horizontal or vertical rule |
|
|
92
|
+
| `Drawer` | Slide-in panel for contextual content |
|
|
93
|
+
| `FileUploader` / `FileUploaderListItem` | Drag-and-drop file upload |
|
|
94
|
+
| `GlobalToolbar` | App-level top navigation bar |
|
|
95
|
+
| `Icon` | FontAwesome icon wrapper with size tokens |
|
|
96
|
+
| `IconButton` | Icon-only button |
|
|
97
|
+
| `KpiCard` | Key performance indicator card |
|
|
98
|
+
| `ListCard` / `ListGroup` / `ListItem` | List layout primitives |
|
|
99
|
+
| `Logo` | Brand logo with orientation and size variants |
|
|
100
|
+
| `Menu` / `MenuItem` | Dropdown context menu |
|
|
101
|
+
| `MultiSelectField` | Multi-value select input |
|
|
102
|
+
| `NavDrawer` | Sidebar navigation drawer |
|
|
103
|
+
| `NumberField` | Numeric text input |
|
|
104
|
+
| `PageHeader` | Page-level heading with actions |
|
|
105
|
+
| `Pagination` / `SimplePagination` | Page navigation controls |
|
|
106
|
+
| `PasswordField` | Password input with show/hide toggle |
|
|
107
|
+
| `Popover` | Anchored floating content panel |
|
|
108
|
+
| `PriorityChip` | Priority-level indicator chip |
|
|
109
|
+
| `ProgressBar` | Linear progress indicator |
|
|
110
|
+
| `RadioButton` / `RadioButtonGroup` / `RadioButtonItem` | Radio input and grouped set |
|
|
111
|
+
| `SelectField` | Single-value select input |
|
|
112
|
+
| `Skeleton` | Loading placeholder shapes |
|
|
113
|
+
| `Spinner` | Loading spinner |
|
|
114
|
+
| `SplitButton` | Button with a secondary dropdown action |
|
|
115
|
+
| `StatusChip` | Status indicator chip |
|
|
116
|
+
| `Stepper` | Multi-step progress indicator |
|
|
117
|
+
| `Switch` / `SwitchGroup` / `SwitchItem` | Toggle switch and grouped set |
|
|
118
|
+
| `TabGroup` | Tabbed navigation |
|
|
119
|
+
| `Table` | Data table with user/status value rendering |
|
|
120
|
+
| `TextArea` | Multi-line text input |
|
|
121
|
+
| `TextField` | Single-line text input |
|
|
122
|
+
| `TimeField` | Time text input |
|
|
123
|
+
| `TimePicker` | Clock-based time picker |
|
|
124
|
+
| `Toast` | Transient notification message |
|
|
125
|
+
| `Tooltip` | Hover tooltip |
|
|
126
|
+
| `UserIdentificationTag` | User identity display (avatar + name) |
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## Design tokens
|
|
131
|
+
|
|
132
|
+
All tokens are CSS custom properties. You can use them directly in your own styles:
|
|
133
|
+
|
|
134
|
+
```css
|
|
135
|
+
.my-card {
|
|
136
|
+
background: var(--container-color-themeable-primary);
|
|
137
|
+
color: var(--text-color-themeable-primary);
|
|
138
|
+
border-radius: var(--border-radius-static-primary);
|
|
139
|
+
padding: var(--container-padding-static-primary);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Token categories: `border`, `container`, `icon`, `text`, `focus-ring`.
|
|
144
|
+
|
|
145
|
+
To import just the raw CSS variables without the Google Fonts `@import`:
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
import '@josephavelez77/design-system/tokens'
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## TypeScript
|
|
154
|
+
|
|
155
|
+
All components ship full type definitions. Every component exports its props type:
|
|
156
|
+
|
|
157
|
+
```ts
|
|
158
|
+
import type { ButtonProps, AlertProps, DataGridColumn } from '@josephavelez77/design-system'
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
## Development
|
|
164
|
+
|
|
165
|
+
```bash
|
|
166
|
+
# Install dependencies
|
|
167
|
+
npm install
|
|
168
|
+
|
|
169
|
+
# Start Storybook
|
|
170
|
+
npm run dev
|
|
171
|
+
|
|
172
|
+
# Build the package
|
|
173
|
+
npm run build
|
|
174
|
+
|
|
175
|
+
# Regenerate design tokens from JSON sources
|
|
176
|
+
npm run tokens
|
|
177
|
+
|
|
178
|
+
# Type-check
|
|
179
|
+
npm run typecheck
|
|
180
|
+
```
|