avo 4.0.0.beta.40 → 4.0.0.beta.41

data/app/views/avo/private/appearance.html.erb

@@ -286,7 +286,7 @@
   }
 </style>
 
-<div class="flex flex-col">
+<div class="flex flex-col" data-controller="appearance-preview">
   <%= render ui.panel(title: 'Color Tokens', description: 'Avo design system color variables for Light and Dark modes. Click any swatch to copy the CSS variable name.') do |panel| %>
     <% panel.with_body do %>
       <div class="flex flex-col gap-6">
@@ -296,14 +296,14 @@
           <p class="section-subtitle">Base colors used for layout and structure</p>
 
           <div class="tabs" id="foundations-tabs">
-            <button class="tab-button active" data-tab="foundations-light">☀️ Light Mode</button>
-            <button class="tab-button" data-tab="foundations-dark">🌙 Dark Mode</button>
+            <button data-action="click->appearance-preview#switchTab" class="tab-button active" data-tab="foundations-light">☀️ Light Mode</button>
+            <button data-action="click->appearance-preview#switchTab" class="tab-button" data-tab="foundations-dark">🌙 Dark Mode</button>
           </div>
 
           <div id="foundations-light" class="tab-content active">
             <div class="color-group">
               <% @foundation_tokens.each do |color| %>
-                <div class="color-swatch" onclick="copyToClipboard('<%= color[:name] %>')">
+                <div class="color-swatch" data-action="click->appearance-preview#copy" data-copy-text="<%= color[:name] %>">
                   <div class="swatch-color" style="background-color: var(<%= color[:name] %>)"></div>
                   <div class="swatch-info">
                     <div class="swatch-label"><%= color[:name] %></div>
@@ -321,7 +321,7 @@
             <div class="dark">
               <div class="color-group">
                 <% @foundation_tokens.each do |color| %>
-                  <div class="color-swatch" onclick="copyToClipboard('<%= color[:name] %>')">
+                  <div class="color-swatch" data-action="click->appearance-preview#copy" data-copy-text="<%= color[:name] %>">
                     <div class="swatch-color" style="background-color: var(<%= color[:name] %>)"></div>
                     <div class="swatch-info">
                       <div class="swatch-label"><%= color[:name] %></div>
@@ -339,7 +339,7 @@
           <h4 class="section-header" style="font-size: 0.95rem;">Neutral Scale</h4>
           <div class="neutral-scale">
             <% @neutral_scale.each do |item| %>
-              <div class="neutral-swatch" onclick="copyToClipboard('--color-avo-neutral-<%= item[:name] %>')">
+              <div class="neutral-swatch" data-action="click->appearance-preview#copy" data-copy-text="--color-avo-neutral-<%= item[:name] %>">
                 <div class="neutral-color" style="background-color: var(<%= item[:css_var] %>)"></div>
                 <div class="neutral-info">
                   <div class="neutral-label"><%= item[:name] %></div>
@@ -356,7 +356,7 @@
               <div class="accent-group">
                 <div class="accent-group-label" style="text-transform: capitalize;"><%= color[:name] %></div>
                 <div class="accent-group-swatches">
-                  <div class="neutral-swatch" onclick="copyToClipboard('--color-<%= color[:name] %>-500')">
+                  <div class="neutral-swatch" data-action="click->appearance-preview#copy" data-copy-text="--color-<%= color[:name] %>-500">
                     <div class="neutral-color" style="background-color: var(--color-<%= color[:name] %>-500)"></div>
                     <div class="neutral-info">
                       <div class="neutral-label">500</div>
@@ -364,7 +364,7 @@
                     </div>
                   </div>
 
-                  <div class="neutral-swatch" onclick="copyToClipboard('--color-<%= color[:name] %>-600')">
+                  <div class="neutral-swatch" data-action="click->appearance-preview#copy" data-copy-text="--color-<%= color[:name] %>-600">
                     <div class="neutral-color" style="background-color: var(--color-<%= color[:name] %>-600)"></div>
                     <div class="neutral-info">
                       <div class="neutral-label">600</div>
