coveragebook_components 0.5.0

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

@@ -0,0 +1,187 @@
+import { CocoComponent } from "@js/coco.js";
+import { camelCase } from "lodash";
+
+export default CocoComponent("button", (data = {}) => {
+  return {
+    use: false,
+
+    options: ["state", "confirm", "size", "disabled", "collapsible"],
+
+    isCollapsed: false,
+    approving: false,
+    confirmed: true,
+    lastState: null,
+    stateTooltips: data.tooltips || {},
+    tooltipText: null,
+
+    ...(data.props || {}),
+
+    init() {
+      this.lastState = this.state;
+
+      this.$nextTick(() => {
+        if (this.$options.confirm) {
+          this.confirmed = false;
+        }
+      });
+
+      this.$watch("collapsed", (collapsed) => {
+        if (collapsed && !this.collapsible) {
+          this.collapsed = false;
+          return;
+        }
+
+        this.setTooltipText();
+        this.$root.setAttribute("data-collapsed", collapsed ? "true" : "false");
+      });
+
+      this.$watch("$options.state", () => this.setTooltipText());
+    },
+
+    setTooltipText() {
+      if (this.disabled) {
+        this.tooltipText = null;
+        return;
+      }
+
+      const defaultContent = this.$el.getAttribute("data-tippy-content");
+      const tooltipForState = this.stateTooltips[this.state];
+
+      if (this.collapsed) {
+        // Show the supplied tooltip if any was set,
+        // otherwise use the button label text instead.
+        const labelText = this.getContentForState(this.state);
+        this.tooltipText = tooltipForState || labelText || defaultContent;
+      } else {
+        this.tooltipText = tooltipForState || defaultContent;
+      }
+    },
+
+    showTooltip() {
+      return !!this.tooltipText;
+    },
+
+    get disabled() {
+      return this.$options.disabled === true;
+    },
+
+    set disabled(value) {
+      this.$options.disabled = value;
+    },
+
+    /* confirmation */
+
+    checkConfirmation(event) {
+      if (!this.confirmed) {
+        this.approving = true;
+        event.preventDefault();
+      }
+    },
+
+    approveAndRun(event) {
+      if (this.approving) {
+        event.stopPropagation();
+        this.confirmed = true;
+        this.dropdown.trigger.click();
+        this.dropdown.hide();
+        this.confirmed = false;
+        this.approving = false;
+      }
+    },
+
+    cancelConfirmation(event) {
+      if (this.approving) {
+        event.stopPropagation();
+        this.approving = false;
+        this.dropdown.hide();
+      }
+    },
+
+    /* state */
+
+    get state() {
+      return this.$options.state || "default";
+    },
+
+    set state(name) {
+      this.setState(name);
+    },
+
+    get loading() {
+      return this.state === "loading";
+    },
+
+    set loading(value) {
+      this.$options.state = value === true ? "loading" : "default";
+    },
+
+    setState(name) {
+      this.lastState = this.state;
+      this.$options.state = camelCase(name);
+    },
+
+    resetState() {
+      this.$options.state = this.lastState || "default";
+      this.lastState = this.$options.state;
+    },
+
+    toggleState(state1, state2 = this.laststate) {
+      this.state = this.state === state1 ? state2 : state1;
+    },
+
+    getContentForState(state) {
+      const content = this.$refs[`${state}Content`];
+      return content ? content.innerText : null;
+    },
+
+    hasIconForState(state) {
+      return !!this.$refs[`${state}Icon`];
+    },
+
+    hasContentForState(state) {
+      return !!this.getContentForState(state);
+    },
+
+    showIcon(state) {
+      return (
+        state === this.state ||
+        (!this.hasIconForState(this.state) && state === "default")
+      );
+    },
+
+    showContent(state) {
+      return (
+        state === this.state ||
+        (!this.hasContentForState(this.state) && state === "default")
+      );
+    },
+
+    /* collapsing */
+
+    get collapsed() {
+      return this.isCollapsed;
+    },
+
+    set collapsed(value) {
+      this.isCollapsed = this.collapsible ? value : false;
+    },
+
+    get collapsible() {
+      return (
+        this.$options.collapsible !== false &&
+        this.hasIconForState(this.$options.state || "default")
+      );
+    },
+
+    /* bindings */
+
+    root: {
+      "x-options": "options",
+      "x-tooltip": "tooltipText",
+      "@confirmation:confirm": "approveAndRun",
+      "@confirmation:cancel": "cancelConfirmation",
+      "@dropdown:show": "setState('active')",
+      "@dropdown:hide": "resetState()",
+    },
+  };
+});

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

