superglue 0.54.0 → 1.0.1

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

@@ -0,0 +1,370 @@
+/**
+ * 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, { 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.
+ *
+ * Its meant to be used with a form component and renders hidden values for
+ * 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}</>
+}
+/**
+ * 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}>
+      <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 }) => {
+  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 (
+    <>
+      <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"
+        />
+      )}
+      <input type="checkbox" {...rest}></input>
+    </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" />
+      )}
+      <label>{label}</label>
+      {checkboxes}
+      <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" />
+        <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} />
+    </>
+  )
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="text" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="email" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="color" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="date" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="datetime-local" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="search" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="tel" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="url" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="month" />
+}
+/**
+ * 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" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="number" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="range" />
+}
+/**
+ * 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 }) => {
+  return <FieldBase {...rest} type="password" />
+}
+/**
+ * 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,
+  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.
+ *
+ * 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 }) => {
+  const { label } = rest
+  return (
+    <FieldBase label={label} errorKey={errorKey} id={rest.id}>
+      <textarea {...rest} />
+    </FieldBase>
+  )
+}
+/**
+ * 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 }) => {
+  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>
+  )
+}

data/lib/generators/superglue/install/templates/js/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // Usually the root of your project
+    "paths": {
+      "@javascript/*": ["app/javascript/*"],
+      "@views/*": ["app/views/*"]
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export const Layout = ({children}) => {
+  const flash = useSelector((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/js/page_to_page_mapping.js

@@ -0,0 +1,35 @@
+// import your page component
+// 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/**/*.jsx', {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/js/store.js

@@ -0,0 +1,30 @@
+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 const useAppDispatch = useDispatch.withTypes()
+export const useAppSelector = useSelector.withTypes()
+export const useAppStore = useStore.withTypes()

data/lib/{install/templates/web/application.js → generators/superglue/install/templates/ts/application.tsx}

@@ -1,22 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { ApplicationBase } from '@thoughtbot/superglue';
+import { Application, VisitResponse } from '@thoughtbot/superglue';
 import { buildVisitAndRemote } from './application_visit';
 import { pageIdentifierToPageComponent } from './page_to_page_mapping';
-import { buildStore } from './store'
+import { store } from './store'
 
-class Application extends ApplicationBase {
-  mapping() {
-    return pageIdentifierToPageComponent;
-  }
-
-  visitAndRemote(navRef, store) {
-    return buildVisitAndRemote(navRef, store);
-  }
-
-  buildStore(initialState, { superglue, pages}) {
-    return buildStore(initialState, superglue, pages);
-  }
+declare global {
+  interface Window { SUPERGLUE_INITIAL_PAGE_STATE: VisitResponse; }
 }
 
 if (typeof window !== "undefined") {
@@ -28,7 +18,6 @@ if (typeof window !== "undefined") {
       const root = createRoot(appEl);
       root.render(
         <Application
-          appEl={appEl}
           // The base url prefixed to all calls made by the `visit`
           // and `remote` thunks.
           baseUrl={location.origin}
@@ -37,10 +26,15 @@ if (typeof window !== "undefined") {
           initialPage={window.SUPERGLUE_INITIAL_PAGE_STATE}
           // The initial path of the page, e.g., /foobar
           path={location.pathname + location.search + location.hash}
+          // Callback used to setup visit and remote
+          buildVisitAndRemote={buildVisitAndRemote}
+          // Callback used to setup the store
+          store={store}
+          // Mapping between the page identifier to page component
+          mapping={pageIdentifierToPageComponent}
         />
       );
     }
   });
 }
 
-

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