@@ -372,7 +372,7 @@
                     </div>
                   </div>
 
-                  <div class="neutral-swatch" onclick="copyToClipboard('--color-white')">
+                  <div class="neutral-swatch" data-action="click->appearance-preview#copy" data-copy-text="--color-white">
                     <div class="neutral-color" style="background-color: var(--color-white)"></div>
                     <div class="neutral-info">
                       <div class="neutral-label">fg</div>
@@ -391,10 +391,10 @@
           <p class="section-subtitle">Brand colors used for emphasis and accent elements</p>
 
           <div class="tabs" id="accents-tabs">
-            <button class="tab-button active" data-tab="accents-default">◼️ Default</button>
-            <button class="tab-button" data-tab="accents-light">☀️ Light Mode</button>
-            <button class="tab-button" data-tab="accents-dark">🌙 Dark Mode</button>
-            <button class="tab-button" data-tab="accents-options">🎨 All Colors</button>
+            <button data-action="click->appearance-preview#switchTab" class="tab-button active" data-tab="accents-default">◼️ Default</button>
+            <button data-action="click->appearance-preview#switchTab" class="tab-button" data-tab="accents-light">☀️ Light Mode</button>
+            <button data-action="click->appearance-preview#switchTab" class="tab-button" data-tab="accents-dark">🌙 Dark Mode</button>
+            <button data-action="click->appearance-preview#switchTab" class="tab-button" data-tab="accents-options">🎨 All Colors</button>
           </div>
 
           <div id="accents-default" class="tab-content active">
@@ -402,7 +402,7 @@
               <div class="accent-group-label">Light Mode</div>
               <div class="accent-cards accent-cards--detailed">
                 <% @accent_tokens.each do |color| %>
-                  <div class="accent-card accent-card--detailed" onclick="copyToClipboard('<%= color[:name] %>')">
+                  <div class="accent-card accent-card--detailed" data-action="click->appearance-preview#copy" data-copy-text="<%= color[:name] %>">
                     <div class="accent-swatch-color" style="background-color: <%= color[:value] %>">
                       <%= color[:name].sub('--color-', '') %>
                     </div>
@@ -420,7 +420,7 @@
               <div class="dark">
                 <div class="accent-cards accent-cards--detailed">
                   <% @accent_tokens.each do |color| %>
-                    <div class="accent-card accent-card--detailed" onclick="copyToClipboard('<%= color[:name] %>')">
+                    <div class="accent-card accent-card--detailed" data-action="click->appearance-preview#copy" data-copy-text="<%= color[:name] %>">
                       <div class="accent-swatch-color" style="background-color: <%= color[:value] %>">
                         <%= color[:name].sub('--color-', '') %>
                       </div>
@@ -440,7 +440,7 @@
           <div id="accents-light" class="tab-content">
             <div class="accent-cards accent-cards--detailed">
               <% @accent_tokens.each do |color| %>
-                <div class="accent-card accent-card--detailed" onclick="copyToClipboard('<%= color[:name] %>')">
+                <div class="accent-card accent-card--detailed" data-action="click->appearance-preview#copy" data-copy-text="<%= color[:name] %>">
                   <div class="accent-swatch-color" style="background-color: <%= color[:value] %>">
                     <%= color[:name].sub('--color-', '') %>
                   </div>
@@ -459,7 +459,7 @@
             <div class="dark">
               <div class="accent-cards accent-cards--detailed">
                 <% @accent_tokens.each do |color| %>
-                  <div class="accent-card accent-card--detailed" onclick="copyToClipboard('<%= color[:name] %>')">
+                  <div class="accent-card accent-card--detailed" data-action="click->appearance-preview#copy" data-copy-text="<%= color[:name] %>">
                     <div class="accent-swatch-color" style="background-color: <%= color[:value] %>">
                       <%= color[:name].sub('--color-', '') %>
                     </div>
