From 05ef955973128648b8e4f16f1aec41fd752eb1e9 Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Wed, 11 Dec 2024 05:37:02 -0500
Subject: [PATCH] Add Submit button and pretty fix

---
 wrappers/js/vanilla/index.jsx                 | 309 +++++++++++-------
 .../ts/vanilla/DateTimeLocalField.test.jsx    |  12 +-
 wrappers/ts/vanilla/index.tsx                 | 251 +++++++-------
 wrappers/tsconfig.json                        |   2 +-
 4 files changed, 332 insertions(+), 242 deletions(-)

diff --git a/wrappers/js/vanilla/index.jsx b/wrappers/js/vanilla/index.jsx
index b91d0b9..3e10e95 100644
--- a/wrappers/js/vanilla/index.jsx
+++ b/wrappers/js/vanilla/index.jsx
@@ -7,14 +7,14 @@
  * There is no style and structured with bare necessities. You should modify
  * these components to fit your design needs.
  */
-import React, { useContext, createContext, useMemo } from 'react';
-export const ValidationContext = createContext({});
-export const useErrorKeyValidation = ({ errorKey, }) => {
-    const errors = useContext(ValidationContext);
-    return useMemo(() => {
-        return errors[errorKey];
-    }, [errors, errorKey]);
-};
+import React, { useContext, createContext, useMemo } from 'react'
+export const ValidationContext = createContext({})
+export const useErrorKeyValidation = ({ errorKey }) => {
+  const errors = useContext(ValidationContext)
+  return useMemo(() => {
+    return errors[errorKey]
+  }, [errors, errorKey])
+}
 /**
  * Extras renders the hidden inputs generated by form_props.
  *
@@ -22,24 +22,28 @@ export const useErrorKeyValidation = ({ errorKey, }) => {
  * utf8, crsf_token, _method
  */
 export const Extras = (hiddenInputAttributes) => {
-    const hiddenProps = Object.values(hiddenInputAttributes);
-    const hiddenInputs = hiddenProps.map((props) => (<input {...props} type="hidden" key={props.name}/>));
-    return <>{hiddenInputs}</>;
-};
+  const hiddenProps = Object.values(hiddenInputAttributes)
+  const hiddenInputs = hiddenProps.map((props) => (
+    <input {...props} type="hidden" key={props.name} />
+  ))
+  return <>{hiddenInputs}</>
+}
 /**
  * A basic form component that supports inline errors.
  *
  * It's meant to be used with FormProps and mimics the ways that
  * Rails forms are generated.
  */
-export const Form = ({ extras, validationErrors, children, ...props }) => {
-    return (<form {...props}>
+export const Form = ({ extras, validationErrors = {}, children, ...props }) => {
+  return (
+    <form {...props}>
       <ValidationContext.Provider value={validationErrors}>
         <Extras {...extras}></Extras>
         {children}
       </ValidationContext.Provider>
-    </form>);
-};
+    </form>
+  )
+}
 /**
  * An inline error component.
  *
@@ -47,84 +51,121 @@ export const Form = ({ extras, validationErrors, children, ...props }) => {
  * Please modify this to your liking.
  */
 export const FieldError = ({ errorKey }) => {
-    const errors = useContext(ValidationContext);
-    if (!errorKey || !errors) {
-        return null;
-    }
-    const validationError = errors[errorKey];
-    const hasErrors = errorKey && validationError;
-    if (!hasErrors) {
-        return null;
-    }
-    const errorMessages = Array.isArray(validationError)
-        ? validationError
-        : [validationError];
-    return <span>{errorMessages.join(' ')}</span>;
-};
+  const errors = useContext(ValidationContext)
+  if (!errorKey || !errors) {
+    return null
+  }
+  const validationError = errors[errorKey]
+  const hasErrors = errorKey && validationError
+  if (!hasErrors) {
+    return null
+  }
+  const errorMessages = Array.isArray(validationError)
+    ? validationError
+    : [validationError]
+  return <span>{errorMessages.join(' ')}</span>
+}
 /**
  * A Field component.
  *
  * Combines a label, input and a FieldError. Please modify this to your liking.
  */
 export const FieldBase = ({ label, errorKey, children, ...props }) => {
-    return (<>
+  return (
+    <>
       <label htmlFor={props.id}>{label}</label>
-      {children || <input {...props}/>}
-      <FieldError errorKey={errorKey}/>
-    </>);
-};
-export const Checkbox = ({ type: _type, includeHidden, uncheckedValue, errorKey, ...rest }) => {
-    const { name } = rest;
-    return (<FieldBase {...rest} errorKey={errorKey}>
-      {includeHidden && (<input type="hidden" name={name} defaultValue={uncheckedValue} autoComplete="off"/>)}
+      {children || <input {...props} />}
+      <FieldError errorKey={errorKey} />
+    </>
+  )
+}
+export const Checkbox = ({
+  type: _type,
+  includeHidden,
+  uncheckedValue,
+  errorKey,
+  ...rest
+}) => {
+  const { name } = rest
+  return (
+    <FieldBase {...rest} errorKey={errorKey}>
+      {includeHidden && (
+        <input
+          type="hidden"
+          name={name}
+          defaultValue={uncheckedValue}
+          autoComplete="off"
+        />
+      )}
       <input type="checkbox" {...rest}></input>
-    </FieldBase>);
-};
+    </FieldBase>
+  )
+}
 /**
  * A collection checkbox component.
  *
  * Designed to work with a payload form_props's [collection_check_boxes helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#collection-select).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-export const CollectionCheckboxes = ({ includeHidden, collection, label, errorKey, }) => {
-    if (collection.length == 0) {
-        return null;
-    }
-    const checkboxes = collection.map((options) => {
-        return <Checkbox {...options} key={options.id}/>;
-    });
-    const { name } = collection[0];
-    return (<>
-      {includeHidden && (<input type="hidden" name={name} defaultValue={''} autoComplete="off"/>)}
+export const CollectionCheckboxes = ({
+  includeHidden,
+  collection,
+  label,
+  errorKey,
+}) => {
+  if (collection.length == 0) {
+    return null
+  }
+  const checkboxes = collection.map((options) => {
+    return <Checkbox {...options} key={options.id} />
+  })
+  const { name } = collection[0]
+  return (
+    <>
+      {includeHidden && (
+        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
+      )}
       <label>{label}</label>
       {checkboxes}
-      <FieldError errorKey={errorKey}/>
-    </>);
-};
+      <FieldError errorKey={errorKey} />
+    </>
+  )
+}
 /**
  * A collection radio button component.
  *
  * Designed to work with a payload form_props's [collection_radio_buttons helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#collection-select).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-export const CollectionRadioButtons = ({ includeHidden, collection, label, errorKey, }) => {
-    if (collection.length == 0) {
-        return null;
-    }
-    const radioButtons = collection.map((options) => {
-        return (<div key={options.value}>
-        <input {...options} type="radio"/>
+export const CollectionRadioButtons = ({
+  includeHidden,
+  collection,
+  label,
+  errorKey,
+}) => {
+  if (collection.length == 0) {
+    return null
+  }
+  const radioButtons = collection.map((options) => {
+    return (
+      <div key={options.value}>
+        <input {...options} type="radio" />
         <label htmlFor={options.id}>{options.label}</label>
-      </div>);
-    });
-    const { name } = collection[0];
-    return (<>
-      {includeHidden && (<input type="hidden" name={name} defaultValue={''} autoComplete="off"/>)}
+      </div>
+    )
+  })
+  const { name } = collection[0]
+  return (
+    <>
+      {includeHidden && (
+        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
+      )}
       <label>{label}</label>
       {radioButtons}
-      <FieldError errorKey={errorKey}/>
-    </>);
-};
+      <FieldError errorKey={errorKey} />
+    </>
+  )
+}
 /**
  * A text field component.
  *
@@ -132,8 +173,8 @@ export const CollectionRadioButtons = ({ includeHidden, collection, label, error
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="text"/>;
-};
+  return <FieldBase {...rest} type="text" />
+}
 /**
  * A email field component.
  *
@@ -141,8 +182,8 @@ export const TextField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const EmailField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="email"/>;
-};
+  return <FieldBase {...rest} type="email" />
+}
 /**
  * A color field component.
  *
@@ -150,8 +191,8 @@ export const EmailField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const ColorField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="color"/>;
-};
+  return <FieldBase {...rest} type="color" />
+}
 /**
  * A date field component.
  *
@@ -159,8 +200,8 @@ export const ColorField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const DateField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="date"/>;
-};
+  return <FieldBase {...rest} type="date" />
+}
 /**
  * A date field component.
  *
@@ -168,8 +209,8 @@ export const DateField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const DateTimeLocalField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="datetime-local"/>;
-};
+  return <FieldBase {...rest} type="datetime-local" />
+}
 /**
  * A search field component.
  *
@@ -177,8 +218,8 @@ export const DateTimeLocalField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const SearchField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="search"/>;
-};
+  return <FieldBase {...rest} type="search" />
+}
 /**
  * A tel field component.
  *
@@ -186,8 +227,8 @@ export const SearchField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TelField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="tel"/>;
-};
+  return <FieldBase {...rest} type="tel" />
+}
 /**
  * A url field component.
  *
@@ -195,8 +236,8 @@ export const TelField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const UrlField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="url"/>;
-};
+  return <FieldBase {...rest} type="url" />
+}
 /**
  * A month field component.
  *
@@ -204,8 +245,8 @@ export const UrlField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const MonthField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="month"/>;
-};
+  return <FieldBase {...rest} type="month" />
+}
 /**
  * A month field component.
  *
@@ -213,8 +254,8 @@ export const MonthField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TimeField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="time"/>;
-};
+  return <FieldBase {...rest} type="time" />
+}
 /**
  * A number field component.
  *
@@ -222,8 +263,8 @@ export const TimeField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const NumberField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="number"/>;
-};
+  return <FieldBase {...rest} type="number" />
+}
 /**
  * A range field component.
  *
@@ -231,8 +272,8 @@ export const NumberField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const RangeField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="range"/>;
-};
+  return <FieldBase {...rest} type="range" />
+}
 /**
  * A password field component.
  *
@@ -240,8 +281,8 @@ export const RangeField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const PasswordField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="password"/>;
-};
+  return <FieldBase {...rest} type="password" />
+}
 /**
  * A select component.
  *
@@ -250,26 +291,42 @@ export const PasswordField = ({ type: _type, ...rest }) => {
  *
  * Please modify to your liking.
  */
-export const Select = ({ includeHidden, name, id, children, options, multiple, type: _type, ...rest }) => {
-    const addHidden = includeHidden && multiple;
-    const optionElements = options.map((item) => {
-        if ('options' in item) {
-            return (<optgroup label={item.label} key={item.label}>
-          {item.options.map((opt) => (<option key={opt.label} {...opt}/>))}
-        </optgroup>);
-        }
-        else {
-            return <option key={item.label} {...item}/>;
-        }
-    });
-    return (<>
-      {addHidden && (<input type="hidden" name={name} value={''} autoComplete="off"/>)}
+export const Select = ({
+  includeHidden,
+  name,
+  id,
+  children,
+  options,
+  multiple,
+  type: _type,
+  ...rest
+}) => {
+  const addHidden = includeHidden && multiple
+  const optionElements = options.map((item) => {
+    if ('options' in item) {
+      return (
+        <optgroup label={item.label} key={item.label}>
+          {item.options.map((opt) => (
+            <option key={opt.label} {...opt} />
+          ))}
+        </optgroup>
+      )
+    } else {
+      return <option key={item.label} {...item} />
+    }
+  })
+  return (
+    <>
+      {addHidden && (
+        <input type="hidden" name={name} value={''} autoComplete="off" />
+      )}
       <select name={name} id={id} multiple={multiple} {...rest}>
         {children}
         {optionElements}
       </select>
-    </>);
-};
+    </>
+  )
+}
 /**
  * A text area component.
  *
@@ -277,11 +334,13 @@ export const Select = ({ includeHidden, name, id, children, options, multiple, t
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextArea = ({ type: _type, errorKey, ...rest }) => {
-    const { label } = rest;
-    return <FieldBase label={label} errorKey={errorKey} id={rest.id}>
-      <textarea {...rest}/>
-    </FieldBase>;
-};
+  const { label } = rest
+  return (
+    <FieldBase label={label} errorKey={errorKey} id={rest.id}>
+      <textarea {...rest} />
+    </FieldBase>
+  )
+}
 /**
  * A file field component.
  *
@@ -289,5 +348,19 @@ export const TextArea = ({ type: _type, errorKey, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const FileField = ({ type: _type, ...rest }) => {
-    return <FieldBase {...rest} type="file"/>;
-};
+  return <FieldBase {...rest} type="file" />
+}
+/**
+ * A SubmitButton component.
+ *
+ * Designed to work with a payload form_props's [submit helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#form-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const SubmitButton = ({ type: _type, text, ...rest }) => {
+  return (
+    <button {...rest} type="submit">
+      {' '}
+      {text}{' '}
+    </button>
+  )
+}
diff --git a/wrappers/ts/vanilla/DateTimeLocalField.test.jsx b/wrappers/ts/vanilla/DateTimeLocalField.test.jsx
index 87a74ac..16232f4 100644
--- a/wrappers/ts/vanilla/DateTimeLocalField.test.jsx
+++ b/wrappers/ts/vanilla/DateTimeLocalField.test.jsx
@@ -18,7 +18,11 @@ describe('DateTimeLocalField', () => {
     const payload = buildPayload()
 
     const { getByLabelText } = render(
-      <DateTimeLocalField {...payload} label={'Birth Date'} errorKey={'birth_date'} />
+      <DateTimeLocalField
+        {...payload}
+        label={'Birth Date'}
+        errorKey={'birth_date'}
+      />
     )
 
     const input = getByLabelText('Birth Date')
@@ -38,7 +42,11 @@ describe('DateTimeLocalField', () => {
 
     const { getByText } = render(
       <ValidationContext.Provider value={validationErrors}>
-        <DateTimeLocalField {...payload} label={'Birth Date'} errorKey={'birth_date'} />
+        <DateTimeLocalField
+          {...payload}
+          label={'Birth Date'}
+          errorKey={'birth_date'}
+        />
       </ValidationContext.Provider>
     )
 
diff --git a/wrappers/ts/vanilla/index.tsx b/wrappers/ts/vanilla/index.tsx
index b6b99ee..dc0fa56 100644
--- a/wrappers/ts/vanilla/index.tsx
+++ b/wrappers/ts/vanilla/index.tsx
@@ -8,7 +8,7 @@
  * these components to fit your design needs.
  */
 
-import React, { ReactNode, useContext, createContext, useMemo } from "react";
+import React, { ReactNode, useContext, createContext, useMemo } from 'react'
 import {
   CheckboxField as RailsCheckboxField,
   CollectionCheckboxesField as RailsCollectionCheckboxesField,
@@ -31,25 +31,25 @@ import {
   UrlField as RailsUrlField,
   TextArea as RailsTextArea,
   ValidationErrors,
-  SubmitProps as RailsSubmitButton
+  SubmitProps as RailsSubmitButton,
 } from '@thoughtbot/candy_wrapper'
 
-export const ValidationContext = createContext<ValidationErrors>({});
+export const ValidationContext = createContext<ValidationErrors>({})
 
 export const useErrorKeyValidation = ({
   errorKey,
 }: {
-  errorKey: string;
-  name: string;
+  errorKey: string
+  name: string
 }) => {
-  const errors = useContext(ValidationContext);
+  const errors = useContext(ValidationContext)
 
   return useMemo(() => {
-    return errors[errorKey];
-  }, [errors, errorKey]);
-};
+    return errors[errorKey]
+  }, [errors, errorKey])
+}
 
-export type ExtrasProps = Record<string, RailsHiddenField>;
+export type ExtrasProps = Record<string, RailsHiddenField>
 
 /**
  * Extras renders the hidden inputs generated by form_props.
@@ -58,25 +58,25 @@ export type ExtrasProps = Record<string, RailsHiddenField>;
  * utf8, crsf_token, _method
  */
 export const Extras = (hiddenInputAttributes: ExtrasProps) => {
-  const hiddenProps = Object.values(hiddenInputAttributes);
+  const hiddenProps = Object.values(hiddenInputAttributes)
   const hiddenInputs = hiddenProps.map((props: RailsHiddenField) => (
     <input {...props} type="hidden" key={props.name} />
-  ));
+  ))
 
-  return <>{hiddenInputs}</>;
-};
+  return <>{hiddenInputs}</>
+}
 
 // TODO: Add this as a form props props??
