@seekho/ui 0.1.6 → 0.1.8

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/readme.md +39 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seekho/ui",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "Seekho internal UI component library",
5
5
  "keywords": [
6
6
  "seekho",
package/readme.md CHANGED
@@ -6,9 +6,7 @@ Seekho internal UI component library — shared components, hooks, and utilities
6
6
 
7
7
  | Export | Description |
8
8
  | ------ | ----------- |
9
- | `<Button>` | Primary, secondary, danger, ghost variants with loading state |
10
- | `<Badge>` | Status badges (success, warning, danger, info) |
11
- | `<Input>` | Form input with label, hint, and error state |
9
+ | `<Modal>` | Confirmation/dialog modal with hotkey support (Enter to confirm, Esc to close), loading state, warning variant, and stacked modal management |
12
10
  | `useLocalStorage` | useState backed by localStorage |
13
11
  | `cn()` | Utility to merge Tailwind class names |
14
12
 
@@ -26,79 +24,65 @@ npm run lint # type check
26
24
  ### 1. Install
27
25
 
28
26
  ```bash
29
- # If published to npm:
30
- npm install seekho-ui
27
+ npm install @seekho/ui
28
+ ```
29
+
30
+ ### 2. Install peer dependencies
31
31
 
32
- # If using local path during development:
33
- npm install ../seekho-ui
32
+ ```bash
33
+ npm install react-hotkeys-hook
34
34
  ```
35
35
 
36
- ### 2. Add library source to your Tailwind content paths
36
+ ### 3. Import styles once
37
37
 
38
- In your app's `tailwind.config.js` (or `tailwind.css` for v4):
38
+ In your app's entry file (`src/index.tsx`, `src/main.tsx`, `app/layout.tsx`, or `pages/_app.tsx`):
39
39
 
40
- ```js
41
- // tailwind.config.js
42
- module.exports = {
43
- content: [
44
- "./src/**/*.{ts,tsx}",
45
- "./node_modules/seekho-ui/dist/**/*.js", // <-- add this
46
- ],
47
- }
40
+ ```tsx
41
+ import "@seekho/ui/styles.css";
48
42
  ```
49
43
 
50
- ### 3. Import and use
44
+ > The CSS is pre-built and works with any Tailwind version (v3, v4, or no Tailwind at all) — no PostCSS configuration needed.
45
+
46
+ ### 4. Use components
51
47
 
52
48
  ```tsx
53
- import { Button, Badge, Input, useLocalStorage, cn } from "seekho-ui";
54
-
55
- export function MyPage() {
56
- return (
57
- <div>
58
- <Button variant="primary" onClick={() => {}}>Save</Button>
59
- <Badge variant="success">Active</Badge>
60
- <Input label="Email" placeholder="you@seekho.ai" />
61
- </div>
62
- );
63
- }
49
+ import { Modal } from "@seekho/ui";
64
50
  ```
65
51
 
66
- ## Publishing
52
+ Refer to Storybook for usage examples of each component.
67
53
 
68
- ### npm (recommended for internal use)
54
+ ## Modal props
69
55
 
70
- ```bash
71
- # Login once
72
- npm login
56
+ | Prop | Type | Default | Description |
57
+ | ---- | ---- | ------- | ----------- |
58
+ | `show` | `boolean` | required | Controls visibility |
59
+ | `title` | `string` | `""` | Modal header title |
60
+ | `onHide` | `() => void` | — | Called on Cancel / Esc key |
61
+ | `handleConfirmation` | `() => void` | — | Called on Confirm / Enter key |
62
+ | `handleConfirmationBtnText` | `string` | `"Confirm"` | Confirm button label |
63
+ | `isLoading` | `boolean` | `false` | Shows spinner, disables buttons |
64
+ | `isWarning` | `boolean` | `false` | Red confirm button + warning icon |
65
+ | `isButtonsRequired` | `boolean` | `true` | Hide footer buttons if false |
66
+ | `className` | `string` | — | Extra classes on the modal panel |
67
+ | `children` | `ReactNode` | — | Modal body content |
73
68
 
74
- # Publish
75
- npm publish
69
+ ## Publishing
76
70
 
77
- # Or bump version first
78
- npm version patch # 0.1.0 → 0.1.1
71
+ ```bash
72
+ git add .
73
+ git commit -m "your message"
74
+ npm version patch # or minor / major
79
75
  npm publish
80
76
  ```
81
77
 
82
- ### GitHub Packages (free private hosting)
83
-
84
- 1. Add to `package.json`: `"name": "@seekho/ui"`
85
- 2. Create `.npmrc`:
86
-
87
- ```ini
88
- @seekho:registry=https://npm.pkg.github.com
89
- //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
90
- ```
91
-
92
- 3. `npm publish`
93
-
94
78
  ## Adding a new component
95
79
 
96
80
  ```text
97
81
  src/components/
98
82
  └── MyComponent/
99
- ├── MyComponent.tsx # component + types
83
+ ├── MyComponent.tsx # component + types
100
84
  ├── MyComponent.stories.tsx
101
- └── index.ts # re-export
85
+ └── index.ts # re-export
102
86
  ```
103
87
 
104
88
  Then add `export * from "./MyComponent"` to [src/components/index.ts](src/components/index.ts).
@@ -113,7 +97,7 @@ seekho-ui/
113
97
  │ ├── utils/ # Pure utility functions
114
98
  │ └── index.ts # Single entry point
115
99
  ├── .storybook/ # Storybook config
116
- ├── tsup.config.ts # Build config
117
- └── tailwind.config.js # Tailwind (for Storybook)
100
+ ├── postcss.config.js # PostCSS (Tailwind v3 for Storybook)
101
+ ├── tailwind.config.js # Tailwind config + brand colors
102
+ └── tsup.config.ts # Build config
118
103
  ```
119
- # seekho-ui