Front-end with components

.github/workflows/lint.yml

@@ -19,4 +19,4 @@ jobs:
  run: |
  gem install bundler
  bundle install
- bundle exec rubocop
+ bundle exec rubocop

Gemfile

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 source "https://rubygems.org"
 
 gem "rubocop-rails-omakase"

application/Gemfile.tt

@@ -11,6 +11,11 @@ gem 'discard', '~> 1.2'
 
 <%= %Q{gem 'graphql'\n} if requires_graphql? -%>
 
+gem "inline_svg"
+
+gem "meta-tags"
+gem 'mjml-rails'
+
 gem 'pg'
 <%= %Q{gem 'propshaft'\n} unless api? -%>
 gem 'puma'
@@ -62,4 +67,4 @@ end
 
 group :test do
  gem 'simplecov', require: false
-end
+end

application/app/assets/controllers/index.js

@@ -0,0 +1,21 @@
+import { registerControllers } from 'stimulus-vite-helpers'
+import Autosave from 'stimulus-rails-autosave'
+import {
+ Alert,
+ Dropdown,
+ Toggle,
+ Modal
+} from 'tailwindcss-stimulus-components'
+import TextareaAutogrow from 'stimulus-textarea-autogrow'
+
+import { stimulus } from '~/init'
+
+stimulus.register('alert', Alert)
+stimulus.register('autosave', Autosave)
+stimulus.register('dropdown', Dropdown)
+stimulus.register('modal-sync', Modal)
+stimulus.register('toggle', Toggle)
+stimulus.register('textarea-autogrow', TextareaAutogrow)
+
+const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
+registerControllers(stimulus, controllers)

application/app/assets/controllers/modal_controller.js

@@ -0,0 +1,15 @@
+import { Modal } from 'tailwindcss-stimulus-components'
+
+export default class ModalController extends Modal {
+ static targets = ['turboFrame']
+
+ close () {
+ super.close()
+ this.dispatch('close')
+
+ if (this.hasTurboFrameTarget) {
+ this.turboFrameTarget.src = null
+ this.turboFrameTarget.innerHTML = ''
+ }
+ }
+}

application/app/assets/entrypoints/application.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base";
+@import "../stylesheets/base.css";
+@import "../stylesheets/vendors";
+
+@import "tailwindcss/components";
+@import "../stylesheets/components.css";
+
+@import "tailwindcss/utilities";

application/app/assets/entrypoints/application.js

@@ -0,0 +1,2 @@
+import '~/init'
+import '~/controllers'

application/app/assets/init/index.js

@@ -0,0 +1,4 @@
+import './stimulus'
+import './turbo'
+
+export { stimulus } from './stimulus'

application/app/assets/init/stimulus.js

@@ -0,0 +1,8 @@
+import { Application } from '@hotwired/stimulus'
+
+const stimulus = Application.start()
+
+window.Stimulus = stimulus
+stimulus.debug = new URLSearchParams(window.location.search).has('debug')
+
+export { stimulus }

application/app/assets/init/turbo.js

@@ -0,0 +1,4 @@
+import '@hotwired/turbo-rails'
+import * as Turbo from '@hotwired/turbo'
+
+Turbo.setProgressBarDelay(500)

application/app/assets/stylesheets/base.css

@@ -0,0 +1,5 @@
+@layer base {
+ body {
+ @apply antialiased;
+ }
+}

application/app/assets/stylesheets/components.css

@@ -0,0 +1,4 @@
+@import "./components/body.css";
+@import "./components/navbar.css";
+@import "./components/wysiwyg.css";
+@import "./components/wrapper.css";

application/app/assets/stylesheets/components/body.css

@@ -0,0 +1,13 @@
+@layer components {
+ .body {
+ @apply flex flex-col min-h-screen;
+ }
+
+ .body__main {
+ @apply flex-1 pt-6;
+ }
+
+ .body__footer {
+ @apply py-8 text-gray-600;
+ }
+}

application/app/assets/stylesheets/components/navbar.css

@@ -0,0 +1,25 @@
+@layer components {
+ .navbar {
+ @apply sticky top-0 transition-all bg-white shadow-sm bg-opacity-90 backdrop-blur-sm;
+ }
+
+ .navbar__logo {
+ @apply w-auto h-7;
+ }
+
+ .navbar__inner {
+ @apply flex items-center wrapper;
+ }
+
+ .navbar__menu{
+ @apply flex flex-1 ml-8 space-x-6;
+ }
+
+ .navbar__link {
+ @apply flex items-center justify-between py-4 text-base font-semibold text-black hover:text-gray-500;
+ }
+
+ .navbar__link-active {
+ @apply text-gray-500;
+ }
+}

application/app/assets/stylesheets/components/wrapper.css

@@ -0,0 +1,9 @@
+@layer components {
+ .wrapper {
+ @apply px-3 mx-auto max-w-7xl sm:px-6;
+ }
+
+ .wrapper-narrow {
+ @apply max-w-4xl
+ }
+}

application/app/assets/stylesheets/components/wysiwyg.css

@@ -0,0 +1,6 @@
+@layer components {
+ .wysiwyg {
+ /* https://tailwindcss.com/docs/typography-plugin */
+ @apply prose;
+ }
+}

