Add layout and prompt to the CRUD add-on

.github/workflows/test_generated_app.yml

@@ -10,8 +10,8 @@ env:
   DOCKER_REGISTRY_USERNAME: ${{ github.repository_owner }}
   DOCKER_REGISTRY_TOKEN: ${{ secrets.DOCKER_REGISTRY_TOKEN }}
   RUBY_VERSION: 3.2.2
-  NODE_VERSION: 16
-  RAILS_VERSION: 7.0.8
+  NODE_VERSION: 18
+  RAILS_VERSION: 7.1.2
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/test_production_build.yml

@@ -7,8 +7,8 @@ env:
   DOCKER_IMAGE: ${{ github.repository }}
   DOCKER_REGISTRY_HOST: ${{ secrets.DOCKER_REGISTRY_HOST }}
   RUBY_VERSION: 3.2.2
-  NODE_VERSION: 16
-  RAILS_VERSION: 7.0.8
+  NODE_VERSION: 18
+  RAILS_VERSION: 7.1.2
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.template/addons/crud/app/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/stylesheets/layouts/index.scss

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

.template/addons/crud/template.rb

@@ -1,5 +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/stylesheets/layouts'
+insert_into_file 'app/assets/stylesheets/application.scss', after: %r{// Layouts\n} do
+  <<~SCSS
+    @import './layouts';
+  SCSS
+end

.template/addons/github/.github/workflows/test.yml.tt

@@ -14,7 +14,7 @@ env:
   DOCKER_REGISTRY_TOKEN: ${{ secrets.DOCKER_REGISTRY_TOKEN }}
   DOCKER_IMAGE: ${{ github.repository }}
   <%- if WEB_VARIANT -%>
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   <%- end -%>
 
   # Set the default docker-compose file

.template/variants/web/.stylelintrc

@@ -3,7 +3,6 @@
     "@nimblehq/stylelint-config-nimble"
   ],
   "rules": {
-    "no-eol-whitespace": true,
     "max-nesting-depth": 3,
     "scss/at-extend-no-missing-placeholder": null,
     "order/properties-alphabetical-order": null

.template/variants/web/app/assets/stylesheets/functions/_sizing.scss

@@ -1,12 +1,14 @@
+@use 'sass:list';
+
 @function em($values, $base-font-size: 16px) {
   $list: ();
 
   @each $value in $values {
     @if ($value == 0 or $value == auto) {
-      $list: append($list, $value);
+      $list: list.append($list, $value);
     } @else {
       $em-value: calc($value / $base-font-size) + em;
-      $list: append($list, $em-value);
+      $list: list.append($list, $em-value);
     }
   }
 
@@ -18,10 +20,10 @@
 
   @each $value in $values {
     @if ($value == 0 or $value == auto) {
-      $list: append($list, $value);
+      $list: list.append($list, $value);
     } @else {
       $rem-value: calc($value / $base-font-size) + rem;
-      $list: append($list, $rem-value);
+      $list: list.append($list, $rem-value);
     }
   }
 

.template/variants/web/package.json.rb

@@ -31,7 +31,7 @@
 run 'yarn add --dev eslint'
 run 'yarn add --dev stylelint'
 run 'yarn add --dev @nimblehq/[email protected]'
-run 'yarn add --dev @nimblehq/stylelint-config-nimble@1.0.2'
+run 'yarn add --dev @nimblehq/stylelint-config-nimble@1.1.0'
 
 # Setup scripts
 run 'npm pkg set scripts.eslint="eslint . --color"'

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 16.20.1
+nodejs >= 18
 ruby 3.2.2

Gemfile.tt

@@ -2,7 +2,7 @@ source 'https://rubygems.org'
 ruby '<%= RUBY_VERSION %>'
 
 # Backend
-gem 'rails', '7.0.8' # Latest stable
+gem 'rails', '7.1.2' # Latest stable
 gem 'pg' # Use Postgresql as database
 gem 'puma' # Use Puma as the app server
 gem 'mini_magick' # A ruby wrapper for ImageMagick or GraphicsMagick command line

README.md

@@ -17,8 +17,8 @@ with building complex applications over the years.
 ### Requirements
 
 - Install ruby and set your local ruby version to `3.2.2`
-- Install rails `7.0.6`
-- Install node `16.20.1` (For creating web application)
+- Install rails `7.1.2`
+- Install node `18.19.0` (For creating web application)
 
 > 📝 If running on Apple M1, to build docker image, please make sure to set platform to AMD64 by `export DOCKER_DEFAULT_PLATFORM=linux/amd64`
 

template.rb

@@ -21,8 +21,8 @@
 }.freeze
 
 if WEB_VARIANT
-  NODE_VERSION = '16.20.1'
-  NODE_SOURCE_VERSION = '16' # Used in Dockerfile https://github.com/nodesource/distributions
+  NODE_VERSION = '18.19.0'
+  NODE_SOURCE_VERSION = '18' # Used in Dockerfile https://github.com/nodesource/distributions
 end
 
 def apply_template!(template_root)