@geomak/ui 6.17.2 → 6.18.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 +59 -32
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @geomak/ui
|
|
2
2
|
|
|
3
|
-
Oxygen Design System —
|
|
3
|
+
**Oxygen Design System** — a production-grade React component library for enterprise apps: internal dashboards, CRM tools, and landing pages.
|
|
4
4
|
|
|
5
|
-
Built with **React 19**, **Radix UI** (accessibility & behaviour),
|
|
5
|
+
Built with **React 19**, **Radix UI** (accessibility & behaviour), **Tailwind CSS v3**, and **Framer Motion**. Fully themeable through a CSS-variable design-token layer, with first-class light/dark support. Ships as ESM + CJS + TypeScript declarations.
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -20,10 +20,10 @@ Import the stylesheet once at your app root:
|
|
|
20
20
|
import '@geomak/ui/styles'
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
Wrap your app with the
|
|
23
|
+
Wrap your app with the providers for the features you use:
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
|
-
import {
|
|
26
|
+
import { NotificationProvider, TooltipProvider } from '@geomak/ui'
|
|
27
27
|
|
|
28
28
|
function App() {
|
|
29
29
|
return (
|
|
@@ -36,67 +36,94 @@ function App() {
|
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
Optional providers: `ThemeProvider` (scoped theming / dark mode), `CartProvider` (e-commerce cart state).
|
|
40
|
+
|
|
39
41
|
---
|
|
40
42
|
|
|
41
43
|
## Components
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
`Button` · `TextInput` · `NumberInput` · `Password` · `SearchInput` · `Checkbox` · `Switch` · `Dropdown` · `AutoComplete` · `TreeSelect` · `FileInput` · `Temporal.DatePicker` · `Temporal.TemporalPicker` · `DropdownPill`
|
|
45
|
-
|
|
46
|
-
### Core
|
|
47
|
-
`Modal` · `Drawer` · `Tooltip` · `Tabs` · `Tree` · `ToggleButton` · `Table` · `List` · `MenuBar` · `ContextMenu` · `Wizard` · `Catalog` · `CatalogGrid` · `CatalogCarousel` · `GridCard` · `OpaqueGridCard` · `ScalableContainer` · `LoadingSpinner` · `FadingBase` · `Notification` · `ThemeSwitch` · `IconButton`
|
|
45
|
+
60+ components across the following groups. Browse the full, interactive catalog with live controls and guides in **Storybook** (`yarn storybook`, or the deployed build on Netlify).
|
|
48
46
|
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
| Group | Components |
|
|
48
|
+
|---|---|
|
|
49
|
+
| **Layout** | AppShell · Box · Flex · Grid · Portal · ScalableContainer · FadingBase |
|
|
50
|
+
| **Navigation** | TopBar · Sidebar · Breadcrumbs · ContextMenu · MegaMenu |
|
|
51
|
+
| **Buttons** | Button · IconButton · FAB |
|
|
52
|
+
| **Inputs** | TextInput · NumberInput · Password · SearchInput · TextArea · Checkbox · Switch · RadioGroup · SegmentedControl · Dropdown · AutoComplete · TreeSelect · TagsInput · Slider · Rating · OtpInput · FileInput · ColorPicker · DatePicker · DateRangePicker · TimePicker |
|
|
53
|
+
| **Forms** | Form (`useForm` API) · CreditCardForm |
|
|
54
|
+
| **Data Display** | Table · List · Tree · Tabs · Accordion · Card · CardCarousel · Statistic · Avatar · Badge · Kbd · Calendar · Typography |
|
|
55
|
+
| **Feedback** | Modal · Drawer · Tooltip · Notification · PopConfirm · Wizard |
|
|
56
|
+
| **Progress** | LoadingSpinner · Skeleton |
|
|
57
|
+
| **E-Commerce** | Cart · CartProvider / `useCart` · CartButton · EmptyCart · Checkout |
|
|
58
|
+
| **Theming** | ThemeProvider · ThemeSwitch |
|
|
51
59
|
|
|
52
60
|
---
|
|
53
61
|
|
|
54
|
-
##
|
|
62
|
+
## Design tokens
|
|
55
63
|
|
|
56
|
-
|
|
57
|
-
# Install dependencies
|
|
58
|
-
yarn
|
|
64
|
+
Every visual decision is driven by a CSS-variable token layer (colours, radius, shadows, typography, density, motion, z-index) — swap any of it at runtime with a single override. Tokens are also exported as JS for canvas / email / SSR contexts:
|
|
59
65
|
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
```tsx
|
|
67
|
+
import { semanticTokens, vars, palette } from '@geomak/ui/tokens'
|
|
62
68
|
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
// CSS-var references (respond to light/dark automatically)
|
|
70
|
+
<div style={{ background: vars.color.surface, borderRadius: vars.radius.lg }} />
|
|
71
|
+
|
|
72
|
+
// Resolved hex/px values
|
|
73
|
+
semanticTokens.dark.accent // '#2d88ff'
|
|
74
|
+
```
|
|
65
75
|
|
|
66
|
-
|
|
67
|
-
yarn typecheck
|
|
76
|
+
Override globally after importing the stylesheet:
|
|
68
77
|
|
|
69
|
-
|
|
70
|
-
|
|
78
|
+
```css
|
|
79
|
+
:root { --color-accent: #7c3aed; }
|
|
71
80
|
```
|
|
72
81
|
|
|
82
|
+
See the **Tokens**, **Palette**, and **Parameterization** guides in Storybook.
|
|
83
|
+
|
|
73
84
|
---
|
|
74
85
|
|
|
75
86
|
## Tailwind setup (consuming app)
|
|
76
87
|
|
|
77
|
-
|
|
88
|
+
To use the same tokens and utilities in your own markup, extend your Tailwind config with the shipped brand palette. The library's compiled `styles` already cover the components themselves — this step is only needed for your own classes.
|
|
78
89
|
|
|
79
90
|
```js
|
|
80
91
|
const PALETTE = require('@geomak/ui/src/utils/palette.json')
|
|
81
92
|
|
|
82
93
|
module.exports = {
|
|
83
|
-
content: [
|
|
84
|
-
'./src/**/*.{ts,tsx}',
|
|
85
|
-
'./node_modules/@geomak/ui/dist/**/*.js',
|
|
86
|
-
],
|
|
94
|
+
content: ['./src/**/*.{ts,tsx}', './node_modules/@geomak/ui/dist/**/*.js'],
|
|
87
95
|
darkMode: 'class',
|
|
88
96
|
theme: {
|
|
89
|
-
|
|
90
|
-
|
|
97
|
+
extend: {
|
|
98
|
+
colors: PALETTE,
|
|
99
|
+
// semantic utilities map to the CSS vars, e.g.:
|
|
100
|
+
// background: 'var(--color-background)', surface: 'var(--color-surface)', …
|
|
101
|
+
},
|
|
91
102
|
},
|
|
92
103
|
}
|
|
93
104
|
```
|
|
94
105
|
|
|
106
|
+
The library's own config also restores the standard **gray / slate / zinc** ramps and **black** alongside the brand palette, so the basic neutrals are always available.
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Development
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
yarn # install dependencies
|
|
114
|
+
yarn storybook # start Storybook
|
|
115
|
+
yarn build # build the library (ESM + CJS + .d.ts + styles)
|
|
116
|
+
yarn typecheck # type-check
|
|
117
|
+
yarn lint # lint
|
|
118
|
+
yarn test # run unit tests (Vitest)
|
|
119
|
+
yarn ci # typecheck + lint + test
|
|
120
|
+
```
|
|
121
|
+
|
|
95
122
|
---
|
|
96
123
|
|
|
97
124
|
## Releases
|
|
98
125
|
|
|
99
|
-
|
|
126
|
+
Uses [semantic-release](https://github.com/semantic-release/semantic-release) with [Conventional Commits](https://www.conventionalcommits.org/).
|
|
100
127
|
|
|
101
128
|
| Commit prefix | Version bump |
|
|
102
129
|
|---|---|
|
|
@@ -104,7 +131,7 @@ This package uses [semantic-release](https://github.com/semantic-release/semanti
|
|
|
104
131
|
| `feat:` | minor (0.x.0) |
|
|
105
132
|
| `feat!:` / `BREAKING CHANGE:` | major (x.0.0) |
|
|
106
133
|
|
|
107
|
-
Merging to `main` automatically lints, type-checks, publishes to npm, and deploys Storybook to Netlify.
|
|
134
|
+
Merging to `main` automatically lints, type-checks, tests, publishes to npm, and deploys Storybook to Netlify.
|
|
108
135
|
|
|
109
136
|
---
|
|
110
137
|
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED