superglue 1.0.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 825363825f0e6cf14431bd47cdc43b6be0dfcfb6723d19004ee99175bd98dda3
-  data.tar.gz: 27a52faf2563be8e0242c2ed68a5e02c531137e03c5e67e5993e06b615139266
+  metadata.gz: 8e9624774c0133d0a9d8aac0d8b5d47bbb95862eea0bb1a26ffe3ce373c5e922
+  data.tar.gz: 8c69fd808df13768c9036981ca27d2a0b24eb9ce8ab8d890c88b666cc9bd5798
 SHA512:
-  metadata.gz: 8dc5c1de22f7d525e82b3e00f49cd774a814f689c8f0e5018e5f1192d694ae036af07b14c162b113e91911bfc918019784863adc7cde2bc9b9786784709d357d
-  data.tar.gz: 5a9618185af23be3406af0153d54af83633cdc0a927337c7cd7d33f257150e6def65471b19c186ffe9d385312f979f9624f61b29c3c4ce9266c8a62820ca6b0c
+  metadata.gz: 17522e020054291483b60953d3fa31e60d6b95de4316ce7469ed71e7f397fa15b07533051b4a4266d5263313a947e7b3eb82621d1d0f8dd45088b9db77295cdf
+  data.tar.gz: 97e27d5f9330ac515cd1636af3c9974584476a324d142573176187dd3cf18a7e6db696cec11ba473f8b5f7fc3d8849fa9fbc49d14f359ef9373d5ec75b763d56

data/README.md

@@ -0,0 +1,32 @@
+<div align="center" style="padding: 30px 0px 20px 0px;">
+  <img src="https://thoughtbot.github.io/superglue/images/superglue.svg" data-origin="images/superglue.svg" alt="Logo" width=250>
+</div>
+
+# Superglue Rails
+Use classic Rails to build rich React Redux applications with **NO APIs** and
+**NO client-side routing**.
+
+This is the officially supported Rails adapter to [Superglue]. This gem will
+add install and scaffold generators to your rails project.
+
+To get started, visit the [documentation] and add this to your Gemfile
+
+  [documentation]: https://thoughtbot.github.io/superglue/
+
+```
+gem 'superglue'
+```
+
+Then run `bundle`
+
+[![Test superglue_rails](https://github.com/thoughtbot/superglue_rails/actions/workflows/build_rails.yml/badge.svg)](https://github.com/thoughtbot/superglue_rails/actions/workflows/build_rails.yml)
+
+## Documentation
+
+Documentation is hosted on [Github pages](https://thoughtbot.github.io/superglue).
+
+## Contributing
+
+Thank you, [contributors]!
+
+  [contributors]: https://github.com/thoughtbot/superglue_rails/graphs/contributors

data/lib/generators/superglue/install/templates/js/inputs.jsx

@@ -7,14 +7,25 @@
  * 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 useErrorMessage = (errorKey) => {
+  const errors = useContext(ValidationContext)
+  return useMemo(() => {
+    if (!errorKey) {
+      return null
+    }
+    const validationError = errors[errorKey]
+    const hasErrors = errorKey && validationError
+    if (!hasErrors) {
+      return null
+    }
+    const errorMessages = Array.isArray(validationError)
+      ? validationError
+      : [validationError]
+    return errorMessages.join(' ')
+  }, [errors, errorKey])
+}
 /**
  * Extras renders the hidden inputs generated by form_props.
  *
@@ -22,10 +33,12 @@ 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.
  *
@@ -33,13 +46,15 @@ export const Extras = (hiddenInputAttributes) => {
  * Rails forms are generated.
  */
 export const Form = ({ extras, validationErrors = {}, children, ...props }) => {
-    return (<form {...props}>
+  return (
+    <form {...props}>
       <ValidationContext.Provider value={validationErrors}>
         <Extras {...extras}></Extras>
         {children}
       </ValidationContext.Provider>
-    </form>);
-};
+    </form>
+  )
+}
 /**
  * An inline error component.
  *
@@ -47,84 +62,110 @@ 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 errorMessage = useErrorMessage(errorKey)
+  return <span>{errorMessage}</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,17 +245,17 @@ 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.
+ * A time field component.
  *
  * Designed to work with a payload form_props's [month_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#date-helpers).
  * 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,46 @@ 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"/>)}
-      <select name={name} id={id} multiple={multiple} {...rest}>
-        {children}
-        {optionElements}
-      </select>
-    </>);
-};
+export const Select = ({
+  includeHidden,
+  name,
+  id,
+  children,
+  options,
+  label,
+  errorKey,
+  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" />
+      )}
+      <FieldBase label={label} errorKey={errorKey} id={id}>
+        <select name={name} id={id} multiple={multiple} {...rest}>
+          {children}
+          {optionElements}
+        </select>
+      </FieldBase>
+    </>
+  )
+}
 /**
  * A text area component.
  *
@@ -277,11 +338,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,8 +352,8 @@ 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.
  *
@@ -298,5 +361,10 @@ export const FileField = ({ type: _type, ...rest }) => {
  * Mimics the rails equivalent. Please modify to your liking.
  */
 export const SubmitButton = ({ type: _type, text, ...rest }) => {
-    return <button {...rest} type="submit"> {text} </button>;
-};
+  return (
+    <button {...rest} type="submit">
+      {' '}
+      {text}{' '}
+    </button>
+  )
+}

data/lib/generators/superglue/install/templates/ts/inputs.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,35 @@ 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;
-}) => {
-  const errors = useContext(ValidationContext);
+export const useErrorMessage = (errorKey?: string) => {
+  const errors = useContext(ValidationContext)
 
   return useMemo(() => {
-    return errors[errorKey];
-  }, [errors, errorKey]);
-};
+    if (!errorKey) {
+      return null
+    }
+
+    const validationError = errors[errorKey]
+    const hasErrors = errorKey && validationError
+
+    if (!hasErrors) {
+      return null
+    }
+
+    const errorMessages = Array.isArray(validationError)
+      ? validationError
+      : [validationError]
 
-export type ExtrasProps = Record<string, RailsHiddenField>;
+    return errorMessages.join(' ')
+  }, [errors, errorKey])
+}
+
+export type ExtrasProps = Record<string, RailsHiddenField>
 
 /**
  * Extras renders the hidden inputs generated by form_props.
@@ -58,25 +68,24 @@ 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 +105,8 @@ export const Form = ({
         {children}
       </ValidationContext.Provider>
     </form>
-  );
-};
+  )
+}
 
 /**
  * An inline error component.
@@ -106,31 +115,17 @@ export const Form = ({
  * Please modify this to your liking.
  */
 export const FieldError = ({ errorKey }: { errorKey: string | undefined }) => {
-  const errors = useContext(ValidationContext);
-  if (!errorKey || !errors) {
-    return null;
-  }
+  const errorMessage = useErrorMessage(errorKey)
 
-  const validationError = errors[errorKey];
-  const hasErrors = errorKey && validationError;
-
-  if (!hasErrors) {
-    return null;
-  }
-
-  const errorMessages = Array.isArray(validationError)
-    ? validationError
-    : [validationError];
-
-  return <span>{errorMessages.join(" ")}</span>;
-};
+  return <span>{errorMessage}</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 +144,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 +158,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 +166,7 @@ export const Checkbox = ({
   errorKey,
   ...rest
 }: CheckboxProps) => {
-  const { name } = rest;
+  const { name } = rest
   return (
     <FieldBase {...rest} errorKey={errorKey}>
       {includeHidden && (
@@ -184,11 +179,11 @@ export const Checkbox = ({
       )}
       <input type="checkbox" {...rest}></input>
     </FieldBase>
-  );
-};
+  )
+}
 
 type CollectionCheckboxesFieldProps = RailsCollectionCheckboxesField &
