Add the first version of the CRUD addon with a simple bootstrap layout

.template/addons/crud/app/assets/stylesheets/layouts/_application.scss

@@ -0,0 +1,92 @@
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: space-between;
+  }
+
+  &__main {
+    padding: rem(16px);
+    margin: rem(16px);
+  }
+
+  &__footer {
+    grid-area: footer;
+    padding: rem(8px);
+  }
+
+  &__nav_bar_top {
+    grid-area: navBar;
+    border-bottom: solid var(--bs-border-width) var(--bs-gray-400);
+  }
+
+  &__side_bar {
+    grid-area: sideBar;
+    display: flex;
+    flex-flow: column;
+    padding: rem(32px);
+    background-color: var(--bs-light);
+    width: rem(280px);
+    height: 100%;
+
+    .dropdown-toggle {
+      outline: 0;
+    }
+
+    .btn-toggle {
+      padding: 0.25rem 0.5rem;
+      font-weight: 600;
+      color: var(--bs-emphasis-color);
+      background-color: transparent;
+    }
+    .btn-toggle:hover,
+    .btn-toggle:focus {
+      color: rgba(var(--bs-emphasis-color-rgb), 0.85);
+      background-color: var(--bs-tertiary-bg);
+    }
+
+    .btn-toggle::before {
+      width: 1.25em;
+      line-height: 0;
+      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+      transition: transform 0.35s ease;
+      transform-origin: 0.5em 50%;
+    }
+
+    [data-bs-theme="dark"] .btn-toggle::before {
+      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+    }
+
+    .btn-toggle[aria-expanded="true"] {
+      color: rgba(var(--bs-emphasis-color-rgb), 0.85);
+    }
+    .btn-toggle[aria-expanded="true"]::before {
+      transform: rotate(90deg);
+    }
+
+    .btn-toggle-nav a {
+      padding: 0.1875rem 0.5rem;
+      margin-top: 0.125rem;
+      margin-left: 1.25rem;
+    }
+    .btn-toggle-nav a:hover,
+    .btn-toggle-nav a:focus {
+      background-color: var(--bs-tertiary-bg);
+    }
+
+    .scrollarea {
+      overflow-y: auto;
+    }
+  }
+}

.template/addons/crud/app/assets/stylesheets/layouts/index.scss

@@ -0,0 +1 @@
+@import "./application";

.template/addons/crud/app/views/layouts/application.html.slim.tt

@@ -0,0 +1,25 @@
+doctype html
+html lang= I18n.locale
+  head
+    meta charset="utf-8"
+    meta name="viewport" content="width=device-width, initial-scale=1.0"
+    title= content_for?(:title) ? yield(:title) : '<%= app_name %>'
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag 'application', :media => 'all'
+    = javascript_include_tag "application"
+
+  body class=class_names(controller_name.dasherize, action_name.dasherize)
+    header
+      = render('layouts/application/nav_bar_top')
+    .app
+      .side_bar
+        = render('layouts/application/side_bar')
+      .app__container
+        main.app__main
+          = yield
+        footer.app__footer
+            p.text-center.text-muted
+              | &copy;
+              = ' <%= app_name %>'
+              = Date.today.year

.template/addons/crud/app/views/layouts/application/_nav_bar_top.html.slim

@@ -0,0 +1,33 @@
+.app__nav_bar_top
+  nav.navbar.navbar-expand-lg.navbar-light.bg-light
+    .container-fluid
+      a.navbar-brand[href="#"]
+        | NavbarTop
+      button.navbar-toggler[type="button" data-bs-toggle="collapse" data-bs-target="#top_navbar_nav" aria-controls="top_navbar_nav" aria-expanded="false" aria-label="Toggle navigation"]
+        span.navbar-toggler-icon
+      #top_navbar_nav.collapse.navbar-collapse
+        ul.navbar-nav.me-auto.mb-2.mb-lg-0
+          li.nav-item
+            a.nav-link.active[aria-current="page" href="#"]
+              | Home
+          li.nav-item
+            a.nav-link[href="#"]
+              | Link
+          li.nav-item
+            a.nav-link.disabled[href="#" tabindex="-1" aria-disabled="true"]
+              | Disabled
+          li.nav-item.dropdown
+            a#dropdown09.nav-link.dropdown-toggle[href="#" data-bs-toggle="dropdown" aria-expanded="false"]
+              | Account
+            ul.dropdown-menu[aria-labelledby="dropdown09"]
+              li
+                a.dropdown-item[href="#"]
+                  | Profile
+              li
+                a.dropdown-item[href="#"]
+                  | Settings
+              li
+                a.dropdown-item[href="#"]
+                  | Logout
+        form
+          input.form-control[type="text" placeholder="Search" aria-label="Search"]

.template/addons/crud/app/views/layouts/application/_side_bar.html.slim

