coveragebook_components 0.5.0

data/app/components/coco/base/image_uploader/image_uploader.js

@@ -0,0 +1,84 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("imageUploader", ({ click, drop }) => {
+  return {
+    file: null,
+    errors: [],
+    active: false,
+    clickable: click,
+    droppable: drop,
+    input: null,
+
+    get fileName() {
+      return this.file && this.file.name;
+    },
+
+    get fileType() {
+      return this.file && this.file.type;
+    },
+
+    get fileSize() {
+      return this.file && this.file.size;
+    },
+
+    get fileData() {
+      return this.file && this.file.data;
+    },
+
+    init() {
+      this.input = this.$refs.input;
+
+      this.$watch("file", (file) => {
+        const dataTransfer = new DataTransfer();
+        if (file && file.file instanceof File) {
+          dataTransfer.items.add(file.file);
+        }
+        this.input.files = dataTransfer.files;
+      });
+    },
+
+    setFile(file) {
+      this.file = file;
+    },
+
+    openPicker() {
+      this.input.click();
+    },
+
+    clear() {
+      this.file = null;
+      this.$dispatch("image-uploader:clear");
+    },
+
+    handleDrop(event) {
+      const files = event.detail.files || event.dataTransfer.files;
+      this.handleFiles(files);
+    },
+
+    handleFiles(files) {
+      Array.from(files).forEach((file) => this.readFile(file));
+    },
+
+    readFile(file) {
+      const reader = new FileReader();
+
+      reader.addEventListener("load", () => {
+        this.file = {
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          file: file,
+          data: reader.result,
+        };
+
+        this.$dispatch("image-uploader:load", { file: this.file });
+      });
+
+      reader.addEventListener("error", () => {
+        this.errors.push(`Error reading file: ${file.name}`);
+      });
+
+      reader.readAsDataURL(file);
+    },
+  };
+});

data/app/components/coco/base/image_uploader/image_uploader.rb

@@ -0,0 +1,32 @@
+module Coco
+  class ImageUploader < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :click, from: [true, false], default: true
+    accepts_option :drop, from: [true, false], default: true
+
+    attr_reader :name, :accept, :form_builder
+
+    def initialize(name: nil, accept: "image/*", form_builder: nil, **kwargs)
+      @name = name || random_id
+      @accept = accept
+      @form_builder = form_builder
+    end
+
+    def file_field(**kwargs)
+      if form_builder
+        form_builder.file_field(@name, **kwargs)
+      else
+        file_field_tag(@name, **kwargs)
+      end
+    end
+
+    def clickable?
+      get_option_value(:click)
+    end
+
+    def droppable?
+      get_option_value(:drop)
+    end
+  end
+end

data/app/components/coco/base/link/link.css

@@ -0,0 +1,25 @@
+@layer components {
+  [data-coco].coco-link {
+    @apply inline-flex items-center;
+
+    &[data-icon-position="start"] {
+      .link-text {
+        @apply order-2;
+      }
+
+      [data-component="icon"] {
+        @apply order-1 mr-[0.4em];
+      }
+    }
+
+    &[data-icon-position="end"] {
+      .link-text {
+        @apply order-1 mr-[0.4em];
+      }
+
+      [data-component="icon"] {
+        @apply order-2;
+      }
+    }
+  }
+}

data/app/components/coco/base/link/link.rb

@@ -0,0 +1,20 @@
+module Coco
+  class Link < Coco::Component
+    include Concerns::Extendable
+    include Concerns::ActsAsLink
+    include Concerns::WithIcon
+
+    after_initialize do
+      get_option(:icon, :position).default = "start"
+    end
+
+    def call
+      render component_tag(class: "coco-link") do
+        safe_join([
+          icon,
+          icon? ? tag.span(link_text, class: "link-text") : link_text
+        ])
+      end
+    end
+  end
+end

data/app/components/coco/base/placeholder/placeholder.css

@@ -0,0 +1,17 @@
+@layer components {
+  [data-coco][data-component="placeholder"] {
+    @apply border border-dashed border-gray-400 p-4 bg-gray-50 text-center;
+
+    &[data-size="full"] {
+      @apply w-full h-full;
+
+      .placeholder-inner {
+        @apply flex items-center justify-center h-full w-full;
+      }
+
+      .placeholder-content {
+        @apply m-auto;
+      }
+    }
+  }
+}

data/app/components/coco/base/placeholder/placeholder.html.erb

@@ -0,0 +1,7 @@
+<%= render component_tag do %>
+  <div class="placeholder-inner">
+    <div class="placeholder-content">
+      <%= content %>
+    </div>
+  </div>
+<% end %>

