rosetta-rails 0.1.1

data/app/assets/config/rosetta_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../builds/rosetta .css
+//= link_directory ../builds/rosetta .js

data/app/assets/javascripts/rosetta/application.js

@@ -0,0 +1,2 @@
+import "@hotwired/turbo-rails";
+import "./controllers";

data/app/assets/javascripts/rosetta/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 };

data/app/assets/javascripts/rosetta/controllers/dialog_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["dialog", "content", "title", "titleSource", "turboFrame"];
+
+  initialize() {
+    this.loadingIndicator = this.turboFrameTarget.innerHTML;
+  }
+
+  open(e) {
+    e.preventDefault();
+    const link = e.currentTarget;
+    this.dialogTarget.showModal();
+    this.turboFrameTarget.src = link.href;
+  }
+
+  safeClose(e) {
+    if (this.contentTarget.contains(e.target)) return;
+    this.close();
+  }
+
+  close(e) {
+    this.dialogTarget.close();
+    this.resetContent();
+  }
+
+  titleSourceTargetConnected(e) {
+    const title = e.textContent;
+    this.setTitle(title);
+  }
+
+  resetContent() {
+    this.turboFrameTarget.innerHTML = this.loadingIndicator;
+    this.setTitle("");
+  }
+
+  setTitle(value) {
+    this.titleTarget.textContent = value;
+  }
+}

data/app/assets/javascripts/rosetta/controllers/index.js

@@ -0,0 +1,4 @@
+import { application } from "./application";
+
+import DialogController from "./dialog_controller";
+application.register("dialog", DialogController);

data/app/assets/stylesheets/rosetta/application.css

@@ -0,0 +1,49 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+  }
+  .btn-primary {
+    @apply bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline-indigo-600;
+  }
+  .btn-secondary {
+    @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+  }
+  .label {
+    @apply text-sm font-medium leading-6 text-gray-900;
+  }
+  .input {
+    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
+  }
+  .badge {
+    @apply inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10;
+  }
+  .pill {
+    @apply inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
+  }
+  .pagy {
+    @apply flex space-x-1 font-semibold text-sm text-gray-500 justify-center;
+    a:not(.gap) {
+      @apply block rounded-lg px-3 py-1 bg-gray-200;
+      &:hover {
+        @apply bg-gray-300;
+      }
+      &:not([href]) {
+        /* disabled links */
+        @apply text-gray-300 bg-gray-100 cursor-default;
+      }
+      &.current {
+        @apply text-white bg-indigo-600;
+      }
+    }
+    label {
+      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
+      input {
+        @apply bg-gray-100 border-none rounded-md;
+      }
+    }
+  }
+}

data/app/controllers/concerns/rosetta/locale_scoped.rb

@@ -0,0 +1,16 @@
+module Rosetta
+  module LocaleScoped
+    extend ActiveSupport::Concern
+
+    included do
+      around_action :set_locale
+    end
+
+    private
+
+    def set_locale(&action)
+      @locale = Locale.find(params[:locale_id])
+      Rosetta.with_locale(@locale, &action)
+    end
+  end
+end

data/app/controllers/rosetta/application_controller.rb

@@ -0,0 +1,5 @@
+module Rosetta
+  class ApplicationController < Rosetta.config.parent_controller_class.constantize
+    include Pagy::Backend
+  end
+end

data/app/controllers/rosetta/locales/deploys_controller.rb

@@ -0,0 +1,12 @@
+module Rosetta
+  class Locales::DeploysController < ApplicationController
+    include LocaleScoped
+
+    def create
+      @locale.touch
+      flash[:notice] = "#{@locale.name} changes have been deployed."
+
+      redirect_back(fallback_location: locale_translations_path(@locale))
+    end
+  end
+end

data/app/controllers/rosetta/locales/translations/missing_controller.rb

@@ -0,0 +1,9 @@
+module Rosetta
+  class Locales::Translations::MissingController < Locales::TranslationsController
+    private
+
+    def scope
+      super.where.missing(:translation_in_current_locale)
+    end
+  end
+end

data/app/controllers/rosetta/locales/translations_controller.rb

@@ -0,0 +1,17 @@
+module Rosetta
+  class Locales::TranslationsController < ApplicationController
+    include LocaleScoped
+
+    def index
+      @pagy, @translation_keys = pagy(scope)
+
+      render "rosetta/locales/translations/index"
+    end
+
+    private
+
+    def scope
+      TranslationKey.includes(:translation_in_current_locale)
+    end
+  end
+end

data/app/controllers/rosetta/locales_controller.rb