@@ -478,7 +478,7 @@
           <div id="accents-options" class="tab-content">
             <div class="accent-cards">
               <% @accent_options.each do |color| %>
-                <div class="accent-card" onclick="copyToClipboard('--color-<%= color[:name] %>-500')">
+                <div class="accent-card" data-action="click->appearance-preview#copy" data-copy-text="--color-<%= color[:name] %>-500">
                   <div class="accent-swatch-color" style="background-color: var(--color-<%= color[:name] %>-500)"></div>
                   <div class="accent-swatch-info">
                     <div class="accent-name"><%= color[:name] %></div>
@@ -491,41 +491,6 @@
       </div>
     <% end %>
   <% end %>
-</div>
 
-<div class="copy-indicator" id="copyIndicator">Copied to clipboard!</div>
-
-<script>
-  // Tab switching
-  document.querySelectorAll('.tab-button').forEach(button => {
-    button.addEventListener('click', function(event) {
-      event.preventDefault();
-      const tabId = this.dataset.tab;
-      const tabGroup = this.closest('.tabs');
-      const tabContainer = tabGroup.parentElement;
-
-      // Hide all tabs in this group
-      tabContainer.querySelectorAll('.tab-content').forEach(tab => {
-        tab.classList.remove('active');
-      });
-
-      // Deactivate all buttons in this group
-      tabGroup.querySelectorAll('.tab-button').forEach(btn => {
-        btn.classList.remove('active');
-      });
-
-      // Show selected tab and activate button
-      document.getElementById(tabId).classList.add('active');
-      this.classList.add('active');
-    });
-  });
-
-  // Copy to clipboard
-  function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(() => {
-      const indicator = document.getElementById('copyIndicator');
-      indicator.classList.add('show');
-      setTimeout(() => indicator.classList.remove('show'), 2000);
-    });
-  }
-</script>
+  <div class="copy-indicator" data-appearance-preview-target="indicator">Copied to clipboard!</div>
+</div>

data/bin/setup