data/app/components/coco/base/placeholder/placeholder.rb

@@ -0,0 +1,7 @@
+module Coco
+  class Placeholder < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, from: [:auto, :full], default: :auto
+  end
+end

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.css

@@ -0,0 +1,107 @@
+@layer components {
+  [data-coco][data-component="book-editable-slide"] {
+    /* 
+     * x-padding at max (1480px): 240px / 16.2%
+     * x-padding at min (320px): 16.2% x 320px = 52px
+     */
+    --x-padding: max(38px, clamp(52px, 16.2cqw, 240px));
+
+    /* 
+     * y-padding at max (1480px): 80px / 5.4%
+     * y-padding at min (320px): 5.4% x 320px = 17px
+     */
+    --y-padding: max(38px, clamp(17px, 5.4cqw, 80px));
+
+    /* 
+     * Title font size at max (1480px): 80px / 5.4%
+     * Title font size at min (320px): 5.4% x 320px = 17px
+     * Text font size at reflow (700px): 35px
+     */
+    --title-font-size: max(
+      35px,
+      clamp(17px, 5.4cqw, theme(fontSize.display-2))
+    );
+
+    /* 
+     * Text font size at max (1480px): 32px / 2.16%
+     * Text font size at min (320px): 2.16% x 320px = 7px
+     * Text font size at reflow (700px): 14px
+     */
+    --text-font-size: max(
+      15px,
+      clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
+    );
+
+    /* ------------- */
+
+    @apply bg-white relative rounded-md @container;
+    min-width: 320px;
+
+    .slide-aspect {
+      @apply @slide-fluid:aspect-slide min-h-[62.5cqw] grid grid-cols-1 grid-rows-1;
+    }
+
+    .slide-container {
+      @apply @slide-fluid:absolute @slide-fluid:inset-0;
+      @apply flex flex-col items-center justify-center text-center overflow-hidden bg-cover bg-center;
+    }
+
+    [data-slide-region],
+    .slide-text,
+    .slide-media {
+      @apply hidden;
+    }
+
+    .slide-group {
+      @apply contents;
+    }
+
+    /* layouts */
+
+    &[data-layout="basic"] {
+      @apply text-center bg-no-repeat bg-cover;
+
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-text {
+          @apply block;
+        }
+      }
+
+      .slide-container {
+        @apply overflow-hidden;
+        @apply px-8;
+        @apply py-[var(--y-padding)] @slide-fluid:px-[var(--x-padding)];
+      }
+
+      .slide-header {
+        @apply w-full;
+        margin-bottom: 0.3em;
+        line-height: 1.1;
+        font-size: var(--title-font-size);
+      }
+
+      .slide-content {
+        @apply flex-none w-full;
+      }
+
+      .slide-header,
+      .slide-content {
+        @apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
+      }
+
+      .slide-title {
+        @apply font-bold text-current;
+        overflow-wrap: anywhere;
+        line-height: 1.1;
+      }
+
+      .slide-text {
+        @apply text-current;
+        line-height: 1.4;
+        font-size: var(--text-font-size);
+      }
+    }
+  }
+}

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb

@@ -0,0 +1,24 @@
+<%= render component_tag(style: slide_styles) do %>
+  <div class="slide-aspect">
+    <div class="slide-container">
+
+      <div class="slide-group">
+        <header class="slide-header">
+          <% if title? %>
+            <h3 class="slide-title" data-role="title">
+              <%= title %>
+            </h3>
+          <% end %>
+        </header>
+
+        <div class="slide-content" data-slide-region="content-1">
+          <% if text_1? %>
+            <div class="slide-text" data-role="text-1">
+              <%= text_1 %>
+            </div>  
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb

@@ -0,0 +1,49 @@
+module Coco
+  module Book
+    module Blocks
+      module Slides
+        class EditableSlide < Coco::Component
+          include Concerns::AcceptsOptions
+          include Coco::TagHelper
+          include Coco::FormatHelper
+
+          accepts_option :layout, from: %w[basic], default: "basic"
+
+          renders_one :title,
+            ->(&block) do
+              @has_content = true
+              block.call
+            end
+
+          renders_one :text_1,
+            ->(&block) do
+              @has_content = true
+              block.call
+            end
+
+          attr_reader :bg_image, :text_color_hex, :bg_color_hex
+
+          def initialize(bg_image: nil, bg_color_hex: nil, text_color_hex: nil, render_empty: false, **kwargs)
+            @bg_image = bg_image
+            @bg_color_hex = bg_color_hex
+            @text_color_hex = text_color_hex
+            @has_content = false
+            @render_empty = render_empty
+          end
+
+          def render?
+            @has_content || @render_empty == true
+          end
+
+          def slide_styles
+            style_str({
+              background_color: format_css_hex_color(bg_color_hex),
+              color: format_css_hex_color(text_color_hex),
+              background_image: ("url('#{bg_image}')" if bg_image)
+            })
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/coco/book/blocks/slides/media_slide/media_slide.css

