Skip to content

Commit b61f8fe

Browse files
x0kx0k
committed
Improve usage example
1 parent 339f9be commit b61f8fe

File tree

12 files changed

+303
-61
lines changed

12 files changed

+303
-61
lines changed

‎.changeset/rare-eagles-applaud.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"docs": patch
3+
---
4+
5+
Improve usage example

‎apps/docs/astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default defineConfig({
1111
trailingSlash: "always",
1212
i18n: {
1313
defaultLocale: "en",
14-
locales: ["en", "ru"],
14+
locales: ["en"],
1515
},
1616
integrations: [
1717
svelte(),

‎apps/docs/src/content/docs/_schema.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import type { Schema, UiSchemaRoot } from "@sjsf/form";
2+
3+
export const schema: Schema = {
4+
title: "A registration form",
5+
description: "A simple form example.",
6+
type: "object",
7+
required: ["firstName", "lastName", "start"],
8+
properties: {
9+
firstName: {
10+
type: "string",
11+
title: "First name",
12+
default: "Chuck",
13+
},
14+
lastName: {
15+
type: "string",
16+
title: "Last name",
17+
},
18+
age: {
19+
type: "integer",
20+
title: "Age",
21+
},
22+
bio: {
23+
type: "string",
24+
title: "Bio",
25+
},
26+
password: {
27+
type: "string",
28+
title: "Password",
29+
minLength: 3,
30+
},
31+
telephone: {
32+
type: "string",
33+
title: "Telephone",
34+
minLength: 10,
35+
},
36+
star: {
37+
type: "boolean",
38+
title: "Star",
39+
const: true,
40+
},
41+
},
42+
};
43+
44+
export const uiSchema: UiSchemaRoot = {
45+
firstName: {
46+
"ui:options": {
47+
input: {
48+
autofocus: true,
49+
autocomplete: "family-name",
50+
},
51+
},
52+
},
53+
lastName: {
54+
"ui:options": {
55+
input: {
56+
autocomplete: "given-name",
57+
},
58+
},
59+
},
60+
age: {
61+
"ui:options": {
62+
title: "Age of person",
63+
description: "(earthian year)",
64+
},
65+
},
66+
bio: {
67+
"ui:widget": "textarea",
68+
},
69+
password: {
70+
"ui:options": {
71+
help: "Hint: Make it strong!",
72+
input: {
73+
type: "password",
74+
},
75+
},
76+
},
77+
telephone: {
78+
"ui:options": {
79+
input: {
80+
type: "tel",
81+
},
82+
},
83+
},
84+
star: {
85+
"ui:options": {
86+
title: "Does this library deserve a star?",
87+
},
88+
},
89+
};
90+
91+
export const initialData = {
92+
lastName: "Norris",
93+
age: 75,
94+
bio: "Roundhouse kicking asses since 1940",
95+
password: "noneed",
96+
telephone: "1-800-KICKASS",
97+
};

‎apps/docs/src/content/docs/_simple-form.astro‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎apps/docs/src/content/docs/_simple-form.svelte‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎apps/docs/src/content/docs/_usage-with-theme.astro‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
import { Tabs, TabItem, Code, Card } from "@astrojs/starlight/components";
3+
import daisyuiStyles from '@sjsf/daisyui-theme/styles.css?inline';
4+
import flowbiteStyles from '@sjsf/flowbite-theme/styles.css?inline';
5+
import skeletonStyles from '@sjsf/skeleton-theme/styles.css?inline';
6+
7+
import type { Theme } from "@/shared";
8+
import { ShadowHost } from "@/components/shadow";
9+
10+
import WithBasic from "./_with-basic.svelte";
11+
import WithSkeleton from "./_with-skeleton.svelte";
12+
import WithDaisyui from "./_with-daisyui.svelte";
13+
import WithFlowbite from "./_with-flowbite.svelte";
14+
15+
import schemaCode from "./_schema?raw";
16+
import validatorCode from './_validator?raw';
17+
import withBasicCode from "./_with-basic.svelte?raw";
18+
import withSkeletonCode from "./_with-skeleton.svelte?raw";
19+
import withDaisyuiCode from "./_with-daisyui.svelte?raw";
20+
import withFlowbiteCode from "./_with-flowbite.svelte?raw";
21+
22+
const theme = (Astro.params.theme ?? "basic") as Theme;
23+
24+
const STYLES = {
25+
basic: "",
26+
daisyui: daisyuiStyles,
27+
flowbite: flowbiteStyles,
28+
skeleton: skeletonStyles,
29+
} satisfies Record<Theme, string>;
30+
31+
const CODE = {
32+
basic: withBasicCode,
33+
daisyui: withDaisyuiCode,
34+
flowbite: withFlowbiteCode,
35+
skeleton: withSkeletonCode,
36+
} satisfies Record<Theme, string>;
37+
---
38+
39+
<Tabs>
40+
<TabItem label="Form.svelte">
41+
<Code code={CODE[theme]} lang="svelte" />
42+
</TabItem>
43+
<TabItem label="_schema.ts">
44+
<Code code={schemaCode} lang="typescript" />
45+
</TabItem>
46+
<TabItem label="_validator.ts">
47+
<Code code={validatorCode} lang="typescript" />
48+
</TabItem>
49+
</Tabs>
50+
51+
<Card title="">
52+
<ShadowHost client:only="svelte" style={STYLES[theme]}>
53+
{
54+
theme === "basic" ? (
55+
<WithBasic client:only="svelte" />
56+
) : theme === "daisyui" ? (
57+
<WithDaisyui client:only="svelte" />
58+
) : theme === "flowbite" ? (
59+
<WithFlowbite client:only="svelte" />
60+
) : theme === "skeleton" ? (
61+
<WithSkeleton client:only="svelte" />
62+
) : null
63+
}
64+
</ShadowHost>
65+
</Card>

‎apps/docs/src/content/docs/_validator.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Ajv, { type ErrorObject } from "ajv";
2+
import {
3+
AjvValidator,
4+
addFormComponents,
5+
DEFAULT_AJV_CONFIG,
6+
} from "@sjsf/ajv8-validator";
7+
import type { Schema, SchemaValue, ValidationError } from "@sjsf/form";
8+
9+
class StarValidator extends AjvValidator {
10+
validateFormData(
11+
schema: Schema,
12+
formData: SchemaValue | undefined
13+
): ValidationError<ErrorObject>[] {
14+
return super.validateFormData(schema, formData).map((error) =>
15+
error.instanceId !== "root_star"
16+
? error
17+
: {
18+
...error,
19+
message: "I will try my best!",
20+
}
21+
);
22+
}
23+
}
24+
25+
export const validator = new StarValidator(
26+
addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
27+
);

‎apps/docs/src/content/docs/_with-basic.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import { Form } from "@sjsf/form";
3+
import { translation } from "@sjsf/form/translations/en";
4+
import { theme } from "@sjsf/form/basic-theme";
5+
6+
import { schema, uiSchema, initialData } from "./_schema";
7+
import { validator } from "./_validator";
8+
9+
let value = $state(initialData);
10+
</script>
11+
12+
<Form
13+
bind:value
14+
{...theme}
15+
{schema}
16+
{uiSchema}
17+
{validator}
18+
{translation}
19+
onSubmit={console.log}
20+
/>
21+
22+
<pre>{JSON.stringify(value, null, 2)}</pre>

‎apps/docs/src/content/docs/_with-daisyui.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
import { Form } from "@sjsf/form";
3+
import { translation } from "@sjsf/form/translations/en";
4+
import { theme } from "@sjsf/daisyui-theme";
5+
6+
import { astroTheme } from "@/theme.svelte";
7+
8+
import { schema, uiSchema, initialData } from "./_schema";
9+
import { validator } from './_validator'
10+
11+
let value = $state(initialData);
12+
13+
const astro = astroTheme();
14+
</script>
15+
16+
<Form
17+
style="background-color: transparent; margin-bottom: 1rem;"
18+
bind:value
19+
{...theme}
20+
{schema}
21+
{uiSchema}
22+
{validator}
23+
{translation}
24+
data-theme={astro.darkOrLight}
25+
onSubmit={console.log}
26+
/>
27+
28+
<pre>{JSON.stringify(value, null, 2)}</pre>

‎apps/docs/src/content/docs/_with-flowbite.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { Form } from "@sjsf/form";
3+
import { translation } from "@sjsf/form/translations/en";
4+
import { theme } from "@sjsf/flowbite-theme";
5+
6+
import { astroTheme } from "@/theme.svelte";
7+
8+
import { schema, uiSchema, initialData } from "./_schema";
9+
import { validator } from "./_validator";
10+
11+
let value = $state(initialData);
12+
13+
const astro = astroTheme();
14+
</script>
15+
16+
<Form
17+
class="flex flex-col gap-4 mb-4 {astro.darkOrLight}"
18+
bind:value
19+
{...theme}
20+
{schema}
21+
{uiSchema}
22+
{validator}
23+
{translation}
24+
onSubmit={console.log}
25+
/>
26+
27+
<pre>{JSON.stringify(value, null, 2)}</pre>

0 commit comments

Comments
 (0)