superglue 0.54.0 → 1.0.0

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+# This file was copied over from Rails land and slightly modified to account
+# for Superglue templates
+
+require "rails/generators/resource_helpers"
+require "rails/generators/rails/scaffold_controller/scaffold_controller_generator"
+
+module Superglue
+  module Generators
+    class ScaffoldControllerGenerator < Rails::Generators::NamedBase # :nodoc:
+      include Rails::Generators::ResourceHelpers
+
+      # Superglue uses the out-of-the-box controller generated by Rails.
+      source_root Rails::Generators::ScaffoldControllerGenerator.source_root
+
+      check_class_collision suffix: "Controller"
+
+      class_option :helper, type: :boolean
+      class_option :orm, banner: "NAME", type: :string, required: true,
+                         desc: "ORM to generate the controller for"
+
+      class_option :skip_routes, type: :boolean, desc: "Don't add routes to config/routes.rb."
+
+      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")
+      end
+
+      # Replaces template_engine (and its default erb), with view_collection
+      # defaulting to superglue:view_collection
+      hook_for :view_collection, required: true, default: "view_collection"
+
+      hook_for :resource_route, in: :rails, required: true do |route|
+        invoke route unless options.skip_routes?
+      end
+
+      hook_for :test_framework, in: :rails, as: :scaffold
+
+      # Invoke the helper using the controller name (pluralized)
+      hook_for :helper, in: :rails, as: :scaffold do |invoked|
+        invoke invoked, [controller_name]
+      end
+
+      private
+
+        def permitted_params
+          attachments, others = attributes_names.partition { |name| attachments?(name) }
+          params = others.map { |name| ":#{name}" }
+          params += attachments.map { |name| "#{name}: []" }
+          params.join(", ")
+        end
+
+        def attachments?(name)
+          attribute = attributes.find { |attr| attr.name == name }
+          attribute&.attachments?
+        end
+    end
+  end
+end

