Skip to content

Commit 0515811

Browse files
aranlucasaranlucas
committed
chore: update documentation + change to vite for sb
1 parent f3cb943 commit 0515811

36 files changed

+22827
-4786
lines changed

‎.husky/commit-msg‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npx --no -- commitlint --edit ${1}

‎.storybook/main.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
import type { StorybookConfig } from "@storybook/react-webpack5";
1+
import type { StorybookViteConfig } from "@storybook/builder-vite";
22

3-
const config: StorybookConfig = {
4-
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
3+
const config: StorybookViteConfig = {
4+
stories: [
5+
"../src/**/*.mdx",
6+
"../src/**/*.stories.@(js|jsx|ts|tsx)",
7+
"../examples/*.stories.@(js|jsx|ts|tsx)",
8+
],
59
addons: [
610
"@storybook/addon-links",
711
"@storybook/addon-essentials",
812
"@storybook/addon-interactions",
913
"../src/stories/preset.js",
1014
],
1115
framework: {
12-
name: "@storybook/react-webpack5",
16+
name: "@storybook/react-vite",
1317
options: {},
1418
},
1519
docs: {

‎.storybook/preview-head.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script>
2+
window.global = window;
3+
</script>

‎README.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11

2-
# RHF Mantine
2+
# React-Hook-Form-Mantine
33

4-
RHF-Mantine is a simple and intuitive library that allows you to easily connect Mantine components to React Hook Form by enriching them with a required "name" prop. By importing your form components from 'rhf-mantine' instead of Mantine and setting their "name" prop, your components become seamlessly connected and synced with the corresponding form field.
5-
6-
The library provides bindings for several Mantine components and does not affect their feature-rich nature or the ability to customize their visual presentation. Additionally, the Mantine component APIs remain unchanged, allowing you to leverage their full power and flexibility. For more information on using Mantine components with RHF-Mantine, please refer to the Mantine documentation.
4+
React-Hook-Form-Mantine is a library that simplifies the integration of Mantine components with React Hook Form. By adding a "name" prop to Mantine components, the library seamlessly connects them to the corresponding form field.
75

86
## Demo
97

10-
<https://aranlucas.github.io/react-hook-form-mantine>
11-
<https://codesandbox.io/s/react-hook-mantine-krflqj?file=/src/App.tsx>
8+
* <https://aranlucas.github.io/react-hook-form-mantine>
9+
* <https://codesandbox.io/s/react-hook-mantine-krflqj?file=/src/App.tsx>
1210

1311
## Getting Started
1412

1513
```bash
1614
npm install react-hook-form-mantine
1715
```
1816

19-
Requires react-hook-form and @mantine/core as peer dependencies.
17+
Requires `react-hook-form` and `@mantine/core` as peer dependencies.
2018

2119
## Usage/Examples
2220

‎commitlint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { extends: ["@commitlint/config-conventional"] };

‎examples/AllComponents.stories.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import { useForm } from "react-hook-form";
2+
import {
3+
Autocomplete,
4+
Checkbox,
5+
Chip,
6+
ColorInput,
7+
ColorPicker,
8+
FileInput,
9+
JsonInput,
10+
MultiSelect,
11+
NativeSelect,
12+
NumberInput,
13+
PasswordInput,
14+
PinInput,
15+
Radio,
16+
Rating,
17+
SegmentedControl,
18+
Select,
19+
Slider,
20+
Switch,
21+
Textarea,
22+
TextInput,
23+
TransferList,
24+
} from "../src/index";
25+
import { Button, Group, Paper, Container, Stack } from "@mantine/core";
26+
import { type Meta } from "@storybook/react";
27+
28+
export default {
29+
title: "Examples/AllComponents",
30+
} satisfies Meta;
31+
32+
export const AllComponents = () => {
33+
const { control, handleSubmit } = useForm({
34+
defaultValues: {
35+
autocomplete: "",
36+
checkbox: true,
37+
chip: true,
38+
colorInput: "",
39+
colorPicker: "",
40+
fileInput: null,
41+
jsonInput: "",
42+
multiSelect: [],
43+
nativeSelect: "",
44+
numberInput: 18,
45+
passwordInput: "",
46+
pinInput: "",
47+
radio: "",
48+
rating: 2,
49+
segmentedControl: "",
50+
select: "",
51+
slider: 40,
52+
switch: "",
53+
textarea: "",
54+
textInput: "",
55+
transferList: [
56+
[
57+
{ value: "react", label: "React" },
58+
{ value: "ng", label: "Angular" },
59+
{ value: "next", label: "Next.js" },
60+
{ value: "blitz", label: "Blitz.js" },
61+
{ value: "gatsby", label: "Gatsby.js" },
62+
{ value: "vue", label: "Vue" },
63+
{ value: "jq", label: "jQuery" },
64+
],
65+
[
66+
{ value: "sv", label: "Svelte" },
67+
{ value: "rw", label: "Redwood" },
68+
{ value: "np", label: "NumPy" },
69+
{ value: "dj", label: "Django" },
70+
{ value: "fl", label: "Flask" },
71+
],
72+
],
73+
},
74+
});
75+
76+
return (
77+
<div className="App">
78+
<Container size={1000}>
79+
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
80+
<form
81+
onSubmit={handleSubmit(
82+
(data) => console.log(data),
83+
(error) => console.log(error)
84+
)}
85+
>
86+
<Stack spacing="xl">
87+
<Autocomplete
88+
name="autocomplete"
89+
control={control}
90+
label="Your favorite framework/library"
91+
placeholder="Pick one"
92+
data={["React", "Angular", "Svelte", "Vue"]}
93+
/>
94+
<Checkbox
95+
name="checkbox"
96+
value="Test"
97+
control={control}
98+
label="I agree to sell my privacy"
99+
/>
100+
<Chip name="chip" control={control}>
101+
Awesome chip
102+
</Chip>
103+
<ColorInput
104+
name="colorInput"
105+
control={control}
106+
placeholder="Pick color"
107+
label="Your favorite color"
108+
/>
109+
<ColorPicker name="colorPicker" control={control} />
110+
<FileInput
111+
name="fileInput"
112+
control={control}
113+
placeholder="Pick file"
114+
label="Your resume"
115+
withAsterisk
116+
/>
117+
<JsonInput
118+
name="jsonInput"
119+
control={control}
120+
label="Your package.json"
121+
placeholder="Textarea will autosize to fit the content"
122+
validationError="Invalid json"
123+
formatOnBlur
124+
autosize
125+
minRows={4}
126+
/>
127+
<TextInput name="textInput" control={control} label="TextBox" />
128+
<MultiSelect
129+
name="multiSelect"
130+
control={control}
131+
data={[
132+
{ value: "react", label: "React" },
133+
{ value: "ng", label: "Angular" },
134+
{ value: "svelte", label: "Svelte" },
135+
{ value: "vue", label: "Vue" },
136+
{ value: "riot", label: "Riot" },
137+
{ value: "next", label: "Next.js" },
138+
{ value: "blitz", label: "Blitz.js" },
139+
]}
140+
label="Your favorite frameworks/libraries"
141+
placeholder="Pick all that you like"
142+
/>
143+
<NativeSelect
144+
name="nativeSelect"
145+
control={control}
146+
data={["React", "Vue", "Angular", "Svelte"]}
147+
label="Select your favorite framework/library"
148+
description="This is anonymous"
149+
withAsterisk
150+
/>
151+
<NumberInput
152+
name="numberInput"
153+
control={control}
154+
placeholder="Your age"
155+
label="Your age"
156+
withAsterisk
157+
/>
158+
<PasswordInput
159+
name="passwordInput"
160+
control={control}
161+
placeholder="Password"
162+
label="Password"
163+
description="Password must include at least one letter, number and special character"
164+
withAsterisk
165+
/>
166+
<Group position="center">
167+
<PinInput name="pinInput" control={control} />
168+
</Group>
169+
<Radio.Group
170+
name="radio"
171+
control={control}
172+
label="Select your favorite framework/library"
173+
description="This is anonymous"
174+
withAsterisk
175+
>
176+
<Group mt="xs">
177+
<Radio.Item value="react" label="React" />
178+
<Radio.Item value="svelte" label="Svelte" />
179+
<Radio.Item value="ng" label="Angular" />
180+
<Radio.Item value="vue" label="Vue" />
181+
</Group>
182+
</Radio.Group>
183+
<Rating name="rating" control={control} />
184+
<SegmentedControl
185+
name="segmentedControl"
186+
control={control}
187+
data={[
188+
{ label: "React", value: "react" },
189+
{ label: "Angular", value: "ng" },
190+
{ label: "Vue", value: "vue" },
191+
{ label: "Svelte", value: "svelte" },
192+
]}
193+
/>
194+
<Select
195+
name="select"
196+
control={control}
197+
label="Your favorite framework/library"
198+
placeholder="Pick one"
199+
data={[
200+
{ value: "react", label: "React" },
201+
{ value: "ng", label: "Angular" },
202+
{ value: "svelte", label: "Svelte" },
203+
{ value: "vue", label: "Vue" },
204+
]}
205+
/>
206+
<Slider
207+
name="slider"
208+
control={control}
209+
marks={[
210+
{ value: 20, label: "20%" },
211+
{ value: 50, label: "50%" },
212+
{ value: 80, label: "80%" },
213+
]}
214+
/>
215+
<Switch
216+
name="switch"
217+
control={control}
218+
label="I agree to sell my privacy"
219+
/>
220+
<Textarea
221+
name="textarea"
222+
control={control}
223+
placeholder="Your comment"
224+
label="Your comment"
225+
withAsterisk
226+
/>
227+
<TextInput
228+
name="textInput"
229+
control={control}
230+
placeholder="Your name"
231+
label="Full name"
232+
withAsterisk
233+
/>
234+
<TransferList
235+
name="transferList"
236+
control={control}
237+
searchPlaceholder="Search..."
238+
nothingFound="Nothing here"
239+
titles={["Frameworks", "Libraries"]}
240+
breakpoint="sm"
241+
/>
242+
<Group position="left" mt="md">
243+
<Button type="submit">Submit</Button>
244+
</Group>
245+
</Stack>
246+
</form>
247+
</Paper>
248+
</Container>
249+
</div>
250+
);
251+
};

0 commit comments

Comments
 (0)