ssovee-os-web-ui 0.1.7 → 0.1.9

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 CHANGED
@@ -1,79 +1,28 @@
1
1
  # ssovee-os-web-ui
2
2
 
3
- A standalone React UI component library that packages the shared, reusable components from this repository into a publishable npm package.
3
+ Reusable React UI components for consuming projects.
4
4
 
5
- ## Features
6
-
7
- - Shared UI component exports for multiple applications
8
- - TypeScript-friendly component interfaces
9
- - Tree-shakeable package build output
10
- - SemVer-friendly publish workflow
11
-
12
- ## Installation
13
-
14
- Install the library in your app:
5
+ ## Install
15
6
 
16
7
  ```bash
17
8
  npm install ssovee-os-web-ui
18
9
  ```
19
10
 
20
- If your app does not already include React and React DOM, install them as well:
11
+ If your app does not already include React, install it as well:
21
12
 
22
13
  ```bash
23
14
  npm install react react-dom
24
15
  ```
25
16
 
26
- This library uses Tailwind CSS. Install Tailwind CSS in the consuming application and follow the configuration below so Tailwind generates the library's classes.
27
-
28
- The package entry is intended to provide the public React component surface. Internal helper hooks and utilities used by the components remain implementation details and are not part of the consumer-facing API.
29
-
30
- ## Tailwind CSS setup
31
-
32
- Import the supplied base theme once from your application's global CSS file:
33
-
34
- ```css
35
- @import "ssovee-os-web-ui/theme.css";
36
- ```
37
-
38
- For Tailwind v3, add the library build output to `content` and use the supplied preset:
17
+ ## CSS import
39
18
 
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:
19
+ In the consuming app, add only the package theme stylesheet to your global CSS:
53
20
 
54
21
  ```css
55
22
  @import "ssovee-os-web-ui/theme.css";
56
23
  ```
57
24
 
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
25
+ ## Use components
77
26
 
78
27
  ```tsx
79
28
  import { Button, Input, Card } from "ssovee-os-web-ui";
@@ -88,17 +37,19 @@ export function Example() {
88
37
  }
89
38
  ```
90
39
 
91
- ## Available exports
40
+ ## Public exports
92
41
 
93
- The library publishes the following shared UI components from the package entry point:
42
+ The package exports these components and types for external use:
94
43
 
95
44
  - `Button`
96
45
  - `Input`
97
46
  - `TextArea`
98
47
  - `Select`
48
+ - `SelectOption`
99
49
  - `Checkbox`
100
50
  - `Toggle`
101
51
  - `Dropdown`
52
+ - `DropdownOption`
102
53
  - `Loading`
103
54
  - `Toast`
104
55
  - `Alert`
@@ -117,50 +68,6 @@ The library publishes the following shared UI components from the package entry
117
68
  - `Tabs`
118
69
  - `Typography`
119
70
  - `ImageWithPlaceholder`
120
- - `Table` and its table subcomponents
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
- ```
161
-
162
- ## CI publish workflow
163
-
164
- This repo is prepared for automated release publishing through GitHub Actions using the `NODE_AUTH_TOKEN` secret.
71
+ - `Table` and its subcomponents
165
72
 
166
- Before publishing, add an npm automation token with publish permission as the repository's `NPM_TOKEN` Actions secret. Create a version commit and matching tag (for example, `v0.1.1`), then push the tag to trigger the workflow.
73
+ Internal helpers such as `useShortcutFormatter` and `cn` are used inside the library implementation and are not part of the recommended consumer API.
package/dist/index.d.cts CHANGED
@@ -299,4 +299,4 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
299
299
  declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
300
300
  declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
301
301
 
302
- export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
302
+ export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
package/dist/index.d.ts CHANGED
@@ -299,4 +299,4 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
299
299
  declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
300
300
  declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
301
301
 
302
- export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
302
+ export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ssovee-os-web-ui",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "Reusable UI component library for shared applications.",
5
5
  "author": "SSOVEE",
6
6
  "license": "MIT",
@@ -45,6 +45,7 @@
45
45
  "build": "tsup",
46
46
  "prepublishOnly": "npm run typecheck && npm run build",
47
47
  "typecheck": "tsc --noEmit",
48
+ "test": "vitest run",
48
49
  "release:patch": "npm version patch",
49
50
  "release:minor": "npm version minor",
50
51
  "release:major": "npm version major",
@@ -59,10 +60,15 @@
59
60
  "@phosphor-icons/react": ">=2"
60
61
  },
61
62
  "devDependencies": {
63
+ "@testing-library/jest-dom": "^6.9.1",
64
+ "@testing-library/react": "^16.3.2",
65
+ "@testing-library/user-event": "^14.6.1",
62
66
  "@types/react": "^18.3.12",
63
67
  "@types/react-dom": "^18.3.1",
68
+ "jsdom": "^29.1.1",
64
69
  "tsup": "^8.3.3",
65
- "typescript": "^5.7.2"
70
+ "typescript": "^5.7.2",
71
+ "vitest": "^4.1.10"
66
72
  },
67
73
  "publishConfig": {
68
74
  "access": "public"