Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrite application with form plugin system and new design #18

Open
wants to merge 38 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
10af3d7
Prepare ground for stac-manager
danielfdsilva Oct 30, 2024
63c1fb8
Resolve form structure from schema on plugin initialization
danielfdsilva Oct 31, 2024
cc372c7
Set fixed item number on meta plugin field
danielfdsilva Oct 31, 2024
7652181
Fix array widgets
danielfdsilva Oct 31, 2024
f3511e6
Add base theme
danielfdsilva Oct 31, 2024
127cd35
Style array widget
danielfdsilva Nov 5, 2024
c2a0e59
Style widgets
danielfdsilva Nov 5, 2024
8164b6b
Add test plugin
danielfdsilva Nov 5, 2024
3eef972
Improve build
danielfdsilva Nov 12, 2024
f7b4841
Use Formik for plugin form handling
danielfdsilva Nov 12, 2024
c8b52c0
Improve widgets
danielfdsilva Nov 12, 2024
c9e327c
Add core plugin
danielfdsilva Nov 12, 2024
cb321d7
Add json widget
danielfdsilva Nov 13, 2024
cf190af
Fix radio and checkbox fields
danielfdsilva Nov 13, 2024
3770029
Use json widget for whole document edition
danielfdsilva Nov 13, 2024
1f51e13
Include summaries in core plugin
danielfdsilva Nov 13, 2024
1d59c3f
Use FastField for widget rendering and other improvements
danielfdsilva Nov 19, 2024
78e9699
Improve core plugin
danielfdsilva Nov 19, 2024
45bc17f
Add support for additional properties of objects
danielfdsilva Nov 20, 2024
115b215
Fix JSON editor controls not showing up after load
danielfdsilva Nov 20, 2024
c1d5ad5
Create tags widget with React Select
danielfdsilva Nov 21, 2024
989da5e
Rename test plugin to kitchen sink
danielfdsilva Nov 21, 2024
88ef3a6
Rename WidgetTag to WidgetTagger
danielfdsilva Nov 21, 2024
b73bd2c
Improve rendering of Tagger and Select widgets
danielfdsilva Nov 22, 2024
d69ab98
Add item-assets and render extensions plugins
danielfdsilva Nov 22, 2024
f61b5b3
Update app create collection form
danielfdsilva Nov 22, 2024
cea94b8
Add gh-pages workflow
danielfdsilva Nov 22, 2024
97621d9
Add stac api env var
danielfdsilva Nov 22, 2024
3e9a234
Add env and 400 gh file
danielfdsilva Nov 22, 2024
70bcd51
Implement global page structure
danielfdsilva Dec 11, 2024
aae6d58
Add required option to array fields
danielfdsilva Dec 12, 2024
d81b079
Add extension check function
danielfdsilva Dec 12, 2024
b1d988d
Add error message to widgets
danielfdsilva Dec 17, 2024
7a3851a
Add allowOther support to enum string type
danielfdsilva Dec 17, 2024
ac6412a
Add jest test runner
danielfdsilva Dec 17, 2024
93918f9
Add form/json toggle instead of tabs
danielfdsilva Dec 17, 2024
22d8528
Add form validation
danielfdsilva Dec 17, 2024
cfcba5c
Include REACT_APP_STAC_BROWSER env variable
danielfdsilva Dec 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix radio and checkbox fields
  • Loading branch information
danielfdsilva committed Nov 13, 2024
commit cf190af462459ee24692e7dda6dc97dda50aae75
44 changes: 23 additions & 21 deletions packages/data-widgets/lib/widgets/checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React from 'react';
import { Checkbox, Flex, FormControl, FormLabel } from '@chakra-ui/react';
import { FastField, FastFieldProps } from 'formik';
import {
Checkbox,
CheckboxGroup,
Flex,
FormControl,
FormLabel
} from '@chakra-ui/react';
import { useField } from 'formik';
import {
SchemaFieldArray,
SchemaFieldString,
@@ -13,6 +19,8 @@ export function WidgetCheckbox(props: WidgetProps) {
const { pointer, isRequired } = props;
const field = props.field as SchemaFieldArray<SchemaFieldString>;

const [{ value }, , { setValue, setTouched }] = useField(pointer);

if (!field.items.enum?.length) {
throw new Error('WidgetCheckbox: items.enum is required');
}
@@ -25,25 +33,19 @@ export function WidgetCheckbox(props: WidgetProps) {
</FormLabel>
)}
<Flex gap={4}>
{field.items.enum.map(([label, checkboxVal]) => (
<FastField name={pointer} type='checkbox' key={label}>
{({
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
field: { value: groupValues, checked, ...fieldProps }
}: FastFieldProps) => {
return (
<Checkbox
{...fieldProps}
size='sm'
value={checkboxVal}
isChecked={groupValues?.includes(checkboxVal)}
>
{label}
</Checkbox>
);
}}
</FastField>
))}
<CheckboxGroup
value={value}
onChange={(v) => {
setValue(v);
setTouched(true);
}}
>
{field.items.enum.map(([label, checkboxVal]) => (
<Checkbox key={label} size='sm' value={checkboxVal}>
{label}
</Checkbox>
))}
</CheckboxGroup>
</Flex>
</FormControl>
);
28 changes: 16 additions & 12 deletions packages/data-widgets/lib/widgets/radio.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import { FormControl, FormLabel, Radio, RadioGroup } from '@chakra-ui/react';
import { SchemaFieldString, WidgetProps } from '@stac-manager/data-core';
import { FastField } from 'formik';
import { useField } from 'formik';

import { FieldLabel } from '../components/elements';

export function WidgetRadio(props: WidgetProps) {
const { pointer, isRequired } = props;
const field = props.field as SchemaFieldString;

const [{ value }, , { setValue, setTouched }] = useField<string>(pointer);

if (!field.enum?.length) {
throw new Error('WidgetRadio: enum is required');
}
@@ -20,18 +22,20 @@ export function WidgetRadio(props: WidgetProps) {
<FieldLabel size='xs'>{field.label}</FieldLabel>
</FormLabel>
)}
<RadioGroup size='sm' gap={4} display='flex'>
{field.enum.map(([label, value]) => (
<FastField
key={label}
as={Radio}
name={pointer}
type='radio'
value={value}
size='sm'
>
<RadioGroup
size='sm'
gap={4}
display='flex'
value={value}
onChange={(v) => {
setValue(v);
setTouched(true);
}}
>
{field.enum.map(([label, radioValue]) => (
<Radio key={label} size='sm' value={radioValue}>
{label}
</FastField>
</Radio>
))}
</RadioGroup>
</FormControl>