frozen_rails 0.0.4 → 0.0.6

data/lib/generators/frozen/templates/ui/assets/theme/select-arrow.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="62.5" width="116.9">
+    <path d="M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z"/>
+</svg>

data/lib/generators/frozen/templates/ui/assets/theme/typography.css

@@ -0,0 +1,89 @@
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+  margin-top: 24px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: var(--text-bright);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+q::before {
+  content: none;
+}
+
+q::after {
+  content: none;
+}
+
+blockquote,
+q {
+  border-left: 4px solid var(--focus);
+  margin: 1.5em 0;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  font-style: normal;
+  border: 0;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto\:']::before {
+  content: '📧 ';
+}
+
+a[href^='tel\:']::before {
+  content: '📞 ';
+}
+
+a[href^='sms\:']::before {
+  content: '💬 ';
+}
+
+mark {
+  background-color: var(--highlight);
+  border-radius: 2px;
+  padding: 0 2px 0 2px;
+  color: #000;
+}
+
+a > code,
+a > strong {
+  color: inherit;
+}

data/lib/generators/frozen/templates/ui/assets/theme/variables.css

@@ -0,0 +1,49 @@
+:root {
+  --background-body: #fff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000;
+  --text-muted: #70777f;
+  --links: #0076d1;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --button-base: #d0cfcf;
+  --button-hover: #9b9b9b;
+  --scrollbar-thumb: rgb(170, 170, 170);
+  --scrollbar-thumb-hover: var(--button-hover);
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #ff0;
+  --select-arrow: url("select-arrow.svg");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-body: #202b38;
+    --background: #161f27;
+    --background-alt: #1a242f;
+    --selection: #1c76c5;
+    --text-main: #dbdbdb;
+    --text-bright: #fff;
+    --text-muted: #a9b1ba;
+    --links: #41adff;
+    --focus: #0096bfab;
+    --border: #526980;
+    --code: #ffbe85;
+    --animation-duration: 0.1s;
+    --button-base: #0c151c;
+    --button-hover: #040a0f;
+    --scrollbar-thumb: var(--button-hover);
+    --scrollbar-thumb-hover: rgb(0, 0, 0);
+    --form-placeholder: #a9a9a9;
+    --form-text: #fff;
+    --variable: #d941e2;
+    --highlight: #efdb43;
+    --select-arrow: url("select-arrow.svg");
+  }
+}

data/lib/generators/frozen/templates/ui/assets/unpoly/index.js

@@ -0,0 +1,7 @@
+// Import Unpoly (side effect: sets window.up)
+import 'unpoly'
+import 'unpoly/unpoly.css'
+
+up.link.config.followSelectors.push('a[href]')
+up.link.config.preloadSelectors.push('a[href]')
+up.form.config.submitSelectors.push(['form'])

data/lib/generators/frozen/templates/ui/demo_component/counter_component.css

