Run fullstack script (#5)

Gemfile

@@ -11,6 +11,7 @@ gem 'activeadmin', '~> 3.2'
 gem 'active_storage_base64', '~> 3.0.0'
 gem 'aws-sdk-s3', '~> 1.156', require: false
 gem 'bootsnap', '~> 1.17'
+gem 'cssbundling-rails', '~> 1.3'
 gem 'delayed_job_active_record', '~> 4.1'
 gem 'devise', '~> 4.9'
 gem 'devise_token_auth', '~> 1.2', '>= 1.2.3'
@@ -33,7 +34,10 @@ gem 'rswag-ui', '~> 2.13.0'
 gem 'sass-rails', '~> 6.0.0'
 gem 'sendgrid', '~> 1.2.4'
 gem 'sprockets', '~> 4.2.1'
+gem 'stimulus-rails', '~> 1.3'
 gem 'strong_migrations', '~> 2.0'
+gem 'turbo-rails', '2.0.0.pre.beta.2'
+gem 'view_component', '~> 3.7'
 gem 'yaaf', '~> 3.0'
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'
@@ -59,6 +63,7 @@ group :development do
  gem 'i18n-tasks', '~> 1.0.14'
  gem 'letter_opener', '~> 1.10'
  gem 'listen', '~> 3.9'
+ gem 'lookbook', '~> 2.1'
  gem 'rails_best_practices', '~> 1.20'
  gem 'reek', '~> 6.3'
  gem 'rubocop', '~> 1.65', require: false

Gemfile.lock

@@ -159,6 +159,10 @@ GEM
  bigdecimal
  rexml
  crass (1.0.6)
+ css_parser (1.17.1)
+ addressable
+ cssbundling-rails (1.4.0)
+ railties (>= 6.0.0)
  csv (3.3.0)
  date (3.3.4)
  debug_inspector (1.2.0)
@@ -257,6 +261,8 @@ GEM
  activesupport (>= 5.2)
  hashdiff (1.1.0)
  highline (3.0.1)
+ htmlbeautifier (1.4.3)
+ htmlentities (4.3.4)
  i18n (1.14.5)
  concurrent-ruby (~> 1.0)
  i18n-tasks (1.0.14)
@@ -321,6 +327,18 @@ GEM
  loofah (2.22.0)
  crass (~> 1.0.2)
  nokogiri (>= 1.12.0)
+ lookbook (2.3.2)
+ activemodel
+ css_parser
+ htmlbeautifier (~> 1.3)
+ htmlentities (~> 4.3.4)
+ marcel (~> 1.0)
+ railties (>= 5.0)
+ redcarpet (~> 3.5)
+ rouge (>= 3.26, < 5.0)
+ view_component (>= 2.0)
+ yard (~> 0.9)
+ zeitwerk (~> 2.5)
  mail (2.8.1)
  mini_mime (>= 0.1.1)
  net-imap
@@ -352,7 +370,7 @@ GEM
  racc (~> 1.4)
  nokogiri (1.16.6-arm64-darwin)
  racc (~> 1.4)
- nokogiri (1.16.6-x86_64-linux)
+ nokogiri (1.16.6-x86_64-darwin)
  racc (~> 1.4)
  octokit (9.1.0)
  faraday (>= 1, < 3)
@@ -451,6 +469,7 @@ GEM
  ffi (~> 1.0)
  rdoc (6.7.0)
  psych (>= 4.0.0)
+ redcarpet (3.6.0)
  reek (6.3.0)
  dry-schema (~> 1.13.0)
  parser (~> 3.3.0)
@@ -570,6 +589,8 @@ GEM
  actionpack (>= 5.2)
  activesupport (>= 5.2)
  sprockets (>= 3.0.0)
+ stimulus-rails (1.3.3)
+ railties (>= 6.0.0)
  stringio (3.1.1)
  strong_migrations (2.0.0)
  activerecord (>= 6.1)
@@ -579,10 +600,18 @@ GEM
  thor (1.3.1)
  tilt (2.3.0)
  timeout (0.4.1)
+ turbo-rails (2.0.0.pre.beta.2)
+ actionpack (>= 6.0.0)
+ activejob (>= 6.0.0)
+ railties (>= 6.0.0)
  tzinfo (2.0.6)
  concurrent-ruby (~> 1.0)
  unicode-display_width (2.5.0)
  uri (0.13.0)
+ view_component (3.13.0)
+ activesupport (>= 5.2.0, < 8.0)
+ concurrent-ruby (~> 1.0)
+ method_source (~> 1.0)
  warden (1.2.9)
  rack (>= 2.0.9)
  webmock (3.23.1)
@@ -599,12 +628,13 @@ GEM
  yaaf (3.0.0)
  activemodel (>= 5.2)
  activerecord (>= 5.2)
+ yard (0.9.36)
  zeitwerk (2.6.16)
 
 PLATFORMS
  arm64-darwin-22
  ruby
- x86_64-linux
+ x86_64-darwin-23
 
 DEPENDENCIES
  active_storage_base64 (~> 3.0.0)
@@ -616,6 +646,7 @@ DEPENDENCIES
  bootsnap (~> 1.17)
  brakeman (~> 6.1)
  capybara (~> 3.40)
+ cssbundling-rails (~> 1.3)
  delayed_job_active_record (~> 4.1)
  devise (~> 4.9)
  devise_token_auth (~> 1.2, >= 1.2.3)
@@ -634,6 +665,7 @@ DEPENDENCIES
  letter_opener (~> 1.10)
  listen (~> 3.9)
  lograge (~> 0.14)
+ lookbook (~> 2.1)
  newrelic_rpm (~> 9.11)
  octokit (~> 9.1)
  oj (~> 3.16)
@@ -669,8 +701,11 @@ DEPENDENCIES
  shoulda-matchers (~> 6.2)
  simplecov (~> 0.22.0)
  sprockets (~> 4.2.1)
+ stimulus-rails (~> 1.3)
  strong_migrations (~> 2.0)
+ turbo-rails (= 2.0.0.pre.beta.2)
  tzinfo-data
+ view_component (~> 3.7)
  webmock (~> 3.23)
  yaaf (~> 3.0)
 

Procfile.dev

@@ -1,2 +1,3 @@
 web: ./bin/rails server -p 3000 -b 0.0.0.0
 js: yarn build --watch
+css: yarn build:css --watch

app/assets/config/manifest.js

@@ -1,3 +1,2 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
 //= link_tree ../builds

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/components/example/component.html.erb

@@ -0,0 +1,3 @@
+<div data-controller="example--component">
+ <span class="after:content-['CSS_works!']" data-example--component-target="hello">HTML works!</span>
+</div>

app/components/example/component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Example
+ class Component < ViewComponent::Base
+ end
+end

app/components/example/component_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+ static targets = ['hello'];
+
+ connect() {
+ const cssValue = window.getComputedStyle(this.helloTarget, ':after').getPropertyValue('content');
+ this.helloTarget.classList = '';
+ this.helloTarget.innerText += ` ${cssValue} JS works!`;
+ }
+}

