zcomponents-ui 1.2.2 → 1.2.4
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,7 +1,5 @@
|
|
|
1
1
|
# 📘 zComponents — Growing React Component Library
|
|
2
2
|
|
|
3
|
-
**Lightweight, typed, customizable UI building blocks for React.**
|
|
4
|
-
|
|
5
3
|
&style=flat-square>)
|
|
6
4
|
|
|
7
5
|
|
|
@@ -9,157 +7,100 @@
|
|
|
9
7
|
|
|
10
8
|
---
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### ✔ Flexible option model
|
|
15
|
-
|
|
16
|
-
Support for `string`, `number`, and full `object` entries.
|
|
17
|
-
|
|
18
|
-
### ✔ Full control over rendering
|
|
19
|
-
|
|
20
|
-
Perfect for tagging systems, chips, advanced UI states.
|
|
21
|
-
|
|
22
|
-
### ✔ Flexible behavior and layout adaptation
|
|
23
|
-
|
|
24
|
-
Boundary detection, list height limit, smart direction switching.
|
|
25
|
-
|
|
26
|
-
### ✔ Custom search logic
|
|
27
|
-
|
|
28
|
-
Inject your own filter function with full access to options.
|
|
10
|
+
**zComponents UI** is a lightweight React component library focused on **flexible dropdowns and selection components**, built with TypeScript and zero external dependencies.
|
|
29
11
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
## 🟩 Zero Dependencies
|
|
12
|
+
👉 Full documentation and live examples are available in Storybook.
|
|
33
13
|
|
|
34
|
-
|
|
14
|
+
🔗 **Storybook:**
|
|
15
|
+
https://piotrnowoslawski.github.io/zComponents
|
|
35
16
|
|
|
36
17
|
---
|
|
37
18
|
|
|
38
|
-
##
|
|
19
|
+
## ✨ Features
|
|
39
20
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
21
|
+
- ✅ Written in **TypeScript**
|
|
22
|
+
- ✅ **Zero dependencies**
|
|
23
|
+
- ✅ SCSS Modules styling
|
|
24
|
+
- ✅ Type-safe APIs
|
|
25
|
+
- ✅ Designed for advanced UI use cases
|
|
26
|
+
- ✅ Interactive Storybook documentation
|
|
46
27
|
|
|
47
28
|
---
|
|
48
29
|
|
|
49
|
-
|
|
30
|
+
## 📦 Installation
|
|
50
31
|
|
|
51
32
|
```bash
|
|
52
|
-
npm install zcomponents
|
|
33
|
+
npm install zcomponents-ui
|
|
34
|
+
# or
|
|
35
|
+
yarn add zcomponents-ui
|
|
36
|
+
# or
|
|
37
|
+
pnpm add zcomponents-ui
|
|
53
38
|
```
|
|
54
39
|
|
|
55
40
|
---
|
|
56
41
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
```tsx
|
|
60
|
-
import { ZDrop } from "zcomponents-ui";
|
|
42
|
+
## 🎯 Components Overview
|
|
61
43
|
|
|
62
|
-
|
|
44
|
+
### ZDrop
|
|
63
45
|
|
|
64
|
-
|
|
65
|
-
<ZDrop
|
|
66
|
-
name="survivor"
|
|
67
|
-
options={options}
|
|
68
|
-
placeholder="Pick someone"
|
|
69
|
-
onChange={(val) => console.log(val)}
|
|
70
|
-
/>
|
|
71
|
-
);
|
|
72
|
-
```
|
|
46
|
+
Advanced dropdown / select component with full control over behavior and rendering.
|
|
73
47
|
|
|
74
|
-
|
|
48
|
+
**What it does:**
|
|
75
49
|
|
|
76
|
-
|
|
50
|
+
- Single & multiple select
|
|
51
|
+
- Searchable options
|
|
52
|
+
- Supports primitive and object-based options
|
|
53
|
+
- Smart dropdown positioning (top / bottom)
|
|
54
|
+
- Automatic list height adjustment
|
|
55
|
+
- Custom renderers for options, values, and toggle
|
|
56
|
+
- Type-safe value handling
|
|
77
57
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
```tsx
|
|
81
|
-
isSearchable;
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
### Custom search
|
|
85
|
-
|
|
86
|
-
```tsx
|
|
87
|
-
searchFilter={({ options, currentValue, labelKey }) =>
|
|
88
|
-
options.filter((o) =>
|
|
89
|
-
String(o[labelKey]).toLowerCase().includes(currentValue.toLowerCase())
|
|
90
|
-
)
|
|
91
|
-
}
|
|
92
|
-
```
|
|
58
|
+
👉 Best for forms, filters, and complex selects.
|
|
93
59
|
|
|
94
60
|
---
|
|
95
61
|
|
|
96
|
-
|
|
62
|
+
### ZDropButton
|
|
97
63
|
|
|
98
|
-
|
|
99
|
-
<ZDrop
|
|
100
|
-
name="survivor"
|
|
101
|
-
options={[{ id: 1, name: "Hiroshi" }]}
|
|
102
|
-
valueKey="id" // default: "value"
|
|
103
|
-
labelKey="name" // default: "label"
|
|
104
|
-
shouldReturnObjectOnChange
|
|
105
|
-
/>
|
|
106
|
-
```
|
|
64
|
+
Button-based dropdown built with the **Compound Components** pattern.
|
|
107
65
|
|
|
108
|
-
|
|
66
|
+
**What it does:**
|
|
109
67
|
|
|
110
|
-
|
|
68
|
+
- Dropdown menu triggered by button
|
|
69
|
+
- Supports title and/or icon as toggle
|
|
70
|
+
- Custom dropdown content structure
|
|
71
|
+
- Optional search input
|
|
72
|
+
- Flexible content positioning
|
|
73
|
+
- List items as actions or links
|
|
74
|
+
- Fully controlled selection logic
|
|
111
75
|
|
|
112
|
-
|
|
113
|
-
optionRenderer={(option, isSelected) => (
|
|
114
|
-
<div className={isSelected ? "selected" : ""}>{option}</div>
|
|
115
|
-
)}
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
```tsx
|
|
119
|
-
valueRenderer={({option, onRemove }) => (
|
|
120
|
-
<span onClick={onRemove} style={{ marginRight: 8 }}>
|
|
121
|
-
❌ {option}
|
|
122
|
-
</span>
|
|
123
|
-
)};
|
|
124
|
-
```
|
|
76
|
+
👉 Best for menus, navigation, and action selectors.
|
|
125
77
|
|
|
126
78
|
---
|
|
127
79
|
|
|
128
|
-
|
|
80
|
+
## 🎨 Styling
|
|
81
|
+
|
|
82
|
+
Default styles are provided as a single CSS file:
|
|
129
83
|
|
|
130
84
|
```ts
|
|
131
|
-
|
|
132
|
-
labelKey?: string; // default: "label"
|
|
133
|
-
isSearchable?: boolean;
|
|
134
|
-
searchFilter?: SearchFilter;
|
|
135
|
-
isMultiple?: boolean;
|
|
136
|
-
isDisabled?: boolean;
|
|
137
|
-
valueRenderer?: ValueRenderer;
|
|
138
|
-
optionRenderer?: OptionRenderer;
|
|
139
|
-
expandToggleRenderer?: ExpandToggleRenderer;
|
|
85
|
+
import "zcomponents-ui/styles.css";
|
|
140
86
|
```
|
|
141
87
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
# 🔌 React Hook Form Integration (Short Note)
|
|
88
|
+
Styles are intentionally minimal and easy to override using:
|
|
145
89
|
|
|
146
|
-
|
|
90
|
+
- custom CSS
|
|
91
|
+
- SCSS Modules
|
|
92
|
+
- utility frameworks (e.g. Tailwind)
|
|
147
93
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
- Works with Yup / Zod through RHF resolvers
|
|
151
|
-
|
|
152
|
-
- Supports value mapping via
|
|
94
|
+
---
|
|
153
95
|
|
|
154
|
-
|
|
96
|
+
## 📚 Documentation
|
|
155
97
|
|
|
156
|
-
|
|
98
|
+
Full API documentation, examples, and usage patterns are available in Storybook:
|
|
157
99
|
|
|
158
|
-
|
|
100
|
+
🔗 **https://piotrnowoslawski.github.io/zComponents**
|
|
159
101
|
|
|
160
|
-
|
|
161
|
-
📌 Use ZDrop standalone for uncontrolled usage.
|
|
102
|
+
---
|
|
162
103
|
|
|
163
|
-
|
|
104
|
+
## 📄 License
|
|
164
105
|
|
|
165
106
|
MIT © Piotr Nowosławski
|
|
@@ -83,7 +83,7 @@ interface ZDropWithReferenceElementProps extends ZDropBaseProps {
|
|
|
83
83
|
interface ZDropWithAutoHeightProps extends ZDropBaseProps {
|
|
84
84
|
referenceElementClassName?: never;
|
|
85
85
|
positionToReferenceElement?: never;
|
|
86
|
-
isAutoHeightEnabled?:
|
|
86
|
+
isAutoHeightEnabled?: true;
|
|
87
87
|
autoHeightPosition?: "top" | "bottom";
|
|
88
88
|
}
|
|
89
89
|
type ZDropProps = ZDropWithReferenceElementProps | ZDropWithAutoHeightProps;
|
|
@@ -80,7 +80,7 @@ export interface ZDropWithReferenceElementProps extends ZDropBaseProps {
|
|
|
80
80
|
export interface ZDropWithAutoHeightProps extends ZDropBaseProps {
|
|
81
81
|
referenceElementClassName?: never;
|
|
82
82
|
positionToReferenceElement?: never;
|
|
83
|
-
isAutoHeightEnabled?:
|
|
83
|
+
isAutoHeightEnabled?: true;
|
|
84
84
|
autoHeightPosition?: "top" | "bottom";
|
|
85
85
|
}
|
|
86
86
|
export type ZDropProps = ZDropWithReferenceElementProps | ZDropWithAutoHeightProps;
|