@@ -0,0 +1,228 @@
+module Coco
+  class Button < Coco::Component
+    include Concerns::Extendable
+    include Concerns::AcceptsOptions
+    include Concerns::WithIcon
+    include Concerns::WithTooltip
+    include Concerns::AcceptsTheme
+
+    SIZES = [:sm, :md, :lg, nil]
+
+    SIZE_ALIASES = {
+      default: [:sm, {xl: :md}]
+    }
+
+    THEMES = []
+
+    DEFAULT_THEME = nil
+
+    BUTTON_ATTRS = %i[type value name disabled href]
+
+    tag_name :button
+    tag_attr(*BUTTON_ATTRS)
+
+    accepts_option :disabled, from: [true, false]
+    accepts_option :confirm, from: [true, false, nil], default: nil
+    accepts_option :fit, from: [:auto, :full]
+    accepts_option :collapsible, from: [true, false, nil]
+    accepts_option :toggle, from: [:horizontal, :vertical]
+    accepts_option :state
+
+    accepts_option :dropdown do |dd|
+      dd.accepts_option :placement,
+        from: %w[top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end auto auto-start auto-end]
+    end
+
+    renders_one :text, Coco::Content
+
+    renders_many :states, ->(name = nil, **kwargs) do
+      name ||= kwargs.fetch(:name)
+      @states[name.to_sym] = kwargs.except!(:name)
+    end
+
+    before_initialize do |kwargs|
+      accepts_option :size, from: self::SIZES, default: :md
+      accepts_option :theme, from: self::THEMES, default: self::DEFAULT_THEME
+
+      button_size = kwargs.fetch(:size, :default)&.to_sym
+      if button_size.in?(self::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+        kwargs[:size], kwargs[:resize] = self::SIZE_ALIASES.fetch(button_size)
+      end
+
+      kwargs
+    end
+
+    before_render do
+      resize.each { set_tag_data_attr("size-#{_1}", _2) }
+
+      if loading?
+        set_option_value(:state, "loading")
+      elsif active?
+        set_option_value(:state, "active")
+      end
+
+      @button_attrs = tag_attrs.slice(*BUTTON_ATTRS).merge(@button_element_attrs)
+      tag_attrs.except!(*BUTTON_ATTRS)
+
+      if disabled?
+        button_attrs[:disabled] = true
+      end
+
+      if dropdown?
+        set_option_value(:dropdown, :placement, "bottom-start") unless get_option(:dropdown, :placement).present?
+        # @button_attrs["data-tippy-placement"] = get_option(:dropdown, :placement).value
+        # set_option_value(:dropdown, true)
+      end
+
+      unless button_attrs[:type] || link?
+        button_attrs[:type] = "button"
+      end
+    end
+
+    attr_reader :on_click, :resize, :props, :button_attrs
+
+    def initialize(click: nil, resize: nil, props: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
+      @on_click = click
+      @props = props.to_h
+      @resize = resize.to_h
+      @states = states.to_h
+      @loading = loading
+      @active = active
+      @alpine_data = {}
+      @button_element_attrs = button_element
+
+      super(**kwargs)
+    end
+
+    def toggle?
+      toggle_direction.present? && button_text.present?
+    end
+
+    def toggle_direction
+      get_option_value(:toggle)
+    end
+
+    def button_tag_name
+      button_attrs[:href].present? ? :a : :button
+    end
+
+    def button_text
+      text&.to_s || content&.to_s || ""
+    end
+
+    def loading?
+      @loading == true
+    end
+
+    def active?
+      @active == true
+    end
+
+    def confirm?
+      get_option_value(:confirm)
+    end
+
+    def disabled?
+      get_option_value(:disabled)
+    end
+
+    def link?
+      button_tag_name == :a
+    end
+
+    def button?
+      button_tag_name == :button
+    end
+
+    def icon_only?
+      !states.find { _2[:text].present? }
+    end
+
+    def dropdown?
+      false
+    end
+
+    def dropdown_opts
+      if dropdown?
+        jsify_data({
+          appendTo: "parent",
+          offset: [0, 1],
+          placement: get_option_value(:dropdown, :placement)
+        }.compact)
+      end
+    end
+
+    def component_classes
+      [
+        "coco-button",
+        tag_attrs[:class],
+        {
+          "icon-only": icon_only?,
+          "with-icon": (icon? && !icon_only?)
+        }
+      ]
+    end
+
+    def states
+      @_states ||= begin
+        states = default_states.deep_merge(@states)
+
+        states.each do |name, props|
+          if props.key?(:icon)
+            if props[:icon] == false
+              props.except!(:icon) # explicitly no icon
+            else
+              props[:icon] = render_icon(props[:icon])
+            end
+          elsif icon?
+            props[:icon] = icon # no icon specified, use the icon for the default state
+          end
+        end.compact.transform_keys { _1.to_s.camelcase(:lower) }
+      end
+    end
+
+    def state_tooltips
+      @_tooltips = states.map do |name, props|
+        [name, props[:tooltip]] if props[:tooltip].present?
+      end.compact.to_h
+    end
+
+    def alpine_data
+      if props.present? || state_tooltips.present?
+        {
+          tooltips: (state_tooltips if state_tooltips.present?),
+          props: (props if props.present?)
+        }.compact
+      end
+    end
+
+    private
+
+    def default_states
+      states = {
+        default: {
+          text: button_text,
+          icon: icon,
+          tooltip: get_option_value(:tooltip, :content)
+        }
+      }
+
+      if @states.key?(:loading)
+        states[:loading] = {
+          text: "Loading...",
+          icon: :loader_2,
+          tooltip: nil
+        }
+      end
+
+      states
+    end
+
+    def render_icon(icon)
+      return icon if icon.nil? || icon.is_a?(String)
+
+      icon = icon.is_a?(Symbol) ? {name: icon} : icon
+      icon.is_a?(Hash) ? render(Coco::Icon.new(**icon)) : icon
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+module Coco
+  # Use `Content` as a helper to render content passed to a slot without adding any tags.
+  class Content < ViewComponent::Base
+    def initialize(body = nil)
+      @body = body
+    end
+
+    def call
+      content.presence&.html_safe || @body&.html_safe
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+@layer components {
+  [data-coco][data-component="dropdown"] {
+    width: fit-content;
+
+    .dropdown-trigger {
+      @apply cursor-pointer;
+      width: fit-content;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= render component_tag(x: {dropdown: true}) do %>
+  <div class="dropdown-trigger" x-dropdown:trigger>
+    <%= trigger || content %>
+  </div>
+  <div class="dropdown-content" x-dropdown:content>
+    <%= dropdown %>
+  </div>
+<% end %>

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

@@ -0,0 +1,7 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("dropdown", () => {
+  return {
+    use: false,
+  };
+});

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

@@ -0,0 +1,7 @@
+module Coco
+  class Dropdown < Coco::Component
+    include Concerns::WithDropdown
+
+    renders_one :trigger
+  end
+end

data/app/components/coco/base/embeds/youtube/youtube.css

@@ -0,0 +1,9 @@
+@layer components {
+  [data-coco][data-component="youtube-embed"] {
+    @apply aspect-[16/9];
+
+    & iframe {
+      @apply w-full h-full;
+    }
+  }
+}

data/app/components/coco/base/embeds/youtube/youtube.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag do %>
+  <iframe src="<%= src %>" allowfullscreen></iframe>
+<% end %>

data/app/components/coco/base/embeds/youtube/youtube.rb

@@ -0,0 +1,20 @@
+module Coco
+  module Embeds
+    class Youtube < Coco::Component
+      component_name :youtube_embed
+
+      def initialize(url:, **kwargs)
+        @url = url
+      end
+
+      def video_id
+        youtube_url = /youtube.com\/(watch\?v=|v\/)([^&]+)/.match(@url)
+        youtube_url[2] if youtube_url
+      end
+
+      def src
+        "https://www.youtube.com/embed/#{video_id}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+@layer components {
+  [data-coco][data-component="icon"] {
+    @apply inline-flex flex-none w-6 h-6 text-current;
+
+    svg {
+      @apply icon w-full h-full;
+    }
+
+    /* Styles */
+
+    &[data-icon]:not([data-style="fill"]) svg {
+      @apply icon-stroke;
+    }
+
+    &[data-icon][data-style="fill"] svg {
+      @apply icon-fill;
+    }
+
+    /* Sizes */
+
+    &[data-size="sm"] {
+      @apply w-4 h-4;
+    }
+
+    &[data-size="md"] {
+      @apply w-5 h-5;
+    }
+
+    &[data-size="lg"] {
+      @apply w-6 h-6;
+    }
+
+    &[data-size="xl"] {
+      @apply w-9 h-9;
+    }
+
+    &[data-size="xxl"] {
+      @apply w-12 h-12;
+    }
+
+    /* Motion */
+
+    &[data-spin="true"] svg {
+      @apply animate-spin;
+    }
+
+    &[data-spin="reverse"] svg {
+      @apply animate-spin-reverse;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= render component_tag(:i,
+  class: "coco-icon",
+  x: {
+    data: "icon",
+    bind: "root"
+  }) do %>
+  <%= content || svg %>
+<% end %>

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

@@ -0,0 +1,27 @@
+import { CocoComponent } from "@js/coco.js";
+
+export default CocoComponent("icon", () => {
+  return {
+    options: ["style", "spin"],
+
+    get spin() {
+      return this.$options.spin;
+    },
+
+    set spin(val) {
+      this.$options.spin = val;
+    },
+
+    get fill() {
+      return this.$options.style === "fill";
+    },
+
+    set fill(val) {
+      this.$options.style = val === true ? "fill" : "line";
+    },
+
+    root: {
+      "x-options": "options",
+    },
+  };
+});

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

@@ -0,0 +1,38 @@
+module Coco
+  class Icon < Coco::Component
+    include Concerns::AcceptsOptions
+
+    ICON_CACHE = {}
+
+    InvalidIconError = Class.new(StandardError)
+
+    accepts_option :size, from: %i[sm md lg xl xxl]
+    accepts_option :spin, from: [true, false]
+    accepts_option :style, from: [:line, :fill]
+
+    def initialize(name: nil, **kwargs)
+      @icon_name = name&.to_s&.tr("_", "-")
+      set_tag_data_attr(:icon, name) if name
+    end
+
+    def name
+      @icon_name
+    end
+
+    def svg
+      ICON_CACHE[name] ||= read_svg
+    end
+
+    def read_svg
+      File.read(svg_path).html_safe
+    rescue
+      if Rails.env.development? || Rails.env.test?
+        raise InvalidIconError, "`#{name}` is not a valid icon name"
+      end
+    end
+
+    def svg_path
+      Coco::Engine.root.join("app/assets/build/coco/icons/#{name}.svg")
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+@layer components {
+  [data-coco][data-component="image"] {
+    @apply max-w-full block;
+  }
+}

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

@@ -0,0 +1,17 @@
+module Coco
+  class Image < Coco::Component
+    include Concerns::AcceptsOptions
+
+    tag_name :img
+    tag_attr :src, :alt
+
+    accepts_option :lazy,
+      from: [true, false],
+      default: false,
+      private: true
+
+    before_render do
+      set_tag_attr(:loading, "lazy") if option_value_equals?(:lazy, true)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+@layer components {
+  [data-coco][data-component="image-uploader"] {
+    @apply contents;
+
+    &[data-click="true"] {
+      @apply cursor-pointer;
+    }
+
+    .uploader-input {
+      @apply hidden;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+<%= render component_tag(x: {
+  data: "imageUploader({click: #{clickable?.to_json}, drop: #{droppable?.to_json}})",
+  "@click.stop": "if (clickable) openPicker()",
+  "@dragenter.stop.prevent": "active = true",
+  "@dragover.stop.prevent": "active = true",
+  "@dragleave.stop.prevent": "active = false",
+  "@drop.stop.prevent": "active = false; handleDrop($event)",
+  ":data-active": "active && droppable"
+}) do %>
+  <%= file_field accept: accept,
+    class: "uploader-input",
+    "x-ref": "input",
+    "@click.stop": "",
+    "@change": "handleFiles($el.files)" %>
+  <%= content %>
+<% end %>
+
+