@@ -0,0 +1,7 @@
+@layer components {
+  [data-coco][data-component="book-media-slide"] {
+    img {
+      @apply w-full rounded-md;
+    }
+  }
+}

data/app/components/coco/book/blocks/slides/media_slide/media_slide.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag(:figure) do %>
+  <%= image_tag src, alt: alt %>
+<% end %>

data/app/components/coco/book/blocks/slides/media_slide/media_slide.rb

@@ -0,0 +1,16 @@
+module Coco
+  module Book
+    module Blocks
+      module Slides
+        class MediaSlide < Coco::Component
+          attr_reader :src, :alt
+
+          def initialize(src:, alt: nil, **kwargs)
+            @src = src
+            @alt = alt
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/coco/component.rb

@@ -0,0 +1,109 @@
+module Coco
+  class Component < ViewComponent::Base
+    include Concerns::AcceptsTagAttributes
+    include Concerns::HasName
+    include Coco::ComponentHelper
+    include Coco::AlpineHelper
+
+    def accepts_options?
+      self.class.respond_to?(:accepts_option)
+    end
+
+    protected
+
+    def args
+      @_args ||= {}
+    end
+
+    def args=(new_args)
+      @_args = new_args
+    end
+
+    def component_args
+      @_component_args ||= {**args}
+    end
+
+    def call
+      render component_tag(tag_name) do
+        content
+      end
+    end
+
+    def before_render
+      content unless content_evaluated?
+
+      tag_attrs[:data] ||= {}
+      tag_attrs[:data][:component] = component_name
+      tag_attrs[:data][:coco] = "✔️"
+
+      self.class.send(:run_callbacks, :before_render, nil, context: self)
+
+      if accepts_options?
+        accepted_options.validate_required!
+        accepted_options.flattened_attribute_values.each { tag_attrs[:data][_1] = _2 }
+      end
+
+      tag_attrs.compact!
+    end
+
+    def component_tag(tag = nil, **attrs)
+      Tag.new(tag || tag_name || :div, root: true, **merge_tag_attrs(**attrs))
+    end
+
+    def merge_tag_attrs(**attrs)
+      merged_attrs = attrs.deep_merge(tag_attrs)
+      classes = class_names(attrs[:class], tag_attrs[:class])
+      merged_attrs[:class] = classes if classes.present?
+      merged_attrs
+    end
+
+    class << self
+      def new(**kwargs)
+        # If a `before_initialize` callback returns a hash then
+        # that is used as the new kwargs value which will eventually
+        # be used to initialize the component.
+        kwargs = run_callbacks(:before_initialize, kwargs, reduce: true)
+
+        obj = super(**kwargs)
+
+        if obj.instance_of?(Coco::Component)
+          raise "`Coco::Component` must be subclassed before use"
+        end
+
+        obj.instance_variable_set(:@_args, kwargs)
+        obj.send(:process_tag_attrs, kwargs)
+        obj.send(:merge_option_values, kwargs) if obj.accepts_options?
+        obj.class.send(:run_callbacks, :after_initialize, {}, context: obj) && obj
+      end
+
+      def before_render(method_name = nil, &callback)
+        callbacks[:before_render].push(method_name || callback)
+      end
+
+      def after_initialize(method_name = nil, &callback)
+        callbacks[:after_initialize].push(method_name || callback)
+      end
+
+      def before_initialize(method_name = nil, &callback)
+        callbacks[:before_initialize].push(method_name || callback)
+      end
+
+      private
+
+      def run_callbacks(type, args, context: self, reduce: false)
+        callbacks[type].inject(args) do |memo, cb|
+          result = cb.is_a?(Symbol) ? context.send(cb, memo) : context.instance_exec(memo, &cb)
+          (reduce && result.is_a?(Hash) && args.is_a?(Hash)) ? result : memo
+        end
+      end
+
+      def callbacks
+        @_callbacks ||= {
+          before_render: [],
+          before_initialize: [],
+          after_initialize: []
+        }
+      end
+    end
+  end
+end

data/app/components/coco/concerns/accepts_options.rb

