superglue 1.0.0 → 1.1.0

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>
+  )
+}

data/lib/generators/superglue/scaffold_controller/scaffold_controller_generator.rb

@@ -25,7 +25,11 @@ module Superglue
       argument :attributes, type: :array, default: [], banner: "field:type field:type"
 
       def create_controller_files
-        template "controller.rb", File.join("app/controllers", controller_class_path, "#{controller_file_name}_controller.rb")
+        controller_file = File.join("app/controllers", controller_class_path, "#{controller_file_name}_controller.rb")
+        template "controller.rb", controller_file
+        inject_into_file controller_file, after: /ApplicationController$/ do
+          "\n  before_action :use_jsx_rendering_defaults"
+        end
       end
 
       # Replaces template_engine (and its default erb), with view_collection

data/lib/generators/superglue/view_collection/view_collection_generator.rb

@@ -21,14 +21,6 @@ module Superglue
         empty_directory path unless File.directory?(path)
       end
 
-      def copy_erb_files
-        available_views.each do |view|
-          @action_name = view
-          filename = filename_with_html_extensions(view)
-          template "erb/" + filename, File.join("app/views", controller_file_path, filename)
-        end
-      end
-
       def copy_prop_files
         available_views.each do |view|
           @action_name = view