@seekho/ui 0.1.15 → 0.1.16

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 +40 -54
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seekho/ui",
3
- "version": "0.1.15",
3
+ "version": "0.1.16",
4
4
  "description": "Seekho internal UI component library",
5
5
  "keywords": [
6
6
  "seekho",
package/readme.md CHANGED
@@ -1,103 +1,89 @@
1
1
  # seekho-ui
2
2
 
3
- Seekho internal UI component library — shared components, hooks, and utilities for internal tools built on React + Tailwind.
3
+ A React component library built with TypeScript and Tailwind CSS — pre-built CSS included, works with any Tailwind version or no Tailwind at all.
4
4
 
5
- ## What's included
5
+ ## Components
6
6
 
7
7
  | Export | Description |
8
8
  | ------ | ----------- |
9
- | `<Modal>` | Confirmation/dialog modal with hotkey support (Enter to confirm, Esc to close), loading state, warning variant, and stacked modal management |
9
+ | `<Modal>` | Confirmation/dialog modal with hotkey support (Enter to confirm, Esc to close), loading state, and warning variant |
10
+ | `<AutoComplete>` | Fully custom autocomplete with keyboard navigation, filtering, loading state, and custom render support |
11
+ | `<SearchBar>` | Search input with clear button and URL param support |
12
+ | `<ReadMore>` | Truncated text with expand/collapse and optional copy |
13
+ | `<CopyId>` | Pill button that copies an ID to clipboard |
14
+ | `<ButtonLoader>` | Animated spinner for button loading states |
15
+ | `<CustomAnchor>` | Anchor tag with new tab support |
10
16
  | `useLocalStorage` | useState backed by localStorage |
11
17
  | `cn()` | Utility to merge Tailwind class names |
18
+ | `handleCopyTextToClipboard()` | Cross-browser clipboard copy (Chrome + Safari) |
12
19
 
13
- ## Development
14
-
15
- ```bash
16
- npm install
17
- npm run storybook # component playground at http://localhost:6006
18
- npm run build # build dist/
19
- npm run lint # type check
20
- ```
21
-
22
- ## Using in a consumer project
23
-
24
- ### 1. Install
20
+ ## Installation
25
21
 
26
22
  ```bash
27
23
  npm install @seekho/ui
28
24
  ```
29
25
 
30
- ### 2. Install peer dependencies
26
+ ### Peer dependencies
31
27
 
32
28
  ```bash
33
29
  npm install react-hotkeys-hook
34
30
  ```
35
31
 
36
- ### 3. Import styles once
32
+ ### Import styles
37
33
 
38
- In your app's entry file (`src/index.tsx`, `src/main.tsx`, `app/layout.tsx`, or `pages/_app.tsx`):
34
+ Add once to your app's entry file:
39
35
 
40
36
  ```tsx
41
37
  import "@seekho/ui/styles.css";
42
38
  ```
43
39
 
44
- > The CSS is pre-built and works with any Tailwind version (v3, v4, or no Tailwind at all) — no PostCSS configuration needed.
40
+ ### Theming
45
41
 
46
- ### 4. Use components
42
+ Override the primary color via a CSS variable:
47
43
 
48
- ```tsx
49
- import { Modal } from "@seekho/ui";
44
+ ```css
45
+ :root {
46
+ --color-primary: #534f8f; /* defaults to #534f8f if not set */
47
+ }
50
48
  ```
51
49
 
52
- Refer to Storybook for usage examples of each component.
53
-
54
- ## Modal props
50
+ ### Usage
55
51
 
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 |
52
+ ```tsx
53
+ import { Modal, AutoComplete, SearchBar } from "@seekho/ui";
54
+ ```
68
55
 
69
- ## Publishing
56
+ ## Development
70
57
 
71
58
  ```bash
72
- git add .
73
- git commit -m "your message"
74
- npm version patch # or minor / major
75
- npm publish
59
+ npm install
60
+ npm run storybook # component playground at http://localhost:6006
61
+ npm run build # build dist/
62
+ npm run lint # type check
76
63
  ```
77
64
 
78
- ## Adding a new component
65
+ ## Contributing
79
66
 
80
67
  ```text
81
68
  src/components/
82
69
  └── MyComponent/
83
- ├── MyComponent.tsx # component + types
70
+ ├── MyComponent.tsx
84
71
  ├── MyComponent.stories.tsx
85
- └── index.ts # re-export
72
+ └── index.ts
86
73
  ```
87
74
 
88
- Then add `export * from "./MyComponent"` to [src/components/index.ts](src/components/index.ts).
75
+ Add `export * from "./MyComponent"` to [src/components/index.ts](src/components/index.ts).
89
76
 
90
77
  ## Project structure
91
78
 
92
79
  ```text
93
80
  seekho-ui/
94
81
  ├── src/
95
- │ ├── components/ # React components
96
- │ ├── hooks/ # Shared React hooks
97
- │ ├── utils/ # Pure utility functions
98
- │ └── index.ts # Single entry point
99
- ├── .storybook/ # Storybook config
100
- ├── postcss.config.js # PostCSS (Tailwind v3 for Storybook)
101
- ├── tailwind.config.js # Tailwind config + brand colors
102
- └── tsup.config.ts # Build config
82
+ │ ├── components/
83
+ │ ├── hooks/
84
+ │ ├── utils/
85
+ │ └── index.ts
86
+ ├── .storybook/
87
+ ├── tailwind.config.js
88
+ └── tsup.config.ts
103
89
  ```