coveragebook_components 0.5.0

data/app/components/coco/app/blocks/slide_editor/slide_editor.rb

@@ -0,0 +1,126 @@
+module Coco
+  module App
+    module Blocks
+      class SlideEditor < Coco::Component
+        include Coco::AppHelper
+        include Coco::BookHelper
+        include Coco::FormatHelper
+
+        renders_one :bg_color, ->(name: :bg_color_hex, **input_options) do
+          add_field(:bg_color, name, input_options)
+        end
+
+        renders_one :text_color, ->(name: :text_color_hex, **input_options) do
+          add_field(:text_color, name, input_options)
+        end
+
+        renders_one :bg_image, ->(name: :bg_image, **input_options) do
+          add_field(:bg_image, name, input_options)
+        end
+
+        renders_one :thumbnail, ->(name: :thumbnail_image, **input_options) do
+          add_field(:thumbnail, name, input_options)
+        end
+
+        renders_one :title, ->(name: :title, **input_options) do
+          add_field(:title, name, input_options)
+        end
+
+        renders_one :text_1, ->(name: :text_1, **input_options) do
+          add_field(:text_1, name, input_options)
+        end
+
+        renders_one :layout, ->(name: :layout, **input_options) do
+          add_field(:layout, name, input_options)
+        end
+
+        before_render do
+          with_layout(value: "basic") unless layout?
+        end
+
+        attr_reader :fields
+
+        def initialize(form: nil, **kwargs)
+          @form_args = form.to_h
+          @model = @form_args[:model]
+          @fields = {}
+        end
+
+        def form_args(attrs = {})
+          html_args = @form_args.fetch(:html, {})
+          attrs[:class] = class_names(html_args[:class], attrs[:class])
+          html_args.merge!(attrs)
+          @form_args.merge({html: html_args})
+        end
+
+        def slide_args
+          {
+            bg_image: bg_image_value,
+            bg_color_hex: bg_color_value,
+            text_color_hex: text_color_value,
+            layout: layout_value,
+            render_empty: true
+          }
+        end
+
+        def alpine_props
+          {
+            bg_color: format_css_hex_color(bg_color_value),
+            text_color: format_css_hex_color(text_color_value),
+            title: title_value,
+            text_1: text_1_value,
+            layout: layout_value,
+            bg_image: {
+              name: ((field?(:bg_image) && bg_image_value.present?) && File.basename(bg_image_value)),
+              data: (bg_image_value if field?(:bg_image))
+            }
+          }
+        end
+
+        def method_missing(name, *args, &block)
+          name.match(/_(value|options|name)/) do |matches|
+            field_name = name.to_s.gsub(matches[0], "").to_sym
+            method = matches[1].to_sym
+            if field?(field_name)
+              fields[field_name].public_send(method)
+            end
+          end
+        end
+
+        def respond_to_missing?(name, include_private = false)
+          field_name = name.to_s.gsub(/_(value|options|name)/, "")
+          field?(field_name.to_sym)
+        end
+
+        def field?(name)
+          fields.key?(name)
+        end
+
+        private
+
+        def add_field(field_name, name, options = {})
+          model_value = @model&.public_send(name) if @model&.respond_to?(name)
+          fields[field_name] = SlideInput.new(name, model_value, options)
+        end
+
+        SlideInput = Data.define(:name, :model_value, :input_options) do
+          def value
+            input_options.fetch(:value, model_value)
+          end
+
+          def options
+            input_options.tap do |options|
+              options[:value] = value
+            end
+          end
+
+          def to_json
+            "\"#{value}\"" if value.present?
+          end
+
+          alias_method :to_s, :value
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/elements/alert/alert.css

