ssovee-os-web-ui 0.1.8 → 0.1.10
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 +21 -100
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,79 +1,38 @@
|
|
|
1
1
|
# ssovee-os-web-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Reusable React UI components for consuming projects.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This package provides a shared set of React UI components for SSOVEE applications. It ships component styles through the package stylesheet and includes the Tailwind dependency required by the library.
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
- TypeScript-friendly component interfaces
|
|
9
|
-
- Tree-shakeable package build output
|
|
10
|
-
- SemVer-friendly publish workflow
|
|
9
|
+
## Features
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
- Ready-to-use React UI components
|
|
12
|
+
- Packaged theme stylesheet for shared visual tokens
|
|
13
|
+
- TypeScript types for the main public components
|
|
13
14
|
|
|
14
|
-
Install
|
|
15
|
+
## Install
|
|
15
16
|
|
|
16
17
|
```bash
|
|
17
18
|
npm install ssovee-os-web-ui
|
|
18
19
|
```
|
|
19
20
|
|
|
20
|
-
If your app does not already include React
|
|
21
|
+
If your app does not already include React, install it as well:
|
|
21
22
|
|
|
22
23
|
```bash
|
|
23
24
|
npm install react react-dom
|
|
24
25
|
```
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
## CSS import
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## Tailwind CSS setup
|
|
31
|
-
|
|
32
|
-
Import the supplied base theme once from your application's global CSS file:
|
|
29
|
+
In the consuming app, add only the package theme stylesheet to your global CSS:
|
|
33
30
|
|
|
34
31
|
```css
|
|
35
32
|
@import "ssovee-os-web-ui/theme.css";
|
|
36
33
|
```
|
|
37
34
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
```js
|
|
41
|
-
import ssoveePreset from "ssovee-os-web-ui/tailwind-preset";
|
|
42
|
-
|
|
43
|
-
export default {
|
|
44
|
-
content: [
|
|
45
|
-
"./src/**/*.{js,ts,jsx,tsx}",
|
|
46
|
-
"./node_modules/ssovee-os-web-ui/dist/**/*.{js,mjs,cjs}",
|
|
47
|
-
],
|
|
48
|
-
presets: [ssoveePreset],
|
|
49
|
-
};
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
For Tailwind v4, import the package theme stylesheet directly in your global CSS. The package theme entry already carries the Tailwind bootstrap and library source scanning for the built dist output, so consumers do not need to repeat the `@source`/`@import "tailwindcss"` lines in their app CSS:
|
|
53
|
-
|
|
54
|
-
```css
|
|
55
|
-
@import "ssovee-os-web-ui/theme.css";
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
If you use a project-level `tailwind.config.js`, the package also publishes a ready-to-reference config entry that already applies the preset by default:
|
|
59
|
-
|
|
60
|
-
```js
|
|
61
|
-
import ssoveePreset from "ssovee-os-web-ui/tailwind-preset";
|
|
62
|
-
|
|
63
|
-
export default {
|
|
64
|
-
presets: [ssoveePreset],
|
|
65
|
-
};
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
You can also point your app at the published config file directly via the package export:
|
|
69
|
-
|
|
70
|
-
```js
|
|
71
|
-
import ssoveePreset from "ssovee-os-web-ui/tailwind.config.js";
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
The preset includes the library's semantic colors (`primary`, `secondary`, `surface-*`, `brand-color`, `border-1`, and `muted`). Override the `--ssovee-*` CSS variables in your application to customize the theme.
|
|
75
|
-
|
|
76
|
-
## Usage
|
|
35
|
+
## Use components
|
|
77
36
|
|
|
78
37
|
```tsx
|
|
79
38
|
import { Button, Input, Card } from "ssovee-os-web-ui";
|
|
@@ -88,17 +47,19 @@ export function Example() {
|
|
|
88
47
|
}
|
|
89
48
|
```
|
|
90
49
|
|
|
91
|
-
##
|
|
50
|
+
## Public exports
|
|
92
51
|
|
|
93
|
-
The
|
|
52
|
+
The package exports these components and types for external use:
|
|
94
53
|
|
|
95
54
|
- `Button`
|
|
96
55
|
- `Input`
|
|
97
56
|
- `TextArea`
|
|
98
57
|
- `Select`
|
|
58
|
+
- `SelectOption`
|
|
99
59
|
- `Checkbox`
|
|
100
60
|
- `Toggle`
|
|
101
61
|
- `Dropdown`
|
|
62
|
+
- `DropdownOption`
|
|
102
63
|
- `Loading`
|
|
103
64
|
- `Toast`
|
|
104
65
|
- `Alert`
|
|
@@ -117,50 +78,10 @@ The library publishes the following shared UI components from the package entry
|
|
|
117
78
|
- `Tabs`
|
|
118
79
|
- `Typography`
|
|
119
80
|
- `ImageWithPlaceholder`
|
|
120
|
-
- `Table` and its
|
|
121
|
-
|
|
122
|
-
Internal helper hooks and utilities such as `useShortcutFormatter` and `cn` are used within the component implementation and are not documented as public package exports.
|
|
123
|
-
|
|
124
|
-
## Package structure
|
|
125
|
-
|
|
126
|
-
```text
|
|
127
|
-
src/
|
|
128
|
-
components/
|
|
129
|
-
hooks/
|
|
130
|
-
utils/
|
|
131
|
-
index.ts
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## Build
|
|
135
|
-
|
|
136
|
-
```bash
|
|
137
|
-
npm install
|
|
138
|
-
npm run build
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
## Internal component helpers
|
|
142
|
-
|
|
143
|
-
The source tree contains helper hooks and utilities used only by the component implementation. These are internal implementation details and are not intended to be consumed directly via the library package entry.
|
|
144
|
-
|
|
145
|
-
## Versioning and release
|
|
146
|
-
|
|
147
|
-
Use semantic versioning for releases:
|
|
148
|
-
|
|
149
|
-
```bash
|
|
150
|
-
npm run release:patch
|
|
151
|
-
npm run release:minor
|
|
152
|
-
npm run release:major
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
Then publish:
|
|
156
|
-
|
|
157
|
-
```bash
|
|
158
|
-
npm login
|
|
159
|
-
npm publish --access public
|
|
160
|
-
```
|
|
81
|
+
- `Table` and its subcomponents
|
|
161
82
|
|
|
162
|
-
|
|
83
|
+
Internal helpers such as `useShortcutFormatter` and `cn` are used inside the library implementation and are not part of the recommended consumer API.
|
|
163
84
|
|
|
164
|
-
|
|
85
|
+
## License
|
|
165
86
|
|
|
166
|
-
|
|
87
|
+
MIT
|