@geomak/ui 1.0.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 +118 -0
- package/dist/index.cjs +2674 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1273 -0
- package/dist/index.d.ts +1273 -0
- package/dist/index.js +2602 -0
- package/dist/index.js.map +1 -0
- package/package.json +83 -0
package/README.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# @geomak/ui
|
|
2
|
+
|
|
3
|
+
Oxygen Design System — reusable UI primitives for React applications.
|
|
4
|
+
|
|
5
|
+
Built with **React 19**, **Radix UI** (accessibility & behaviour), and **Tailwind CSS v3**. Ships as ESM + CJS + TypeScript declarations.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @geomak/ui
|
|
13
|
+
# or
|
|
14
|
+
yarn add @geomak/ui
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Import the stylesheet once at your app root:
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import '@geomak/ui/styles'
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Wrap your app with the required providers:
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { TooltipProvider, NotificationProvider } from '@geomak/ui'
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<NotificationProvider>
|
|
31
|
+
<TooltipProvider>
|
|
32
|
+
{/* your app */}
|
|
33
|
+
</TooltipProvider>
|
|
34
|
+
</NotificationProvider>
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## Components
|
|
42
|
+
|
|
43
|
+
### Inputs
|
|
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`
|
|
48
|
+
|
|
49
|
+
### Icons
|
|
50
|
+
`Icon.XClose` · `Icon.ChevronRight` · `Icon.Dashboard` · `Icon.FleetIcon` · … (50+ icons)
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Development
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
# Install dependencies
|
|
58
|
+
yarn
|
|
59
|
+
|
|
60
|
+
# Start Storybook
|
|
61
|
+
yarn storybook
|
|
62
|
+
|
|
63
|
+
# Build the library (ESM + CJS + .d.ts)
|
|
64
|
+
yarn build
|
|
65
|
+
|
|
66
|
+
# Type-check
|
|
67
|
+
yarn typecheck
|
|
68
|
+
|
|
69
|
+
# Lint
|
|
70
|
+
yarn lint
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Tailwind setup (consuming app)
|
|
76
|
+
|
|
77
|
+
The package ships a colour palette. Add to your `tailwind.config.js`:
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
const PALETTE = require('@geomak/ui/src/utils/palette.json')
|
|
81
|
+
|
|
82
|
+
module.exports = {
|
|
83
|
+
content: [
|
|
84
|
+
'./src/**/*.{ts,tsx}',
|
|
85
|
+
'./node_modules/@geomak/ui/dist/**/*.js',
|
|
86
|
+
],
|
|
87
|
+
darkMode: 'class',
|
|
88
|
+
theme: {
|
|
89
|
+
colors: PALETTE,
|
|
90
|
+
// ... your extensions
|
|
91
|
+
},
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Releases
|
|
98
|
+
|
|
99
|
+
This package uses [semantic-release](https://github.com/semantic-release/semantic-release) with [Conventional Commits](https://www.conventionalcommits.org/).
|
|
100
|
+
|
|
101
|
+
| Commit prefix | Version bump |
|
|
102
|
+
|---|---|
|
|
103
|
+
| `fix:` | patch (0.0.x) |
|
|
104
|
+
| `feat:` | minor (0.x.0) |
|
|
105
|
+
| `feat!:` / `BREAKING CHANGE:` | major (x.0.0) |
|
|
106
|
+
|
|
107
|
+
Merging to `main` automatically lints, type-checks, publishes to npm, and deploys Storybook to Netlify.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Publishing
|
|
112
|
+
|
|
113
|
+
Handled automatically by GitHub Actions on merge to `main`. To publish manually:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
yarn build
|
|
117
|
+
npm publish --access public
|
|
118
|
+
```
|