@@ -0,0 +1,258 @@
+@layer components {
+  [data-coco][data-component="app-alert"] {
+    @apply rounded-xl overflow-hidden border border-transparent @container;
+
+    .alert-container {
+      @apply flex items-start p-4 relative;
+    }
+
+    .alert-icon {
+      @apply flex items-center p-2 rounded-full;
+
+      .coco-icon {
+        @apply w-5 h-5;
+      }
+    }
+
+    .alert-body {
+      @apply pl-4 pr-2;
+    }
+
+    .alert-content {
+      @apply text-content-dark-1 w-full;
+    }
+
+    .alert-title {
+      @apply text-para-md font-bold;
+    }
+
+    .alert-message {
+      @apply text-para-md;
+
+      a {
+        @apply text-current;
+      }
+    }
+
+    &:not(.with-title) .alert-message {
+      @apply mt-1;
+    }
+
+    .alert-actions {
+      @apply space-x-1 flex items-center;
+    }
+
+    &.vivid .alert-actions {
+      @apply space-x-3;
+    }
+
+    .alert-link {
+      @apply mt-2;
+    }
+
+    /* Banner style */
+
+    &[data-banner="true"] {
+      @apply rounded-none;
+
+      .alert-container {
+        @apply @[1000px]:justify-center;
+      }
+
+      .alert-body {
+        @apply @[1000px]:w-auto;
+      }
+    }
+
+    /* Dismissable */
+
+    &[data-dismissable="true"] {
+      .alert-dismiss {
+        @apply flex-none;
+
+        .coco-button .button-element {
+          @apply text-content-dark-2 hover:text-content-dark-1;
+        }
+      }
+    }
+
+    /* Layout */
+
+    @apply app-alert-stacked @[500px]:app-alert-multi-line;
+
+    &[data-single-line="true"]:not(.force-multi-line) {
+      @apply @[1000px]:app-alert-single-line;
+    }
+
+    &[data-single-line="true"].force-multi-line {
+      @apply @[1000px]:app-alert-multi-line;
+    }
+
+    /* Themes */
+
+    &[data-theme] {
+      @apply transition-all;
+    }
+
+    &[data-theme*="vivid"] {
+      @apply border-none;
+
+      .alert-content {
+        @apply text-content-light-1;
+      }
+
+      .alert-icon {
+        @apply text-content-light-1;
+      }
+
+      .coco_link:not([data-theme]) {
+        @apply app-link-neutral-light;
+      }
+    }
+
+    &[data-theme="positive"] {
+      @apply bg-background-positive-light border-positive-300 hover:border-positive-400;
+
+      .alert-icon {
+        @apply text-content-positive bg-positive-200;
+      }
+    }
+
+    &[data-theme="positive-vivid"] {
+      @apply bg-background-positive;
+
+      .alert-icon {
+        @apply bg-positive-700;
+      }
+    }
+
+    &[data-theme="warning"] {
+      @apply bg-background-warning-light border-warning-300  hover:border-warning-400;
+
+      .alert-icon {
+        @apply text-content-warning bg-warning-100;
+      }
+    }
+
+    &[data-theme="warning-vivid"] {
+      @apply bg-background-warning;
+
+      .alert-content {
+        @apply text-content-dark-1;
+      }
+
+      .alert-icon {
+        @apply bg-warning-600;
+      }
+
+      .coco-link:not([data-theme]) {
+        @apply app-link-neutral-dark;
+      }
+    }
+
+    &[data-theme="negative"] {
+      @apply bg-background-negative-light border-negative-300 hover:border-negative-400;
+
+      .alert-icon {
+        @apply text-content-negative bg-negative-200;
+      }
+    }
+
+    &[data-theme="negative-vivid"] {
+      @apply bg-background-negative;
+
+      .alert-icon {
+        @apply bg-negative-700;
+      }
+    }
+
+    &[data-theme="info"] {
+      @apply bg-background-info-light border-info-300 hover:border-info-400;
+
+      .alert-icon {
+        @apply text-content-info bg-info-200;
+      }
+    }
+
+    &[data-theme="info-vivid"] {
+      @apply bg-background-info;
+
+      .alert-icon {
+        @apply bg-info-700;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .app-alert-stacked {
+    .alert-title {
+      matgin-top: -1px;
+      margin-bottom: 2px;
+    }
+
+    .alert-actions {
+      @apply mt-2;
+    }
+
+    &[data-dismissable="true"] {
+      .alert-container {
+        @apply pr-12;
+      }
+
+      .alert-dismiss {
+        @apply ml-auto absolute top-2 right-2;
+      }
+    }
+  }
+
+  .app-alert-multi-line {
+    .alert-container {
+      @apply items-center;
+    }
+
+    .alert-icon {
+      @apply self-center;
+    }
+
+    .alert-body {
+      @apply flex items-center w-full;
+    }
+
+    .alert-content {
+      @apply mr-4;
+    }
+
+    .alert-title {
+      margin-bottom: 0;
+    }
+
+    .alert-actions {
+      @apply mt-0 ml-auto;
+    }
+
+    &[data-dismissable="true"] {
+      .alert-container {
+        @apply pr-3;
+      }
+
+      .alert-dismiss {
+        @apply relative top-auto right-auto flex flex-col;
+      }
+    }
+  }
+
+  .app-alert-single-line {
+    .alert-content {
+      @apply flex items-center w-full space-x-2;
+    }
+
+    .alert-title {
+      @apply whitespace-nowrap;
+    }
+
+    .alert-link {
+      @apply hidden;
+    }
+  }
+}

data/app/components/coco/app/elements/alert/alert.html.erb

@@ -0,0 +1,70 @@
+<%= render component_tag(x: {
+  data: "appAlert",
+  show: "!dismissed",
+  bind: "root",
+  cloak: true
+}, class: {
+  "with-title": title?,
+  "vivid": vivid?
+}) do %>
+  <div class="alert-container">
+    <div class="alert-icon" data-role="icon">
+      <%= icon %>  
+    </div>
+    
+    <div class="alert-body">
+      <div class="alert-content" data-role="content">
+        <% if title? %>
+          <h4 class="alert-title"><%= title %></h4>
+        <% end %>
+
+        <p class="alert-message"<% if single_line? %> x-dimensions="checkSingleLineWrap(dimensions)"<% end %>>
+          <%= content %>
+        </p>
+
+        <% if link? %>
+          <div class="alert-link" data-role="link">
+            <%= link %>
+          </div>
+        <% end %>
+      </div>
+
+      <% if action? || secondary_action? %>
+        <div class="alert-actions">
+          <% if action? %>
+            <div class="alert-action"
+              x-ref="action"
+              @click="dismiss"
+              data-role="action">
+              <%= action %>
+            </div>
+          <% end %>
+
+          <% if secondary_action? %>
+            <div class="alert-action"
+              x-ref="secondaryAction"
+              @click="dismiss"
+              data-role="secondary-action">
+              <%= secondary_action %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <% if dismissable? %>
+      <div
+        class="alert-dismiss"
+        x-ref="dismiss"
+        data-role="dismiss">
+        <%= coco_button(
+          icon: :x,
+          size: :sm,
+          theme: :blank,
+          class: "alert-dismiss-button",
+          click: "$parent.dismiss()"
+        ) %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/coco/app/elements/alert/alert.js

@@ -0,0 +1,39 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appAlert", () => {
+  return {
+    alert: null,
+    dismissed: false,
+    forceMultiLine: false,
+    dismissDuration: 300,
+
+    dismiss() {
+      if (this.$options.dismissable) {
+        this.$dispatch("alert:dismiss", {
+          alert: this,
+          duration: this.dismissDuration,
+        });
+
+        this.dismissed = true;
+
+        setTimeout(() => this.remove(), this.dismissDuration);
+      }
+    },
+
+    remove() {
+      this.$root.remove();
+    },
+
+    checkSingleLineWrap({ height }) {
+      if (!this.forceMultiLine) {
+        this.forceMultiLine = height > 24 && this.$options.singleLine;
+      }
+    },
+
+    root: {
+      "x-options": '["dismissable", "singleLine"]',
+      "x-show": "!dismissed",
+      ":class": "{'force-multi-line': forceMultiLine}",
+    },
+  };
+});

data/app/components/coco/app/elements/alert/alert.rb

@@ -0,0 +1,72 @@
+module Coco
+  module App
+    module Elements
+      class Alert < Coco::Component
+        include Concerns::WithIcon
+        include Concerns::AcceptsTheme
+
+        THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
+
+        THEME_ICONS = {
+          positive: :check_circle,
+          positive_vivid: :check_circle,
+          warning: :alert_triangle,
+          warning_vivid: :alert_triangle,
+          negative: :alert_circle,
+          negative_vivid: :alert_circle,
+          info: :info,
+          info_vivid: :info
+        }.freeze
+
+        accepts_option :dismissable, from: [true, false], default: false
+        accepts_option :banner, from: [true, false], default: false
+        accepts_option :theme, from: THEMES, default: "info"
+        accepts_option :single_line, from: [true, false]
+
+        renders_one :title
+
+        renders_one :action, ->(**kwargs, &block) do
+          theme = vivid? ? "neutral-dark" : get_option_value(:theme)
+          Coco::App::Elements::Button.new(**kwargs, theme: theme, size: :sm, icon: nil)
+        end
+
+        renders_one :secondary_action, ->(**kwargs, &block) do
+          theme = vivid? ? "neutral-light" : "text-#{get_option_value(:theme)}"
+          Coco::App::Elements::Button.new(**kwargs, theme: theme, size: :sm, icon: nil)
+        end
+
+        renders_one :link, ->(**kwargs, &block) do
+          theme = vivid? ? nil : unvividify(get_option_value(:theme))
+          Coco::App::Elements::Link.new(**kwargs, theme: theme, size: :sm, icon: nil)
+        end
+
+        before_render do
+          theme = get_option_value(:theme)
+
+          unless tag_attr?(:id)
+            set_tag_attr(:id, "alert-#{rand(1000)}")
+          end
+
+          icon(name: THEME_ICONS[theme.tr("-", "_").to_sym])
+        end
+
+        def dismissable?
+          get_option_value(:dismissable)
+        end
+
+        def single_line?
+          get_option_value(:single_line)
+        end
+
+        def vivid?
+          theme = get_option_value(:theme)
+          theme.to_s.match?(/vivid$/)
+        end
+
+        def unvividify(theme)
+          theme.to_s.match?(/vivid$/) ? theme.to_s.underscore.gsub("_vivid", "").to_sym : theme
+        end
+      end
+    end
+  end
+end