@@ -0,0 +1,31 @@
+module Rosetta
+  class LocalesController < ApplicationController
+    def index
+      @locales = [ Locale.default_locale ] + Locale.all
+    end
+
+    def new
+      @locale = Locale.new
+    end
+
+    def create
+      @locale = Locale.new(locale_params)
+
+      if @locale.save
+        redirect_to locales_path
+      else
+        render turbo_stream: turbo_stream.update(
+          :dialog_content,
+          partial: "form",
+          locals: { locale: @locale }
+        )
+      end
+    end
+
+    private
+
+    def locale_params
+      params.require(:locale).permit(:name, :code)
+    end
+  end
+end

data/app/controllers/rosetta/translations_controller.rb

@@ -0,0 +1,35 @@
+module Rosetta
+  class TranslationsController < ApplicationController
+    include LocaleScoped
+
+    before_action :set_translation_key
+    before_action :set_translation
+
+    def edit
+    end
+
+    def update
+      if translation_params[:value].blank?
+        @translation_key.translation_in_current_locale = nil
+      else
+        @translation.update(translation_params)
+      end
+
+      render partial: "rosetta/locales/translations/translation_key", locals: { translation_key: @translation_key }
+    end
+
+    private
+
+    def set_translation_key
+      @translation_key = TranslationKey.find(params[:translation_key_id])
+    end
+
+    def set_translation
+      @translation = @translation_key.translation_in_current_locale || @translation_key.build_translation_in_current_locale
+    end
+
+    def translation_params
+      params.require(:translation).permit(:value)
+    end
+  end
+end

data/app/helpers/rosetta/application_helper.rb

@@ -0,0 +1,7 @@
+module Rosetta
+  module ApplicationHelper
+    include Pagy::Frontend
+    include DialogHelper
+    include NavigationHelper
+  end
+end

data/app/helpers/rosetta/dialog_helper.rb

@@ -0,0 +1,11 @@
+module Rosetta
+  module DialogHelper
+    def within_modal(&block)
+      turbo_frame_tag :dialog_content, &block
+    end
+
+    def modal_title(title)
+      tag.h1(title, class: "hidden", data: { dialog_target: "titleSource" })
+    end
+  end
+end

data/app/helpers/rosetta/navigation_helper.rb

@@ -0,0 +1,21 @@
+module Rosetta
+  module NavigationHelper
+    def tab_link_to(name = nil, options = nil, html_options = nil, &block)
+      is_current_page = current_page?(block_given? ? name : options)
+
+      css_classes = class_names(
+        "flex group whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
+        "active border-indigo-500 text-indigo-600": is_current_page,
+        "border-transparent text-gray-500 hover:border-gray-200 hover:text-gray-700": !is_current_page
+      )
+
+      html_options = { class: css_classes, aria: { current: "page" } }
+
+      if block_given?
+        link_to(name, html_options, &block)
+      else
+        link_to(name, options, html_options)
+      end
+    end
+  end
+end

data/app/helpers/rosetta/translation_helper.rb

@@ -0,0 +1,9 @@
+module Rosetta
+  module TranslationHelper
+    def _(key, locale: Rosetta.locale)
+      return key if Rosetta.locale.default_locale?
+
+      Rosetta.translate(key, locale: locale) || key
+    end
+  end
+end

data/app/jobs/rosetta/application_job.rb

@@ -0,0 +1,4 @@
+module Rosetta
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/rosetta/application_mailer.rb

@@ -0,0 +1,6 @@
+module Rosetta
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/rosetta/application_record.rb

@@ -0,0 +1,5 @@
+module Rosetta
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/rosetta/locale.rb

@@ -0,0 +1,31 @@
+module Rosetta
+  class Locale < ApplicationRecord
+    CODE_FORMAT = /\A[a-zA-Z]+(-[a-zA-Z]+)?\z/
+
+    validates :name, :code, presence: true
+    validates :code, uniqueness: true
+    validates :code, format: { with: CODE_FORMAT, message: "must only contain letters separated by an optional dash" }
+
+    has_many :translations, dependent: :destroy
+
+    class << self
+      def available_locales
+        [ Locale.default_locale ] + all
+      end
+
+      def default_locale
+        @default_locale ||= new(Rosetta.config.default_locale.to_h).as_default
+      end
+    end
+
+    def default_locale?
+      @default
+    end
+
+    def as_default
+      @default = true
+      readonly!
+      self
+    end
+  end
+end

data/app/models/rosetta/translation.rb

@@ -0,0 +1,6 @@
+module Rosetta
+  class Translation < ApplicationRecord
+    belongs_to :locale, class_name: "Rosetta::Locale", inverse_of: :translations
+    belongs_to :translation_key, class_name: "Rosetta::TranslationKey", inverse_of: :translations
+  end
+end

data/app/models/rosetta/translation_key.rb