-export interface FormProps<T={}> {
-  extras: ExtrasProps;
-  inputs: T;
-  form: React.FormHTMLAttributes<HTMLFormElement>;
+export interface FormProps<T = {}> {
+  extras: ExtrasProps
+  inputs: T
+  form: React.FormHTMLAttributes<HTMLFormElement>
 }
 
 type FormElementProps = React.FormHTMLAttributes<HTMLFormElement> & {
-  extras: ExtrasProps;
-  validationErrors?: ValidationErrors;
-};
+  extras: ExtrasProps
+  validationErrors?: ValidationErrors
+}
 /**
  * A basic form component that supports inline errors.
  *
@@ -96,8 +96,8 @@ export const Form = ({
         {children}
       </ValidationContext.Provider>
     </form>
-  );
-};
+  )
+}
 
 /**
  * An inline error component.
@@ -106,31 +106,31 @@ export const Form = ({
  * Please modify this to your liking.
  */
 export const FieldError = ({ errorKey }: { errorKey: string | undefined }) => {
-  const errors = useContext(ValidationContext);
+  const errors = useContext(ValidationContext)
   if (!errorKey || !errors) {
-    return null;
+    return null
   }
 
-  const validationError = errors[errorKey];
-  const hasErrors = errorKey && validationError;
+  const validationError = errors[errorKey]
+  const hasErrors = errorKey && validationError
 
   if (!hasErrors) {
-    return null;
+    return null
   }
 
   const errorMessages = Array.isArray(validationError)
     ? validationError
-    : [validationError];
+    : [validationError]
 
-  return <span>{errorMessages.join(" ")}</span>;
-};
+  return <span>{errorMessages.join(' ')}</span>
+}
 
 export type FieldBaseProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  id?: string;
