@nomos-ui/form 0.0.16 → 0.0.18

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,277 +1,3 @@
1
1
  # Nomos UI Forms
2
2
 
3
3
  > **νόμος** (nomos) - Greek: law, order, principle
4
-
5
- Beautiful, validated form components that integrate seamlessly with React Hook Form. Built on the principle that forms should enforce order and validation effortlessly.
6
-
7
- ## Installation
8
-
9
- ```bash
10
- npm install @nomos-ui/react react-hook-form
11
- # or
12
- yarn add @nomos-ui/react react-hook-form
13
- # or
14
- pnpm add @nomos-ui/react react-hook-form
15
- ```
16
-
17
- ## Quick Start
18
-
19
- ```jsx
20
- import { useForm } from "react-hook-form";
21
- import { Input, Button, Form } from "@nomos-ui/react";
22
-
23
- function LoginForm() {
24
- const form = useForm();
25
-
26
- const onSubmit = (data) => {
27
- console.log(data);
28
- };
29
-
30
- return (
31
- <Form form={form} onSubmit={onSubmit}>
32
- <Input
33
- name="email"
34
- label="Email"
35
- type="email"
36
- rules={{ required: "Email is required" }}
37
- />
38
- <Input
39
- name="password"
40
- label="Password"
41
- type="password"
42
- rules={{ required: "Password is required", minLength: 8 }}
43
- />
44
- <Button type="submit">Sign In</Button>
45
- </Form>
46
- );
47
- }
48
- ```
49
-
50
- ## Why Nomos UI?
51
-
52
- - **Zero Boilerplate** - Components auto-register with React Hook Form
53
- - **Built-in Validation** - Error states handled automatically
54
- - **Accessible** - WCAG 2.1 AA compliant
55
- - **Customizable** - Style with Tailwind or your own CSS
56
- - **Type Safe** - Full TypeScript support
57
- - **Lightweight** - Tree-shakeable, minimal bundle size
58
-
59
- ## Components
60
-
61
- ### Form Components
62
-
63
- - `<Input />` - Text, email, password, number inputs
64
- - `<Textarea />` - Multi-line text input
65
- - `<Select />` - Dropdown selection
66
- - `<Checkbox />` - Single checkbox
67
- - `<CheckboxGroup />` - Multiple checkboxes
68
- - `<Radio />` - Radio button
69
- - `<RadioGroup />` - Radio button group
70
- - `<Switch />` - Toggle switch
71
- - `<DatePicker />` - Date selection
72
- - `<FileUpload />` - File input with drag & drop
73
-
74
- ### Layout & UI
75
-
76
- - `<Form />` - Form wrapper with context
77
- - `<Button />` - Submit and action buttons
78
- - `<FieldGroup />` - Group related fields
79
- - `<FormSection />` - Organize form into sections
80
-
81
- ## Examples
82
-
83
- ### Basic Input with Validation
84
-
85
- ```jsx
86
- <Input
87
- name="username"
88
- label="Username"
89
- placeholder="Enter username"
90
- rules={{
91
- required: "Username is required",
92
- minLength: { value: 3, message: "Minimum 3 characters" },
93
- pattern: { value: /^[a-zA-Z0-9_]+$/, message: "Alphanumeric only" },
94
- }}
95
- helperText="Choose a unique username"
96
- />
97
- ```
98
-
99
- ### Select with Options
100
-
101
- ```jsx
102
- <Select
103
- name="country"
104
- label="Country"
105
- rules={{ required: "Please select a country" }}
106
- options={[
107
- { value: "us", label: "United States" },
108
- { value: "uk", label: "United Kingdom" },
109
- { value: "ca", label: "Canada" },
110
- ]}
111
- />
112
- ```
113
-
114
- ### Checkbox Group
115
-
116
- ```jsx
117
- <CheckboxGroup
118
- name="interests"
119
- label="Interests"
120
- options={[
121
- { value: "sports", label: "Sports" },
122
- { value: "music", label: "Music" },
123
- { value: "reading", label: "Reading" },
124
- ]}
125
- rules={{ required: "Select at least one interest" }}
126
- />
127
- ```
128
-
129
- ### Custom Styling
130
-
131
- ```jsx
132
- <Input
133
- name="email"
134
- label="Email"
135
- className="custom-input"
136
- labelClassName="custom-label"
137
- errorClassName="custom-error"
138
- />
139
- ```
140
-
141
- ### Controlled Components
142
-
143
- ```jsx
144
- const { watch, setValue } = useForm();
145
- const emailValue = watch("email");
146
-
147
- <Input
148
- name="email"
149
- label="Email"
150
- onChange={(e) => {
151
- // Custom logic
152
- setValue("email", e.target.value.toLowerCase());
153
- }}
154
- />;
155
- ```
156
-
157
- ## API Reference
158
-
159
- ### Common Props
160
-
161
- All form components share these props:
162
-
163
- | Prop | Type | Description |
164
- | ------------ | --------- | -------------------------------- |
165
- | `name` | `string` | Field name (required) |
166
- | `label` | `string` | Field label |
167
- | `rules` | `object` | React Hook Form validation rules |
168
- | `helperText` | `string` | Help text shown below field |
169
- | `disabled` | `boolean` | Disable the field |
170
- | `className` | `string` | Custom CSS class |
171
- | `...rest` | `any` | Native HTML attributes |
172
-
173
- ### Input Props
174
-
175
- | Prop | Type | Default | Description |
176
- | -------------- | -------- | -------- | ---------------------------------------- |
177
- | `type` | `string` | `'text'` | Input type (text, email, password, etc.) |
178
- | `placeholder` | `string` | - | Placeholder text |
179
- | `autoComplete` | `string` | - | Browser autocomplete hint |
180
-
181
- ### Button Props
182
-
183
- | Prop | Type | Default | Description |
184
- | ----------- | --------------------------------------------------- | ----------- | -------------------- |
185
- | `variant` | `'primary' \| 'secondary' \| 'outline' \| 'danger'` | `'primary'` | Button style variant |
186
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
187
- | `loading` | `boolean` | `false` | Show loading spinner |
188
- | `fullWidth` | `boolean` | `false` | Take full width |
189
-
190
- ## Customization
191
-
192
- ### Theming
193
-
194
- Override default styles with CSS variables:
195
-
196
- ```css
197
- :root {
198
- --nomos-primary: #3b82f6;
199
- --nomos-error: #ef4444;
200
- --nomos-border: #d1d5db;
201
- --nomos-radius: 0.5rem;
202
- }
203
- ```
204
-
205
- ### Tailwind Integration
206
-
207
- Components use Tailwind classes by default. Extend with your own:
208
-
209
- ```jsx
210
- <Input
211
- name="email"
212
- className="shadow-xl border-purple-500 focus:ring-purple-500"
213
- />
214
- ```
215
-
216
- ## TypeScript
217
-
218
- Full type safety with TypeScript:
219
-
220
- ```tsx
221
- import { useForm } from "react-hook-form";
222
- import { Input, Button } from "@nomos-ui/react";
223
-
224
- interface FormData {
225
- email: string;
226
- password: string;
227
- }
228
-
229
- function LoginForm() {
230
- const form = useForm<FormData>();
231
-
232
- const onSubmit = (data: FormData) => {
233
- console.log(data);
234
- };
235
-
236
- return (
237
- <Form form={form} onSubmit={onSubmit}>
238
- <Input<FormData> name="email" label="Email" />
239
- <Input<FormData> name="password" label="Password" type="password" />
240
- <Button type="submit">Sign In</Button>
241
- </Form>
242
- );
243
- }
244
- ```
245
-
246
- ## Roadmap
247
-
248
- - [ ] `@nomos-ui/vue` - Vue 3 components
249
- - [ ] `@nomos-ui/svelte` - Svelte components
250
- - [ ] Advanced components (Autocomplete, MultiSelect, RichText)
251
- - [ ] Form builder/generator
252
- - [ ] Headless components
253
- - [ ] Theme presets
254
-
255
- ## Philosophy
256
-
257
- **νόμος** (nomos) means "law" or "order" in Greek. In the New Testament, it often refers to divine law and principles. Just as law brings order to society, Nomos UI brings order to your forms - enforcing validation rules, maintaining structure, and ensuring data integrity.
258
-
259
- > "For the law was given through Moses; grace and truth came through Jesus Christ." - John 1:17
260
-
261
- We believe forms should be both functional and graceful, enforcing rules while remaining pleasant to use.
262
-
263
- ## Contributing
264
-
265
- Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) first.
266
-
267
- ## License
268
-
269
- MIT ©
270
-
271
- ## Credits
272
-
273
- Built on top of [React Hook Form](https://react-hook-form.com/) - the most performant, flexible form library for React.
274
-
275
- ---
276
-
277
- **Made with ♥︎ for developers who value order in chaos**
@@ -72,7 +72,7 @@ function objectToFormData(obj, formData = new FormData(), parentKey = "") {
72
72
  else if (typeof value === "object" && value !== null) {
73
73
  objectToFormData(value, formData, formKey);
74
74
  }
75
- else {
75
+ else if (value !== undefined) {
76
76
  formData.append(formKey, value);
77
77
  }
78
78
  }
@@ -1 +1 @@
1
- {"version":3,"file":"form.helpers.js","sourceRoot":"","sources":["../../../src/utils/helpers/form.helpers.ts"],"names":[],"mappings":";;AAAA,sDAaC;AA6BD,4CA0CC;AApFD,SAAgB,qBAAqB,CACnC,MAA2B,EAC3B,IAAY;IAEZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE9B,IAAI,OAAO,GAAG,MAAM,CAAC;IACrB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAC5C,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAClD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAgB,gBAAgB,CAC9B,GAAwB,EACxB,WAAqB,IAAI,QAAQ,EAAE,EACnC,YAAoB,EAAE;IAEtB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IAEvD,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC;YAAE,SAAS;QAEvC,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAEzD,IAAI,CAAC,KAAK,YAAY,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;YAC9D,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACvB,QAAQ,CAAC,MAAM,CAAC,GAAG,OAAO,IAAI,EAAE,EAAE,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC5B,MAAM,QAAQ,GAAG,GAAG,OAAO,IAAI,KAAK,GAAG,CAAC;oBAExC,IACE,OAAO,IAAI,KAAK,QAAQ;wBACxB,IAAI,KAAK,IAAI;wBACb,CAAC,CAAC,IAAI,YAAY,IAAI,CAAC;wBACvB,CAAC,CAAC,IAAI,YAAY,IAAI,CAAC,EACvB,CAAC;wBACD,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;oBACzD,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;oBAClC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACvD,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}
1
+ {"version":3,"file":"form.helpers.js","sourceRoot":"","sources":["../../../src/utils/helpers/form.helpers.ts"],"names":[],"mappings":";;AAAA,sDAaC;AA6BD,4CA0CC;AApFD,SAAgB,qBAAqB,CACnC,MAA2B,EAC3B,IAAY;IAEZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE9B,IAAI,OAAO,GAAG,MAAM,CAAC;IACrB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAC5C,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAClD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAgB,gBAAgB,CAC9B,GAAwB,EACxB,WAAqB,IAAI,QAAQ,EAAE,EACnC,YAAoB,EAAE;IAEtB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IAEvD,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC;YAAE,SAAS;QAEvC,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAEzD,IAAI,CAAC,KAAK,YAAY,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;YAC9D,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACvB,QAAQ,CAAC,MAAM,CAAC,GAAG,OAAO,IAAI,EAAE,EAAE,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC5B,MAAM,QAAQ,GAAG,GAAG,OAAO,IAAI,KAAK,GAAG,CAAC;oBAExC,IACE,OAAO,IAAI,KAAK,QAAQ;wBACxB,IAAI,KAAK,IAAI;wBACb,CAAC,CAAC,IAAI,YAAY,IAAI,CAAC;wBACvB,CAAC,CAAC,IAAI,YAAY,IAAI,CAAC,EACvB,CAAC;wBACD,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;oBACzD,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;oBAClC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACvD,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nomos-ui/form",
3
- "version": "0.0.16",
3
+ "version": "0.0.18",
4
4
  "description": "The Shadcn library for building robust React forms",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/exports/index.js",
@@ -11,33 +11,15 @@
11
11
  "import": "./dist/exports/index.js",
12
12
  "require": "./dist/exports/index.js"
13
13
  },
14
- "./hooks": {
15
- "types": "./dist/hooks/index.d.ts",
16
- "import": "./dist/hooks/index.js",
17
- "require": "./dist/hooks/index.js"
18
- },
19
- "./modals": {
20
- "types": "./dist/exports/modals.d.ts",
21
- "import": "./dist/exports/modals.js",
22
- "require": "./dist/exports/modals.js"
23
- },
24
14
  "./utils": {
25
- "types": "./dist/utils/index.d.ts",
26
- "import": "./dist/utils/index.js",
27
- "require": "./dist/utils/index.js"
28
- },
29
- "./types": {
30
- "types": "./dist/types/index.d.ts",
31
- "import": "./dist/types/index.js",
32
- "require": "./dist/types/index.js"
15
+ "types": "./dist/exports/utils/index.d.ts",
16
+ "import": "./dist/exports/utils/index.js",
17
+ "require": "./dist/exports/utils/index.js"
33
18
  }
34
19
  },
35
20
  "typesVersions": {
36
21
  "*": {
37
- "components": ["./dist/components/index.d.ts"],
38
- "hooks": ["./dist/hooks/index.d.ts"],
39
- "utils": ["./dist/exports/utils/index.d.ts"],
40
- "types": ["./dist/types/index.d.ts"]
22
+ "utils": ["./dist/exports/utils/index.d.ts"]
41
23
  }
42
24
  },
43
25
  "scripts": {
@@ -79,7 +61,7 @@
79
61
  "bugs": {
80
62
  "url": "https://github.com/uanela/nomos-ui/issues"
81
63
  },
82
- "homepage": "https://github.com/uanela/nomos-ui/tree/main/packages/react#readme",
64
+ "homepage": "https://github.com/uanela/nomos-ui",
83
65
  "files": ["dist", "README.md", "LICENSE"],
84
66
  "sideEffects": false,
85
67
  "packageManager": "pnpm@10.13.1",