@@ -0,0 +1,7 @@
+module Rosetta
+  class TranslationKey < ApplicationRecord
+    has_many :translations, dependent: :destroy
+    # Note: Learn about the design decisions behind this: https://github.com/virolea/rosetta/issues/3
+    has_one :translation_in_current_locale, -> { where(locale_id: Rosetta.locale.id) }, class_name: "Translation", dependent: :destroy
+  end
+end

data/app/views/layouts/rosetta/_dialog.html.erb

@@ -0,0 +1,25 @@
+<dialog class="absolute max-w-4xl w-full mx-auto p-12 top-4 left-0 m-0 h-full bg-transparent" data-dialog-target="dialog" data-action="close->dialog#resetContent click->dialog#safeClose">
+  <div class="bg-white shadow ring-1 ring-black ring-opacity-5 max-w-xl mt-4 mx-auto rounded-lg overflow-hidden w-full" data-dialog-target="content">
+    <div class="flex justify-between bg-gray-50 py-4 px-6 text-gray-900 font-semibold border-b border-gray-300">
+      <h4 data-dialog-target="title"></h4>
+
+      <button type="button" class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" data-action="dialog#close">
+        <span class="sr-only">Close</span>
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="p-4">
+      <%= turbo_frame_tag "dialog_content", data: { dialog_target: "turboFrame" } do %>
+        <div class="flex justify-around py-12">
+          <svg class="animate-spin h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</dialog>

data/app/views/layouts/rosetta/_flashes.html.erb

@@ -0,0 +1,7 @@
+<% if flash[:notice] %>
+  <div class="bg-green-50 border-b border-green-100 text-green-800">
+    <div class="mx-auto max-w-4xl p-4 sm:px-6 lg:px-8">
+      <%= flash[:notice] %>
+    </div>
+  </div>
+<% end %>

data/app/views/layouts/rosetta/_navbar.html.erb

@@ -0,0 +1,7 @@
+<nav class="border-b border-gray-200 bg-white">
+  <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center">
+      <%= link_to "Rosetta", root_path, class: "text-xl font-bold" %>
+    </div>
+  </div>
+</nav>

data/app/views/layouts/rosetta/application.html.erb

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="h-full">
+<head>
+  <title>Rosetta</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%= stylesheet_link_tag    "rosetta/application", media: "all" %>
+  <%= javascript_include_tag "rosetta/application", defer: true %>
+</head>
+<body class="h-full" data-controller="dialog">
+  <div class="min-h-full">
+    <%= render "layouts/rosetta/navbar" %>
+    <%= render "layouts/rosetta/flashes" %>
+
+    <main class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-10">
+      <%= yield %>
+    </main>
+  </div>
+
+  <%= render "layouts/rosetta/dialog" %>
+</body>
+</html>

data/app/views/rosetta/locales/_form.html.erb

@@ -0,0 +1,33 @@
+<%= form_with model: locale, class: "grid gap-2", data: { turbo_frame: "_top" } do |f| %>
+  <% if @locale.errors[:code].any? %>
+    <div class="rounded-md bg-red-50 p-4">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <div class="text-sm text-red-700">
+            Please check the format of your locale code, and make sure it does not already exist.
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <div>
+    <%= f.label :name, class: "label" %>
+    <%= f.text_field :name, placeholder: "E.g. French", class: "input max-w-xs", required: true %>
+  </div>
+
+  <div>
+    <%= f.label :code, class: "label" %>
+    <%= f.text_field :code, placeholder: "E.g. fr, en-GB", class: "input max-w-28", required: true  %>
+    <p class="mt-1 text-sm leading-6 text-gray-600">
+      Downcase letters followed by an optional region specifier in uppercase letters, separated by a dash. E.g. <span class="badge">fr</span> or <span class="badge">en-GB</span>.
+    </p>
+  </div>
+
+  <%= f.submit class: "btn btn-primary mt-2" %>
+<% end %>

data/app/views/rosetta/locales/_locale.html.erb

@@ -0,0 +1,19 @@
+<tr>
+  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+    <%= locale.name %>
+  </td>
+  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+    <span class="badge">
+      <%= locale.code %>
+    </span>
+  </td>
+  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+    <% if locale.default_locale? %>
+      <span class="pill">Default locale</span>
+    <% end %>
+
+    <% unless locale.default_locale? %>
+      <%= link_to "Manage", locale_translations_path(locale), class: "text-indigo-600 hover:text-indigo-900" %>
+    <% end %>
+  </td>
+</tr>

data/app/views/rosetta/locales/index.html.erb

@@ -0,0 +1,31 @@
+<div class="sm:flex sm:items-center">
+  <div class="sm:flex-auto">
+    <h1 class="text-base font-semibold leading-6 text-gray-900">Locales</h1>
+    <p class="mt-2 text-sm text-gray-700">
+      Manage the locales for your project.
+    </p>
+  </div>
+
+  <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+    <%= link_to "Add locale", new_locale_path, class: "btn btn-primary", data: { action: "dialog#open" } %>
+  </div>
+</div>
+
+<div class="mt-8">
+  <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+    <table class="min-w-full divide-y divide-gray-300">
+      <thead class="bg-gray-50">
+        <tr>
+          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
+          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Key</th>
+          <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+            <span class="sr-only">Manage</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        <%= render @locales %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/app/views/rosetta/locales/new.html.erb

