superglue 0.53.2 → 1.0.0

data/lib/generators/superglue/install/templates/ts/inputs.tsx

@@ -0,0 +1,547 @@
+/**
+ * Vanilla is a minimum set of
+ * [candy_wrappers](https://github.com/thoughtbot/candy_wrapper) around react
+ * HTML tags.  It works with the output from
+ * [FormProps](https://github.com/thoughtbot/form_props).
+ *
+ * There is no style and structured with bare necessities. You should modify
+ * these components to fit your design needs.
+ */
+
+import React, { ReactNode, useContext, createContext, useMemo } from "react";
+import {
+  CheckboxField as RailsCheckboxField,
+  CollectionCheckboxesField as RailsCollectionCheckboxesField,
+  HiddenField as RailsHiddenField,
+  CollectionRadioButtonsField as RailsCollectionRadioButtonsField,
+  ColorField as RailsColorField,
+  DateField as RailsDateField,
+  DateTimeLocalField as RailsDateTimeLocalField,
+  EmailField as RailsEmailField,
+  MonthField as RailsMonthField,
+  NumberField as RailsNumberField,
+  PasswordField as RailsPasswordField,
+  RangeField as RailsRangeField,
+  SearchField as RailsSearchField,
+  Select as RailsSelect,
+  TelField as RailsTelField,
+  FileField as RailsFileField,
+  TextField as RailsTextField,
+  TimeField as RailsTimeField,
+  UrlField as RailsUrlField,
+  TextArea as RailsTextArea,
+  ValidationErrors,
+  SubmitProps as RailsSubmitButton
+} from '@thoughtbot/candy_wrapper'
+
+export const ValidationContext = createContext<ValidationErrors>({});
+
+export const useErrorKeyValidation = ({
+  errorKey,
+}: {
+  errorKey: string;
+  name: string;
+}) => {
+  const errors = useContext(ValidationContext);
+
+  return useMemo(() => {
+    return errors[errorKey];
+  }, [errors, errorKey]);
+};
+
+export type ExtrasProps = Record<string, RailsHiddenField>;
+
+/**
+ * Extras renders the hidden inputs generated by form_props.
+ *
+ * Its meant to be used with a form component and renders hidden values for
+ * utf8, crsf_token, _method
+ */
+export const Extras = (hiddenInputAttributes: ExtrasProps) => {
+  const hiddenProps = Object.values(hiddenInputAttributes);
+  const hiddenInputs = hiddenProps.map((props: RailsHiddenField) => (
+    <input {...props} type="hidden" key={props.name} />
+  ));
+
+  return <>{hiddenInputs}</>;
+};
+
+// TODO: Add this as a form props props??
+export interface FormProps<T={}> {
+  extras: ExtrasProps;
+  inputs: T;
+  form: React.FormHTMLAttributes<HTMLFormElement>;
+}
+
+type FormElementProps = React.FormHTMLAttributes<HTMLFormElement> & {
+  extras: ExtrasProps;
+  validationErrors?: ValidationErrors;
+};
+/**
+ * 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
+}: FormElementProps) => {
+  return (
+    <form {...props}>
+      <ValidationContext.Provider value={validationErrors}>
+        <Extras {...extras}></Extras>
+        {children}
+      </ValidationContext.Provider>
+    </form>
+  );
+};
+
+/**
+ * An inline error component.
+ *
+ * When a Field has an error, this will show below the label and input.
+ * Please modify this to your liking.
+ */
+export const FieldError = ({ errorKey }: { errorKey: string | undefined }) => {
+  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>;
+};
+
+export type FieldBaseProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  id?: string;
+  label: string;
+  errorKey?: string;
+  children?: ReactNode;
+};
+
+/**
+ * A Field component.
+ *
+ * Combines a label, input and a FieldError. Please modify this to your liking.
+ */
+export const FieldBase = ({
+  label,
+  errorKey,
+  children,
+  ...props
+}: FieldBaseProps) => {
+  return (
+    <>
+      <label htmlFor={props.id}>{label}</label>
+      {children || <input {...props} />}
+      <FieldError errorKey={errorKey} />
+    </>
+  );
+};
+
+type InputProps = {
+  label: string;
+  errorKey?: string;
+};
+
+/**
+ * A checkbox component.
+ *
+ * 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;
+export const Checkbox = ({
+  type: _type,
+  includeHidden,
+  uncheckedValue,
+  errorKey,
+  ...rest
+}: CheckboxProps) => {
+  const { name } = rest;
+  return (
+    <FieldBase {...rest} errorKey={errorKey}>
+      {includeHidden && (
+        <input
+          type="hidden"
+          name={name}
+          defaultValue={uncheckedValue}
+          autoComplete="off"
+        />
+      )}
+      <input type="checkbox" {...rest}></input>
+    </FieldBase>
+  );
+};
+
+type CollectionCheckboxesFieldProps = RailsCollectionCheckboxesField &
+  InputProps;
+
+/**
+ * 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,
+}: CollectionCheckboxesFieldProps) => {
+  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} />
+    </>
+  );
+};
+
+type CollectionRadioButtonsFieldProps = RailsCollectionRadioButtonsField &
+  InputProps;
+
+/**
+ * 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,
+}: CollectionRadioButtonsFieldProps) => {
+  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" />
+      )}
+      <label>{label}</label>
+      {radioButtons}
+      <FieldError errorKey={errorKey} />
+    </>
+  );
+};
+
+export type TextFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsTextField &
+  InputProps;
+
+/**
+ * A text field component.
+ *
+ * Designed to work with a payload form_props's [text_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const TextField = ({ type: _type, ...rest }: TextFieldProps) => {
+  return <FieldBase {...rest} type="text" />;
+};
+
+export type EmailFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsEmailField &
+  InputProps;
+
+/**
+ * A email field component.
+ *
+ * Designed to work with a payload form_props's [email_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const EmailField = ({ type: _type, ...rest }: EmailFieldProps) => {
+  return <FieldBase {...rest} type="email" />;
+};
+
+export type ColorFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsColorField &
+  InputProps;
+
+/**
+ * A color field component.
+ *
+ * Designed to work with a payload form_props's [color_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const ColorField = ({ type: _type, ...rest }: ColorFieldProps) => {
+  return <FieldBase {...rest} type="color" />;
+};
+
+export type DateFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsDateField &
+  InputProps;
+
+/**
+ * A date field component.
+ *
+ * Designed to work with a payload form_props's [date_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 DateField = ({ type: _type, ...rest }: DateFieldProps) => {
+  return <FieldBase {...rest} type="date" />;
+};
+
+export type DateTimeLocalFieldProps =
+  React.InputHTMLAttributes<HTMLInputElement> &
+    RailsDateTimeLocalField &
+    InputProps;
+
+/**
+ * A date field component.
+ *
+ * Designed to work with a payload form_props's [date_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 DateTimeLocalField = ({
+  type: _type,
+  ...rest
+}: DateTimeLocalFieldProps) => {
+  return <FieldBase {...rest} type="datetime-local" />;
+};
+
+export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsSearchField &
+  InputProps;
+
+/**
+ * A search field component.
+ *
+ * Designed to work with a payload form_props's [search_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const SearchField = ({ type: _type, ...rest }: SearchFieldProps) => {
+  return <FieldBase {...rest} type="search" />;
+};
+
+export type TelFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsTelField &
+  InputProps;
+
+/**
+ * A tel field component.
+ *
+ * Designed to work with a payload form_props's [tel_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const TelField = ({ type: _type, ...rest }: TelFieldProps) => {
+  return <FieldBase {...rest} type="tel" />;
+};
+
+export type UrlFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsUrlField &
+  InputProps;
+
+/**
+ * A url field component.
+ *
+ * Designed to work with a payload form_props's [tel_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const UrlField = ({ type: _type, ...rest }: UrlFieldProps) => {
+  return <FieldBase {...rest} type="url" />;
+};
+
+export type MonthFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsMonthField &
+  InputProps;
+
+/**
+ * A month 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 MonthField = ({ type: _type, ...rest }: MonthFieldProps) => {
+  return <FieldBase {...rest} type="month" />;
+};
+
+export type TimeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsTimeField &
+  InputProps;
+
+/**
+ * A month 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" />;
+};
+
+export type NumberFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsNumberField &
+  InputProps;
+/**
+ * A number field component.
+ *
+ * Designed to work with a payload form_props's [month_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#number-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const NumberField = ({ type: _type, ...rest }: NumberFieldProps) => {
+  return <FieldBase {...rest} type="number" />;
+};
+
+export type RangeFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsRangeField &
+  InputProps;
+/**
+ * A range field component.
+ *
+ * Designed to work with a payload form_props's [range_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#number-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const RangeField = ({ type: _type, ...rest }: RangeFieldProps) => {
+  return <FieldBase {...rest} type="range" />;
+};
+
+export type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsPasswordField &
+  InputProps;
+/**
+ * A password field component.
+ *
+ * Designed to work with a payload form_props's [password_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const PasswordField = ({ type: _type, ...rest }: PasswordFieldProps) => {
+  return <FieldBase {...rest} type="password" />;
+};
+
+export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
+  RailsSelect & {
+    label?: string;
+    errorKey?: string;
+  };
+/**
+ * A select component.
+ *
+ * Designed to work with a payload form_props's [select helpers](https://github.com/thoughtbot/form_props?tab=readme-ov-file#select-helpers),
+ * [collection_select helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#collection-select), and [grouped_collection_select helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#group-collection-select).
+ *
+ * Please modify to your liking.
+ */
+export const Select = ({
+  includeHidden,
+  name,
+  id,
+  children,
+  options,
+  multiple,
+  type: _type,
+  ...rest
+}: SelectProps) => {
+  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 type TextAreaProps = React.InputHTMLAttributes<HTMLTextAreaElement> &
+  RailsTextArea &
+  InputProps;
+/**
+ * A text area component.
+ *
+ * Designed to work with a payload form_props's text_area helper.
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const TextArea = ({ type: _type, errorKey, ...rest }: TextAreaProps) => {
+  const { label } = rest;
+
+  return (
+    <FieldBase label={label} errorKey={errorKey} id={rest.id}>
+      <textarea {...rest} />
+    </FieldBase>
+  );
+};
+
+export type FileFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsFileField &
+  InputProps;
+
+/**
+ * A file field component.
+ *
+ * Designed to work with a payload form_props's [file_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const FileField = ({ type: _type, ...rest }: FileFieldProps) => {
+  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>
+};

data/lib/generators/superglue/install/templates/ts/layout.tsx

@@ -0,0 +1,16 @@
+import React, {ReactNode} from 'react'
+import { useAppSelector } from '@javascript/store'
+
+export const Layout = ({children}: {children: ReactNode}) => {
+  const flash = useAppSelector((state) => state.flash)
+
+  return (
+    <div>
+      {flash.success && <p>{flash.success}</p>}
+      {flash.notice && <p>{flash.notice}</p>}
+      {flash.error && <p>{flash.error}</p>}
+
+      {children}
+    </div>
+  )
+}

data/lib/generators/superglue/install/templates/ts/page_to_page_mapping.ts

@@ -0,0 +1,34 @@
+// import your page component #todo fix output of new lines
+// e.g import PostsEdit from '../views/posts/edit'
+
+// Mapping between your props template to Component, you must add to this
+// to register any new page level component you create. If you are using the
+// scaffold, it will auto append the identifers for you.
+//
+// For example:
+//
+// const pageIdentifierToPageComponent =  {
+//   'posts/new': PostNew
+// };
+//
+//
+// If you are using a build tool that supports globbing, you can automatically
+// populate `pageIdentiferToPageComponent`. For example, if you are using vite,
+// you can use the following snippet instead of manually importing.
+//
+// ```
+// const pageIdentifierToPageComponent = {}
+// const pages = import.meta.glob('../views/**/*.tsx', {eager: true})
+//
+// for (const key in pages) {
+//   if (pages.hasOwnProperty(key)) {
+//     const identifier = key.replace("../views/", "").split('.')[0];
+//     pageIdentifierToPageComponent[identifier] = pages[key].default;
+//   }
+// }
+// ```
+//
+const pageIdentifierToPageComponent = {
+};
+
+export { pageIdentifierToPageComponent }

data/lib/generators/superglue/install/templates/ts/store.ts

@@ -0,0 +1,34 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import { flashSlice } from "./slices/flash";
+import {
+  beforeVisit,
+  beforeFetch,
+  beforeRemote,
+  rootReducer,
+} from "@thoughtbot/superglue";
+
+const { pages, superglue } = rootReducer;
+
+export const store = configureStore({
+  devTools: process.env.NODE_ENV !== "production",
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [beforeFetch.type, beforeVisit.type, beforeRemote.type],
+      },
+    }),
+  reducer: {
+    superglue,
+    pages,
+    flash: flashSlice.reducer,
+  },
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppStore = typeof store;
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppStore = useStore.withTypes<AppStore>();

data/lib/generators/superglue/install/templates/ts/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "removeComments": true,
+    "isolatedModules": true,
+    "moduleResolution": "bundler",
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "allowJs": false,
+    "target": "ES2021",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "baseUrl": ".", // Usually the root of your project
+    "paths": {
+      "@javascript/*": ["app/javascript/*"],
+      "@views/*": ["app/views/*"]
+    },
+    "types": ["node"]
+  },
+  "include": [
+    "app/javascript/**/*",
+    "app/views/**/*"
+  ],
+}

data/lib/generators/superglue/scaffold/scaffold_generator.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "rails/generators/rails/resource/resource_generator"
+
+module Superglue
+  module Generators
+    class ScaffoldGenerator < Rails::Generators::ResourceGenerator # :nodoc:
+      remove_hook_for :resource_controller
+      remove_class_option :actions
+
+      class_option :resource_route, type: :boolean
+
+      hook_for :scaffold_controller, required: true
+    end
+  end
+end