application/app/components/application_component.rb

@@ -0,0 +1,13 @@
+class ApplicationComponent < ViewComponent::Base
+ include Turbo::FramesHelper
+
+ def initialize(tag: nil, classes: nil, **options)
+ @tag = tag || :div
+ @classes = classes
+ @options = options
+ end
+
+ def call
+ content_tag(@tag, content, class: @classes, **@options) if @tag
+ end
+end

application/app/components/ui/flash/component.html.erb

@@ -0,0 +1,32 @@
+<%= turbo_frame_tag :flash,
+ class: "fixed flex flex-col space-y-2 top-12 right-3 sm:right-6 w-fit",
+ data: { turbo_temporary: "true" } do %>
+ <% flash.each do |key, message| %>
+ <div
+ class="max-w-sm w-full sm:min-w-96 px-1 py-1 rounded border-l-4 transition duration-300 transform hidden <%= tailwind_classes_for(key) %>"
+ data-controller="alert"
+ data-alert-dismiss-after-value="<%= DISMISS_AFTER %>"
+ data-alert-remove-delay-value="<%= REMOVE_DELAY %>"
+ data-alert-show-delay-value="<%= SHOW_DELAY %>"
+ data-transition-enter-from="opacity-0 translate-x-1/4"
+ data-transition-enter-to="opacity-100 translate-x-0"
+ data-transition-leave-from="opacity-100 translate-x-0"
+ data-transition-leave-to="opacity-0 translate-x-1/4">
+
+ <div class="p-2">
+ <div class="flex items-start">
+ <p class="flex-1 text-sm">
+ <%= sanitize(message) %>
+ </p>
+ <div class="flex flex-shrink-0 ml-4 mt-0.5">
+ <button class="inline-flex text-gray-400 transition duration-300 focus:outline-none focus:text-gray-600 hover:text-gray-600" type="button" data-action="alert#close" aria-label="Close alert">
+ <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+ <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd">
+ </svg>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <% end %>
+<% end %>

application/app/components/ui/flash/component.js

@@ -0,0 +1,4 @@
+import { Alert } from 'tailwindcss-stimulus-components'
+import { stimulus } from '~/init'
+
+stimulus.register('alert', Alert)

application/app/components/ui/flash/component.rb

@@ -0,0 +1,16 @@
+class Ui::Flash::Component < ApplicationComponent
+ DISMISS_AFTER = 5000
+ REMOVE_DELAY = 6000
+ SHOW_DELAY = 0
+
+ protected
+
+ def tailwind_classes_for(flash_type)
+ {
+ notice: "bg-green-100 border-green-300",
+ success: "bg-green-100 border-green-300",
+ alert: "bg-red-100 border-red-300",
+ error: "bg-red-100 border-red-300"
+ }.stringify_keys[flash_type.to_s] || flash_type.to_s
+ end
+end

application/app/controllers/home_controller.rb.tt

@@ -1,7 +1,16 @@
-# frozen_string_literal: true
-
 class HomeController < ApplicationController
  def index
+ unless api?
+ flash.now[:success] = "Flash message example"
+ end
  <%= %Q{render json: { message: 'Hello from JetRockets' }\n} if api? -%>
  end
-end
+
+ unless api?
+ def terms
+ end
+
+ def privacy
+ end
+ end
+end

application/app/helpers/application_helper.rb

@@ -0,0 +1,16 @@
+module ApplicationHelper
+ def component(name, *args, **kwargs, &block)
+ component = name.to_s.camelize.constantize::Component
+ render(component.new(*args, **kwargs), &block)
+ end
+
+ def inline_svg_vite_tag(filename, transform_params = {})
+ with_asset_finder(InlineSvg::ViteAssetFinder) do
+ render_inline_svg(filename, transform_params)
+ end
+ end
+
+ def vite_asset_url_with_host(source)
+ URI.join(root_url, vite_asset_url(source))
+ end
+end

application/app/helpers/meta_tags_helper.rb

@@ -0,0 +1,54 @@
+module MetaTagsHelper
+ def default_meta_tags
+ og_title = meta_tags[:title] || default_title
+ og_description = meta_tags[:description] || default_description
+
+ {
+ site: site_name,
+ title: default_title,
+ description: default_description,
+ keywords: default_keywords,
+ canonical: request.original_url,
+ reverse: true,
+ og: {
+ title: og_title,
+ type: "website",
+ description: og_description,
+ image: {
+ _: vite_asset_url_with_host("images/og.jpg"),
+ width: 1200,
+ height: 630
+ },
+ url: request.url,
+ site_name: site_name,
+ locale: :en_US
+ },
+ twitter: {
+ card: "summary_large_image",
+ site: "@twitter_account",
+ title: og_title,
+ description: og_description,
+ image: vite_asset_url_with_host("images/og.jpg"),
+ url: request.url
+ }
+ }
+ end
+
+ private
+
+ def site_name
+ "Site Name"
+ end
+
+ def default_title
+ "Default Title"
+ end
+
+ def default_description
+ "Default Description"
+ end
+
+ def default_keywords
+ "Default keywords"
+ end
+end