superglue 0.53.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 280ae24037b8a75c5173d9b4ed191d1e6661d25dfea3ddc21987ca8f39464f18
-  data.tar.gz: a94b4fa59affad9b246e0561c58ee6fc4012c4a3c08d73557cd92f032d957b32
+  metadata.gz: 825363825f0e6cf14431bd47cdc43b6be0dfcfb6723d19004ee99175bd98dda3
+  data.tar.gz: 27a52faf2563be8e0242c2ed68a5e02c531137e03c5e67e5993e06b615139266
 SHA512:
-  metadata.gz: 7db0beb0224b67b309a846825ac6ee40634661b51eedf3e7f686cd6e6fed2fd253c8b4510a9c0c5dafe4bf51b5544413286a8f3c7f7e935c6b245f211429c724
-  data.tar.gz: 2c1a8bd715494f92e9ffeae54bec3555b1b5731ae137da606979d52bbfac7775a694772d8a0274131174799995d62442bb3a37471a27d8786372877398c44d40
+  metadata.gz: 8dc5c1de22f7d525e82b3e00f49cd774a814f689c8f0e5018e5f1192d694ae036af07b14c162b113e91911bfc918019784863adc7cde2bc9b9786784709d357d
+  data.tar.gz: 5a9618185af23be3406af0153d54af83633cdc0a927337c7cd7d33f257150e6def65471b19c186ffe9d385312f979f9624f61b29c3c4ce9266c8a62820ca6b0c

data/lib/generators/superglue/install/install_generator.rb

@@ -0,0 +1,119 @@
+require "rails/generators/named_base"
+require "rails/generators/resource_helpers"
+
+module Superglue
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("../templates", __FILE__)
+
+      class_option :typescript,
+        type: :boolean,
+        required: false,
+        default: false,
+        desc: "Use typescript"
+
+      def create_files
+        remove_file "#{app_js_path}/application.js"
+
+        use_typescript = options["typescript"]
+        if use_typescript
+          copy_ts_files
+        else
+          copy_js_files
+        end
+
+        say "Copying Superglue initializer"
+        copy_file "#{__dir__}/templates/initializer.rb", "config/initializers/superglue.rb"
+
+        say "Copying application.json.props"
+        copy_file "#{__dir__}/templates/application.json.props", "app/views/layouts/application.json.props"
+
+        say "Adding required member methods to ApplicationRecord"
+        add_member_methods
+
+        say "Installing Superglue and friends"
+        run "yarn add react react-dom @reduxjs/toolkit react-redux @thoughtbot/superglue"
+
+        if use_typescript
+          run "yarn add -D @types/react-dom @types/react @types/node @thoughtbot/candy_wrapper"
+        end
+
+        say "Superglue is Installed! 🎉", :green
+      end
+
+      private
+
+      def copy_ts_files
+        say "Copying application.tsx file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/application.tsx", "#{app_js_path}/application.tsx"
+
+        say "Copying page_to_page_mapping.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/page_to_page_mapping.ts", "#{app_js_path}/page_to_page_mapping.ts"
+
+        say "Copying flash.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/flash.ts", "#{app_js_path}/slices/flash.ts"
+
+        say "Copying store.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/store.ts", "#{app_js_path}/store.ts"
+
+        say "Copying application_visit.ts file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/application_visit.ts", "#{app_js_path}/application_visit.ts"
+
+        say "Copying components to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/inputs.tsx", "#{app_js_path}/components/Inputs.tsx"
+        copy_file "#{__dir__}/templates/ts/layout.tsx", "#{app_js_path}/components/Layout.tsx"
+        copy_file "#{__dir__}/templates/ts/components.ts", "#{app_js_path}/components/index.ts"
+
+        say "Copying tsconfig.json file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/ts/tsconfig.json", "tsconfig.json"
+      end
+
+      def copy_js_files
+        say "Copying application.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/application.jsx", "#{app_js_path}/application.jsx"
+
+        say "Copying page_to_page_mapping.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/page_to_page_mapping.js", "#{app_js_path}/page_to_page_mapping.js"
+
+        say "Copying flash.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/flash.js", "#{app_js_path}/slices/flash.js"
+
+        say "Copying store.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/store.js", "#{app_js_path}/store.js"
+
+        say "Copying application_visit.js file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/application_visit.js", "#{app_js_path}/application_visit.js"
+
+        say "Copying components to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/inputs.jsx", "#{app_js_path}/components/Inputs.jsx"
+        copy_file "#{__dir__}/templates/js/layout.jsx", "#{app_js_path}/components/Layout.jsx"
+        copy_file "#{__dir__}/templates/js/components.js", "#{app_js_path}/components/index.js"
+
+        say "Copying jsconfig.json file to #{app_js_path}"
+        copy_file "#{__dir__}/templates/js/jsconfig.json", "jsconfig.json"
+      end
+
+      def add_member_methods
+        inject_into_file "app/models/application_record.rb", after: "class ApplicationRecord < ActiveRecord::Base\n" do
+          <<-RUBY
+  # This enables digging by index when used with props_template
+  # see https://thoughtbot.github.io/superglue/digging/#index-based-selection
+  def self.member_at(index)
+    offset(index).limit(1).first
+  end
+
+  # This enables digging by attribute when used with props_template
+  # see https://thoughtbot.github.io/superglue/digging/#attribute-based-selection
+  def self.member_by(attr, value)
+    find_by(Hash[attr, value])
+  end
+          RUBY
+        end
+      end
+
+      def app_js_path
+        "app/javascript/"
+      end
+    end
+  end
+end

