Skip to content

Commit 422cec8

Browse files
TchiRubickTchiRubick
authored
fix: key props to JSX using spread (#143)
1 parent df38752 commit 422cec8

File tree

6 files changed

+62
-45
lines changed

6 files changed

+62
-45
lines changed

‎.changeset/funny-students-stare.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@autoform/shadcn": major
3+
---
4+
5+
fix spreading keys warning for shadcn components

‎packages/shadcn/registry/autoform.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,13 @@
5959
{
6060
"path": "autoform/components/StringField.tsx",
6161
"target": "components/ui/autoform/components/StringField.tsx",
62-
"content": "import React from \"react\";\nimport { Input } from \"@/components/ui/input\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\n\nexport const StringField: React.FC<AutoFormFieldProps> = ({\n inputProps,\n error,\n id,\n}) => (\n <Input\n id={id}\n className={error ? \"border-destructive\" : \"\"}\n {...inputProps}\n />\n);\n",
62+
"content": "import { Input } from \"@/components/ui/input\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\nimport React from \"react\";\n\nexport const StringField: React.FC<AutoFormFieldProps> = ({\n inputProps,\n error,\n id,\n}) => {\n const { key, ...props } = inputProps;\n\n return (\n <Input id={id} className={error ? \"border-destructive\" : \"\"} {...props} />\n );\n};\n",
6363
"type": "registry:ui"
6464
},
6565
{
6666
"path": "autoform/components/SelectField.tsx",
6767
"target": "components/ui/autoform/components/SelectField.tsx",
68-
"content": "import React from \"react\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\n\nexport const SelectField: React.FC<AutoFormFieldProps> = ({\n field,\n inputProps,\n error,\n id,\n}) => (\n <Select {...inputProps}>\n <SelectTrigger id={id} className={error ? \"border-destructive\" : \"\"}>\n <SelectValue placeholder=\"Select an option\" />\n </SelectTrigger>\n <SelectContent>\n {(field.options || []).map(([key, label]) => (\n <SelectItem key={key} value={key}>\n {label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n);\n",
68+
"content": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\nimport React from \"react\";\n\nexport const SelectField: React.FC<AutoFormFieldProps> = ({\n field,\n inputProps,\n error,\n id,\n}) => {\n const { key, ...props } = inputProps;\n\n return (\n <Select {...props}>\n <SelectTrigger id={id} className={error ? \"border-destructive\" : \"\"}>\n <SelectValue placeholder=\"Select an option\" />\n </SelectTrigger>\n <SelectContent>\n {(field.options || []).map(([key, label]) => (\n <SelectItem key={key} value={key}>\n {label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n );\n};\n",
6969
"type": "registry:ui"
7070
},
7171
{
@@ -77,7 +77,7 @@
7777
{
7878
"path": "autoform/components/NumberField.tsx",
7979
"target": "components/ui/autoform/components/NumberField.tsx",
80-
"content": "import React from \"react\";\nimport { Input } from \"@/components/ui/input\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\n\nexport const NumberField: React.FC<AutoFormFieldProps> = ({\n inputProps,\n error,\n id,\n}) => (\n <Input\n id={id}\n type=\"number\"\n className={error ? \"border-destructive\" : \"\"}\n {...inputProps}\n />\n);\n",
80+
"content": "import { Input } from \"@/components/ui/input\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\nimport React from \"react\";\n\nexport const NumberField: React.FC<AutoFormFieldProps> = ({\n inputProps,\n error,\n id,\n}) => {\n const { key, ...props } = inputProps;\n\n return (\n <Input\n id={id}\n type=\"number\"\n className={error ? \"border-destructive\" : \"\"}\n {...props}\n />\n );\n};\n",
8181
"type": "registry:ui"
8282
},
8383
{
@@ -101,7 +101,7 @@
101101
{
102102
"path": "autoform/components/DateField.tsx",
103103
"target": "components/ui/autoform/components/DateField.tsx",
104-
"content": "import React from \"react\";\nimport { Input } from \"@/components/ui/input\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({\n inputProps,\n error,\n id,\n}) => (\n <Input\n id={id}\n type=\"date\"\n className={error ? \"border-destructive\" : \"\"}\n {...inputProps}\n />\n);\n",
104+
"content": "import { Input } from \"@/components/ui/input\";\nimport { AutoFormFieldProps } from \"@autoform/react\";\nimport React from \"react\";\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({\n inputProps,\n error,\n id,\n}) => {\n const { key, ...props } = inputProps;\n\n return (\n <Input\n id={id}\n type=\"date\"\n className={error ? \"border-destructive\" : \"\"}\n {...props}\n />\n );\n};\n",
105105
"type": "registry:ui"
106106
},
107107
{

‎packages/shadcn/src/components/ui/autoform/components/DateField.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import React from "react";
21
import { Input } from "@/components/ui/input";
32
import { AutoFormFieldProps } from "@autoform/react";
3+
import React from "react";
44

55
export const DateField: React.FC<AutoFormFieldProps> = ({
66
inputProps,
77
error,
88
id,
9-
}) => (
10-
<Input
11-
id={id}
12-
type="date"
13-
className={error ? "border-destructive" : ""}
14-
{...inputProps}
15-
/>
16-
);
9+
}) => {
10+
const { key, ...props } = inputProps;
11+
12+
return (
13+
<Input
14+
id={id}
15+
type="date"
16+
className={error ? "border-destructive" : ""}
17+
{...props}
18+
/>
19+
);
20+
};

‎packages/shadcn/src/components/ui/autoform/components/NumberField.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import React from "react";
21
import { Input } from "@/components/ui/input";
32
import { AutoFormFieldProps } from "@autoform/react";
3+
import React from "react";
44

55
export const NumberField: React.FC<AutoFormFieldProps> = ({
66
inputProps,
77
error,
88
id,
9-
}) => (
10-
<Input
11-
id={id}
12-
type="number"
13-
className={error ? "border-destructive" : ""}
14-
{...inputProps}
15-
/>
16-
);
9+
}) => {
10+
const { key, ...props } = inputProps;
11+
12+
return (
13+
<Input
14+
id={id}
15+
type="number"
16+
className={error ? "border-destructive" : ""}
17+
{...props}
18+
/>
19+
);
20+
};

