Skip to content

Commit 12ef6f1

Browse files
x0kx0k
committed
[docs] Add Labels and icons section
1 parent 0176196 commit 12ef6f1

File tree

8 files changed

+147
-14
lines changed

8 files changed

+147
-14
lines changed

‎.changeset/chilly-spoons-laugh.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+
Add `Labels and icons` section

‎apps/docs/astro.config.mjs‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,14 @@ export default defineConfig({
2929
label: "Themes",
3030
autogenerate: { directory: "themes" },
3131
},
32+
{
33+
label: "Customization",
34+
autogenerate: { directory: "customization" },
35+
},
3236
{
3337
label: "API Reference",
3438
autogenerate: { directory: "api-reference" },
3539
},
36-
// {
37-
// label: 'Guides',
38-
// items: [
39-
// // Each item here is one entry in the navigation menu.
40-
// { label: 'Example Guide', slug: 'guides/example' },
41-
// ],
42-
// },
43-
// {
44-
// label: 'Reference',
45-
// autogenerate: { directory: 'reference' },
46-
// },
4740
],
4841
components: {
4942
Head: "./src/components/custom-head.astro",

‎apps/docs/src/content/docs/guides/custom-validation.mdx‎ renamed to ‎apps/docs/src/content/docs/customization/custom-validation.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Custom validation
33
sidebar:
4-
order: 2
4+
order: 0
55
---
66

77
## Errors transformation and custom validation

‎apps/docs/src/content/docs/guides/custom-widgets.mdx‎ renamed to ‎apps/docs/src/content/docs/customization/custom-widgets.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Custom widgets
33
sidebar:
4-
order: 3
4+
order: 1
55
---
66

77
## Example

‎apps/docs/src/content/docs/guides/_icons.astro‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
import { ShadowHost } from "@/components/shadow";
3+
import { Icon } from '@astrojs/starlight/components';
4+
5+
import Form from "./_icons.svelte";
6+
---
7+
8+
<ShadowHost client:only="svelte">
9+
<Form client:only="svelte">
10+
Hello <Icon name="seti:svelte" /> from <Icon name="astro" />
11+
</Form>
12+
</ShadowHost>

‎apps/docs/src/content/docs/guides/_icons.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { Snippet } from "svelte";
3+
import type { Schema } from "@sjsf/form";
4+
5+
import CustomForm from "@/components/custom-form.svelte";
6+
7+
const { children: icon }: { children: Snippet } = $props();
8+
9+
const schema: Schema = {
10+
title: "With icon",
11+
};
12+
let value = $state();
13+
</script>
14+
15+
<CustomForm
16+
bind:value
17+
icons={{ submit: icon }}
18+
{schema}
19+
onSubmit={console.log}
20+
/>

‎apps/docs/src/content/docs/guides/custom-form.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Custom form
33
sidebar:
4-
order: 4
4+
order: 3
55
---
66

77
import { Code } from '@astrojs/starlight/components';

‎apps/docs/src/content/docs/guides/labels-and-icons.mdx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Labels and icons
3+
sidebar:
4+
order: 2
5+
---
6+
7+
import { LinkCard, LinkButton, Code, Card } from '@astrojs/starlight/components'
8+
9+
import Npm from '@/components/npm.astro';
10+
11+
import Icons from './_icons.astro';
12+
import iconsCode from './_icons.svelte?raw';
13+
14+
## Translation
15+
16+
One of the mandatory components of a form is `translate`. You can see its use in various places in the form (various buttons and labels).
17+
18+
Translations are imported from `@sjsf/form/translations/{locale}`, currently supported locales:
19+
20+
- `en`
21+
- `ru`
22+
23+
<LinkCard title="Translation API reference" href="../../api-reference/translation/" />
24+
25+
## Icons
26+
27+
Text is good, but you can do better by adding icons!
28+
29+
<Code code={iconsCode} lang='svelte' />
30+
31+
<Card>
32+
<Icons />
33+
</Card>
34+
35+
36+
<LinkCard title="Icons API reference" href="../../api-reference/icons/" />
37+
38+
There are also ready-made sets of icons for control buttons.
39+
40+
### Lucide icons
41+
42+
Installation:
43+
44+
<Npm pkg="@sjsf/lucide-icons" />
45+
46+
Usage:
47+
48+
```svelte
49+
<script lang="ts">
50+
import { Form } from '@sjsf/form';
51+
import { icons } from '@sjsf/lucide-icons';
52+
</script>
53+
54+
<Form {icons} />
55+
```
56+
57+
<LinkButton
58+
href="https://x0k.github.io/svelte-jsonschema-form/playground/?sample=Arrays&theme=daisy&icons=lucide&vevent=0&vafter=0"
59+
variant="secondary"
60+
icon="external"
61+
iconPlacement="end"
62+
target="_blank"
63+
>
64+
Playground
65+
</LinkButton>
66+
67+
### Flowbite icons
68+
69+
Installation:
70+
71+
<Npm pkg="@sjsf/flowbite-icons" />
72+
73+
Add icons content to a tailwindcss config:
74+
75+
```typescript
76+
import { FLOWBITE_ICONS_CONTENT } from '@sjsf/flowbite-icons/preset'
77+
78+
/** @type {import('tailwindcss').Config} */
79+
export default {
80+
content: ['./src/**/*.{html,js,svelte,ts}', FLOWBITE_ICONS_CONTENT],
81+
}
82+
```
83+
84+
Usage:
85+
86+
```svelte
87+
<script lang="ts">
88+
import { Form } from '@sjsf/form';
89+
import { icons } from '@sjsf/flowbite-icons';
90+
</script>
91+
92+
<Form {icons} />
93+
```
94+
95+
<LinkButton
96+
href="https://x0k.github.io/svelte-jsonschema-form/playground/?sample=Arrays&theme=flowbite&icons=flowbite&vevent=0&vafter=0"
97+
variant="secondary"
98+
icon="external"
99+
iconPlacement="end"
100+
target="_blank"
101+
>
102+
Playground
103+
</LinkButton>

0 commit comments

Comments
 (0)