@@ -0,0 +1,4 @@
+<%= within_modal do %>
+  <%= modal_title "Add a new locale" %>
+  <%= render "form", locale: @locale %>
+<% end %>

data/app/views/rosetta/locales/translations/_navigation.html.erb

@@ -0,0 +1,14 @@
+<div class="mt-6">
+  <div class="border-b border-gray-200 flex justify-between items-center">
+    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+      <%= tab_link_to "All", locale_translations_path(@locale) %>
+
+      <%= tab_link_to locale_translations_missing_index_path(@locale) do %>
+        Missing
+        <span class="ml-3 hidden md:inline-block rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-900 group-[.active]:bg-indigo-100 group-[.active]:text-indigo-600">
+          <%= Rosetta::TranslationKey.where.missing(:translation_in_current_locale).size %>
+        </span>
+      <% end %>
+    </nav>
+  </div>
+</div>

data/app/views/rosetta/locales/translations/_translation_key.html.erb

@@ -0,0 +1,14 @@
+<tr class="divide-x divide-gray-200">
+  <td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">
+    <%= translation_key.value %>
+  </td>
+  <td class="px-3 py-4 text-sm text-gray-900 group relative">
+    <%= turbo_frame_tag dom_id(translation_key) do %>
+      <%= translation_key.translation_in_current_locale&.value %>
+
+      <div class="hidden group-hover:flex absolute w-full h-full top-0 left-0 bg-indigo-50 bg-opacity-50 pr-4  items-center justify-end">
+        <%= link_to "edit", edit_translation_key_translation_path(translation_key, locale_id: @locale.id), class: "text-indigo-600 hover:text-indigo-900 font-medium" %>
+      </div>
+    <% end %>
+  </td>
+</tr>

data/app/views/rosetta/locales/translations/index.html.erb

@@ -0,0 +1,52 @@
+<div class="sm:flex sm:items-center">
+  <div class="sm:flex-auto">
+    <nav class="flex justify-between items-center">
+      <ol role="list" class="flex items-center space-x-2">
+        <li>
+          <%= link_to "Locales", locales_path, class: "text-base font-semibold leading-6 text-indigo-600 hover:text-indigo-900" %>
+        </li>
+
+        <li>
+          <div class="flex items-center">
+            <svg class="h-5 w-5 flex-shrink-0 text-gray-900" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+              <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+            </svg>
+
+            <div class="ml-2 text-base font-semibold leading-6 text-gray-900"><%= @locale.name %></div>
+          </div>
+        </li>
+      </ol>
+
+      <%= button_to "Deploy locale", locale_deploys_path(@locale), class: "btn btn-primary" %>
+    </nav>
+
+    <p class="mt-2 text-sm text-gray-700">
+      Manage translations for this locale.
+    </p>
+  </div>
+</div>
+
+<%= render "rosetta/locales/translations/navigation" %>
+
+<div class="mt-4">
+  <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+    <table class="min-w-full divide-y divide-gray-300">
+      <thead class="bg-gray-50">
+        <tr class="divide-x divide-gray-200">
+          <th scope="col" class="w-1/2 py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Translation Key</th>
+          <th scope="col" class="w-1/2 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Translation</th>
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-gray-200 bg-white">
+        <%= render(
+          collection: @translation_keys,
+          partial: "rosetta/locales/translations/translation_key") %>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="mt-4">
+  <%== pagy_nav(@pagy) %>
+</div>

data/app/views/rosetta/translations/edit.html.erb

@@ -0,0 +1,21 @@
+<%= turbo_frame_tag dom_id(@translation_key) do %>
+  <%= form_with model: @translation, url: translation_key_translation_path(@translation_key), method: :patch, class: "relative" do |f| %>
+    <%= hidden_field_tag :locale_id, @locale.id %>
+
+    <div class="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
+      <%= f.label :value, "Translation", class: "sr-only" %>
+      <%= f.text_area :value, row: 3, autofocus: true, placeholder: "Enter your translation", class: "block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
+
+      <div class="py-2" aria-hidden="true">
+        <div class="py-px">
+          <div class="h-9"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="absolute inset-x-0 bottom-0 flex justify-end gap-2 py-2 pl-3 pr-2">
+      <%= link_to "Discard", locale_translations_path(@locale), class: "btn btn-secondary" %>
+      <%= f.submit "Save", class: "inline btn btn-primary" %>
+    </div>
+  <% end %>
+<% end %>