data/lib/generators/superglue/view_collection/templates/js/edit.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+  Form,
+  Layout,
+  <%- attributes.each do |attr| -%>
+  <%= js_component(attr)%>,
+  <%- end -%>
+  SubmitButton
+} from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+import { useAppSelector } from '@javascript/store'
+
+export default function <%= js_plural_table_name(:upper) %>Edit() {
+  const {
+    <%= js_singular_table_name %>Form,
+    <%= js_singular_table_name %>Path,
+    <%= js_plural_table_name %>Path,
+  } = useContent()
+
+  const { 
+    inputs, 
+    form, 
+    extras 
+  } = <%= js_singular_table_name %>Form
+  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+
+  return (
+    <Layout>
+      <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
+        <%- attributes.each do |attr| -%>
+        <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
+        <%- end -%>
+        <SubmitButton {...inputs.submit} type="submit"> {inputs.submit.text} </SubmitButton>
+      </Form>
+
+      <a href={<%= js_singular_table_name %>Path} data-sg-visit>Show</a>
+      <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/js/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Form, Layout } from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+
+export default function <%= js_plural_table_name(:upper) %>Index() {
+  const {
+    new<%= js_singular_table_name(:upper) %>Path,
+    <%= js_plural_table_name %> = [],
+  } = useContent()
+
+  const <%= js_singular_table_name %>Items = <%= js_plural_table_name %>.map((<%= js_singular_table_name %>) => {
+    const {
+      id,
+      <%- showable_attributes.each do |attr| -%>
+      <%= attr.column_name.camelize(:lower)%>,
+      <%- end -%>
+      edit<%= js_singular_table_name(:upper) %>Path,
+      <%= js_singular_table_name %>Path,
+      deleteForm
+    } = <%= js_singular_table_name %>
+
+    const { form, extras } = deleteForm;
+
+    return (
+      <tr key={id}>
+        <%- showable_attributes.each do |attr| -%>
+        <td>{<%=attr.column_name.camelize(:lower)%>}</td>
+        <%- end -%>
+        <td><a href={ <%= js_singular_table_name %>Path } data-sg-visit>Show</a></td>
+        <td><a href={ edit<%= js_singular_table_name(:upper) %>Path } data-sg-visit>Edit</a></td>
+        <td>
+          <Form {...form} extras={extras} data-sg-visit>
+            <button type="submit">Delete</button>
+          </Form>
+        </td>
+      </tr>
+    )
+  })
+
+  return (
+    <Layout>
+      <h1><%= js_plural_table_name(:upper) %></h1>
+
+      <table>
+        <thead>
+          <%- showable_attributes.each do |attr| -%>
+          <tr><th><%=attr.column_name.humanize%></th></tr>
+          <%- end -%>
+          <tr>
+            <th colSpan={3}></th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {<%= js_singular_table_name %>Items}
+        </tbody>
+      </table>
+      <br />
+      <a href={new<%= js_singular_table_name(:upper) %>Path} data-sg-visit>New <%= singular_table_name.humanize %></a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/js/new.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { 
+  Form, 
+  Layout,
+  <%- attributes.each do |attr| -%>
+  <%= js_component(attr)%>,
+  <%- end -%>
+  SubmitButton
+} from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+import { useAppSelector } from '@javascript/store'
+
+export default function <%= js_plural_table_name(:upper) %>New() {
+  const {
+    <%= js_singular_table_name %>Form,
+    <%= js_plural_table_name %>Path
+  } = useContent()
+
+  const { 
+    inputs, 
+    form, 
+    extras 
+  } = <%= js_singular_table_name %>Form
+  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+
+  return (
+    <Layout>
+      <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
+        <%- attributes.each do |attr| -%>
+        <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
+        <%- end -%>
+        <SubmitButton {...inputs.submit} type="submit"> {inputs.submit.text} </SubmitButton>
+      </Form>
+
+      <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/js/show.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Layout } from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+
+export default function <%= js_plural_table_name(:upper) %>Show() {
+  const {
+    <%- showable_attributes.each do |attr| -%>
+    <%= attr.column_name.camelize(:lower) %>,
+    <%- end -%>
+    edit<%= js_singular_table_name(:upper) %>Path,
+    <%= js_plural_table_name %>Path
+  } = useContent()
+
+  return (
+    <Layout>
+    <%- showable_attributes.each do |attr| -%>
+      <p>
+        <strong><%= attr.column_name.humanize %>:</strong>
+        {<%=attr.column_name.camelize(:lower)%>}
+      </p>
+    <%- end -%>
+      <a href={ edit<%= js_singular_table_name(:upper) %>Path } data-sg-visit>Edit</a>
+      <a href={ <%= js_plural_table_name %>Path } data-sg-visit>Back</a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/props/edit.json.props

@@ -0,0 +1,9 @@
+if @<%= singular_table_name %>.errors.any?
+  flash.now["<%= js_singular_table_name%>FormErrors"] = @<%= singular_table_name %>.errors.as_json
+end
+
+json.<%= js_singular_table_name %>Form(partial: 'form') do
+end
+
+json.<%= js_singular_table_name%>Path <%= singular_table_name%>_path(@<%=singular_table_name%>)
+json.<%= js_plural_table_name %>Path <%= plural_table_name %>_path

data/lib/generators/superglue/view_collection/templates/props/index.json.props

@@ -0,0 +1,14 @@
+json.<%= js_plural_table_name %> do
+  json.array! @<%= plural_table_name %> do |<%= singular_table_name %>|
+    <%- attributes_list_with_timestamps.each do |attr| -%>
+    json.<%=attr.to_s.camelize(:lower)%> <%= singular_table_name %>.<%=attr%>
+    <%- end -%>
+    json.edit<%=js_singular_table_name(:upper)%>Path edit_<%=singular_table_name%>_path(<%=singular_table_name%>)
+    json.<%=js_singular_table_name%>Path <%=singular_table_name%>_path(<%=singular_table_name%>)
+    json.deleteForm do
+      form_props(model: <%=singular_table_name%>, method: :delete)
+    end
+  end
+end
+
+json.new<%= js_singular_table_name(:upper) %>Path new_<%= singular_table_name %>_path

data/lib/generators/superglue/view_collection/templates/props/new.json.props

@@ -0,0 +1,10 @@
+if @<%= singular_table_name %>.errors.any?
+  flash.now["<%= js_singular_table_name%>FormErrors"] = @<%= singular_table_name %>.errors.as_json
+end
+
+json.<%= js_singular_table_name %>Form(partial: 'form') do
+end
+
+json.<%= js_plural_table_name %>Path <%= plural_table_name %>_path
+
+

data/lib/generators/superglue/view_collection/templates/props/show.json.props

@@ -0,0 +1,6 @@
+<%- attributes_list_with_timestamps.each do |attr|-%>
+json.<%=attr.to_s.camelize(:lower)%> @<%= singular_table_name %>.<%=attr%>
+<%- end -%>
+
+json.<%= js_plural_table_name %>Path <%= plural_table_name %>_path
+json.edit<%= js_singular_table_name(:upper) %>Path edit_<%= singular_table_name %>_path(@<%= singular_table_name %>)

data/lib/generators/superglue/view_collection/templates/ts/edit.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { 
+  Form, 
+  FormProps,
+  Layout,
+  <%- attributes.each do |attr| -%>
+  <%= js_component(attr)%>,
+  <%= js_component(attr)%>Props,
+  <%- end -%>
+  SubmitButton,
+  SubmitButtonProps
+} from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+import { useAppSelector } from '@javascript/store'
+
+type ContentProps = {
+  <%= js_singular_table_name %>Path: string
+  <%= js_plural_table_name %>Path: string,
+  <%= js_singular_table_name %>Form: FormProps<{
+    <%- attributes.each do |attr| -%>
+    <%= attr.column_name.camelize(:lower)%>: <%= js_component(attr)%>Props
+    <%- end -%>
+    submit: SubmitButtonProps
+  }>
+}
+
+export default function <%= js_plural_table_name(:upper) %>Edit() {
+  const {
+    <%= js_singular_table_name %>Form,
+    <%= js_singular_table_name %>Path,
+    <%= js_plural_table_name %>Path,
+  } = useContent<ContentProps>()
+
+  const { 
+    inputs, 
+    form, 
+    extras 
+  } = <%= js_singular_table_name %>Form
+  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+
+  return (
+    <Layout>
+      <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
+        <%- attributes.each do |attr| -%>
+        <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
+        <%- end -%>
+        <SubmitButton {...inputs.submit} type="submit"> {inputs.submit.text} </SubmitButton>
+      </Form>
+
+      <a href={<%= js_singular_table_name %>Path} data-sg-visit>Show</a>
+      <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/ts/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { Form, FormProps, Layout } from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+
+type ContentProps = {
+  new<%= js_singular_table_name(:upper) %>Path: string
+  <%= js_plural_table_name %>: {
+    id: number,
+    <%- showable_attributes.each do |attr| -%>
+    <%= attr.column_name.camelize(:lower)%>: <%= json_mappable_type(attr)%>
+    <%- end -%>
+    createdAt: string,
+    updatedAt: string,
+    edit<%= js_singular_table_name(:upper) %>Path: string,
+    <%= js_singular_table_name %>Path: string,
+    deleteForm: FormProps
+  }[]
+}
+
+export default function <%= js_plural_table_name(:upper) %>Index() {
+  const {
+    new<%= js_singular_table_name(:upper) %>Path,
+    <%= js_plural_table_name %> = [],
+  } = useContent<ContentProps>()
+
+  const <%= js_singular_table_name %>Items = <%= js_plural_table_name %>.map((<%= js_singular_table_name %>) => {
+    const {
+      id,
+      <%- showable_attributes.each do |attr| -%>
+      <%= attr.column_name.camelize(:lower)%>,
+      <%- end -%>
+      edit<%= js_singular_table_name(:upper) %>Path,
+      <%= js_singular_table_name %>Path,
+      deleteForm
+    } = <%= js_singular_table_name %>
+
+    const { form, extras } = deleteForm;
+
+    return (
+      <tr key={id}>
+        <%- showable_attributes.each do |attr| -%>
+        <td>{<%=attr.column_name.camelize(:lower)%>}</td>
+        <%- end -%>
+        <td><a href={ <%= js_singular_table_name %>Path } data-sg-visit>Show</a></td>
+        <td><a href={ edit<%= js_singular_table_name(:upper) %>Path } data-sg-visit>Edit</a></td>
+        <td>
+          <Form {...form} extras={extras} data-sg-visit>
+            <button type="submit">Delete</button>
+          </Form>
+        </td>
+      </tr>
+    )
+  })
+
+  return (
+    <Layout>
+      <h1><%= js_plural_table_name(:upper) %></h1>
+
+      <table>
+        <thead>
+          <%- showable_attributes.each do |attr| -%>
+          <tr><th><%=attr.column_name.humanize%></th></tr>
+          <%- end -%>
+          <tr>
+            <th colSpan={3}></th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {<%= js_singular_table_name %>Items}
+        </tbody>
+      </table>
+      <br />
+      <a href={new<%= js_singular_table_name(:upper) %>Path} data-sg-visit>New <%= singular_table_name.humanize %></a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/ts/new.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { 
+  Form, 
+  FormProps,
+  Layout,
+  <%- attributes.each do |attr| -%>
+  <%= js_component(attr)%>,
+  <%= js_component(attr)%>Props,
+  <%- end -%>
+  SubmitButton,
+  SubmitButtonProps
+} from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+import { useAppSelector } from '@javascript/store'
+
+type ContentProps = {
+  <%= js_plural_table_name %>Path: string
+  <%= js_singular_table_name %>Form: FormProps<{
+    <%- attributes.each do |attr| -%>
+    <%= attr.column_name.camelize(:lower)%>: <%= js_component(attr)%>Props
+    <%- end -%>
+    submit: SubmitButtonProps
+  }>
+}
+
+export default function <%= js_plural_table_name(:upper) %>New() {
+  const {
+    <%= js_singular_table_name %>Form,
+    <%= js_plural_table_name %>Path,
+  } = useContent<ContentProps>()
+  const { 
+    inputs, 
+    form, 
+    extras 
+  } = <%= js_singular_table_name %>Form
+  const validationErrors = useAppSelector((state) => state.flash["<%= js_singular_table_name%>FormErrors"])
+
+  return (
+    <Layout>
+      <Form {...form} extras={extras} validationErrors={validationErrors} data-sg-visit>
+        <%- attributes.each do |attr| -%>
+        <<%= js_component(attr)%> {...inputs.<%= attr.column_name.camelize(:lower)%>} label="<%= attr.column_name.humanize %>" errorKey="<%= attr.column_name %>" />
+        <%- end -%>
+        <SubmitButton {...inputs.submit} type="submit"> {inputs.submit.text} </SubmitButton>
+      </Form>
+
+      <a href={<%= js_plural_table_name %>Path} data-sg-visit>Back</a>
+    </Layout>
+  )
+}

data/lib/generators/superglue/view_collection/templates/ts/show.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Layout } from '@javascript/components'
+import { useContent } from '@thoughtbot/superglue'
+
+type ContentProps = {
+  id: string
+  <%- attributes.each do |attr| -%>
+  <%= attr.column_name.camelize(:lower)%>: <%= json_mappable_type(attr)%>
+  <%- end -%>
+  createdAt: string
+  updatedAt: string
+  <%= js_plural_table_name %>Path: string
+  edit<%= js_singular_table_name(:upper) %>Path: string
+}
+
+export default function <%= js_plural_table_name(:upper) %>Show() {
+  const {
+    <%- showable_attributes.each do |attr| -%>
+    <%= attr.column_name.camelize(:lower) %>,
+    <%- end -%>
+    edit<%= js_singular_table_name(:upper) %>Path,
+    <%= js_plural_table_name %>Path,
+  } = useContent<ContentProps>()
+
+  return (
+    <Layout>
+    <%- showable_attributes.each do |attr| -%>
+      <p>
+        <strong><%= attr.column_name.humanize %>:</strong>
+        {<%=attr.column_name.camelize(:lower)%>}
+      </p>
+    <%- end -%>
+      <a href={ edit<%= js_singular_table_name(:upper) %>Path } data-sg-visit>Edit</a>
+      <a href={ <%= js_plural_table_name %>Path } data-sg-visit>Back</a>
+    </Layout>
+  )
+}

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

@@ -0,0 +1,180 @@
+require "rails/generators/named_base"
+require "rails/generators/resource_helpers"
+
+module Superglue
+  module Generators
+    class ViewCollectionGenerator < Rails::Generators::NamedBase
+      include Rails::Generators::ResourceHelpers
+
+      source_root File.expand_path("../templates", __FILE__)
+
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
+
+      class_option :typescript,
+        type: :boolean,
+        required: false,
+        default: false,
+        desc: "Use typescript"
+
+      def create_root_folder
+        path = File.join("app/views", controller_file_path)
+        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
+          filename = filename_with_extensions(view)
+          template "props/" + filename, File.join("app/views", controller_file_path, filename)
+        end
+
+        template "props/_form.json.props", File.join("app/views", controller_file_path, "_form.json.props")
+      end
+
+      def copy_js_files
+        available_views.each do |view|
+          @action_name = view
+          if options["typescript"]
+            filename = filename_with_tsx_extensions(view)
+            template "ts/" + filename, File.join("app/views", controller_file_path, filename)
+          else
+            filename = filename_with_jsx_extensions(view)
+            template "js/" + filename, File.join("app/views", controller_file_path, filename)
+          end
+        end
+      end
+
+      def append_mapping
+        available_views.each do |action|
+          app_js = if options["typescript"]
+            "#{app_js_path}/page_to_page_mapping.ts"
+          else
+            "#{app_js_path}/page_to_page_mapping.js"
+          end
+
+          component_name = [plural_table_name, action].map(&:camelcase).join
+
+          if match_file(app_js, /pageIdentifierToPageComponent = {$/)
+            prepend_to_file app_js do
+              "import #{component_name} from '#{view_path}/#{controller_file_path}/#{action}'\n"
+            end
+
+            inject_into_file app_js, after: /pageIdentifierToPageComponent = {$/ do
+              "\n  '#{[controller_file_path, action].join("/")}': #{component_name},"
+            end
+          else
+            say "Skipping appending to #{app_js}, you may be using a bundler that supports globing."
+          end
+        end
+      end
+
+      protected
+
+      def js_component(attribute)
+        case attribute.type
+        when :string
+          "TextField"
+        when :text, :rich_text
+          "TextArea"
+        when :integer, :float, :decimal
+          "NumberField"
+        when :datetime, :timestamp, :time
+          "DatetimeLocalField"
+        when :date
+          "DateField"
+        when :boolean
+          "Checkbox"
+        when :attachments, :attachment
+          "File"
+        else
+          "TextField"
+        end
+      end
+
+      def json_mappable_type(attribute)
+        case attribute.type
+        when :string
+          "string"
+        when :text, :rich_text
+          "string"
+        when :integer, :float, :decimal
+          "number"
+        when :datetime, :timestamp, :time
+          "string"
+        when :date
+          "string"
+        when :boolean
+          "boolean"
+        else
+          "string"
+        end
+      end
+
+      def js_singular_table_name(casing = :lower)
+        singular_table_name.camelize(casing)
+      end
+
+      def js_plural_table_name(casing = :lower)
+        plural_table_name.camelize(casing)
+      end
+
+      def available_views
+        %w[index edit show new]
+      end
+
+      def view_path
+        "@views"
+      end
+
+      def app_js_path
+        "app/javascript"
+      end
+
+      attr_reader :action_name
+
+      def attributes_names
+        [:id] + super
+      end
+
+      def filename_with_extensions(name)
+        [name, :json, :props].join(".")
+      end
+
+      def filename_with_jsx_extensions(name)
+        [name, :jsx].join(".")
+      end
+
+      def filename_with_tsx_extensions(name)
+        [name, :tsx].join(".")
+      end
+
+      def filename_with_html_extensions(name)
+        [name, :html, :erb].join(".")
+      end
+
+      def showable_attributes
+        attributes.reject { |attr| %w[password password_confirmation].include? attr.name }
+      end
+
+      def attributes_list_with_timestamps
+        attributes_list(attributes_names + %w[created_at updated_at])
+      end
+
+      def attributes_list(attributes = attributes_names)
+        if self.attributes.any? { |attr| attr.name == "password" && attr.type == :digest }
+          attributes = attributes.reject { |name| %w[password password_confirmation].include? name }
+        end
+
+        attributes
+      end
+    end
+  end
+end