SAFWA UI COMPONENTS

safwa-ui-components 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.

Getting Started

1pnpm install safwa-ui-components

Requires react-hook-form and @mantine/core as peer dependencies.

Usage/Examples

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

License

MIT