coveragebook_components 0.5.0

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

@@ -0,0 +1,153 @@
+@layer components {
+  [data-coco][data-component="app-color-picker"] {
+    @apply bg-background-light-2;
+
+    .picker-section:not(:first-child) {
+      @apply border-t border-gray-transparent-100;
+    }
+
+    &:not(.picker-color-wheel-open) .picker-display-section {
+      padding-bottom: 0 !important;
+    }
+
+    .picker-display-section {
+      @apply flex items-center;
+    }
+
+    .picker-display {
+      @apply flex items-center gap-2 px-2 border border-content-light-2 max-w-full bg-background-light-1;
+
+      &.picker-error {
+        @apply border-negative-200;
+      }
+    }
+
+    .picker-display-color {
+      @apply rounded-full border border-gray-transparent-200 flex-none;
+    }
+
+    .picker-display-input {
+      @apply p-0 focus:ring-0 border-none bg-background-light-1 w-full text-black;
+    }
+
+    .picker-swatches {
+      @apply grid grid-cols-6 auto-rows-auto gap-y-2;
+    }
+
+    .picker-swatch {
+      @apply rounded-full flex-none border border-gray-transparent-200 cursor-pointer mx-auto;
+
+      &.swatch-current {
+        @apply outline outline-1 outline-content-dark-muted;
+      }
+    }
+
+    /* Sizes */
+
+    &[data-size="sm"] {
+      @apply app-color-picker-sm;
+    }
+
+    &[data-size="md"] {
+      @apply app-color-picker-md;
+    }
+
+    @media screen(md) {
+      &[data-size-md="sm"] {
+        @apply app-color-picker-sm;
+      }
+
+      &[data-size-md="md"] {
+        @apply app-color-picker-md;
+      }
+    }
+
+    @media screen(lg) {
+      &[data-size-lg="sm"] {
+        @apply app-color-picker-sm;
+      }
+
+      &[data-size-lg="md"] {
+        @apply app-color-picker-md;
+      }
+    }
+
+    @media screen(xl) {
+      &[data-size-xl="sm"] {
+        @apply app-color-picker-sm;
+      }
+
+      &[data-size-xl="md"] {
+        @apply app-color-picker-md;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .app-color-picker-sm {
+    @apply p-6;
+    width: 242px;
+
+    .picker-section:not(:first-child) {
+      @apply pt-5;
+    }
+
+    .picker-section:not(:last-child) {
+      @apply pb-5;
+    }
+
+    .picker-swatch {
+      @apply w-6 h-6;
+
+      &.swatch-current {
+        @apply outline-offset-2;
+      }
+    }
+
+    .picker-display-section {
+      @apply gap-2;
+    }
+
+    .picker-display-input {
+      @apply text-para-sm h-9;
+    }
+
+    .picker-display-color {
+      @apply w-5 h-5;
+    }
+  }
+
+  .app-color-picker-md {
+    @apply p-8;
+    width: 304px;
+
+    .picker-section:not(:first-child) {
+      @apply pt-6;
+    }
+
+    .picker-section:not(:last-child) {
+      @apply pb-6;
+    }
+
+    .picker-swatch {
+      @apply w-7 h-7 mx-auto;
+
+      &.swatch-current {
+        @apply outline-offset-[3];
+      }
+    }
+
+    .picker-display-section {
+      @apply gap-3;
+    }
+
+    .picker-display-input {
+      @apply text-para-md h-11;
+    }
+
+    .picker-display-color {
+      @apply w-6 h-6;
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+<%= render component_tag(x: {
+  data: "appColorPicker({selectedColor: '#{selected}'})",
+  ":class": "colorWheel.show && 'picker-color-wheel-open'",
+  dimensions: "onResize"
+}) do %>
+  <div class="picker-section picker-swatches-section">
+    <div class="picker-swatches" x-ref="swatches">
+      <% color_swatches.each do |swatch| %>
+        <%
+          color = swatch[:color].upcase
+          name = swatch[:name]
+        %>
+        <%= coco_tag(:button,
+          type: "button",
+          class: "picker-swatch",
+          style: "background-color: #{color};",
+          maxlength: 7,
+          data: {
+            color: color,
+            tippy: ("tooltip" if name),
+            tippy_content: (name if name),
+            role: "picker-swatch"
+          },
+          x: {
+            "@click": "setSelectedColor('#{color}')",
+            ":class": "{'swatch-current': selectedColor == '#{color}'}"
+          }
+        ) %>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="picker-section picker-display-section" @color-wheel:toggle.stop="toggleColorWheel" x-ref="display">
+    <div class="picker-display" :class="invalid && 'picker-error'">
+      <span class="picker-display-color" :style="`background-color: ${selectedColor}`"></span>
+      <input type="text" class="picker-display-input" x-model="display" x-mask="#******">
+    </div>
+    
+    <%= coco_button(
+      icon: :palette,
+      theme: :secondary,
+      tooltip: {
+        placement: "right",
+        content: "Open colour wheel"
+      },
+      x: {
+        "@click.prevent": "
+          toggleState('active');
+          $dispatch('color-wheel:toggle')
+        "
+      }
+    ) do |button| %>
+      <% button.with_state(:active, tooltip: "Hide colour wheel") %>
+    <% end %>
+    
+  </div>
+
+  <div class="picker-section picker-section-advanced" x-show="colorWheel.show" x-cloak>
+    <div class="picker-advanced">
+      <div x-ref="colorWheel"></div>
+    </div>
+  </div>
+<% end %>
+
+  

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

@@ -0,0 +1,102 @@
+import iro from "@jaames/iro";
+import { CocoComponent } from "@js/coco";
+import { isValidHex, formatHex } from "@helpers/color";
+import { getComponent } from "@helpers/alpine";
+
+export default CocoComponent("appColorPicker", ({ selected }) => {
+  return {
+    use: false,
+
+    selectedColor: selected,
+    display: selected,
+    updating: false,
+    invalid: false,
+
+    colorWheel: {
+      show: false,
+      instance: null,
+      interacting: false,
+    },
+
+    getColorWheelToggle() {
+      return getComponent(this.$refs.display.querySelector(".coco-button"));
+    },
+
+    init() {
+      this.initColorWheel();
+
+      this.$watch("display", (value) => {
+        if (!this.updating) {
+          if (isValidHex(value)) {
+            this.invalid = false;
+            this.selectedColor = formatHex(value);
+          } else {
+            this.invalid = true;
+          }
+        }
+      });
+
+      this.$watch("selectedColor", (value) => {
+        const hex = formatHex(value);
+        this.updating = true;
+        this.display = hex;
+
+        if (this.colorWheel.instance) {
+          this.colorWheel.instance.color.hexString = hex;
+        }
+
+        this.$dispatch("color-picker:select", {
+          selectedColor: this.selectedColor,
+        });
+        this.$nextTick(() => (this.updating = false));
+      });
+    },
+
+    setSelectedColor(color) {
+      this.selectedColor = color;
+      this.invalid = false;
+    },
+
+    toggleAdvancedView() {
+      this.colorWheel.show = !this.colorWheel.show;
+    },
+
+    initColorWheel() {
+      this.cleanupColorWheel();
+
+      const colorWheel = new iro.ColorPicker(this.$refs.colorWheel, {
+        width: this.$refs.swatches.clientWidth,
+        color: this.selectedColor,
+      });
+
+      colorWheel.on("input:end", (color) => {
+        if (!this.updating) {
+          this.selectedColor = color.hexString;
+          this.invalid = false;
+        }
+      });
+
+      this.colorWheel.instance = colorWheel;
+    },
+
+    onResize() {
+      if (this.colorWheel.instance) {
+        this.colorWheel.instance.resize(this.$refs.swatches.clientWidth);
+      }
+    },
+
+    toggleColorWheel() {
+      this.colorWheel.show = !this.colorWheel.show;
+    },
+
+    cleanupColorWheel() {
+      this.colorWheel.instance = null;
+      this.$refs.colorWheel.innerHTML = "";
+    },
+
+    destroy() {
+      this.getColorWheelToggle().resetState();
+      this.cleanupColorWheel();
+    },
+  };
+});

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

@@ -0,0 +1,53 @@
+module Coco
+  module App
+    module Elements
+      class ColorPicker < Coco::Component
+        include Concerns::AcceptsOptions
+        include Coco::AppHelper
+
+        DEFAULT_SWATCHES = [
+          {color: "#111827"},
+          {color: "#FFFFFF"},
+          {color: "#E78188"},
+          {color: "#D50201"},
+          {color: "#FC5C0E"},
+          {color: "#FEC878"},
+          {color: "#F5EEE6"},
+          {color: "#C1DAA9"},
+          {color: "#1A8871"},
+          {color: "#91C7E1"},
+          {color: "#0164FF"},
+          {color: "#3A2D86"}
+        ]
+
+        accepts_option :size, from: [:sm, :md, nil], default: :sm
+
+        before_render do
+          content unless content_evaluated?
+
+          if @swatches.empty?
+            @swatches = DEFAULT_SWATCHES
+          end
+
+          args[:resize]&.each { set_tag_data_attr("size-#{_1}", _2) }
+        end
+
+        renders_many :swatches,
+          ->(color, name = nil) do
+            @swatches << {name: name, color: color}
+          end
+
+        attr_reader :selected
+
+        def initialize(selected: "FFFFFF", **kwargs)
+          @selected = selected
+          @swatches = []
+        end
+
+        def color_swatches
+          @swatches
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+@layer components {
+  [data-coco][data-component="app-color-picker-button"] {
+    @apply inline-flex;
+    width: max-content;
+
+    .picker-icon {
+      @apply w-full h-full block;
+    }
+
+    .picker-button-color {
+      @apply w-full h-full block rounded-full bg-white border border-gray-900;
+    }
+
+    [data-component="app-color-picker"] {
+      @apply rounded-md;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+<%= render component_tag(x: {
+  data: x_data("appColorPickerButton", {selected: selected}),
+  "@dropdown:mount": "onDropdownMount()"
+}) do %> 
+  <%= input %>
+  <%= render button do |btn| %>
+    <% btn.with_icon do %>
+      <%= icon %>
+    <% end %>
+
+    <% btn.with_dropdown do %>
+      <div
+        @color-picker:select="selectedColor = $event.detail.selectedColor;"
+        x-cloak>
+        <div data-role="color-picker">
+          <%= picker %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= button_text %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,27 @@
+import { CocoComponent } from "@js/coco";
+import { getData } from "@helpers/alpine";
+
+export default CocoComponent("appColorPickerButton", ({ selected }) => {
+  selected = selected ? "#" + selected.replace("#", "") : "#FFFFFF";
+  return {
+    selectedColor: selected,
+
+    getPicker() {
+      return getData(
+        this.$root.querySelector("[data-role='color-picker']").firstElementChild
+      );
+    },
+
+    get selectedColorHex() {
+      return this.selectedColor && this.selectedColor.replace("#", "");
+    },
+
+    set selectedColorHex(value) {
+      this.selectedColor == "#" + value.replace("#", "");
+    },
+
+    onDropdownMount() {
+      this.getPicker().setSelectedColor(this.selectedColor);
+    },
+  };
+});

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

@@ -0,0 +1,71 @@
+module Coco
+  module App
+    module Elements
+      class ColorPickerButton < Coco::Component
+        include Concerns::WithDropdownOptions
+        include Concerns::WrapsComponent
+        include Coco::AppHelper
+
+        wraps_component :button do |args|
+          Coco::App::Elements::Button.new(**args)
+        end
+
+        renders_one :text, Coco::Content
+
+        renders_one :picker, ->(picker = nil, **kwargs, &block) do
+          if picker.is_a?(Coco::App::Elements::ColorPicker)
+            picker
+          else
+            picker&.to_s.presence || Coco::App::Elements::ColorPicker.new(
+              size: @size,
+              resize: @resize,
+              selected: @selected,
+              **kwargs
+            )
+          end
+        end
+
+        renders_one :icon, ->(&block) do
+          tag.span class: "picker-icon", ":style": "{color: selectedColor}", &block
+        end
+
+        before_render do
+          with_picker(selected: @selected) unless picker?
+          unless icon?
+            with_icon do
+              tag.span class: "picker-button-color", ":style": "{backgroundColor: selectedColor}"
+            end
+          end
+        end
+
+        attr_reader :selected
+
+        def initialize(selected: nil, input_name: nil, form_builder: nil, **kwargs)
+          @selected = selected
+
+          @size = kwargs.fetch(:size, :default)&.to_sym
+          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          end
+
+          @form_builder = form_builder
+          @input_name = input_name
+        end
+
+        def input
+          if @input_name
+            if @form_builder
+              @form_builder.hidden_field(@input_name, value: @selected, "x-model": "selectedColorHex")
+            else
+              hidden_field_tag(@input_name, @selected, "x-model": "selectedColorHex")
+            end
+          end
+        end
+
+        def button_text
+          text || content
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+@layer components {
+  [data-coco][data-component="app-confirm-panel"] {
+    width: min-content;
+    @apply px-5 py-4 text-center max-w-[200px] space-y-4;
+
+    .confirm-text {
+      @apply text-label-sm font-semibold;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+<%= render component_tag(x: {data: "appConfirmPanel"}) do %>
+  <% if text? %>
+    <div class="confirm-text">
+      <%= text %>
+    </div>
+  <% end %>
+  <% if button? %>
+    <div class="confirm-button" @click="confirm">
+      <%= button %>
+    </div>
+  <% end %>
+  <% if cancel? %>
+    <div class="confirm-cancel" @click="cancel">
+      <%= cancel %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,13 @@
+import { CocoComponent } from "@js/coco.js";
+
+export default CocoComponent("appConfirmPanel", () => {
+  return {
+    confirm() {
+      this.$dispatch("confirmation:confirm");
+    },
+
+    cancel() {
+      this.$dispatch("confirmation:cancel");
+    },
+  };
+});

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

@@ -0,0 +1,23 @@
+module Coco
+  module App
+    module Elements
+      class ConfirmPanel < Coco::Component
+        renders_one :button, ->(**kwargs, &block) do
+          coco_button(theme: :negative, **kwargs, fit: :full, size: :sm, &block)
+        end
+
+        renders_one :cancel, ->(**kwargs, &block) do
+          coco_button(theme: :secondary, **kwargs, fit: :full, size: :sm, &block)
+        end
+
+        renders_one :text, Coco::Content
+
+        before_render do
+          unless button?
+            raise ArgumentError, "No confirmation button defined"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+@layer components {
+  [data-coco][data-component="app-form-button"] {
+    @apply inline-flex;
+    width: max-content;
+
+    form {
+      @apply w-full;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+<%= render component_tag do %> 
+  <%= form_with(**form_args) do |form| %>
+    <% params.each do |param| %>
+      <%= tag :input, type: "hidden", **param %>
+    <% end %>
+
+    <%= render button do |btn| %>
+      <%= content %>
+    <% end %>
+  <% end %>
+<% end %>
+

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

@@ -0,0 +1,47 @@
+module Coco
+  module App
+    module Elements
+      class FormButton < Coco::Component
+        include Concerns::WrapsComponent
+
+        wraps_component :button do |args|
+          Coco::App::Elements::Button.new(type: :submit, **args)
+        end
+
+        %i[confirmation].each do |slot_name|
+          renders_one slot_name, ->(**kwargs, &block) do
+            button.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          end
+        end
+
+        attr_reader :method, :turbo
+
+        def initialize(form: nil, params: nil, method: :post, action: nil, href: nil, turbo: false, **kwargs)
+          @form_args = form.to_h
+          @action = action || href
+          @method = method
+          @params = params.to_h
+          @turbo = turbo
+        end
+
+        def params
+          to_form_params(@params)
+        end
+
+        def form_args
+          {
+            url: action,
+            method: method,
+            data: {
+              turbo: ("false" if !turbo)
+            }
+          }.deep_merge(@form_args)
+        end
+
+        def action
+          @action.is_a?(String) ? @action : helpers.url_for(@action)
+        end
+      end
+    end
+  end
+end