Skip to content

Commit 93d99c3

Browse files
x0kx0k
committed
[docs] Use casted components
1 parent 86b5b77 commit 93d99c3

File tree

10 files changed

+34
-215
lines changed

10 files changed

+34
-215
lines changed

‎apps/docs2/src/components/themes/basic/defaults.ts‎

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,17 @@
1-
import { cast } from "@sjsf/form/lib/component";
2-
import { extendByRecord } from "@sjsf/form/lib/resolver";
3-
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";
4-
51
export { translation } from "@sjsf/form/translations/en";
62

73
export { resolver } from "@sjsf/form/resolvers/basic";
84
import "@sjsf/form/fields/extra-fields/enum-include";
95
import "@sjsf/form/fields/extra-fields/multi-enum-include";
10-
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";
6+
import "@sjsf/form/fields/extra-fields/unknown-native-file-include";
117

12-
import { theme as baseTheme } from "@sjsf/basic-theme";
8+
export { theme } from "@sjsf/basic-theme";
139
import "@sjsf/basic-theme/extra-widgets/textarea-include";
1410
import "@sjsf/basic-theme/extra-widgets/checkboxes-include";
1511
import "@sjsf/basic-theme/extra-widgets/radio-include";
1612
import "@sjsf/basic-theme/extra-widgets/file-include";
1713
import "@sjsf/basic-theme/extra-widgets/date-picker-include";
1814

19-
declare module "@sjsf/form" {
20-
interface ComponentProps {
21-
nativeFileFieldWrapper: FieldCommonProps<unknown>;
22-
}
23-
interface ComponentBindings {
24-
nativeFileFieldWrapper: "value";
25-
}
26-
}
27-
28-
const nativeFileFieldWrapper = cast(NativeFileField, {
29-
value: {
30-
transform(props) {
31-
const v = props.value;
32-
if (v !== undefined && !(v instanceof File)) {
33-
throw new Error(
34-
`expected "File" or "undefined" value, but got ${typeof v}`
35-
);
36-
}
37-
return v;
38-
},
39-
},
40-
}) satisfies ComponentDefinition<"unknownField">;
41-
42-
export const theme = extendByRecord(baseTheme, {
43-
nativeFileFieldWrapper,
44-
});
45-
4615
export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";
4716

4817
export { createFormMerger as merger } from "@sjsf/form/mergers/modern";

‎apps/docs2/src/components/themes/daisyui/defaults.ts‎

Lines changed: 3 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,16 @@
1-
import { cast } from "@sjsf/form/lib/component";
2-
import { extendByRecord } from "@sjsf/form/lib/resolver";
3-
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";
4-
51
export { translation } from "@sjsf/form/translations/en";
62

73
export { resolver } from "@sjsf/form/resolvers/basic";
84
import "@sjsf/form/fields/extra-fields/enum-include";
95
import "@sjsf/form/fields/extra-fields/multi-enum-include";
10-
import "@sjsf/form/fields/extra-fields/file-include";
11-
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";
6+
import "@sjsf/form/fields/extra-fields/unknown-native-file-include";
127

13-
import { theme as baseTheme } from "@sjsf/daisyui5-theme";
8+
export { theme } from "@sjsf/daisyui5-theme";
149
import "@sjsf/daisyui5-theme/extra-widgets/textarea-include";
1510
import "@sjsf/daisyui5-theme/extra-widgets/checkboxes-include";
1611
import "@sjsf/daisyui5-theme/extra-widgets/radio-include";
1712
import "@sjsf/daisyui5-theme/extra-widgets/file-include";
18-
import "@sjsf/daisyui5-theme/extra-widgets/cally-date-picker-include";
19-
20-
declare module "@sjsf/form" {
21-
interface ComponentProps {
22-
nativeFileFieldWrapper: FieldCommonProps<unknown>;
23-
}
24-
interface ComponentBindings {
25-
nativeFileFieldWrapper: "value";
26-
}
27-
}
28-
29-
const nativeFileFieldWrapper = cast(NativeFileField, {
30-
value: {
31-
transform(props) {
32-
const v = props.value;
33-
if (v !== undefined && !(v instanceof File)) {
34-
throw new Error(
35-
`expected "File" or "undefined" value, but got ${typeof v}`
36-
);
37-
}
38-
return v;
39-
},
40-
},
41-
}) satisfies ComponentDefinition<"unknownField">;
42-
43-
export const theme = extendByRecord(baseTheme, {
44-
nativeFileFieldWrapper,
45-
});
13+
import "@sjsf/daisyui5-theme/extra-widgets/date-picker-include";
4614

4715
export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";
4816

‎apps/docs2/src/components/themes/data.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const uiSchema: UiSchemaRoot = {
153153
},
154154
resume: {
155155
"ui:components": {
156-
unknownField: "nativeFileFieldWrapper",
156+
unknownField: "unknownNativeFileField",
157157
},
158158
},
159159
};