data/lib/{install/templates/web → generators/superglue/install/templates}/application.json.props

@@ -1,6 +1,6 @@
-path = request.format.json? ? param_to_search_path(params[:props_at]) : nil
+path = request.format.json? ? param_to_dig_path(params[:props_at]) : nil
 
-json.data(search: path) do
+json.data(dig: path) do
   yield json
 end
 

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

@@ -0,0 +1,35 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { Application } from "@thoughtbot/superglue"
+import { buildVisitAndRemote } from "./application_visit"
+import { pageIdentifierToPageComponent } from "./page_to_page_mapping"
+import { store } from "./store"
+
+if (typeof window !== "undefined") {
+  document.addEventListener("DOMContentLoaded", function() {
+    const appEl = document.getElementById("app")
+    const location = window.location
+
+    if (appEl) {
+      const root = createRoot(appEl)
+      root.render(
+        <Application
+          // The base url prefixed to all calls made by the `visit`
+          // and `remote` thunks.
+          baseUrl={location.origin}
+          // The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb
+          // template, e.g., index.html.erb
+          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/js/application_visit.js

@@ -0,0 +1,113 @@
+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 = (ref, store) => {
+  const appRemote = (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 = (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/js/components.js

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

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

@@ -0,0 +1,44 @@
+import { createSlice } from "@reduxjs/toolkit"
+import { saveResponse, beforeVisit } from "@thoughtbot/superglue"
+
+const initialState = {}
+
+export const flashSlice = createSlice({
+  name: "flash",
+  initialState: initialState,
+  reducers: {
+    clearFlash(state, { payload }) {
+      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
+      }
+    })
+  }
+})
+
+export const { clearFlash, flash } = flashSlice.actions

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

@@ -0,0 +1,302 @@
+/**
+ * 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 useErrorKeyValidation = ({ errorKey, }) => {
+    const errors = useContext(ValidationContext);
+    return useMemo(() => {
+        return errors[errorKey];
+    }, [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 errors = useContext(ValidationContext);
+    if (!errorKey || !errors) {
+        return null;
+    }
+    const validationError = errors[errorKey];
+    const hasErrors = errorKey && validationError;
+    if (!hasErrors) {
+        return null;
+    }
+    const errorMessages = Array.isArray(validationError)
+        ? validationError
+        : [validationError];
+    return <span>{errorMessages.join(" ")}</span>;
+};
+/**
+ * A Field component.
+ *
+ * Combines a label, input and a FieldError. Please modify this to your liking.
+ */
+export const FieldBase = ({ label, errorKey, children, ...props }) => {
+    return (<>
+      <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 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 }) => {
+    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, multiple, type: _type, ...rest }) => {
+    const addHidden = includeHidden && multiple;
+    const optionElements = options.map((item) => {
+        if ("options" in item) {
+            return (<optgroup label={item.label} key={item.label}>
+          {item.options.map((opt) => (<option key={opt.label} {...opt}/>))}
+        </optgroup>);
+        }
+        else {
+            return <option key={item.label} {...item}/>;
+        }
+    });
+    return (<>
+      {addHidden && (<input type="hidden" name={name} value={""} autoComplete="off"/>)}
+      <select name={name} id={id} multiple={multiple} {...rest}>
+        {children}
+        {optionElements}
+      </select>
+    </>);
+};
+/**
+ * A text area component.
+ *
+ * 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>
+  )
+}