panda-cms 0.7.0

data/app/assets/config/panda_cms_manifest.js

@@ -0,0 +1,4 @@
+//= link_tree ../builds/ .css
+//= link_directory ../../javascript/panda/cms .js
+//= link_directory ../../javascript/panda/cms/controllers .js
+//= link_directory ../../javascript/panda/cms/editor .js

data/app/assets/stylesheets/panda/cms/application.tailwind.css

@@ -0,0 +1,162 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html[data-theme="default"] {
+    --color-white: 249 249 249; /* #F9F9F9 */
+    --color-black: 26 22 29; /* #1A161D */
+
+    --color-light: 238 206 230; /* #EECEE6 */
+    --color-mid: 141 94 183; /* #8D5EB7 */
+    --color-dark: 33 29 73; /* #211D49 */
+
+    --color-highlight: 208 64 20; /* #D04014 */
+
+    --color-active: 0 135 85; /* #008755 */
+    --color-warning: 250 207 142; /* #FACF8E */
+    --color-inactive: 216 247 245; /* #d6e4f7 */
+    --color-error: 245 129 129; /* #F58181 */
+  }
+
+  html[data-theme="sky"] {
+    --color-white: 249 249 249; /* #F9F9F9 */
+    --color-black: 26 22 29; /* #1A161D */
+    --color-light: 204 238 242; /* #CCEEF2 */
+    --color-mid: 42 102 159; /* #2A669F */
+    --color-dark: 20 32 74; /* #14204A */
+    --color-highlight: 208 64 20; /* #D04014 */
+
+    --color-active: 166 211 129; /* #A6D381 */
+    --color-warning: 244 190 102; /* #F4BE66 */
+    --color-inactive: 216 247 245; /* #d6e4f7 */
+    --color-error: 208 64 20; /* #D04014 */
+  }
+
+  a.block-link:after {
+    position: absolute;
+    content: "";
+    inset: 0;
+  }
+}
+
+/* Default editor styles */
+@layer components {
+  .codex-editor__redactor .ce-block .ce-block__content {
+    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];
+
+    h1.ce-header {
+      @apply text-3xl md:text-4xl font-semibold font-sans leading-[1.2];
+    }
+
+    h2.ce-header {
+      @apply text-2xl font-medium font-sans leading-[1.3] mb-4 mt-8;
+    }
+
+    h3.ce-header {
+      @apply text-xl font-normal font-sans leading-[1.3] mb-4 mt-6;
+    }
+
+    p,
+    li {
+      @apply leading-[1.6] tracking-wide max-w-[85ch];
+
+      a {
+        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
+      }
+
+      strong,
+      b {
+        @apply font-semibold;
+      }
+    }
+
+    p {
+      @apply mb-4;
+    }
+
+    .cdx-quote {
+      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;
+
+      .cdx-quote__caption {
+        @apply block ml-6 mt-2 text-sm text-dark;
+      }
+
+      .cdx-quote__text {
+        quotes: "\201C""\201D""\2018""\2019";
+        @apply pl-6;
+
+        &:before {
+          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
+          content: open-quote;
+        }
+
+        p {
+          @apply inline italic text-lg;
+        }
+      }
+    }
+
+    .cdx-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-nested-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-nested-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-nested-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-table {
+      @apply w-full border-collapse border-2 border-dark my-6;
+
+      &__head {
+        @apply font-semibold border-dark border-r-2 p-3 bg-light;
+      }
+
+      &__row {
+        @apply border-dark border-b-2;
+      }
+
+      &__cell {
+        @apply border-dark border-r-2 p-3;
+      }
+    }
+
+    .cdx-embed {
+      iframe {
+        @apply w-full border-none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/panda/cms/editor.css

@@ -0,0 +1,120 @@
+/* Base content styles, where .codex-editor applies them to the Panda editor too */
+@layer components {
+  .codex-editor__redactor .ce-block .ce-block__content {
+    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];
+
+    h1.ce-header {
+      @apply text-3xl md:text-4xl font-semibold font-sans text-[#104071] leading-[1.2] max-w-[85ch];
+    }
+
+    h2.ce-header {
+      @apply text-2xl font-medium font-sans text-[#104071] leading-[1.3] mb-4 mt-8 max-w-[85ch];
+    }
+
+    h3.ce-header {
+      @apply text-xl font-normal font-sans text-[#104071] leading-[1.3] mb-4 mt-6 max-w-[85ch];
+    }
+
+    p,
+    li {
+      @apply leading-[1.6] tracking-wide max-w-[85ch];
+
+      a {
+        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
+      }
+
+      strong,
+      b {
+        @apply font-semibold;
+      }
+    }
+
+    p {
+      @apply mb-4;
+    }
+
+    .cdx-quote {
+      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;
+
+      .cdx-quote__caption {
+        @apply block ml-6 mt-2 text-sm text-dark;
+      }
+
+      .cdx-quote__text {
+        quotes: "\201C" "\201D" "\2018" "\2019";
+        @apply pl-6;
+
+        &:before {
+          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
+          content: open-quote;
+        }
+
+        p {
+          @apply inline italic text-lg;
+        }
+      }
+    }
+
+    .cdx-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-nested-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-nested-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-nested-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-table {
+      @apply w-full border-collapse border-2 border-dark my-6;
+
+      &__head {
+        @apply font-semibold border-dark border-r-2 p-3 bg-light;
+      }
+
+      &__row {
+        @apply border-dark border-b-2;
+      }
+
+      &__cell {
+        @apply border-dark border-r-2 p-3;
+      }
+    }
+
+    .cdx-embed {
+      iframe {
+        @apply w-full border-none;
+      }
+    }
+  }
+}

data/app/builders/panda/cms/form_builder.rb

@@ -0,0 +1,234 @@
+require "ostruct"
+
+module Panda
+  module CMS
+    class FormBuilder < ActionView::Helpers::FormBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::FormTagHelper
+
+      def label(attribute, text = nil, options = {}, &block)
+        super(attribute, text, options.reverse_merge(class: label_styles))
+      end
+
+      def text_field(attribute, options = {})
+        if options.dig(:data, :prefix)
+          content_tag :div, class: container_styles do
+            label(attribute) + meta_text(options) +
+              content_tag(:div, class: "flex flex-grow") do
+                content_tag(:span, class: "inline-flex items-center px-3 text-base border border-r-none rounded-s-md whitespace-nowrap break-keep") { options.dig(:data, :prefix) } +
+                  super(attribute, options.reverse_merge(class: input_styles_prefix + " input-prefix rounded-l-none border-l-none"))
+              end
+          end
+        else
+          content_tag :div, class: container_styles do
+            label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: input_styles))
+          end
+        end
+      end
+
+      def email_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def datetime_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def text_area(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def password_field(attribute, options = {})
+        content_tag :div, class: container_styles do
+          label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def select(method, choices = nil, options = {}, html_options = {}, &block)
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, choices, options, html_options.reverse_merge(class: select_styles)) + select_svg
+        end
+      end
+
+      def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, collection, value_method, text_method, options, html_options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def time_zone_select(method, priority_zones = nil, options = {}, html_options = {})
+        wrap_field(method, options) do
+          super(
+            method,
+            priority_zones,
+            options,
+            html_options.reverse_merge(class: select_styles)
+          )
+        end
+      end
+
+      def file_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50".concat(input_styles)))
+        end
+      end
+
+      def button(value = nil, options = {}, &block)
+        value ||= submit_default_value
+        options = options.dup
+
+        # Handle formmethod specially
+        if options[:formmethod] == "delete"
+          options[:name] = "_method"
+          options[:value] = "delete"
+        end
+
+        base_classes = [
+          "inline-flex items-center rounded-md",
+          "px-3 py-2",
+          "text-base font-semibold",
+          "shadow-sm"
+        ]
+
+        # Only add fa-circle-check for non-block buttons
+        base_classes << "fa-circle-check" unless block_given?
+
+        options[:class] = [
+          *base_classes,
+          options[:class]
+        ].compact.join(" ")
+
+        if block_given?
+          @template.button_tag(options, &block)
+        else
+          @template.button_tag(value, options)
+        end
+      end
+
+      def submit(value = nil, options = {})
+        value ||= submit_default_value
+
+        # Use the same style logic as ButtonComponent
+        action = object.persisted? ? :save : :create
+        button_classes = case action
+        when :save, :create
+          "text-white bg-active"
+        when :save_inactive
+          "text-white bg-inactive"
+        when :secondary
+          "text-dark border-2 border-mid bg-transparent hover:bg-light transition-all"
+        else
+          "text-dark border-2 border-mid bg-transparent hover:bg-light transition-all"
+        end
+
+        # Combine with common button classes
+        classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 #{button_classes}"
+
+        options[:class] = options[:class] ? "#{options[:class]} #{classes}" : classes
+
+        super
+      end
+
+      def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: "border-gray-300 ml-2"), checked_value, unchecked_value)
+        end
+      end
+
+      def date_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def rich_text_area(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: textarea_styles))
+        end
+      end
+
+      def rich_text_field(method, options = {})
+        wrap_field(method, options) do
+          if defined?(ActionText)
+            # For test environment
+            if Rails.env.test?
+              # Just render a textarea for testing
+              text_area(method, options.reverse_merge(class: textarea_styles))
+            else
+              rich_text_area(method, options.reverse_merge(class: textarea_styles))
+            end
+          else
+            text_area(method, options.reverse_merge(class: textarea_styles))
+          end
+        end
+      end
+
+      def meta_text(options)
+        return unless options[:meta]
+        @template.content_tag(:p, options[:meta], class: "block text-black/60 text-sm mb-2")
+      end
+
+      private
+
+      def label_styles
+        "font-light inline-block mb-1 text-base leading-6"
+      end
+
+      def base_input_styles
+        "bg-white block w-full rounded-md border border-mid focus:border-mid p-2 text-dark outline-0 focus:outline-0 ring-0 focus:ring-0 focus:ring-mid ring-offset-0 focus:ring-offset-0 shadow-none focus:shadow-none border-mid"
+      end
+
+      def input_styles
+        base_input_styles
+      end
+
+      def input_styles_prefix
+        input_styles.concat(" prefix")
+      end
+
+      def select_styles
+        "col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-dark text-base outline-0 outline-dark focus:outline focus:-outline-offset-2 focus:outline-dark"
+      end
+
+      def select_svg
+        @template.content_tag(:svg, class: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", aria_hidden: true) do
+          @template.content_tag(:path, d: "M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z")
+        end
+      end
+
+      def button_styles
+        "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-0 focus-visible:outline-offset-none text-dark border-2 border-mid bg-transparent hover:bg-light transition-all gap-x-1.5 px-3 py-2 text-base gap-x-1.5 px-2.5 py-1.5 mt-2 "
+      end
+
+      def container_styles
+        "panda-cms-field-container mb-4"
+      end
+
+      def textarea_styles
+        input_styles.concat(" min-h-32")
+      end
+
+      def submit_default_value
+        object.persisted? ? "Update #{object.class.name.demodulize}" : "Create #{object.class.name.demodulize}"
+      end
+
+      def wrap_field(method, options = {}, &block)
+        @template.content_tag(:div, class: "panda-cms-field-container") do
+          label(method, class: "font-light inline-block mb-1 text-base leading-6") +
+            meta_text(options) +
+            @template.content_tag(:div, class: field_wrapper_styles, &block)
+        end
+      end
+
+      def field_wrapper_styles
+        "mt-1"
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/button_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class ButtonComponent < ViewComponent::Base
+        attr_accessor :text, :action, :link, :icon, :size, :data
+
+        def initialize(text: "Button", action: nil, data: {}, link: "#", icon: nil, size: :regular, id: nil)
+          @text = text
+          @action = action
+          @data = data
+          @link = link
+          @icon = icon
+          @size = size
+          @id = id
+        end
+
+        def call
+          @icon = set_icon_from_action(@action) if @action && @icon.nil?
+          icon = content_tag(:i, "", class: "mr-2 fa-regular fa-#{@icon}") if @icon
+          @text = "#{icon} #{@text.titleize}".html_safe
+
+          classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
+
+          case @size
+          when :small, :sm
+            classes += "gap-x-1.5 px-2.5 py-1.5 text-sm "
+          when :medium, :regular, :md
+            classes += "gap-x-1.5 px-3 py-2 text-base "
+          when :large, :lg
+            classes += "gap-x-2 px-3.5 py-2.5 text-lg "
+          end
+
+          classes += case @action
+          when :save, :create
+            "text-white bg-active"
+          when :save_inactive
+            "text-white bg-inactive"
+          when :secondary
+            "text-dark border-2 border-dark bg-transparent hover:bg-light transition-all "
+          when :delete, :destroy, :danger
+            "text-error border border-error bg-red-100 hover:bg-red-200 hover:text-error focus-visible:outline-red-300 "
+          else
+            "text-dark border-2 border-dark bg-transparent hover:bg-light transition-all "
+          end
+
+          content_tag :a, href: @link, class: classes, data: @data, id: @id do
+            @text
+          end
+        end
+
+        private
+
+        def set_icon_from_action(action)
+          case action
+          when :add, :new, :create
+            "plus"
+          when :save
+            "check"
+          when :edit, :update
+            "pencil"
+          when :delete, :destroy
+            "trash"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/container_component.html.erb

@@ -0,0 +1,13 @@
+<main class="overflow-auto flex-1 h-full min-h-full max-h-full">
+  <div class="overflow-auto px-2 pt-4 mx-auto sm:px-6 lg:px-6">
+    <%= heading %>
+    <%= tab_bar %>
+    <%# I mean, you can edit this CSS if you want, but I hope you want to lose 2 hours to iFrame joy? %>
+    <section class="flex-auto h-[calc(100vh-10rem)]">
+      <div class="flex-1 mt-4 w-full h-full">
+        <%= content %>
+      </div>
+      <%= slideover %>
+    </section>
+  </div>
+</main>

data/app/components/panda/cms/admin/container_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class ContainerComponent < ViewComponent::Base
+        renders_one :heading, "Panda::CMS::Admin::HeadingComponent"
+        renders_one :tab_bar, "Panda::CMS::Admin::TabBarComponent"
+        renders_one :slideover, "Panda::CMS::Admin::SlideoverComponent"
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/flash_message_component.html.erb

@@ -0,0 +1,31 @@
+<div class="fixed top-2 right-2 z-50 p-2 space-y-4 w-full max-w-sm pointer-events-none sm:items-end"
+     data-controller="alert"
+     <% if @temporary %> data-alert-dismiss-after-value="3000"<% end %>
+     data-transition-enter="ease-in-out duration-500"
+     data-transition-enter-from="translate-x-full opacity-0"
+     data-transition-enter-to="translate-x-0 opacity-100"
+     data-transition-leave="ease-in-out duration-500"
+     data-transition-leave-from="translate-x-0 opacity-100"
+     data-transition-leave-to="translate-x-full opacity-0">
+  <div class="overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto">
+    <div class="p-4">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <i class="fa-regular text-xl <%= icon_css %> <%= text_colour_css %>"></i>
+        </div>
+        <div class="flex-1 pt-0.5 ml-3 w-0">
+          <p class="mb-1 text-sm font-medium flash-message-title <%= text_colour_css %>"><%= kind.to_s.titleize %></p>
+          <p class="mt-1 mb-0 text-sm text-gray-500 flash-message-text"><%= message %></p>
+        </div>
+        <div class="flex flex-shrink-0 ml-4">
+          <button data-action="alert#close" type="button" class="inline-flex text-gray-400 bg-white rounded-md transition duration-150 ease-in-out hover:text-gray-500 focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-sky-500">
+            <span class="sr-only">Close</span>
+            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/panda/cms/admin/flash_message_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class FlashMessageComponent < ::ViewComponent::Base
+        attr_reader :kind, :message
+
+        def initialize(message:, kind:, temporary: true)
+          @kind = kind.to_sym
+          @message = message
+          @temporary = temporary
+        end
+
+        def text_colour_css
+          case kind
+          when :success
+            "text-active"
+          when :alert, :error
+            "text-error"
+          when :warning
+            "text-warning"
+          when :info, :notice
+            "text-active"
+          else
+            "text-mid"
+          end
+        end
+
+        def icon_css
+          case kind
+          when :success
+            "fa-circle-check"
+          when :alert
+            "fa-circle-xmark"
+          when :warning
+            "fa-triangle-exclamation"
+          when :info, :notice
+            "fa-circle-info"
+          else
+            "fa-circle-info"
+          end
+        end
+      end
+    end
+  end
+end