-  label: string;
-  errorKey?: string;
-  children?: ReactNode;
-};
+  id?: string
+  label: string
+  errorKey?: string
+  children?: ReactNode
+}
 
 /**
  * A Field component.
@@ -149,13 +149,13 @@ export const FieldBase = ({
       {children || <input {...props} />}
       <FieldError errorKey={errorKey} />
     </>
-  );
-};
+  )
+}
 
 type InputProps = {
-  label: string;
-  errorKey?: string;
-};
+  label: string
+  errorKey?: string
+}
 
 /**
  * A checkbox component.
@@ -163,7 +163,7 @@ type InputProps = {
  * Designed to work with a payload form_props's [checkbox helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#checkbox-helper).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-type CheckboxProps = RailsCheckboxField & InputProps;
+type CheckboxProps = RailsCheckboxField & InputProps
 export const Checkbox = ({
   type: _type,
   includeHidden,
@@ -171,7 +171,7 @@ export const Checkbox = ({
   errorKey,
   ...rest
 }: CheckboxProps) => {
-  const { name } = rest;
+  const { name } = rest
   return (
     <FieldBase {...rest} errorKey={errorKey}>
       {includeHidden && (
@@ -184,11 +184,11 @@ export const Checkbox = ({
       )}
       <input type="checkbox" {...rest}></input>
     </FieldBase>
-  );
-};
+  )
+}
 
 type CollectionCheckboxesFieldProps = RailsCollectionCheckboxesField &
-  InputProps;
+  InputProps
 
 /**
  * A collection checkbox component.
@@ -203,29 +203,29 @@ export const CollectionCheckboxes = ({
   errorKey,
 }: CollectionCheckboxesFieldProps) => {
   if (collection.length == 0) {
-    return null;
+    return null
   }
 
   const checkboxes = collection.map((options) => {
-    return <Checkbox {...options} key={options.id} />;
-  });
+    return <Checkbox {...options} key={options.id} />
+  })
 
-  const { name } = collection[0];
+  const { name } = collection[0]
 
   return (
     <>
       {includeHidden && (
-        <input type="hidden" name={name} defaultValue={""} autoComplete="off" />
+        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
       )}
       <label>{label}</label>
       {checkboxes}
       <FieldError errorKey={errorKey} />
     </>
-  );
-};
+  )
+}
 
 type CollectionRadioButtonsFieldProps = RailsCollectionRadioButtonsField &
-  InputProps;
+  InputProps
 
 /**
  * A collection radio button component.
@@ -240,7 +240,7 @@ export const CollectionRadioButtons = ({
   errorKey,
 }: CollectionRadioButtonsFieldProps) => {
   if (collection.length == 0) {
-    return null;
+    return null
   }
 
   const radioButtons = collection.map((options) => {
@@ -249,26 +249,26 @@ export const CollectionRadioButtons = ({
         <input {...options} type="radio" />
         <label htmlFor={options.id}>{options.label}</label>
       </div>
-    );
-  });
+    )
+  })
 
-  const { name } = collection[0];
+  const { name } = collection[0]
 
   return (
     <>
       {includeHidden && (
-        <input type="hidden" name={name} defaultValue={""} autoComplete="off" />
+        <input type="hidden" name={name} defaultValue={''} autoComplete="off" />
       )}
       <label>{label}</label>
       {radioButtons}
       <FieldError errorKey={errorKey} />
     </>
-  );
-};
+  )
+}
 
 export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsTextField &
-  InputProps;
+  InputProps
 
 /**
  * A text field component.
@@ -277,12 +277,12 @@ export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextField = ({ type: _type, ...rest }: TextFieldProps) => {
-  return <FieldBase {...rest} type="text" />;
-};
+  return <FieldBase {...rest} type="text" />
+}
 
 export type EmailFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsEmailField &
-  InputProps;
+  InputProps
 
 /**
  * A email field component.
@@ -291,12 +291,12 @@ export type EmailFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const EmailField = ({ type: _type, ...rest }: EmailFieldProps) => {
-  return <FieldBase {...rest} type="email" />;
-};
+  return <FieldBase {...rest} type="email" />
+}
 
 export type ColorFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsColorField &
-  InputProps;
+  InputProps
 
 /**
  * A color field component.
@@ -305,12 +305,12 @@ export type ColorFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const ColorField = ({ type: _type, ...rest }: ColorFieldProps) => {
-  return <FieldBase {...rest} type="color" />;
-};
+  return <FieldBase {...rest} type="color" />
+}
 
 export type DateFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsDateField &
-  InputProps;
+  InputProps
 
 /**
  * A date field component.
@@ -319,13 +319,13 @@ export type DateFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const DateField = ({ type: _type, ...rest }: DateFieldProps) => {
-  return <FieldBase {...rest} type="date" />;
-};
+  return <FieldBase {...rest} type="date" />
+}
 
 export type DateTimeLocalFieldProps =
   React.InputHTMLAttributes<HTMLInputElement> &
     RailsDateTimeLocalField &
-    InputProps;
+    InputProps
 
 /**
  * A date field component.
@@ -337,12 +337,12 @@ export const DateTimeLocalField = ({
   type: _type,
   ...rest
 }: DateTimeLocalFieldProps) => {
-  return <FieldBase {...rest} type="datetime-local" />;
-};
+  return <FieldBase {...rest} type="datetime-local" />
+}
 
 export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsSearchField &
-  InputProps;
+  InputProps
 
 /**
  * A search field component.
@@ -351,12 +351,12 @@ export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const SearchField = ({ type: _type, ...rest }: SearchFieldProps) => {
-  return <FieldBase {...rest} type="search" />;
-};
+  return <FieldBase {...rest} type="search" />
+}
 
 export type TelFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsTelField &
-  InputProps;
+  InputProps
 
 /**
  * A tel field component.
@@ -365,12 +365,12 @@ export type TelFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TelField = ({ type: _type, ...rest }: TelFieldProps) => {
-  return <FieldBase {...rest} type="tel" />;
-};
+  return <FieldBase {...rest} type="tel" />
+}
 
 export type UrlFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsUrlField &
-  InputProps;
+  InputProps
 
 /**
  * A url field component.
@@ -379,12 +379,12 @@ export type UrlFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const UrlField = ({ type: _type, ...rest }: UrlFieldProps) => {
-  return <FieldBase {...rest} type="url" />;
-};
+  return <FieldBase {...rest} type="url" />
+}
 
 export type MonthFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsMonthField &
-  InputProps;
+  InputProps
 
 /**
  * A month field component.
@@ -393,12 +393,12 @@ export type MonthFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const MonthField = ({ type: _type, ...rest }: MonthFieldProps) => {
-  return <FieldBase {...rest} type="month" />;
-};
+  return <FieldBase {...rest} type="month" />
+}
 
 export type TimeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsTimeField &
-  InputProps;
+  InputProps
 
 /**
  * A month field component.
@@ -407,12 +407,12 @@ export type TimeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TimeField = ({ type: _type, ...rest }: TimeFieldProps) => {
-  return <FieldBase {...rest} type="time" />;
-};
+  return <FieldBase {...rest} type="time" />
+}
 
 export type NumberFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsNumberField &
-  InputProps;
+  InputProps
 /**
  * A number field component.
  *
@@ -420,12 +420,12 @@ export type NumberFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const NumberField = ({ type: _type, ...rest }: NumberFieldProps) => {
-  return <FieldBase {...rest} type="number" />;
-};
+  return <FieldBase {...rest} type="number" />
+}
 
 export type RangeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsRangeField &
-  InputProps;
+  InputProps
 /**
  * A range field component.
  *
@@ -433,12 +433,12 @@ export type RangeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const RangeField = ({ type: _type, ...rest }: RangeFieldProps) => {
-  return <FieldBase {...rest} type="range" />;
-};
+  return <FieldBase {...rest} type="range" />
+}
 
 export type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsPasswordField &
-  InputProps;
+  InputProps
 /**
  * A password field component.
  *
@@ -446,14 +446,14 @@ export type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const PasswordField = ({ type: _type, ...rest }: PasswordFieldProps) => {
-  return <FieldBase {...rest} type="password" />;
-};
+  return <FieldBase {...rest} type="password" />
+}
 
 export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
   RailsSelect & {
-    label?: string;
-    errorKey?: string;
-  };
+    label?: string
+    errorKey?: string
+  }
 /**
  * A select component.
  *
@@ -472,38 +472,38 @@ export const Select = ({
   type: _type,
   ...rest
 }: SelectProps) => {
-  const addHidden = includeHidden && multiple;
+  const addHidden = includeHidden && multiple
 
   const optionElements = options.map((item) => {
-    if ("options" in item) {
+    if ('options' in item) {
       return (
         <optgroup label={item.label} key={item.label}>
           {item.options.map((opt) => (
             <option key={opt.label} {...opt} />
           ))}
         </optgroup>
-      );
+      )
     } else {
-      return <option key={item.label} {...item} />;
+      return <option key={item.label} {...item} />
     }
-  });
+  })
 
   return (
     <>
       {addHidden && (
-        <input type="hidden" name={name} value={""} autoComplete="off" />
+        <input type="hidden" name={name} value={''} autoComplete="off" />
       )}
       <select name={name} id={id} multiple={multiple} {...rest}>
         {children}
         {optionElements}
       </select>
     </>
-  );
-};
+  )
+}
 
 export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
   RailsTextArea &
-  InputProps;
+  InputProps
 /**
  * A text area component.
  *
@@ -511,18 +511,18 @@ export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const TextArea = ({ type: _type, errorKey, ...rest }: TextAreaProps) => {
-  const { label } = rest;
+  const { label } = rest
 
   return (
     <FieldBase label={label} errorKey={errorKey} id={rest.id}>
       <textarea {...rest} />
     </FieldBase>
-  );
-};
+  )
+}
 
 export type FileFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsFileField &
-  InputProps;
+  InputProps
 
 /**
  * A file field component.
@@ -531,8 +531,8 @@ export type FileFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const FileField = ({ type: _type, ...rest }: FileFieldProps) => {
-  return <FieldBase {...rest} type="file" />;
-};
+  return <FieldBase {...rest} type="file" />
+}
 
 export type SubmitButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   RailsSubmitButton
@@ -542,6 +542,15 @@ export type SubmitButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  * Designed to work with a payload form_props's [submit helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#form-helpers).
  * Mimics the rails equivalent. Please modify to your liking.
  */
-export const SubmitButton = ({ type: _type, text, ...rest }: SubmitButtonProps) => {
-  return <button {...rest} type="submit"> {text} </button>
-};
+export const SubmitButton = ({
+  type: _type,
+  text,
+  ...rest
+}: SubmitButtonProps) => {
+  return (
+    <button {...rest} type="submit">
+      {' '}
+      {text}{' '}
+    </button>
+  )
+}
diff --git a/wrappers/tsconfig.json b/wrappers/tsconfig.json
index c3200ab..84dd5c2 100644
--- a/wrappers/tsconfig.json
+++ b/wrappers/tsconfig.json
@@ -4,7 +4,7 @@
     "removeComments": false,
     "outDir": "../temp",
     "paths": {
-      "@thoughtbot/candy_wrapper": ["../src/index"],
+      "@thoughtbot/candy_wrapper": ["../src/index"]
     }
   },
   "include": ["./ts/**/*"]