app/components/index.js

@@ -0,0 +1,6 @@
+import { application } from "../javascript/controllers/application"
+import controllers from "./**/*_controller.js"
+
+controllers.forEach((controller) => {
+ application.register(controller.name, controller.module.default)
+})

app/javascript/application.js

@@ -0,0 +1,3 @@
+// Entry point for the build script in your package.json
+import "@hotwired/turbo-rails"
+import "./controllers"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus = application
+
+export { application }

app/javascript/controllers/index.js

@@ -0,0 +1,4 @@
+import { application } from "./application"
+
+// Import app/components/index.js
+import "../../components"

app/views/layouts/application.html.erb

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html>
  <head>
- <title>rails_api_base</title>
+ <title>hotwire_workshop</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
 
- <%= stylesheet_link_tag "application" %>
+ <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+ <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>
 
  <body>

bin/dev

@@ -1,8 +1,11 @@
 #!/usr/bin/env sh
 
-if ! gem list foreman -i --silent; then
+if gem list --no-installed --exact --silent foreman; then
  echo "Installing foreman..."
  gem install foreman
 fi
 
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
 exec foreman start -f Procfile.dev "$@"

config/cable.yml

@@ -7,4 +7,4 @@ test:
 production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
- channel_prefix: rails_api_base
+ channel_prefix: hotwire_workshop

config/database.yml

@@ -9,11 +9,11 @@ default: &default
 
 development:
  <<: *default
- database: rails_api_base_development
+ database: hotwire_workshop_development
 
 test:
  <<: *default