‎apps/docs2/src/components/themes/flowbite/defaults.ts‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,17 @@
1-
import { cast } from "@sjsf/form/lib/component";
2-
import { extendByRecord } from "@sjsf/form/lib/resolver";
3-
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";
4-
51
export { translation } from "@sjsf/form/translations/en";
62

73
export { resolver } from "@sjsf/form/resolvers/basic";
84
import "@sjsf/form/fields/extra-fields/enum-include";
95
import "@sjsf/form/fields/extra-fields/multi-enum-include";
10-
import "@sjsf/form/fields/extra-fields/file-include";
11-
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";
6+
import "@sjsf/form/fields/extra-fields/unknown-native-file-include";
127

13-
import { theme as baseTheme } from "@sjsf/flowbite3-theme";
8+
export { theme } from "@sjsf/flowbite3-theme";
149
import "@sjsf/flowbite3-theme/extra-widgets/textarea-include";
1510
import "@sjsf/flowbite3-theme/extra-widgets/checkboxes-include";
1611
import "@sjsf/flowbite3-theme/extra-widgets/radio-include";
1712
import "@sjsf/flowbite3-theme/extra-widgets/file-include";
1813
import "@sjsf/flowbite3-theme/extra-widgets/date-picker-include";
1914

20-
declare module "@sjsf/form" {
21-
interface ComponentProps {
22-
nativeFileFieldWrapper: FieldCommonProps<unknown>;
23-
}
24-
interface ComponentBindings {
25-
nativeFileFieldWrapper: "value";
26-
}
27-
}
28-
29-
const nativeFileFieldWrapper = cast(NativeFileField, {
30-
value: {
31-
transform(props) {
32-
const v = props.value;
33-
if (v !== undefined && !(v instanceof File)) {
34-
throw new Error(
35-
`expected "File" or "undefined" value, but got ${typeof v}`
36-
);
37-
}
38-
return v;
39-
},
40-
},
41-
}) satisfies ComponentDefinition<"unknownField">;
42-
43-
export const theme = extendByRecord(baseTheme, {
44-
nativeFileFieldWrapper,
45-
});
46-
4715
export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";
4816

4917
export { createFormMerger as merger } from "@sjsf/form/mergers/modern";

‎apps/docs2/src/components/themes/shadcn/defaults.ts‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,17 @@
1-
import { cast } from "@sjsf/form/lib/component";
2-
import { extendByRecord } from "@sjsf/form/lib/resolver";
3-
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";
4-
51
export { translation } from "@sjsf/form/translations/en";
62

73
export { resolver } from "@sjsf/form/resolvers/basic";
84
import "@sjsf/form/fields/extra-fields/enum-include";
95
import "@sjsf/form/fields/extra-fields/multi-enum-include";
10-
import "@sjsf/form/fields/extra-fields/file-include";
11-
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";
6+
import "@sjsf/form/fields/extra-fields/unknown-native-file-include";
127

13-
import { theme as baseTheme } from "@sjsf/shadcn4-theme";
8+
export { theme } from "@sjsf/shadcn4-theme";
149
import "@sjsf/shadcn4-theme/extra-widgets/textarea-include";
1510
import "@sjsf/shadcn4-theme/extra-widgets/checkboxes-include";
1611
import "@sjsf/shadcn4-theme/extra-widgets/radio-include";
1712
import "@sjsf/shadcn4-theme/extra-widgets/file-include";
1813
import "@sjsf/shadcn4-theme/extra-widgets/date-picker-include";
1914

20-
declare module "@sjsf/form" {
21-
interface ComponentProps {
22-
nativeFileFieldWrapper: FieldCommonProps<unknown>;
23-
}
24-
interface ComponentBindings {
25-
nativeFileFieldWrapper: "value";
26-
}
27-
}
28-
29-
const nativeFileFieldWrapper = cast(NativeFileField, {
30-
value: {
31-
transform(props) {
32-
const v = props.value;
33-
if (v !== undefined && !(v instanceof File)) {
34-
throw new Error(
35-
`expected "File" or "undefined" value, but got ${typeof v}`
36-
);
37-
}
38-
return v;
39-
},
40-
},
41-
}) satisfies ComponentDefinition<"unknownField">;
42-
43-
export const theme = extendByRecord(baseTheme, {
44-
nativeFileFieldWrapper,
45-
});
46-
4715
export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";
4816

4917
export { createFormMerger as merger } from "@sjsf/form/mergers/modern";

‎apps/docs2/src/components/themes/skeleton/defaults.ts‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,17 @@
1-
import { cast } from "@sjsf/form/lib/component";
2-
import { extendByRecord } from "@sjsf/form/lib/resolver";
3-
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";
4-
51
export { translation } from "@sjsf/form/translations/en";
62

73
export { resolver } from "@sjsf/form/resolvers/basic";
84
import "@sjsf/form/fields/extra-fields/enum-include";
95
import "@sjsf/form/fields/extra-fields/multi-enum-include";
10-
import "@sjsf/form/fields/extra-fields/file-include";
11-
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";
6+
import "@sjsf/form/fields/extra-fields/unknown-native-file-include";
127

