mirrors/gauntlet
1
0
Fork 0
mirror of https://github.com/project-gauntlet/gauntlet.git synced 2025-12-23 10:35:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve ui form plugin examples

Browse source
This commit is contained in:
Exidex 2025-01-22 21:23:00 +01:00
parent 2e2864e88a
commit 8fc21934de
No known key found for this signature in database
GPG key ID: AC63AA86DD4F2D45
6 changed files with 48 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

3
example_plugins/plugins/ui_form/src/checkbox.tsx
View file

@ -5,7 +5,8 @@ export default function CheckboxExample(): ReactElement {
return (
<Form>
<Form.Checkbox
label="Cheese"
label="Have heard about"
title="The Tragedy of Darth Plagueis the Wise"
value={true}
onChange={value => {
console.log(`value: ${value}`)

72
example_plugins/plugins/ui_form/src/main.tsx
View file

@ -1,50 +1,35 @@
import { ReactElement } from 'react';
import { Form } from "@project-gauntlet/api/components";
// TODO remake into starwars themed
import { Action, ActionPanel, Form } from "@project-gauntlet/api/components";
export default function MainExample(): ReactElement {
return (
<Form>
<Form
actions={
<ActionPanel>
<Action label="Submit" onAction={() => {}}/>
</ActionPanel>
}
>
<Form.TextField label="First Name" value="Cassian" onChange={value => {
console.log(`First Name: ${value}`)
}}/>
<Form.TextField label="Last Name" value="Andor" onChange={value => {
console.log(`Last Name: ${value}`)
}}/>
<Form.Select
label="Food"
value="burger"
>
<Form.Select.Item value="burger">Burger</Form.Select.Item>
label="Species"
value="human"
onChange={value => {
console.log(`Last Name: ${value}`)
}}>
<Form.Select.Item value="human">Human</Form.Select.Item>
<Form.Select.Item value="jawa">Jawa</Form.Select.Item>
<Form.Select.Item value="hutt">Hutt</Form.Select.Item>
<Form.Select.Item value="twi'lek">Twi'lek</Form.Select.Item>
</Form.Select>
<Form.TextField
label="Bun"
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.TextField
label="Meat"
value="Chicken"
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.Checkbox
label="Cheese"
value={true}
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.TextField
label="Toppings"
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.TextField
label="Condiments"
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.Separator/>
<Form.DatePicker
label="Date"
value={"2024-03-22"}
@ -52,6 +37,13 @@ export default function MainExample(): ReactElement {
console.log(`value: ${value}`)
}}
/>
<Form.Checkbox
title="I acknowledge the Galactic Code and agree to abide by its regulations."
value={false}
onChange={value => {
console.log(`terms of service: ${value}`)
}}
/>
</Form>
);
};

2
example_plugins/plugins/ui_form/src/password-field.tsx
View file

@ -4,7 +4,7 @@ import { Form } from "@project-gauntlet/api/components";
export default function PasswordFieldExample(): ReactElement {
return (
<Form>
<Form.PasswordField label="Password" value="burger"/>
<Form.PasswordField label="Password" value="K'lor'slug"/>
</Form>
);
};

14
example_plugins/plugins/ui_form/src/select.tsx
View file

@ -4,13 +4,13 @@ import { Form } from "@project-gauntlet/api/components";
export default function SelectExample(): ReactElement {
return (
<Form>
<Form.Select label="Food" value="burger">
<Form.Select.Item value="burger">Burger</Form.Select.Item>
<Form.Select.Item value="hot-dog">Hot Dog</Form.Select.Item>
<Form.Select.Item value="croissant">Croissant</Form.Select.Item>
<Form.Select.Item value="cookies">Cookies</Form.Select.Item>
<Form.Select.Item value="steak">Steak</Form.Select.Item>
<Form.Select.Item value="seafood">Seafood</Form.Select.Item>
<Form.Select label="Species" value="human">
<Form.Select.Item value="human">Human</Form.Select.Item>
<Form.Select.Item value="jawa">Jawa</Form.Select.Item>
<Form.Select.Item value="hutt">Hutt</Form.Select.Item>
<Form.Select.Item value="twi'lek">Twi'lek</Form.Select.Item>
<Form.Select.Item value="wookie">Wookie</Form.Select.Item>
<Form.Select.Item value="kaminoan">Kaminoan</Form.Select.Item>
</Form.Select>
</Form>
);

16
example_plugins/plugins/ui_form/src/separator.tsx
View file

@ -4,19 +4,11 @@ import { Form } from "@project-gauntlet/api/components";
export default function SeparatorExample(): ReactElement {
return (
<Form>
<Form.TextField
label="Toppings"
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.TextField label="Canon"/>
<Form.Separator/>
<Form.TextField
label="Condiments"
onChange={value => {
console.log(`value: ${value}`)
}}
/>
<Form.TextField label="Legends"/>
</Form>
);
};

4
example_plugins/plugins/ui_form/src/text-field.tsx
View file

@ -5,9 +5,9 @@ export default function TextFieldExample(): ReactElement {
return (
<Form>
<Form.TextField
label="The Tragedy of Darth Plagueis the Wise"
label="Homeworld"
onChange={value => {
console.log(`value: ${value}`)
console.log(`homeworld: ${value}`)
}}
/>
</Form>