- database: rails_api_base_test<%= ENV['TEST_ENV_NUMBER'] %>
+ database: hotwire_workshop_test<%= ENV['TEST_ENV_NUMBER'] %>
 
 # For production is recommended to set DATABASE_URL env variable.
 # It will take precedence over the config defined here.

config/environments/development.rb

@@ -84,4 +84,7 @@
 
  # Raise error when a before_action's only/except options reference missing actions
  # config.action_controller.raise_on_missing_callback_actions = true
+
+ # ViewComponent Previews
+ config.view_component.preview_paths << "#{Rails.root}/spec/components/previews"
 end

config/initializers/active_admin.rb

@@ -6,7 +6,7 @@
  # Set the title that is displayed on the main layout
  # for each of the active admin pages.
  #
- config.site_title = 'rails_api_base Admin'
+ config.site_title = 'hotwire_workshop Admin'
 
  # Set the link url for the title. For example, to take
  # users to your main site. Defaults to no link.

config/newrelic.yml

@@ -15,7 +15,7 @@ common: &default_settings
 
  # Your application name. Renaming here affects where data displays in New
  # Relic. For more details, see https://docs.newrelic.com/docs/apm/new-relic-apm/maintenance/renaming-applications
- app_name: <%= ENV.fetch('NEW_RELIC_APP_NAME', 'rails_api_base - unknown env') %>
+ app_name: <%= ENV.fetch('NEW_RELIC_APP_NAME', 'hotwire_workshop - unknown env') %>
 
  # This config disables the agent regardless of other settings.
  agent_enabled: <%= ENV['NEW_RELIC_API_KEY'].present? %>

config/routes.rb

@@ -32,4 +32,5 @@
 
  mount Rswag::Ui::Engine => '/api-docs'
  mount Rswag::Api::Engine => '/api-docs'
+ mount Lookbook::Engine, at: '/lookbook' if Rails.env.development?
 end

doc/openapi.yaml

@@ -1,7 +1,7 @@
 ---
 openapi: 3.0.3
 info:
- title: rails_api_base
+ title: hotwire_workshop
  version: 1.0.0
 servers: []
 paths:

esbuild.config.mjs

@@ -1,11 +1,13 @@
 import * as esbuild from 'esbuild'
+import rails from 'esbuild-rails'
 
 const config = {
  entryPoints: ['app/javascript/*.js'],
  bundle: true,
  sourcemap: process.env.RAILS_ENV !== 'production',
  minify: process.env.RAILS_ENV === 'production',
  outdir: 'app/assets/builds',
+ plugins: [rails()],
  publicPath: '/assets'
 }
 

package.json

@@ -1,20 +1,27 @@
 {
- "name": "rails_api_base",
+ "name": "hotwire_workshop",
  "private": "true",
- "engines" : {
- "node" : "20.10.0",
- "yarn" : "1.22"
+ "engines": {
+ "node": "20.10.0",
+ "yarn": "1.22"
  },
  "dependencies": {
  "@activeadmin/activeadmin": "3.2.2",
  "@fortawesome/fontawesome-free": "6.5.2",
+ "@hotwired/stimulus": "^3.2.2",
+ "@hotwired/turbo-rails": "^8.0.0-beta.2",
  "arctic_admin": "4.3.1",
+ "autoprefixer": "^10.4.19",
  "esbuild": "0.23.0",
+ "esbuild-rails": "^1.0.7",
  "jquery": "3.7.1",
  "jquery-ui": "1.13.3",
- "jquery-ujs": "1.2.3"
+ "jquery-ujs": "1.2.3",
+ "postcss": "^8.4.39",
+ "tailwindcss": "^3.4.6"
  },
  "scripts": {
- "build": "node esbuild.config.mjs"
+ "build": "node esbuild.config.mjs",
+ "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
 }

spec/components/example/component_spec.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Example::Component, type: :component do
+ it 'renders component', :js do
+ with_rendered_component_path(render_inline(described_class.new), layout: 'application') do |path|
+ visit(path)
+
+ expect(page).to have_text 'HTML works!'
+ expect(page).to have_text 'CSS works!'
+ expect(page).to have_text 'JS works!'
+ end
+ end
+end

spec/components/previews/example/component_preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Example
+ class ComponentPreview < Lookbook::Preview
+ def standard
+ render Example::Component.new
+ end
+ end
+end