Add view for editing the details of a schedule

resources/scripts/components/elements/Checkbox.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+
+interface Props {
+    name: string;
+    value: string;
+}
+
+type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
+
+type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
+
+const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
+    <Field name={name}>
+        {({ field, form }: FieldProps) => {
+            if (!Array.isArray(field.value)) {
+                console.error('Attempting to mount a checkbox using a field value that is not an array.');
+
+                return null;
+            }
+
+            return (
+                <input
+                    {...field}
+                    {...props}
+                    type={'checkbox'}
+                    checked={(field.value || []).includes(value)}
+                    onClick={() => form.setFieldTouched(field.name, true)}
+                    onChange={e => {
+                        const set = new Set(field.value);
+                        set.has(value) ? set.delete(value) : set.add(value);
+
+                        field.onChange(e);
+                        form.setFieldValue(field.name, Array.from(set));
+                    }}
+                />
+            );
+        }}
+    </Field>
+);
+
+export default Checkbox;

resources/scripts/components/elements/FormikFieldWrapper.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+import classNames from 'classnames';
+import InputError from '@/components/elements/InputError';
+
+interface Props {
+    name: string;
+    children: React.ReactNode;
+    className?: string;
+    label?: string;
+    description?: string;
+    validate?: (value: any) => undefined | string | Promise<any>;
+}
+
+const FormikFieldWrapper = ({ name, label, className, description, validate, children }: Props) => (
+    <Field name={name} validate={validate}>
+        {
+            ({ field, form: { errors, touched } }: FieldProps) => (
+                <div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
+                    {label && <label htmlFor={name}>{label}</label>}
+                    {children}
+                    <InputError errors={errors} touched={touched} name={field.name}>
+                        {description ? <p className={'input-help'}>{description}</p> : null}
+                    </InputError>
+                </div>
+            )
+        }
+    </Field>
+);
+
+export default FormikFieldWrapper;

resources/scripts/components/elements/InputError.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import capitalize from 'lodash-es/capitalize';
+import { FormikErrors, FormikTouched } from 'formik';
+
+interface Props {
+    errors: FormikErrors<any>;
+    touched: FormikTouched<any>;
+    name: string;
+    children?: React.ReactNode;
+}
+
+const InputError = ({ errors, touched, name, children }: Props) => (
+    touched[name] && errors[name] ?
+        <p className={'input-help error'}>
+            {typeof errors[name] === 'string' ?
+                capitalize(errors[name] as string)
+                :
+                capitalize((errors[name] as unknown as string[])[0])
+            }
+        </p>
+        :
+        <React.Fragment>
+            {children}
+        </React.Fragment>
+);
+
+export default InputError;

resources/scripts/components/elements/Switch.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import v4 from 'uuid/v4';
+import classNames from 'classnames';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import { Field, FieldProps } from 'formik';
+
+const ToggleContainer = styled.div`
+    ${tw`relative select-none w-12 leading-normal`};
+
+    & > input[type="checkbox"] {
+        ${tw`hidden`};
+
+        &:checked + label {
+            ${tw`bg-primary-500 border-primary-700 shadow-none`};
+        }
+
+        &:checked + label:before {
+            right: 0.125rem;
+        }
+    }
+
+    & > label {
+        ${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
+        transition: all 75ms linear;
+
+        &::before {
+            ${tw`absolute block bg-white border h-5 w-5 rounded-full`};
+            top: 0.125rem;
+            right: calc(50% + 0.125rem);
+            //width: 1.25rem;
+            //height: 1.25rem;
+            content: "";
+            transition: all 75ms ease-in;
+        }
+    }
+`;
+
+interface Props {
+    name: string;
+    description?: string;
+    label: string;
+    enabled?: boolean;
+}
+
+const Switch = ({ name, label, description }: Props) => {
+    const uuid = useMemo(() => v4(), []);
+
+    return (
+        <FormikFieldWrapper name={name}>
+            <div className={'flex items-center'}>
+                <ToggleContainer className={'mr-4 flex-none'}>
+                    <Field name={name}>
+                        {({ field, form }: FieldProps) => (
+                            <input
+                                id={uuid}
+                                name={name}
+                                type={'checkbox'}
+                                onChange={() => {
+                                    form.setFieldTouched(name);
+                                    form.setFieldValue(field.name, !field.value);
+                                }}
+                                defaultChecked={field.value}
+                            />
+                        )}
+                    </Field>
+                    <label htmlFor={uuid}/>
+                </ToggleContainer>
+                <div className={'w-full'}>
+                    <label
+                        className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
+                        htmlFor={uuid}
+                    >{label}</label>
+                    {description &&
+                    <p className={'input-help'}>
+                        {description}
+                    </p>
+                    }
+                </div>
+            </div>
+        </FormikFieldWrapper>
+    );
+};
+
+export default Switch;