@@ -0,0 +1,91 @@
+#!/usr/bin/env ruby
+
+# Usage: bin/setup [options]
+#
+# One-stop setup for the Avo gem. Configures the upstream git remote, installs
+# gems and yarn deps, copies env templates, optionally brings up Docker Postgres,
+# prepares the dummy app's databases, and builds front-end assets.
+#
+# Options:
+#   --fast          Restore the dummy DB from the committed snapshot at
+#                   spec/dummy/db/fast_seed/ (sub-seconds). Skips ~60-120s of
+#                   db:seed work, including ~25 picsum.photos HTTP fetches.
+#   --docker        Use Docker Compose for Postgres. Default is to use your
+#                   local Postgres (no Docker).
+#   -h, --help      Print this message.
+
+require_relative "helpers"
+require "optparse"
+
+options = {fast: false, docker: false}
+
+OptionParser.new do |opts|
+  opts.banner = "Usage: bin/setup [--fast] [--docker]"
+  opts.on("--fast", "Restore from the committed fast-seed snapshot instead of running db:seed")
+  opts.on("--docker", "Use Docker Compose for Postgres (default: local Postgres)")
+  opts.on("-h", "--help", "Show this message") do
+    File.foreach(__FILE__)
+      .take_while { |l| l.start_with?("#") || l.strip.empty? }
+      .drop_while { |l| !l.start_with?("# Usage:") }
+      .each { |l| puts l.sub(/\A# ?/, "") }
+    exit
+  end
+end.parse!(into: options)
+
+app_root do
+  use_docker = options[:docker]
+
+  header "Configuring git"
+  target_upstream = "https://github.com/avo-hq/avo.git"
+  current_upstream = `git config --get remote.upstream.url`.chomp
+  if current_upstream.nil? || current_upstream.empty?
+    puts "Adding new remote 'upstream' to #{target_upstream}"
+    run! "git remote add upstream #{target_upstream}"
+  elsif current_upstream != target_upstream
+    puts "Updating existing remote 'upstream' to #{target_upstream}"
+    run! "git remote set-url upstream #{target_upstream}"
+  else
+    puts "Remote 'upstream' already points to #{target_upstream}, no change"
+  end
+
+  header "Installing gems"
+  run! "bundle install"
+
+  header "Installing Yarn packages"
+  run! "yarn"
+  run! "(cd spec/dummy; yarn)"
+
+  unless File.exist?("spec/dummy/.env.test")
+    run! "cp spec/dummy/.env.test.sample spec/dummy/.env.test"
+  end
+
+  if use_docker
+    header "Creating the Docker volume"
+    run! "docker volume create --name=avo-db-data"
+
+    header "Creating and running the Docker image"
+    run! "docker-compose up -d"
+  end
+
+  if options[:fast]
+    header "Preparing the database (fast path)"
+    # Restores from spec/dummy/db/fast_seed/ (committed snapshot).
+    # If the snapshot is missing or stale, the rake task prints an actionable error
+    # pointing at `bin/rails app:db:fast_seed:rebuild`.
+    run! "bin/rails app:db:fast_seed"
+    run! "RAILS_ENV=test bin/rails db:create db:schema:load"
+  else
+    header "Preparing the database"
+    run! "bin/rails db:setup"
+  end
+
+  header "Building assets"
+  run! "yarn build:js"
+  run! "yarn build:custom-js"
+  run! "yarn build:css"
+
+  if use_docker
+    header "Stopping the Docker image"
+    run! "docker-compose stop"
+  end
+end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.40" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.41" unless const_defined?(:VERSION)
 end

data/lib/generators/avo/templates/locales/avo.ar.yml

@@ -149,6 +149,13 @@ ar:
     pages: صفحات
     per_page: لكل صفحة
     prev_page: الصفحة السابقة
+    record:
+      few: سجلات
+      many: سجلات
+      one: سجل
+      other: سجلات
+      two: سجلان
+      zero: سجلات
     records_selected_from_all_pages_html: جميع السجلات مختارة من جميع الصفحات
     reload: إعادة تحميل
     remove_selection: إزالة التحديد

data/lib/generators/avo/templates/locales/avo.de.yml

@@ -135,6 +135,9 @@ de:
     pages: Seiten
     per_page: Pro Seite
     prev_page: Vorherige Seite
+    record:
+      one: Eintrag
+      other: Einträge
     records_selected_from_all_pages_html: Alle Einträge von allen Seiten ausgewählt
     reload: Neu laden
     remove_selection: Auswahl aufheben

data/lib/generators/avo/templates/locales/avo.en.yml

@@ -135,6 +135,9 @@ en:
     pages: Pages
     per_page: Per page
     prev_page: Previous page
+    record:
+      one: record
+      other: records
     records_selected_from_all_pages_html: All records selected from all pages
     reload: Reload
     remove_selection: Remove selection

data/lib/generators/avo/templates/locales/avo.es.yml

@@ -137,6 +137,9 @@ es:
     pages: Páginas
     per_page: Por página
     prev_page: Página anterior
+    record:
+      one: registro
+      other: registros
     records_selected_from_all_pages_html: Todos los registros seleccionados de todas las páginas.
     reload: Recargar
     remove_selection: Quitar la selección

data/lib/generators/avo/templates/locales/avo.fr.yml

@@ -137,6 +137,9 @@ fr:
     pages: Pages
     per_page: Par page
     prev_page: Page précédente
+    record:
+      one: enregistrement
+      other: enregistrements
     records_selected_from_all_pages_html: tous les éléments sélectionnés de toutes les pages
     reload: Recharger
     remove_selection: Supprimer la sélection

data/lib/generators/avo/templates/locales/avo.it.yml

@@ -135,6 +135,9 @@ it:
     pages: Pagine
     per_page: Per pagina
     prev_page: Pagina precedente
+    record:
+      one: record
+      other: record
     records_selected_from_all_pages_html: Tutti i record selezionati da tutte le pagine
     reload: Ricarica
     remove_selection: Rimuovi selezione

data/lib/generators/avo/templates/locales/avo.ja.yml

@@ -137,6 +137,9 @@ ja:
     pages: ページ
     per_page: ページあたり
     prev_page: 前のページ
+    record:
+      one: レコード
+      other: レコード
     records_selected_from_all_pages_html: 全ページから選択された全レコード
     reload: リロード
     remove_selection: 選択を解除

data/lib/generators/avo/templates/locales/avo.nb.yml

@@ -137,6 +137,9 @@ nb:
     pages: Sider
     per_page: Per side
     prev_page: Forrige side
+    record:
+      one: post
+      other: poster
     records_selected_from_all_pages_html: Alle poster valgt fra alle sider
     reload: Last inn på nytt
     remove_selection: Fjern valg

data/lib/generators/avo/templates/locales/avo.nl.yml

@@ -135,6 +135,9 @@ nl:
     pages: Pagina's
     per_page: Per pagina
     prev_page: Vorige pagina
+    record:
+      one: record
+      other: records
     records_selected_from_all_pages_html: Alle geselecteerde records van alle pagina's
     reload: Vernieuwen
     remove_selection: Selectie verwijderen

data/lib/generators/avo/templates/locales/avo.nn.yml

@@ -137,6 +137,9 @@ nn:
     pages: Sider
     per_page: Per side
     prev_page: Førre side
+    record:
+      one: post
+      other: postar
     records_selected_from_all_pages_html: Alle poster valgt fra alle sider
     reload: Last inn på nytt
     remove_selection: Fjern val

data/lib/generators/avo/templates/locales/avo.pl.yml

@@ -139,6 +139,11 @@ pl:
     pages: Strony
     per_page: Na stronie
     prev_page: Poprzednia strona
+    record:
+      few: rekordy
+      many: rekordów
+      one: rekord
+      other: rekordów
     records_selected_from_all_pages_html: Wybrane rekordy z wszystkich stron
     reload: Odśwież
     remove_selection: Usuń zaznaczenie

data/lib/generators/avo/templates/locales/avo.pt-BR.yml

@@ -137,6 +137,9 @@ pt-BR:
     pages: Páginas
     per_page: Por página
     prev_page: Página anterior
+    record:
+      one: registro
+      other: registros
     records_selected_from_all_pages_html: Todos os registros de todas as páginas selecionados
     reload: Recarregar
     remove_selection: Remover seleção

data/lib/generators/avo/templates/locales/avo.pt.yml

@@ -137,6 +137,9 @@ pt:
     pages: Páginas
     per_page: Por página
     prev_page: Página anterior
+    record:
+      one: registo
+      other: registos
     records_selected_from_all_pages_html: Todos os itens de todas as páginas selecionados
     reload: Recarregar
     remove_selection: Remover seleção

data/lib/generators/avo/templates/locales/avo.ro.yml

@@ -140,6 +140,10 @@ ro:
     pages: Pagini
     per_page: Pe pagină
     prev_page: Pagina anterioara
+    record:
+      few: înregistrări
+      one: înregistrare
+      other: înregistrări
     records_selected_from_all_pages_html: Toate selectate din toate paginile
     reload: Reîncarcă
     remove_selection: Șterge selecția

data/lib/generators/avo/templates/locales/avo.ru.yml

@@ -139,6 +139,11 @@ ru:
     pages: Страницы
     per_page: На странице
     prev_page: Предыдущая страница
+    record:
+      few: записи
+      many: записей
+      one: запись
+      other: записей
     records_selected_from_all_pages_html: Все записи выбраны со всех страниц
     reload: Обновить
     remove_selection: Убрать выбор

data/lib/generators/avo/templates/locales/avo.tr.yml

@@ -137,6 +137,9 @@ tr:
     pages: Sayfalar
     per_page: Sayfa başına
     prev_page: Önceki sayfa
+    record:
+      one: kayıt
+      other: kayıtlar
     records_selected_from_all_pages_html: Tüm sayfalardan seçilen tüm kayıtlar
     reload: Yeniden yükle
     remove_selection: Seçimi sil

data/lib/generators/avo/templates/locales/avo.ua.yml

@@ -137,6 +137,11 @@ ua:
     pages: Pages
     per_page: На сторінці
     prev_page: Попередня сторінка
+    record:
+      few: записи
+      many: записів
+      one: запис
+      other: записів
     records_selected_from_all_pages_html: Вибрані всі записи з усіх сторінок
     reload: Перезавантажити
     remove_selection: Видалити вибір

data/lib/generators/avo/templates/locales/avo.zh-TW.yml

@@ -135,6 +135,9 @@ zh-TW:
     pages: 頁面
     per_page: 每頁顯示
     prev_page: 上一頁
+    record:
+      one: 筆記錄
+      other: 筆記錄
     records_selected_from_all_pages_html: 所有頁面中選中的記錄
     reload: 重新載入
     remove_selection: 清除選擇

data/lib/generators/avo/templates/locales/avo.zh.yml

@@ -135,6 +135,9 @@ zh:
     pages: 页面
     per_page: 每页显示
     prev_page: 上一页
+    record:
+      one: 条记录
+      other: 条记录
     records_selected_from_all_pages_html: 所有页面中选中的记录
     reload: 重新加载
     remove_selection: 清除选择

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta.40
+  version: 4.0.0.beta.41
 platform: ruby
 authors:
 - Adrian Marin
@@ -749,6 +749,7 @@ files:
 - app/javascript/js/controllers/actions_overflow_controller.js
 - app/javascript/js/controllers/actions_picker_controller.js
 - app/javascript/js/controllers/appearance_controller.js
+- app/javascript/js/controllers/appearance_preview_controller.js
 - app/javascript/js/controllers/attachments_controller.js
 - app/javascript/js/controllers/base_modal_controller.js
 - app/javascript/js/controllers/boolean_filter_controller.js
@@ -891,10 +892,10 @@ files:
 - avo.gemspec
 - bin/dev
 - bin/helpers.rb
-- bin/init
 - bin/prod
 - bin/rails
 - bin/rspec
+- bin/setup
 - bin/spring
 - bin/test
 - config/brakeman.ignore

data/bin/init

@@ -1,52 +0,0 @@
-#!/usr/bin/env ruby
-
-require_relative 'helpers'
-
-app_root do
-  use_docker = ask(
-    question: 'Would you like to use Docker Compose for Postgres?',
-    valid_answers: ['y', 'N']
-  )
-
-  header 'Configuring git'
-  target_upstream = "https://github.com/avo-hq/avo.git"
-  current_upstream = `git config --get remote.upstream.url`.chomp
-  if current_upstream.nil? || current_upstream.empty?
-    puts "Adding new remote 'upstream' to #{target_upstream}"
-    run! "git remote add upstream #{target_upstream}"
-  elsif current_upstream != target_upstream
-    puts "Updating existing remote 'upstream' to #{target_upstream}"
-    run! "git remote set-url upstream #{target_upstream}"
-  else
-    puts "Remote 'upstream' already points to #{target_upstream}, no change"
-  end
-
-  header 'Installing gems'
-  run! 'bundle install'
-
-  header 'Installing Yarn packages'
-  run! 'yarn'
-  run! '(cd spec/dummy; yarn)'
-  run! '(cp spec/dummy/.env.test.sample spec/dummy/.env.test)'
-
-  if use_docker == 'y'
-    header 'Creating the Docker volume'
-    run! 'docker volume create --name=avo-db-data'
-
-    header 'Creating and running the Docker image'
-    run! 'docker-compose up -d'
-  end
-
-  header 'Preparing the database'
-  run! 'bin/rails db:setup'
-
-  header 'Building assets'
-  run! 'yarn build:js'
-  run! 'yarn build:custom-js'
-  run! 'yarn build:css'
-
-  if use_docker == 'y'
-    header 'Stopping the Docker image'
-    run! 'docker-compose stop'
-  end
-end