Skip to content

RHF last domino: instance create + network interfaces #1274

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.

Sign up for GitHub

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

Merged
david-crespo merged 17 commits into from
Nov 1, 2022
Merged

RHF last domino: instance create + network interfaces #1274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d2d0bcb
convert network interface create/edit to RHF
david-crespo Oct 30, 2022
0711674
make a dent in instance create and FullPageForm
david-crespo Oct 30, 2022
9df2c51
delete some fields
david-crespo Oct 30, 2022
eece941
mess everything up real bad (but instance create renders)
david-crespo Oct 30, 2022
2793802
take appearance and hotkeys out of the menu and pathbuilder too
david-crespo Oct 30, 2022
1e34010
fix the spacing whoops
david-crespo Oct 30, 2022
6ba14ef
delete Form
david-crespo Oct 30, 2022
201d4c3
drop formik
david-crespo Oct 31, 2022
6f52ca6
image select half works. you have to click the card twice
david-crespo Oct 31, 2022
375f2bb
instance create basically works, inline InstanceCreatePage into Form
david-crespo Oct 31, 2022
8429aaa
fix bug where submitting disk modal form also submits instance create…
david-crespo Oct 31, 2022
49301a4
fix radio children type errors
david-crespo Nov 1, 2022
ac9324e
fix network create (it didn't work before)
david-crespo Nov 1, 2022
e0136d6
fix DisksTableField
david-crespo Nov 1, 2022
09d2972
everything passes
david-crespo Nov 1, 2022
f9bb774
RadioField2 -> slightly more respectable RadioFieldDyn
david-crespo Nov 1, 2022
282eb28
can actually use plain RadioGroup for image selector too
david-crespo Nov 1, 2022
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
149 changes: 53 additions & 96 deletions app/components/form/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import cn from 'classnames'
import type { FormikConfig } from 'formik'
import { Formik, Form as FormikForm } from 'formik'
import { useFormikContext } from 'formik'
import type { ReactNode } from 'react'
import { cloneElement } from 'react'
import { useEffect } from 'react'
import invariant from 'tiny-invariant'

import type { ButtonProps } from '@oxide/ui'
Expand All @@ -14,49 +9,6 @@ import { addProps, classed, flattenChildren, isOneOf, pluckFirstOfType } from '@

import './form.css'

export interface FormProps<Values> extends FormikConfig<Values> {
id: string
className?: string
children: ReactNode
/** true if submission can happen, false otherwise */
setSubmitState?: (state: boolean) => void
}

export function Form<Values extends Record<string, unknown>>({
id,
children,
className,
setSubmitState,
...formikProps
}: FormProps<Values>) {
// Coerce container so it can be used in wrap
return (
<Formik {...formikProps} validateOnBlur={false} isInitialValid={false}>
<FormikForm id={id} className={cn('ox-form', className)} autoComplete="off">
{children}
<FormSubmitState setSubmitState={setSubmitState} />
</FormikForm>
</Formik>
)
}

/**
* This annoying little component exists solely to inform the parent when the submit state changes.
*/
const FormSubmitState = ({
setSubmitState,
}: {
setSubmitState?: (state: boolean) => void
}) => {
const context = useFormikContext()
useEffect(() => {
if (setSubmitState) {
setSubmitState(context.dirty && context.isValid)
}
}, [context.dirty, context.isValid, setSubmitState])
return null
}

interface FormActionsProps {
formId?: string
children: React.ReactNode
Expand All @@ -65,58 +17,63 @@ interface FormActionsProps {
className?: string
}

/**
* This component is the area at the bottom of a form that contains
* the submit button and any other actions. The first button is automatically
* given a type of "submit." Default styles are applied all buttons but can be
* overridden.
*/
Form.Actions = ({
children,
formId,
submitDisabled = true,
error,
className,
}: FormActionsProps) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const childArray = flattenChildren(children).map(
addProps<typeof Button>((i, props) => ({
size: 'sm',
...props,
}))
)
export const Form = {
Copy link
Contributor

@just-be-dev just-be-dev Nov 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This nested declaration likely makes the babel plugin not work for these components.

/**
* This component is the area at the bottom of a form that contains
* the submit button and any other actions. The first button is automatically
* given a type of "submit." Default styles are applied all buttons but can be
* overridden.
*/
Actions: ({
children,
formId,
submitDisabled = true,
error,
className,
}: FormActionsProps) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const childArray = flattenChildren(children).map(
addProps<typeof Button>((i, props) => ({
size: 'sm',
...props,
}))
)

invariant(
isOneOf(childArray, [Form.Submit, Form.Cancel, Button]),
'Form.Actions should only receive Button components as children'
)
invariant(
isOneOf(childArray, [Form.Submit, Form.Cancel, Button]),
'Form.Actions should only receive Button components as children'
)

const submit = pluckFirstOfType(childArray, Form.Submit)
const submit = pluckFirstOfType(childArray, Form.Submit)

invariant(submit, 'Form.Actions must contain a Form.Submit component')
invariant(submit, 'Form.Actions must contain a Form.Submit component')

return (
<div
className={cn('flex w-full items-center gap-[0.625rem] children:shrink-0', className)}
>
{cloneElement(submit, { form: formId, disabled: submitDisabled })}
{childArray}
{error && (
<div className="flex !shrink grow items-start justify-end text-mono-sm text-error">
<Error12Icon className="mx-2 mt-0.5 shrink-0" />
<span>{error.message}</span>
</div>
)}
</div>
)
}
return (
<div
className={cn(
'flex w-full items-center gap-[0.625rem] children:shrink-0',
className
)}
>
{cloneElement(submit, { form: formId, disabled: submitDisabled })}
{childArray}
{error && (
<div className="flex !shrink grow items-start justify-end text-mono-sm text-error">
<Error12Icon className="mx-2 mt-0.5 shrink-0" />
<span>{error.message}</span>
</div>
)}
</div>
)
},

Form.Submit = (props: ButtonProps) => <Button type="submit" variant="default" {...props} />
Submit: (props: ButtonProps) => <Button type="submit" {...props} />,

Form.Cancel = (props: ButtonProps) => (
<Button variant="ghost" color="secondary" {...props}>
Cancel
</Button>
)
Cancel: (props: ButtonProps) => (
<Button variant="ghost" color="secondary" {...props}>
Cancel
</Button>
),

Form.Heading = classed.h2`text-content text-sans-light-2xl`
Heading: classed.h2`text-content text-sans-light-2xl`,
}
55 changes: 0 additions & 55 deletions app/components/form/FullPageForm.tsx
View file
Open in desktop

This file was deleted.

58 changes: 0 additions & 58 deletions app/components/form/SideModalForm.tsx
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions app/components/form/fields/CheckboxField.tsx
View file
Open in desktop

This file was deleted.

23 changes: 0 additions & 23 deletions app/components/form/fields/DescriptionField.tsx
View file
Open in desktop

This file was deleted.

24 changes: 0 additions & 24 deletions app/components/form/fields/DiskSizeField.tsx
View file
Open in desktop

This file was deleted.

Loading