@@ -0,0 +1,18 @@
+.counter {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.counter button {
+  min-width: 2.25rem;
+  min-height: 2.25rem;
+  padding: 0.35rem 0.75rem;
+}
+
+.counter span {
+  min-width: 2rem;
+  display: inline-block;
+  text-align: center;
+  font-weight: 600;
+}

data/lib/generators/frozen/templates/ui/demo_component/counter_component.html.erb

@@ -0,0 +1,6 @@
+<div class="counter" data-compiler="counter" up-data="<%= { initialValue: @initial_value }.to_json %>">
+  <% if @label %><h2><%= t('.label') %></h2><% end %>
+  <button type="button" data-element="counter:decrement">−</button>
+  <span data-element="counter:value"><%= @initial_value %></span>
+  <button type="button" data-element="counter:increment">+</button>
+</div>

data/lib/generators/frozen/templates/ui/demo_component/counter_component.js

@@ -0,0 +1,24 @@
+up.compiler('[data-compiler="counter"]', (element, { initialValue }) => {
+  const display = element.querySelector('[data-element="counter:value"]')
+  const decrementButton = element.querySelector('[data-element="counter:decrement"]')
+  const incrementButton = element.querySelector('[data-element="counter:increment"]')
+
+  let value = Number(initialValue || 0)
+
+  const updateDisplay = () => {
+    display.textContent = value
+  }
+
+  const changeValue = (delta) => {
+    value += delta
+    updateDisplay()
+  }
+
+  const destructors = [
+    up.on(decrementButton, 'click', () => changeValue(-1)),
+    up.on(incrementButton, 'click', () => changeValue(1))
+  ]
+
+  updateDisplay()
+  return destructors
+})

data/lib/generators/frozen/templates/ui/demo_component/counter_component.rb

@@ -0,0 +1,6 @@
+class CounterComponent < ApplicationComponent
+  def initialize(initial_value: 0, label: false)
+    @initial_value = initial_value
+    @label = label
+  end
+end

data/lib/generators/frozen/templates/ui/demo_component/counter_component.yml

@@ -0,0 +1,5 @@
+en:
+  label: "Bean counter"
+
+de:
+  label: "Erbsenzähler"

data/lib/generators/frozen/templates/ui/demo_component_tests/counter_component_preview.rb

@@ -0,0 +1,54 @@
+class CounterComponentPreview < ViewComponent::Preview
+  # A counter with custom initial value
+  # ---
+  # You probably don't want to use this component for real,
+  # because it doesn't persist the counter value anywhere.
+  #
+  # @label Custom
+  # @param initial_value [Integer]
+  def custom(initial_value: 0)
+    render CounterComponent.new(initial_value: initial_value)
+  end
+
+  # @!group Initial Values
+
+  # @label Default
+  def zero
+    render CounterComponent.new
+  end
+
+  # @label Manually set
+  def forty_two
+    render CounterComponent.new(initial_value: 42)
+  end
+
+  # @!endgroup
+
+  # @hidden
+  def negative_one
+    render CounterComponent.new(initial_value: -1)
+  end
+
+  # @!group I18n
+
+  # @label English
+  def english
+    I18n.with_locale(:en) do
+      render CounterComponent.new(label: true)
+    end
+  end
+
+  # Caution
+  # ---
+  # Getting too sophisticated within a preview isn't supported:
+  # - [https://github.com/lookbook-hq/lookbook/issues/793](https://github.com/lookbook-hq/lookbook/issues/793)
+  #
+  # @label German [Lookbook BUG, see Notes tab]
+  def german
+    I18n.with_locale(:de) do
+      render CounterComponent.new(label: true)
+    end
+  end
+
+  # @!endgroup
+end

data/lib/generators/frozen/templates/ui/demo_component_tests/counter_component_spec.js

@@ -0,0 +1,25 @@
+describe('CounterComponent', () => {
+  let component, decrement, increment, value
+
+  beforeEach(() => {
+    const container = loadPreviewScenario('counter', 'zero')
+    component = container.querySelector('.counter')
+    decrement = component.querySelector('[data-element="counter:decrement"]')
+    increment = component.querySelector('[data-element="counter:increment"]')
+    value = component.querySelector('[data-element="counter:value"]')
+  })
+
+  it('shows the initial value', () => {
+    expect(value).toContainText('0')
+  })
+
+  it('increments the counter when the increment button is clicked', () => {
+    increment.click()
+    expect(value).toContainText('1')
+  })
+
+  it('decrements the counter when the decrement button is clicked', () => {
+    decrement.click()
+    expect(value).toContainText('-1')
+  })
+})

data/lib/generators/frozen/templates/ui/demo_component_tests/counter_component_test.rb

@@ -0,0 +1,40 @@
+require "test_helper"
+require "view_component/test_helpers"
+
+class CounterComponentTest < ActionView::TestCase
+  include ViewComponent::TestHelpers
+  include LookbookHelper
+
+  def test_renders_counter_structure
+    render_inline(CounterComponent.new(initial_value: 5))
+
+    assert_selector ".counter"
+    assert_selector "button[data-element='counter:decrement']", text: "−"
+    assert_selector "span[data-element='counter:value']", text: "5"
+    assert_selector "button[data-element='counter:increment']", text: "+"
+
+    data = JSON.parse(page.find(".counter")["up-data"])
+    assert_equal 5, data["initialValue"]
+  end
+
+  def test_defaults_to_zero
+    render_inline(CounterComponent.new)
+
+    assert_selector "span[data-element='counter:value']", text: "0"
+  end
+
+  # https://viewcomponent.org/guide/previews.html#previews-as-test-cases
+  def test_render_view_component_preview
+    render_preview(:zero)
+
+    assert_selector "span[data-element='counter:value']", text: "0"
+  end
+
+  # See `app/helpers/lookbook_helper.rb`.
+  def test_render_lookbook_preview
+    render_preview_scenario("counter", "zero")
+    @page = Capybara.string(rendered)
+
+    assert_selector "span[data-element='counter:value']", text: "0"
+  end
+end

data/lib/generators/frozen/templates/ui/demo_component_tests/docs/styleguide.md.erb

@@ -0,0 +1,30 @@
+# Component Styleguide
+
+- Use the provided `component` generator to scaffold new components. It also supports namespaces:
+  - `bin/rails g component Users::AvatarComponent`.
+  - Prefer a plural for your namespaces to avoid clashing with your models.
+- Put your components into `app/components` and their tests into `test/components`.
+- Keep filenames consistent.
+- Delete files which you don't need for your component.
+
+## ViewComponent
+
+- Use `ApplicationComponent` as the base class.
+- Prefer using slots over configuration via attributes.
+- Consider using a Lookbook preview as the starting point for your view specs.
+- Prefer private methods within components over helpers. Use concerns to share behavior.
+
+## Unpoly Compilers
+
+- Use `data-compiler` on the root element and `data-element` to connect your JS logic to the DOM.
+- Pass data into components via `up-data`.
+- Return a list of destructors from your compiler if necessary: [Unpoly Docs: destructor](https://unpoly.com/enhancing-elements#destructor)
+- Consider using a Lookbook preview as the starting point for your Jasmine specs.
+
+## CSS
+
+- Use BEM-style CSS.
+- Keep consistent with the naming conventions from the provided generator:
+  - We use an abbreviated style that differs from regular BEM.
+  - No underscores at all.
+  - Modifiers are just `-modifier` without repeating the block name.

data/lib/generators/frozen/templates/ui/demo_component_tests/manual_test_component_spec.js

@@ -0,0 +1,14 @@
+describe('ManualTestComponent', () => {
+  let heading, paragraph
+
+  beforeEach(() => {
+    const container = loadPreviewScenario('manual_test', 'with_multiple_top_level_tags')
+    heading = container.querySelector('h1')
+    paragraph = container.querySelector('p')
+  })
+
+  it('loads both tags correctly', () => {
+    expect(heading).toContainText('Heading')
+    expect(paragraph).toContainText('Paragraph')
+  })
+})

data/lib/generators/frozen/templates/ui/esbuild.config.js

@@ -0,0 +1,79 @@
+import { build, context, formatMessages } from 'esbuild'
+import esbuildPluginImportGlob from 'esbuild-plugin-import-glob'
+import esbuildPluginTextReplace from 'esbuild-plugin-text-replace'
+import manifestPlugin from 'esbuild-manifest-plugin'
+const { default: importGlob } = esbuildPluginImportGlob
+
+const path = await import('path')
+const fs = await import('fs')
+
+const railsEnv = process.env.RAILS_ENV || 'development'
+const outdir = path.join(process.cwd(), 'public/assets')
+const errorFilePath = path.join(outdir, `esbuild_error_${railsEnv}.txt`)
+
+if (!fs.existsSync(outdir)) { fs.mkdirSync(outdir) }
+
+async function handleErrors(errors) {
+  const formattedErrors = await formatMessages(errors, { kind: 'error' })
+  const output = formattedErrors.join('\n')
+
+  if (output) {
+    fs.writeFileSync(errorFilePath, output)
+  } else if (fs.existsSync(errorFilePath)) {
+    fs.truncate(errorFilePath, 0, () => {})
+  }
+}
+
+const config = {
+  entryPoints: [
+    'application.js',
+    'jasmine.js',
+    'static.js'
+  ],
+  bundle: true,
+  sourcemap: true,
+  format: 'esm',
+  outdir,
+  absWorkingDir: path.join(process.cwd(), 'app/assets'),
+  metafile: true,
+  publicPath: '/assets',
+  entryNames: '[dir]/[name]-[hash]',
+  assetNames: '[dir]/[name]-[hash]',
+  loader: {
+    '.css': 'css',
+    '.ico': 'copy',
+    '.jpg': 'copy',
+    '.png': 'copy',
+    '.svg': 'copy',
+    '.webp': 'copy',
+    '.json': 'copy',
+    '.ttf': 'file',
+    '.woff': 'file',
+    '.woff2': 'file',
+  },
+  plugins: [
+    esbuildPluginTextReplace({
+      include: /jasmine-core\/lib\/jasmine-core\/jasmine\.js/,
+      pattern: [
+        ['let jasmineRequire;', 'let jasmineRequire; const global = window;'],
+      ]
+    }),
+    importGlob(),
+    manifestPlugin(),
+    {
+      name: 'handleErrors',
+      setup: (build) => {
+        build.onEnd(async ({ errors }) => {
+          await handleErrors(errors)
+        })
+      }
+    }
+  ],
+}
+
+if (process.argv.includes('--watch')) {
+  const ctx = await context(config)
+  ctx.watch()
+} else {
+  await build(config)
+}

data/lib/generators/frozen/templates/ui/jasmine/controllers/jasmine_controller.rb

@@ -0,0 +1,12 @@
+class JasmineController < ApplicationController
+  helper :all
+
+  content_security_policy do |policy|
+    policy.script_src :self, :unsafe_eval
+  end
+
+  etag { SecureRandom.hex(16) }
+
+  def index
+  end
+end

data/lib/generators/frozen/templates/ui/jasmine/views/jasmine/index.html.erb

@@ -0,0 +1,19 @@
+<div class="test-cases">
+  <% Lookbook.previews.each do |preview| %>
+    <% preview.send(:scenario_entities).each do |scenario| %>
+      <template data-component="<%= preview.lookup_path %>" data-scenario="<%= scenario.name %>">
+        <%= render_preview_scenario(preview, scenario) %>
+      </template>
+    <% end %>
+  <% end %>
+
+  <!--
+    This is a manual test scenario with multiple top-level tags to verify that the test framework can handle it.
+    Neither the ViewComponent::Preview nor Lookbook::Preview classes support multiple top-level tags, but if you
+    need such a test case, you can define it directly in the Jasmine layout as shown here.
+  -->
+  <template data-component="manual_test" data-scenario="with_multiple_top_level_tags">
+    <h1>Heading</h1>
+    <p>Paragraph</p>
+  </template>
+</div>

data/lib/generators/frozen/templates/ui/jasmine/views/layouts/jasmine.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <%= stylesheet_link_tag 'jasmine' %>
+
+    <!-- Referencing npm assets from HTML is currently broken. -->
+    <!-- <link href="<%#= asset_path('jasmine_favicon.png') %>" rel="icon" type="image/png"> -->
+  </head>
+
+  <body>
+    <%= yield %>
+    <%= javascript_include_tag 'jasmine' %>
+  </body>
+</html>

data/lib/generators/frozen/templates/ui/lib/generators/component/component_generator.rb

@@ -0,0 +1,72 @@
+class ComponentGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path("../../templates/view_component/frozen_extensions", __dir__)
+
+  argument :attrs, type: :array, default: [], banner: "attribute"
+
+  def generate_component_with_preview_and_locale
+    in_root do
+      system("bin/rails generate view_component:component #{name} #{attrs.join(" ")} --preview --preview_path=test/components --locale --skip-test-framework --skip-template-engine")
+    end
+  end
+
+  def add_erb_template
+    template "erb_template.html.erb.tt", File.join("app/components", class_path, "#{file_name}_component.html.erb")
+  end
+
+  def add_css_file
+    template "bem_stylesheet.css.tt", File.join("app/components", class_path, "#{file_name}_component.css")
+  end
+
+  def add_unpoly_compiler
+    template "unpoly_compiler.js.tt", File.join("app/components", class_path, "#{file_name}_component.js")
+  end
+
+  def add_view_spec
+    template "view_spec.rb.tt", File.join("test/components", class_path, "#{file_name}_component_test.rb")
+  end
+
+  def add_jasmine_spec
+    template "jasmine_spec.js.tt", File.join("test/components", class_path, "#{file_name}_component_spec.js")
+  end
+
+  def fix_module_nesting_via_rubocop_because_it_was_impossible_to_get_module_namespacing_to_work_as_expected
+    in_root do
+      system("bash", "-c", 'bin/rubocop --only Style/ClassAndModuleChildren,Layout/IndentationWidth,Layout/CommentIndentation --autocorrect-all --force-exclusion --config <(echo "Style/ClassAndModuleChildren: { EnforcedStyle: nested }")')
+    end
+  end
+
+  private
+
+  def js_attributes
+    attrs.map { |attr| attr.camelize(:lower) }
+  end
+
+  def css_attributes
+    attrs.map(&:dasherize)
+  end
+
+  def bem_selectors
+    base = file_path.gsub("/", "---").dasherize
+    [
+      base,
+      *css_attributes.map { |attr| "#{base}--#{attr}" }
+    ]
+  end
+
+  def up_data
+    data = js_attributes.zip(attrs).map { |js_attr, attr| "#{js_attr}: @#{attr}" }.join(", ")
+    "{ #{data} }"
+  end
+
+  def up_data_params
+    data = js_attributes.join(", ")
+    "{ #{data} }"
+  end
+
+  # https://github.com/ViewComponent/view_component/blob/main/lib/generators/view_component/preview/preview_generator.rb#L32
+  def render_signature
+    return if attributes.blank?
+
+    attributes.map { |attr| %(#{attr.name}: "#{attr.name}") }.join(", ")
+  end
+end

data/lib/generators/frozen/templates/ui/lib/tasks/assets.rake

@@ -0,0 +1,14 @@
+if Rake::Task.task_defined?("assets:precompile")
+  Rake::Task["assets:precompile"].clear
+end
+
+namespace :assets do
+  desc "Build frontend assets with yarn"
+  task :precompile do
+    system("yarn build", exception: true)
+  end
+end
+
+if Rake::Task.task_defined?("test:prepare")
+  Rake::Task["test:prepare"].enhance([ "assets:precompile" ])
+end

data/lib/generators/frozen/templates/ui/lib/templates/view_component/component/component.rb.tt

@@ -0,0 +1,19 @@
+<% module_namespacing do -%>
+class <%= class_name %><%= options[:skip_suffix] ? "" : "Component" %> < <%= parent_class %>
+<%- if inline_template? -%>
+  <%= template_engine %>_template <<~<%= template_engine.upcase %>
+    <h1>Hello, World!</h1>
+  <%= template_engine.upcase %>
+<%- end -%>
+<%- if initialize_signature? -%>
+  def initialize(<%= initialize_signature %>)
+    <%= initialize_body %>
+  end
+<%- end -%>
+<%- if initialize_call_method_for_inline? -%>
+  def call
+    content_tag :h1, "Hello world!"<%= ", data: { controller: \"#{stimulus_controller}\" }" if options["stimulus"] %>
+  end
+<%- end -%>
+end
+<% end -%>

data/lib/generators/frozen/templates/ui/lib/templates/view_component/frozen_extensions/bem_stylesheet.css.tt

@@ -0,0 +1,3 @@
+<% bem_selectors.each do |selector| -%>
+<%= selector %> {}
+<% end -%>

data/lib/generators/frozen/templates/ui/lib/templates/view_component/frozen_extensions/erb_template.html.erb.tt

@@ -0,0 +1,5 @@
+<div class="<%= file_path.gsub('/', '---').dasherize %>" data-compiler="<%= file_path.gsub('/', '-') %>" up-data="<%%= <%= "{ #{attrs.map { |attr| "#{attr.camelize(:lower)}: @#{attr}" }.join(", ")} }" %>.to_json %>">
+<% css_attributes.zip(js_attributes, attrs).each do |css_attr, js_attr, ruby_attr| -%>
+  <div class="<%= file_path.gsub('/', '---').dasherize %>--<%= css_attr %>" data-element="<%= file_path.gsub('/', '-') %>:<%= js_attr %>"><%%= @<%= ruby_attr %> %></div>
+<% end -%>
+</div>

data/lib/generators/frozen/templates/ui/lib/templates/view_component/frozen_extensions/jasmine_spec.js.tt

@@ -0,0 +1,15 @@
+describe('[data-compiler="<%= file_path.gsub('/', '-') %>"]', () => {
+  let <%= ["component", *js_attributes].join(', ') %>
+
+  beforeEach(() => {
+    const container = loadPreviewScenario('<%= file_path.gsub('/', '-') %>', 'default')
+    component = container.querySelector('.<%= file_path.gsub('/', '---').dasherize %>')
+<% js_attributes.each do |attribute| -%>
+    <%= attribute %> = component.querySelector('[data-element="<%= file_path.gsub('/', '-') %>:<%= attribute %>"]')
+<% end -%>
+  })
+
+  it('works', () => {
+    // TODO: implement spec
+  })
+})

data/lib/generators/frozen/templates/ui/lib/templates/view_component/frozen_extensions/unpoly_compiler.js.tt

@@ -0,0 +1,5 @@
+up.compiler('[data-compiler="<%= file_path.gsub('/', '-') %>"]', (element, <%= up_data_params %>) => {
+<% js_attributes.each do |attribute| -%>
+  const <%= attribute %>Element = element.querySelector('[data-element="<%= file_path.gsub('/', '-') %>:<%= attribute %>"]')
+<% end -%>
+})