a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
refactor: move form components into app/src/lib/form (#109)
authored by
GitHub
94dd2d00
f242ba8c
+11
-11
app/src/lib/components/ChoiceField/Checkbox.svelte
app/src/lib/form/Checkbox/Checkbox.svelte
app/src/lib/components/ChoiceField/Checkbox.svelte
app/src/lib/form/Checkbox/Checkbox.svelte
app/src/lib/components/ChoiceField/CheckboxCard.svelte
app/src/lib/form/Checkbox/CheckboxCard.svelte
app/src/lib/components/ChoiceField/CheckboxCard.svelte
app/src/lib/form/Checkbox/CheckboxCard.svelte
app/src/lib/components/ChoiceField/CheckboxGroup.svelte
app/src/lib/form/Checkbox/CheckboxGroup.svelte
app/src/lib/components/ChoiceField/CheckboxGroup.svelte
app/src/lib/form/Checkbox/CheckboxGroup.svelte
app/src/lib/components/ChoiceField/CheckboxGroupLabel.svelte
app/src/lib/form/Checkbox/CheckboxGroupLabel.svelte
app/src/lib/components/ChoiceField/CheckboxGroupLabel.svelte
app/src/lib/form/Checkbox/CheckboxGroupLabel.svelte
app/src/lib/components/ChoiceField/index.ts
app/src/lib/form/Checkbox/index.ts
app/src/lib/components/ChoiceField/index.ts
app/src/lib/form/Checkbox/index.ts
app/src/lib/components/ColorPicker/ColorPicker.svelte
app/src/lib/form/ColorPicker/ColorPicker.svelte
app/src/lib/components/ColorPicker/ColorPicker.svelte
app/src/lib/form/ColorPicker/ColorPicker.svelte
app/src/lib/components/ColorPicker/index.ts
app/src/lib/form/ColorPicker/index.ts
app/src/lib/components/ColorPicker/index.ts
app/src/lib/form/ColorPicker/index.ts
app/src/lib/components/TextField/CharacterCounter.svelte
app/src/lib/form/TextInput/CharacterCounter.svelte
app/src/lib/components/TextField/CharacterCounter.svelte
app/src/lib/form/TextInput/CharacterCounter.svelte
app/src/lib/components/TextField/ClearButton.svelte
app/src/lib/form/TextInput/ClearButton.svelte
app/src/lib/components/TextField/ClearButton.svelte
app/src/lib/form/TextInput/ClearButton.svelte
app/src/lib/components/TextField/HelpText.svelte
app/src/lib/form/TextInput/HelpText.svelte
app/src/lib/components/TextField/HelpText.svelte
app/src/lib/form/TextInput/HelpText.svelte
+3
-3
app/src/lib/components/TextField/MultiTextField.svelte
app/src/lib/form/TextInput/TextAreaInput.svelte
+3
-3
app/src/lib/components/TextField/MultiTextField.svelte
app/src/lib/form/TextInput/TextAreaInput.svelte
···
5
5
import HelpText from './HelpText.svelte'
6
6
import CharacterCounter from './CharacterCounter.svelte'
7
7
8
-
type MultiTextFieldRootElement = SvelteHTMLElements['textarea']
9
-
type MultiTextFieldProps = Exclude<MultiTextFieldRootElement, 'resize'> & {
8
+
type TextAreaInputRootElement = SvelteHTMLElements['textarea']
9
+
type TextAreaInputProps = Exclude<TextAreaInputRootElement, 'resize'> & {
10
10
label: string,
11
11
name: string,
12
12
help?: string,
···
21
21
resizable = true,
22
22
maxlength,
23
23
...other
24
-
}: MultiTextFieldProps = $props()
24
+
}: TextAreaInputProps = $props()
25
25
let value = $state('')
26
26
27
27
const multi = tv({
app/src/lib/components/TextField/TextField.svelte
app/src/lib/form/TextInput/TextInput.svelte
app/src/lib/components/TextField/TextField.svelte
app/src/lib/form/TextInput/TextInput.svelte
+2
-2
app/src/lib/components/TextField/index.ts
app/src/lib/form/TextInput/index.ts
+2
-2
app/src/lib/components/TextField/index.ts
app/src/lib/form/TextInput/index.ts
···
1
1
export { default as CharacterCounter } from './CharacterCounter.svelte'
2
2
export { default as ClearButton } from './ClearButton.svelte'
3
3
export { default as HelpText } from './HelpText.svelte'
4
-
export { default as MultiTextField } from './MultiTextField.svelte'
5
-
export { default as TextField } from './TextField.svelte'
4
+
export { default as TextAreaInput } from './TextAreaInput.svelte'
5
+
export { default as TextInput } from './TextInput.svelte'
+1
-1
app/src/routes/combat/+page.svelte
+1
-1
app/src/routes/combat/+page.svelte
···
1
1
<script lang="ts">
2
+
import { Checkbox, CheckboxGroup, CheckboxGroupLabel } from '$form/Checkbox'
2
3
import { AbilityCard } from '$patterns/AbilityCard'
3
-
import { Checkbox, CheckboxGroup, CheckboxGroupLabel } from '$ui/ChoiceField'
4
4
import { PageLayout } from '$ui/Site'
5
5
import type { PageProps } from './$types'
6
6
+4
-4
app/src/routes/species/new/+page.svelte
+4
-4
app/src/routes/species/new/+page.svelte
···
1
1
<script lang="ts">
2
2
import { AbilityShortArray, getAbilityName, getAbilityDesc } from '@starlight/types/dnd'
3
+
import { CheckboxCard } from '$form/Checkbox'
4
+
import { TextAreaInput, TextInput } from '$form/TextInput'
3
5
import { FormButton } from '$ui/Button'
4
-
import { CheckboxCard } from '$ui/ChoiceField'
5
6
import { Heading, HeadingGroup, SubHeading } from '$ui/Heading'
6
7
import { PageLayout } from '$ui/Site'
7
-
import { MultiTextField, TextField } from '$ui/TextField'
8
8
</script>
9
9
10
10
<PageLayout display="flex" direction="col" class="gap-8 mx-auto" items="stretch">
···
13
13
<SubHeading isScript>Register a new species</SubHeading>
14
14
</HeadingGroup>
15
15
<form class="flex flex-col items-start gap-10 max-w-100ch">
16
-
<TextField
16
+
<TextInput
17
17
name="name"
18
18
label="Species name"
19
19
placeholder="Enter species name..."
20
20
maxlength={20} />
21
-
<MultiTextField
21
+
<TextAreaInput
22
22
name="description"
23
23
label="Species description"
24
24
placeholder="Describe the species..."