@@ -0,0 +1,122 @@
+import {
+  ApplicationRemote,
+  ApplicationVisit,
+  SuperglueStore,
+  BuildVisitAndRemote,
+} from "@thoughtbot/superglue";
+import { visit, remote } from "@thoughtbot/superglue/action_creators";
+
+/**
+ * This function returns a wrapped visit and remote that will be used by UJS,
+ * the Navigation component, and passed to your page components through the
+ * NavigationContext.
+ *
+ * You can customize both functions to your liking. For example, for a progress
+ * bar. This file also adds support for data-sg-remote.
+ */
+export const buildVisitAndRemote: BuildVisitAndRemote = (
+  ref,
+  store: SuperglueStore
+) => {
+  const appRemote: ApplicationRemote = (path, { dataset, ...options }) => {
+    /**
+     * You can make use of `dataset` to add custom UJS options.
+     * If you are implementing a progress bar, you can selectively
+     * hide it for some links. For example:
+     *
+     * ```
+     * <a href="/posts?props_at=data.header" data-sg-remote data-sg-hide-progress>
+     *   Click me
+     * </a>
+     * ```
+     *
+     * This would be available as `sgHideProgress` on the dataset
+     */
+    return store.dispatch(remote(path, options));
+  };
+
+  const appVisit: ApplicationVisit = (path, { dataset, ...options } = {}) => {
+    /**
+     * Do something before we make a request.
+     * e.g, show a [progress bar](https://thoughtbot.github.io/superglue/recipes/progress-bar/).
+     *
+     * Hint: you can access the current pageKey
+     * via `store.getState().superglue.currentPageKey`
+     */
+    return store
+      .dispatch(visit(path, options))
+      .then((meta) => {
+        /**
+         * The assets fingerprints changed, instead of transitioning
+         * just go to the URL directly to retrieve new assets
+         */
+        if (meta.needsRefresh) {
+          window.location.href = meta.pageKey;
+          return meta;
+        }
+
+        /**
+         * Your first expanded UJS option, `data-sg-replace`
+         *
+         * This option overrides the `navigationAction` to allow a link click or
+         * a form submission to replace history instead of the usual push.
+         */
+        const navigatonAction = !!dataset?.sgReplace
+          ? "replace"
+          : meta.navigationAction;
+        ref.current?.navigateTo(meta.pageKey, {
+          action: navigatonAction,
+        });
+
+        /**
+         * Return the meta object, it's used for scroll restoration when
+         * handling the back button. You can skip returning, but Superglue
+         * will warn you about scroll restoration.
+         */
+        return meta;
+      })
+      .finally(() => {
+        /**
+         * Do something after a request.
+         *
+         * This is where you hide a progress bar.
+         */
+      })
+      .catch((err) => {
+        const response = err.response;
+
+        if (!response) {
+          /**
+           * This is for errors that are NOT from a HTTP request.
+           *
+           * Tooling like Sentry can capture console errors. If not, feel
+           * free to customize to send the error to your telemetry tool of choice.
+           */
+          console.error(err);
+          return;
+        }
+
+        if (response.ok) {
+          /**
+           * This is for errors that are from a HTTP request.
+           *
+           * If the response is OK, it must be an HTML body, we'll
+           * go to that locaton directly.
+           */
+          window.location = response.url;
+        } else {
+          if (response.status >= 400 && response.status < 500) {
+            window.location.href = "/400.html";
+            return;
+          }
+
+          if (response.status >= 500) {
+            window.location.href = "/500.html";
+            return;
+          }
+        }
+      });
+  };
+
+  return { visit: appVisit, remote: appRemote };
+};

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

@@ -0,0 +1,2 @@
+export * from "./Layout";
+export * from "./Inputs";

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

@@ -0,0 +1,46 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { saveResponse, beforeVisit } from "@thoughtbot/superglue";
+
+type FlashState = Record<string, any>
+
+const initialState: FlashState = {};
+
+export const flashSlice = createSlice({
+  name: "flash",
+  initialState: initialState,
+  reducers: {
+    clearFlash(state, { payload }: { payload: string }) {
+      const key = payload;
+      if (!key) {
+        return {};
+      }
+
+      delete state[key];
+
+      return {
+        ...state,
+      };
+    },
+    flash(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(beforeVisit, (_state, _action) => {
+      return {};
+    });
+    builder.addCase(saveResponse, (state, action) => {
+      const { page } = action.payload;
+
+      return {
+        ...state,
+        ...(page.slices.flash as FlashState),
+      };
+    });
+  },
+});
+
+export const { clearFlash, flash } = flashSlice.actions;