@@ -0,0 +1,74 @@
+.app__side_bar
+  a.d-flex.align-items-center.mb-3.mb-md-0.me-md-auto.link-dark.text-decoration-none[href="/"]
+    svg.bi.pe-none.me-2[width="40" height="32"]
+      use[xlink:href="#bootstrap"]
+    span.fs-4
+      | Sidebar
+  hr
+  ul.list-unstyled.ps-0
+    li.mb-1
+      button.btn.btn-toggle.d-inline-flex.align-items-center.rounded.border-0.collapsed[data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false"]
+        |  Home
+      #home-collapse.collapse[style=""]
+        ul.btn-toggle-nav.list-unstyled.fw-normal.pb-1.small
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Overview
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Updates
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Reports
+    li.mb-1
+      button.btn.btn-toggle.d-inline-flex.align-items-center.rounded.border-0.collapsed[data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"]
+        |  Dashboard
+      #dashboard-collapse.collapse[style=""]
+        ul.btn-toggle-nav.list-unstyled.fw-normal.pb-1.small
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Overview
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Weekly
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Monthly
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Annually
+    li.mb-1
+      button.btn.btn-toggle.d-inline-flex.align-items-center.rounded.border-0.collapsed[data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"]
+        |  Orders
+      #orders-collapse.collapse[style=""]
+        ul.btn-toggle-nav.list-unstyled.fw-normal.pb-1.small
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | New
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Processed
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Shipped
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Returned
+    li.border-top.my-3
+    li.mb-1
+      button.btn.btn-toggle.d-inline-flex.align-items-center.rounded.border-0.collapsed[data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"]
+        |  Account
+      #account-collapse.collapse
+        ul.btn-toggle-nav.list-unstyled.fw-normal.pb-1.small
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | New...
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Profile
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Settings
+          li
+            a.link-body-emphasis.d-inline-flex.text-decoration-none.rounded[href="#"]
+              | Sign out

.template/addons/crud/template.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+use_source_path __dir__
+
+remove_file 'app/views/layouts/application.html.erb'
+directory 'app/views/layouts/application'
+template 'app/views/layouts/application.html.slim.tt'
+
+# SCSS Layout
+directory 'app/assets/stylesheets/layouts'
+insert_into_file 'app/assets/stylesheets/application.scss', after: %r{// Layouts\n} do
+  <<~SCSS
+    @import './layouts';
+  SCSS
+end

Makefile

@@ -4,14 +4,15 @@
 # Y - in response to Would you like to add the SemaphoreCI addon?
 # Y - in response to Would you like to add the Nginx addon?
 # Y - in response to Would you like to add the Phrase addon?
-# Y - in response to Would you like to add the Devise addon?
-# Y - in response to Would you like to add the Bootstrap addon?
-# Y - in response to Would you like to add the Slim Template Engine addon?
+# Y - in response to Would you like to add the CRUD addon?
+#   - Devise auto included with the CRUD addon.
+#   - Bootstrap auto included with the CRUD addon.
+#   - Slim Template Engine auto included with the CRUD addon.
 # Y - in response to Would you like to add the Hotwire addon?
 # Y - in response to Would you like to add the Svgeez addon?
 
 create_web:
-	printf "Y\nY\nY\nY\nY\nY\nY\nY\nY\nY\nY\n" | rails new $(APP_NAME) -m ./template.rb -T ${OPTIONS}
+	printf "Y\nY\nY\nY\nY\nY\nY\nY\nY\n" | rails new $(APP_NAME) -m ./template.rb -T ${OPTIONS}
 
 # Y - in response to Would you like to add the Github addon?
 # Y - in response to Would you like to add the Mock Server addon?

template.rb

@@ -74,26 +74,35 @@ def apply_template!(template_root)
   apply '.template/variants/api/template.rb' if API_VARIANT
   apply '.template/variants/web/template.rb' if WEB_VARIANT
 
+  apply '.template/addons/crud/template.rb' if @install_crud
+
   # A list necessary jobs that run before complete, ex: Fixing rubocop on Ruby files that generated by Rails
   apply '.template/hooks/before_complete/fix_rubocop.rb'
   apply '.template/hooks/before_complete/report.rb'
 end
 
 def ask_for_optional_addons
-  @install_github_action = true if yes?(install_addon_prompt('Github Action and Wiki'))
-  @install_openapi = true if API_VARIANT || yes?(install_addon_prompt('OpenAPI'))
-  @install_mock_server = true if @install_openapi && yes?(install_addon_prompt('Mock Server'))
-  @install_semaphore = true if yes?(install_addon_prompt('SemaphoreCI'))
-  @install_nginx = true if yes?(install_addon_prompt('Nginx'))
-  @install_phrase = true if yes?(install_addon_prompt('Phrase'))
-  @install_devise = true if yes?(install_addon_prompt('Devise'))
-
-  return unless WEB_VARIANT
-
-  @install_bootstrap = true if yes?(install_addon_prompt('Bootstrap'))
-  @install_slim = true if yes?(install_addon_prompt('Slim Template Engine'))
-  @install_hotwire = true if yes?(install_addon_prompt('Hotwire'))
-  @install_svgeez = true if yes?(install_addon_prompt('Svgeez'))
+  ask_for_all_variant_addons
+
+  ask_for_web_variant_addons if WEB_VARIANT
+end
+
+def ask_for_all_variant_addons
+  @install_github_action = yes?(install_addon_prompt('Github Action and Wiki'))
+  @install_openapi = API_VARIANT || yes?(install_addon_prompt('OpenAPI'))
+  @install_mock_server = @install_openapi && yes?(install_addon_prompt('Mock Server'))
+  @install_semaphore = yes?(install_addon_prompt('SemaphoreCI'))
+  @install_nginx = yes?(install_addon_prompt('Nginx'))
+  @install_phrase = yes?(install_addon_prompt('Phrase'))
+  @install_crud = WEB_VARIANT && yes?(install_addon_prompt('Crud (includes Devise, Bootstrap and Slim)'))
+  @install_devise = @install_crud || yes?(install_addon_prompt('Devise'))
+end
+
+def ask_for_web_variant_addons
+  @install_bootstrap = @install_crud || yes?(install_addon_prompt('Bootstrap'))
+  @install_slim = @install_crud || yes?(install_addon_prompt('Slim Template Engine'))
+  @install_hotwire = yes?(install_addon_prompt('Hotwire'))
+  @install_svgeez = yes?(install_addon_prompt('Svgeez'))
 end
 
 def apply_optional_addons