-  InputProps;
+  InputProps
 
 /**
  * A collection checkbox component.
@@ -203,29 +198,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 +235,7 @@ export const CollectionRadioButtons = ({
   errorKey,
 }: CollectionRadioButtonsFieldProps) => {
   if (collection.length == 0) {
-    return null;
+    return null
   }
 
   const radioButtons = collection.map((options) => {
@@ -249,26 +244,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 +272,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 +286,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 +300,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 +314,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 +332,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 +346,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 +360,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 +374,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,26 +388,26 @@ 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.
+ * A time field component.
  *
  * Designed to work with a payload form_props's [month_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#date-helpers).
  * 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 +415,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 +428,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 +441,12 @@ 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;
-  };
+  RailsSelect &
+  InputProps
 /**
  * A select component.
  *
@@ -468,42 +461,46 @@ export const Select = ({
   id,
   children,
   options,
+  label,
+  errorKey,
   multiple,
   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>
+      <FieldBase label={label} errorKey={errorKey} id={id}>
+        <select name={name} id={id} multiple={multiple} {...rest}>
+          {children}
+          {optionElements}
+        </select>
+      </FieldBase>
     </>
-  );
-};
+  )
+}
 
 export type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
   RailsTextArea &
-  InputProps;
+  InputProps
 /**
  * A text area component.
  *
@@ -511,18 +508,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,17 +528,27 @@ 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
+
 /**
  * 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 }: SubmitButtonProps) => {
-  return <button {...rest} type="submit"> {text} </button>
-};
+export const SubmitButton = ({
+  type: _type,
+  text,
+  ...rest
+}: SubmitButtonProps) => {
+  return (
+    <button {...rest} type="submit">
+      {' '}
+      {text}{' '}
+    </button>
+  )
+}

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: superglue
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.1
 platform: ruby
 authors:
 - Johny Ho
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-06 00:00:00.000000000 Z
+date: 2025-01-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -63,6 +64,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- README.md
 - lib/generators/superglue/install/install_generator.rb
 - lib/generators/superglue/install/templates/application.json.props
 - lib/generators/superglue/install/templates/initializer.rb
@@ -107,10 +109,11 @@ files:
 - lib/superglue.rb
 - lib/superglue/helpers.rb
 - lib/superglue/redirection.rb
-homepage: https://github.com/thoughtbot/superglue/
+homepage: https://github.com/thoughtbot/superglue_rails/
 licenses:
 - MIT
 metadata: {}
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -125,7 +128,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.5.3
+signing_key:
 specification_version: 4
 summary: Rails integration for SuperglueJS
 test_files: []