senren-ui 0.2.0 → 0.4.0

data/templates/controllers/accordion_controller.js

@@ -6,6 +6,19 @@ export default class extends Controller {
   static targets = ["trigger", "panel"]
   static values = { multiple: Boolean }
 
+  // Every pending close timer, so disconnect() can clear them. A panel mid-close
+  // when Turbo swaps the page would otherwise leave a timer holding a reference
+  // to a detached element -- caught by bin/performance, which fails the build
+  // for a timer no disconnect() clears.
+  connect() {
+    this._timers = new Set()
+  }
+
+  disconnect() {
+    this._timers?.forEach(clearTimeout)
+    this._timers?.clear()
+  }
+
   toggle(event) {
     const trigger = event.currentTarget
     const panel = this._panelFor(trigger.dataset.panelId)
@@ -13,12 +26,64 @@ export default class extends Controller {
 
     if (!this.multipleValue) this._closeAll()
     trigger.setAttribute("aria-expanded", nextOpen ? "true" : "false")
-    if (panel) panel.hidden = !nextOpen
+    this._setOpen(panel, nextOpen)
+  }
+
+  // The panel animates from grid-template-rows 0fr to 1fr, and it also carries
+  // the `hidden` attribute so collapsed content is not focusable or read aloud.
+  // Those two want opposite things: `hidden` has to be off for the browser to
+  // animate anything, and on once the panel is closed.
+  //
+  // Opening: drop `hidden`, then flip the row on the next frame -- setting both
+  // in one go gives the browser no first value to animate from, and the panel
+  // snaps open.
+  //
+  // Closing: flip the row now, restore `hidden` when the transition ends.
+  _setOpen(panel, open) {
+    if (!panel) return
+
+    if (open) {
+      panel.hidden = false
+      requestAnimationFrame(() => {
+        panel.classList.remove("grid-rows-[0fr]")
+        panel.classList.add("grid-rows-[1fr]")
+      })
+      return
+    }
+
+    panel.classList.remove("grid-rows-[1fr]")
+    panel.classList.add("grid-rows-[0fr]")
+    this._hideAfterTransition(panel)
+  }
+
+  // `transitionend` alone is not enough: it never fires when the panel is
+  // already collapsed, when a reduced-motion setting removes the transition, or
+  // when the element is off-screen. Without the timeout those panels would stay
+  // focusable forever, so whichever arrives first wins and the other is dropped.
+  _hideAfterTransition(panel) {
+    const finish = () => {
+      clearTimeout(timer)
+      this._timers?.delete(timer)
+      panel.removeEventListener("transitionend", onEnd)
+      if (panel.classList.contains("grid-rows-[0fr]")) panel.hidden = true
+    }
+
+    const onEnd = (event) => {
+      if (event.target === panel && event.propertyName === "grid-template-rows") finish()
+    }
+
+    const timer = setTimeout(finish, 300)
+    this._timers?.add(timer)
+    panel.addEventListener("transitionend", onEnd)
   }
 
   _closeAll() {
-    this.triggerTargets.forEach((trigger) => { trigger.setAttribute("aria-expanded", "false") })
-    this.panelTargets.forEach((panel) => { panel.hidden = true })
+    this.triggerTargets.forEach((trigger) => {
+      trigger.setAttribute("aria-expanded", "false")
+    })
+    this.panelTargets.forEach((panel) => {
+      this._setOpen(panel, false)
+    })
   }
 
   _panelFor(id) {

data/templates/controllers/api_key_field_controller.js

@@ -6,7 +6,8 @@ export default class extends Controller {
   static values = {
     revealLabel: String,
     hideLabel: String,
-    copyLabel: String
+    copyLabel: String,
+    copiedStatus: String
   }
 
   connect() {
@@ -31,6 +32,6 @@ export default class extends Controller {
       this.inputTarget.setSelectionRange(0, 0)
     }
 
-    if (this.hasStatusTarget) this.statusTarget.textContent = `${this.copyLabelValue} complete`
+    if (this.hasStatusTarget) this.statusTarget.textContent = this.copiedStatusValue
   }
 }

data/templates/controllers/carousel_controller.js

@@ -4,6 +4,7 @@ import { Controller } from "@hotwired/stimulus"
 // Local UI: previous/next controls, dots, and arrow-key navigation.
 export default class extends Controller {
   static targets = ["slide", "dot", "status"]
+  static values = { statusTemplate: String }
 
   connect() {
     this.index = 0
@@ -45,6 +46,10 @@ export default class extends Controller {
     this.dotTargets.forEach((dot, dotIndex) => {
       dot.setAttribute("aria-current", dotIndex === this.index ? "true" : "false")
     })
-    if (this.hasStatusTarget) this.statusTarget.textContent = `Slide ${this.index + 1} of ${count}`
+    if (this.hasStatusTarget && this.statusTemplateValue) {
+      this.statusTarget.textContent = this.statusTemplateValue
+        .replaceAll("%{current}", this.index + 1)
+        .replaceAll("%{total}", count)
+    }
   }
 }

data/templates/controllers/cart_controller.js

@@ -27,9 +27,11 @@ export default class extends Controller {
     if (!line) return
 
     const id = line.dataset.lineId
+    // Read before the node goes away.
+    const removeUrl = line.dataset.removeUrl || null
     line.remove()
     this._recalculate()
-    this.dispatch("removed", { detail: { id, subtotalCents: this.subtotalCentsValue } })
+    this.dispatch("removed", { detail: { id, removeUrl, subtotalCents: this.subtotalCentsValue } })
   }
 
   // The value is the state; this renders it. Called on initialization too, so

data/templates/controllers/clipboard_controller.js

@@ -4,7 +4,7 @@ import { Controller } from "@hotwired/stimulus"
 // Local UI: copy text to the clipboard and announce success.
 export default class extends Controller {
   static targets = ["source", "button", "status"]
-  static values = { copiedLabel: String }
+  static values = { copiedLabel: String, copiedStatus: String }
 
   async copy() {
     const value = this.sourceTarget.value || this.sourceTarget.textContent
@@ -13,8 +13,8 @@ export default class extends Controller {
     if (!this.hasButtonTarget) return
 
     const original = this.buttonTarget.textContent
-    this.buttonTarget.textContent = this.copiedLabelValue || "Copied"
-    if (this.hasStatusTarget) this.statusTarget.textContent = "Copied to clipboard"
+    if (this.copiedLabelValue) this.buttonTarget.textContent = this.copiedLabelValue
+    if (this.hasStatusTarget) this.statusTarget.textContent = this.copiedStatusValue
 
     clearTimeout(this._resetTimer)
     this._resetTimer = setTimeout(() => {

data/templates/controllers/rich_text_editor_lite_controller.js

@@ -16,7 +16,7 @@ const DROPPED_PASTE_TAGS = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "
 // Local UI: tiny contenteditable toolbar synced to a hidden textarea.
 export default class extends Controller {
   static targets = ["editor", "input", "button"]
-  static values = { debug: Boolean }
+  static values = { debug: Boolean, linkPrompt: String }
 
   connect() {
     this.savedRange = null
@@ -59,7 +59,7 @@ export default class extends Controller {
     this.debug("format:start", () => ({ command, before: this.snapshot() }))
     this.restoreSelection()
     if (command === "createLink") {
-      const url = window.prompt("Paste a URL")
+      const url = window.prompt(this.linkPromptValue)
       this.debug("createLink:prompt", () => ({ url, afterPrompt: this.snapshot() }))
       if (!url) return
       this.restoreSelection()

data/templates/controllers/theme_toggle_controller.js

@@ -3,7 +3,8 @@ import { Controller } from "@hotwired/stimulus"
 // senren--theme-toggle
 // Local UI: toggles the document dark class and stores the preference.
 export default class extends Controller {
-  static targets = ["label", "icon"]
+  static targets = ["label", "iconLight", "iconDark"]
+  static values = { lightLabel: String, darkLabel: String }
 
   connect() {
     this._sync()
@@ -18,7 +19,16 @@ export default class extends Controller {
   _sync() {
     const dark = document.documentElement.classList.contains("dark")
     this.element.setAttribute("aria-pressed", dark ? "true" : "false")
-    if (this.hasLabelTarget) this.labelTarget.textContent = dark ? "Light theme" : "Dark theme"
-    if (this.hasIconTarget) this.iconTarget.textContent = dark ? "L" : "D"
+    if (this.hasLabelTarget) this.labelTarget.textContent = dark ? this.lightLabelValue : this.darkLabelValue
+
+    // The icon names the theme the click switches *to*, matching the label: in
+    // light mode the label reads "Dark theme", so the moon is showing. Showing
+    // the current state instead would have icon and label contradict each other.
+    //
+    // Swapping visibility rather than rewriting one element's text also means
+    // the icons are markup the server rendered, so the right one is on screen
+    // before this controller connects.
+    if (this.hasIconLightTarget) this.iconLightTarget.hidden = !dark
+    if (this.hasIconDarkTarget) this.iconDarkTarget.hidden = dark
   }
 }

data/templates/locales/senren.en.yml

@@ -0,0 +1,151 @@
+# Senren UI - English strings. This is the canonical wording.
+#
+# GENERATED by bin/i18n-sync from the senren_t(key, default:) calls in
+# templates/components. Do not edit it by hand: change the `default:` in the
+# component and run bin/i18n-sync, or a test will fail.
+#
+# Copy this file to senren.<locale>.yml, change the top-level `en:` to your
+# locale, and translate the values. Keep every %{variable} - they are filled in
+# when the component renders. A key you leave out falls back to the English.
+en:
+  senren:
+    shared:
+      open: "Open"
+      close: "Close"
+    accordion:
+      section: "Section %{number}"
+    api_key_field:
+      label: "API key"
+      reveal: "Reveal"
+      hide: "Hide"
+      copy: "Copy"
+      copied_status: "%{label} complete"
+    app_shell:
+      skip_to_content: "Skip to content"
+    breadcrumb:
+      label: "Breadcrumb"
+    bulk_action_bar:
+      items: "items"
+      selected: "%{count} %{item_label} selected"
+      ready: "Selection ready"
+    calendar:
+      title: "%{month} %{year}"
+      months:
+        january: "January"
+        february: "February"
+        march: "March"
+        april: "April"
+        may: "May"
+        june: "June"
+        july: "July"
+        august: "August"
+        september: "September"
+        october: "October"
+        november: "November"
+        december: "December"
+      weekdays:
+        sun: "Sun"
+        mon: "Mon"
+        tue: "Tue"
+        wed: "Wed"
+        thu: "Thu"
+        fri: "Fri"
+        sat: "Sat"
+    carousel:
+      label: "Carousel"
+      previous: "Previous slide"
+      next: "Next slide"
+      go_to: "Go to slide %{number}"
+      status: "Slide %{current} of %{total}"
+    cart:
+      title: "Cart"
+      empty: "Your cart is empty."
+      checkout: "Checkout"
+      subtotal: "Subtotal"
+      remove: "Remove"
+      quantity_group: "%{name} quantity"
+      decrease: "Decrease %{name} quantity"
+      increase: "Increase %{name} quantity"
+      remove_item: "Remove %{name}"
+    clipboard:
+      copy: "Copy"
+      copied: "Copied"
+      copied_status: "Copied to clipboard"
+    collapsible:
+      details: "Details"
+    combobox:
+      placeholder: "Search..."
+    command:
+      placeholder: "Type a command..."
+      label: "Command menu"
+      empty: "No results found."
+    data_table:
+      empty: "No records found."
+      sort: "Sort"
+    date_picker:
+      placeholder: "Select date"
+      today: "Today"
+      clear: "Clear"
+    filter_bar:
+      label: "Filters"
+    invite_member_dialog:
+      title: "Invite teammate"
+      description: "Send an invitation to join this workspace."
+      role_member: "Member"
+      role_admin: "Admin"
+      button: "Invite member"
+      email: "Email"
+      email_placeholder: "teammate@company.com"
+      role: "Role"
+      cancel: "Cancel"
+      send: "Send invite"
+    pagination:
+      label: "Pagination"
+      previous: "Previous"
+      next: "Next"
+    product_card:
+      add_to_cart: "Add to cart"
+      out_of_stock: "Out of stock"
+      no_image: "No image"
+    rich_text_editor_lite:
+      label: "Content"
+      placeholder: "Write something..."
+      link_prompt: "Paste a URL"
+      toolbar:
+        paragraph: "Paragraph"
+        heading_1: "Heading 1"
+        heading_2: "Heading 2"
+        heading_3: "Heading 3"
+        bold: "Bold"
+        italic: "Italic"
+        create_link: "Create link"
+        bulleted_list: "Bulleted list"
+        numbered_list: "Numbered list"
+        align_left: "Align left"
+        align_center: "Align center"
+        align_right: "Align right"
+        justify: "Justify"
+      toolbar_short:
+        link: "Link"
+        list: "List"
+        left: "Left"
+        center: "Center"
+        right: "Right"
+        justify: "Justify"
+    search_input:
+      placeholder: "Search..."
+      label: "Search"
+    sidebar:
+      brand: "Senren"
+      label: "Primary"
+      toggle: "Toggle sidebar"
+    tabs:
+      label: "Tabs"
+      tab: "Tab %{number}"
+    theme_toggle:
+      label: "Toggle theme"
+      light: "Light theme"
+      dark: "Dark theme"
+    top_nav:
+      label: "Global"
+      brand: "Senren"

data/templates/locales/senren.vi.yml

@@ -0,0 +1,151 @@
+# Senren UI - Vietnamese strings (Tiếng Việt).
+#
+# Written by hand, in the register of a Vietnamese product or support team:
+# short and plain, with the words people already say in English ("email", "slide",
+# "tab") left as they are. The keys and every %{variable} match senren.en.yml;
+# test/i18n_catalog_test.rb fails if they stop matching.
+#
+# Copy this file to config/locales/ (bin/rails senren:locales vi), then change any
+# wording you like - it is your file. A key you delete falls back to the English.
+vi:
+  senren:
+    shared:
+      open: "Mở"
+      close: "Đóng"
+    accordion:
+      section: "Mục %{number}"
+    api_key_field:
+      label: "Khóa API"
+      reveal: "Hiện"
+      hide: "Ẩn"
+      copy: "Sao chép"
+      copied_status: "%{label} xong"
+    app_shell:
+      skip_to_content: "Chuyển đến nội dung chính"
+    breadcrumb:
+      label: "Đường dẫn"
+    bulk_action_bar:
+      items: "mục"
+      selected: "Đã chọn %{count} %{item_label}"
+      ready: "Đã chọn xong"
+    calendar:
+      title: "%{month} năm %{year}"
+      months:
+        january: "Tháng 1"
+        february: "Tháng 2"
+        march: "Tháng 3"
+        april: "Tháng 4"
+        may: "Tháng 5"
+        june: "Tháng 6"
+        july: "Tháng 7"
+        august: "Tháng 8"
+        september: "Tháng 9"
+        october: "Tháng 10"
+        november: "Tháng 11"
+        december: "Tháng 12"
+      weekdays:
+        sun: "CN"
+        mon: "T2"
+        tue: "T3"
+        wed: "T4"
+        thu: "T5"
+        fri: "T6"
+        sat: "T7"
+    carousel:
+      label: "Trình chiếu"
+      previous: "Slide trước"
+      next: "Slide sau"
+      go_to: "Đến slide %{number}"
+      status: "Slide %{current} trên %{total}"
+    cart:
+      title: "Giỏ hàng"
+      empty: "Giỏ hàng của bạn đang trống."
+      checkout: "Thanh toán"
+      subtotal: "Tạm tính"
+      remove: "Xóa"
+      quantity_group: "Số lượng %{name}"
+      decrease: "Giảm số lượng %{name}"
+      increase: "Tăng số lượng %{name}"
+      remove_item: "Xóa %{name}"
+    clipboard:
+      copy: "Sao chép"
+      copied: "Đã sao chép"
+      copied_status: "Đã sao chép vào bộ nhớ tạm"
+    collapsible:
+      details: "Chi tiết"
+    combobox:
+      placeholder: "Tìm kiếm..."
+    command:
+      placeholder: "Nhập lệnh..."
+      label: "Menu lệnh"
+      empty: "Không tìm thấy kết quả."
+    data_table:
+      empty: "Không có dữ liệu."
+      sort: "Sắp xếp"
+    date_picker:
+      placeholder: "Chọn ngày"
+      today: "Hôm nay"
+      clear: "Xóa"
+    filter_bar:
+      label: "Bộ lọc"
+    invite_member_dialog:
+      title: "Mời đồng nghiệp"
+      description: "Gửi lời mời tham gia không gian làm việc này."
+      role_member: "Thành viên"
+      role_admin: "Quản trị viên"
+      button: "Mời thành viên"
+      email: "Email"
+      email_placeholder: "ten@congty.com"
+      role: "Vai trò"
+      cancel: "Hủy"
+      send: "Gửi lời mời"
+    pagination:
+      label: "Phân trang"
+      previous: "Trước"
+      next: "Sau"
+    product_card:
+      add_to_cart: "Thêm vào giỏ"
+      out_of_stock: "Hết hàng"
+      no_image: "Chưa có ảnh"
+    rich_text_editor_lite:
+      label: "Nội dung"
+      placeholder: "Nhập nội dung..."
+      link_prompt: "Dán một URL"
+      toolbar:
+        paragraph: "Đoạn văn"
+        heading_1: "Tiêu đề 1"
+        heading_2: "Tiêu đề 2"
+        heading_3: "Tiêu đề 3"
+        bold: "In đậm"
+        italic: "In nghiêng"
+        create_link: "Tạo liên kết"
+        bulleted_list: "Danh sách dấu đầu dòng"
+        numbered_list: "Danh sách đánh số"
+        align_left: "Căn trái"
+        align_center: "Căn giữa"
+        align_right: "Căn phải"
+        justify: "Căn đều"
+      toolbar_short:
+        link: "Liên kết"
+        list: "Danh sách"
+        left: "Trái"
+        center: "Giữa"
+        right: "Phải"
+        justify: "Đều"
+    search_input:
+      placeholder: "Tìm kiếm..."
+      label: "Tìm kiếm"
+    sidebar:
+      brand: "Senren"
+      label: "Điều hướng chính"
+      toggle: "Bật/tắt thanh bên"
+    tabs:
+      label: "Các tab"
+      tab: "Tab %{number}"
+    theme_toggle:
+      label: "Đổi giao diện"
+      light: "Giao diện sáng"
+      dark: "Giao diện tối"
+    top_nav:
+      label: "Điều hướng chung"
+      brand: "Senren"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: senren-ui
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.4.0
 platform: ruby
 authors:
 - vutt
@@ -55,6 +55,7 @@ files:
 - Rakefile
 - docs/components.md
 - docs/hot_reload.md
+- docs/i18n.md
 - docs/performance_testing.md
 - docs/visual_style.md
 - lib/commands/senren/add/add_command.rb
@@ -69,6 +70,7 @@ files:
 - lib/generators/senren/install/templates/conventions.md.tt
 - lib/generators/senren/install/templates/installed_components.yml.tt
 - lib/generators/senren/install/templates/senren.css.tt
+- lib/generators/senren/install/templates/senren_themes.css.tt
 - lib/senren-ui.rb
 - lib/senren/rails.rb
 - lib/senren/rails/agent_rules_writer.rb
@@ -80,6 +82,7 @@ files:
 - lib/senren/rails/engine.rb
 - lib/senren/rails/host_paths.rb
 - lib/senren/rails/llms_writer.rb
+- lib/senren/rails/locale_installer.rb
 - lib/senren/rails/marker_block.rb
 - lib/senren/rails/registry.rb
 - lib/senren/rails/safe_write.rb
@@ -243,6 +246,8 @@ files:
 - templates/controllers/tabs_controller.js
 - templates/controllers/theme_toggle_controller.js
 - templates/controllers/tooltip_controller.js
+- templates/locales/senren.en.yml
+- templates/locales/senren.vi.yml
 homepage: https://www.senren-ui.dev/
 licenses:
 - MIT