‎packages/shadcn/src/components/ui/autoform/components/SelectField.tsx

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import {
32
Select,
43
SelectContent,
@@ -7,23 +6,28 @@ import {
76
SelectValue,
87
} from "@/components/ui/select";
98
import { AutoFormFieldProps } from "@autoform/react";
9+
import React from "react";
1010

1111
export const SelectField: React.FC<AutoFormFieldProps> = ({
1212
field,
1313
inputProps,
1414
error,
1515
id,
16-
}) => (
17-
<Select {...inputProps}>
18-
<SelectTrigger id={id} className={error ? "border-destructive" : ""}>
19-
<SelectValue placeholder="Select an option" />
20-
</SelectTrigger>
21-
<SelectContent>
22-
{(field.options || []).map(([key, label]) => (
23-
<SelectItem key={key} value={key}>
24-
{label}
25-
</SelectItem>
26-
))}
27-
</SelectContent>
28-
</Select>
29-
);
16+
}) => {
17+
const { key, ...props } = inputProps;
18+
19+
return (
20+
<Select {...props}>
21+
<SelectTrigger id={id} className={error ? "border-destructive" : ""}>
22+
<SelectValue placeholder="Select an option" />
23+
</SelectTrigger>
24+
<SelectContent>
25+
{(field.options || []).map(([key, label]) => (
26+
<SelectItem key={key} value={key}>
27+
{label}
28+
</SelectItem>
29+
))}
30+
</SelectContent>
31+
</Select>
32+
);
33+
};

‎packages/shadcn/src/components/ui/autoform/components/StringField.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React from "react";
21
import { Input } from "@/components/ui/input";
32
import { AutoFormFieldProps } from "@autoform/react";
3+
import React from "react";
44

55
export const StringField: React.FC<AutoFormFieldProps> = ({
66
inputProps,
77
error,
88
id,
9-
}) => (
10-
<Input
11-
id={id}
12-
className={error ? "border-destructive" : ""}
13-
{...inputProps}
14-
/>
15-
);
9+
}) => {
10+
const { key, ...props } = inputProps;
11+
12+
return (
13+
<Input id={id} className={error ? "border-destructive" : ""} {...props} />
14+
);
15+
};

0 commit comments

Comments
 (0)