13-
import { theme as baseTheme } from "@sjsf/skeleton3-theme";
8+
export { theme } from "@sjsf/skeleton3-theme";
149
import "@sjsf/skeleton3-theme/extra-widgets/textarea-include";
1510
import "@sjsf/skeleton3-theme/extra-widgets/checkboxes-include";
1611
import "@sjsf/skeleton3-theme/extra-widgets/radio-include";
1712
import "@sjsf/skeleton3-theme/extra-widgets/file-include";
1813
import "@sjsf/skeleton3-theme/extra-widgets/date-picker-include";
1914

20-
declare module "@sjsf/form" {
21-
interface ComponentProps {
22-
nativeFileFieldWrapper: FieldCommonProps<unknown>;
23-
}
24-
interface ComponentBindings {
25-
nativeFileFieldWrapper: "value";
26-
}
27-
}
28-
29-
const nativeFileFieldWrapper = cast(NativeFileField, {
30-
value: {
31-
transform(props) {
32-
const v = props.value;
33-
if (v !== undefined && !(v instanceof File)) {
34-
throw new Error(
35-
`expected "File" or "undefined" value, but got ${typeof v}`
36-
);
37-
}
38-
return v;
39-
},
40-
},
41-
}) satisfies ComponentDefinition<"unknownField">;
42-
43-
export const theme = extendByRecord(baseTheme, {
44-
nativeFileFieldWrapper,
45-
});
46-
4715
export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";
4816

4917
export { createFormMerger as merger } from "@sjsf/form/mergers/modern";

‎apps/docs2/src/content/docs/form/theme.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ fields, as well as a set of definitions for extra widgets.
8888
Here is a list of extra fields that can be imported from `@sjsf/form/fields/extra-fields/*`.
8989

9090
- `aggregated`
91+
- `array-files`
92+
- `array-native-files`
93+
- `array-tags`
9194
- `boolean-select`
9295
- `enum`
9396
- `file`
@@ -96,6 +99,7 @@ Here is a list of extra fields that can be imported from `@sjsf/form/fields/extr
9699
- `native-file`
97100
- `native-files`
98101
- `tags`
102+
- `unknown-native-file`
99103

100104
To use them you can import them directly
101105

‎apps/docs2/src/content/docs/guides/component-casting.mdx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ You can create a new component that adapts the interface of the original compone
3535
3636
declare module '@sjsf/form' {
3737
interface ComponentProps {
38-
anyTagsField: FieldCommonProps<SchemaArrayValue>;
38+
arrayTagsField: FieldCommonProps<SchemaArrayValue>;
3939
}
4040
interface ComponentBindings {
41-
anyTagsField: 'value';
41+
arrayTagsField: 'value';
4242
}
4343
}
4444
</script>
@@ -49,7 +49,7 @@ You can create a new component that adapts the interface of the original compone
4949
5050
import { assertStrings } from '$lib/form/cast';
5151
52-
let { value = $bindable(), ...rest }: ComponentProps['arrayField'] = $props();
52+
let { value = $bindable(), ...rest }: ComponentProps['arrayTagsField'] = $props();
5353
</script>
5454
5555
<TagsField
@@ -65,11 +65,16 @@ You can create a new component that adapts the interface of the original compone
6565
```
6666

6767
Why is this needed? Throwing an error when data formats don't match
68-
is only one possible approach.
69-
You should decide on the adaptation strategy and implement it yourself for now,
70-
but in the future the library may provide ready-made adapted components.
68+
is only one possible approach.
69+
You should decide on the adaptation strategy and implement it yourself.
70+
However, if you're fine with the `assert`-based approach,
71+
you can use the following prebuilt field components:
72+
- `array-files`
73+
- `array-native-files`
74+
- `array-tags`
75+
- `unknown-native-file`
7176

72-
You can reduce boilerplate code by using the `cast` utility from `@sjsf/form/lib/component`:
77+
You can also reduce boilerplate code by using the `cast` utility from `@sjsf/form/lib/component`:
7378

7479
:::caution
7580

@@ -87,14 +92,14 @@ import { assertStrings } from '$lib/form/cast';
8792

8893
declare module "@sjsf/form" {
8994
interface ComponentProps {
90-
tagsFieldWrapper: FieldCommonProps<SchemaArrayValue>;
95+
arrayTagsField: FieldCommonProps<SchemaArrayValue>;
9196
}
9297
interface ComponentBinding {
93-
tagsFieldWrapper: "value";
98+
arrayTagsField: "value";
9499
}
95100
}
96101

97-
const tagsFieldWrapper = cast(TagsField, {
102+
const arrayTagsField = cast(TagsField, {
98103
value: {
99104
transform(props) {
100105
assertStrings(props.value);

‎apps/docs2/src/content/docs/guides/file-handling/custom-keyword.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
},
4747
uiSchema: {
4848
"ui:components": {
49-
unknownField: "nativeFileFieldWrapper",
49+
unknownField: "unknownNativeFileField",
5050
},
5151
},
5252
fieldsValidationMode: ON_CHANGE,

0 commit comments

Comments
 (0)