@@ -0,0 +1,31 @@
+module Coco
+  module Concerns
+    module AcceptsOptions
+      extend ActiveSupport::Concern
+
+      delegate :get_option_value,
+        :set_option_value,
+        :option_value_equals?,
+        :get_option,
+        :merge_option_values,
+        :option_names,
+        to: :accepted_options
+
+      def get_option_group(...)
+        accepted_options.get_group(...)
+      end
+
+      def accepted_options
+        @_accepted_options ||= self.class.option_group.clone
+      end
+
+      class_methods do
+        delegate :accepts_option, to: :option_group
+
+        def option_group
+          @_options ||= Coco::Options::Group.new(:root)
+        end
+      end
+    end
+  end
+end

data/app/components/coco/concerns/accepts_tag_attributes.rb

@@ -0,0 +1,61 @@
+module Coco
+  module Concerns
+    module AcceptsTagAttributes
+      extend ActiveSupport::Concern
+
+      TAG_ATTRIBUTE_NAMES = %i[id class data aria test_data x].freeze
+
+      class_methods do
+        def tag_name(name = nil)
+          @_tag_name = name if name
+          @_tag_name
+        end
+
+        def tag_attr(*attr_names)
+          tag_attr_names.push(*attr_names)
+        end
+
+        def tag_attr_names
+          @_tag_attr_names ||= [*TAG_ATTRIBUTE_NAMES]
+        end
+      end
+
+      def tag_attrs
+        @_tag_attrs ||= {}
+      end
+
+      protected
+
+      def tag_name(name = nil)
+        @tag_name = name if name
+        @tag_name ||= self.class.tag_name
+      end
+
+      def tag_name=(name)
+        @tag_name = name
+      end
+
+      def set_tag_attr(attr_name, value = "")
+        tag_attrs[attr_name] = value
+      end
+
+      def set_tag_data_attr(attr_name, value = "")
+        tag_attrs[:data] ||= {}
+        tag_attrs[:data][attr_name] = value
+      end
+
+      def tag_attr?(attr_name)
+        tag_attrs.key?(attr_name)
+      end
+
+      private
+
+      def process_tag_attrs(args)
+        @_tag_attrs ||= {}
+        @_tag_attrs.merge!(args[:html].to_h)
+        @_tag_attrs.merge!(args.slice(*self.class.tag_attr_names))
+        @_component_args = args.except(*self.class.tag_attr_names, :html)
+      end
+    end
+  end
+end

data/app/components/coco/concerns/accepts_theme.rb

@@ -0,0 +1,19 @@
+module Coco
+  module Concerns
+    module AcceptsTheme
+      extend ActiveSupport::Concern
+
+      THEMES = []
+
+      included do
+        before_initialize do |kwargs|
+          if kwargs[:theme]
+            kwargs[:theme] = kwargs[:theme].to_s.tr("_", "-")
+          end
+
+          kwargs
+        end
+      end
+    end
+  end
+end

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -0,0 +1,59 @@
+module Coco
+  module Concerns
+    module ActsAsButtonGroup
+      extend ActiveSupport::Concern
+      include Coco::AppHelper
+
+      included do
+        renders_many :items, types: {
+          divider: ->(**kwargs) { tag.div(class: "divider") },
+          button: ->(**kwargs) {
+            if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
+              App::Elements::FormButton.new(**button_kwargs(kwargs, :form_button))
+            else
+              App::Elements::Button.new(**button_kwargs(kwargs, :button))
+            end
+          },
+          menu_button: ->(**kwargs) { App::Elements::MenuButton.new(**button_kwargs(kwargs, :menu)) },
+          color_picker_button: ->(**kwargs) { App::Elements::ColorPickerButton.new(**button_kwargs(kwargs, :color_picker)) },
+          image_picker_button: ->(**kwargs) { App::Elements::ImagePickerButton.new(**button_kwargs(kwargs, :image_picker)) },
+          dropdown_button: ->(**kwargs) { App::Elements::DropdownButton.new(**button_kwargs(kwargs, :dropdown)) }
+        }
+      end
+
+      def with_divider(...)
+        with_item_divider(...)
+      end
+
+      def with_button(...)
+        with_item_button(...)
+      end
+
+      def with_menu_button(...)
+        with_item_menu_button(...)
+      end
+
+      def with_color_picker_button(...)
+        with_item_color_picker_button(...)
+      end
+
+      def with_image_picker_button(...)
+        with_item_image_picker_button(...)
+      end
+
+      def with_dropdown_button(...)
+        with_item_dropdown_button(...)
+      end
+
+      private
+
+      def button_kwargs(kwargs, type = nil)
+        {
+          size: args[:size],
+          resize: args[:resize],
+          **kwargs
+        }
+      end
+    end
+  end
+end