coveragebook_components 0.5.0

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

@@ -0,0 +1,109 @@
+@layer components {
+  [data-coco][data-component="app-image-picker"] {
+    .picker-blank-state {
+      @apply flex flex-col items-center;
+    }
+
+    .picker-placeholder-text {
+      @apply text-center mb-5;
+    }
+
+    .picker-file-name {
+      @apply font-semibold truncate text-center mb-5 block;
+    }
+
+    .picker-thumbnail {
+      @apply w-full;
+    }
+
+    .picker-actions {
+      @apply flex items-center justify-between;
+    }
+
+    /* Sizes */
+
+    &[data-size="sm"] {
+      @apply app-image-picker-sm;
+    }
+
+    &[data-size="md"] {
+      @apply app-image-picker-md;
+    }
+
+    @media screen(md) {
+      &[data-size-md="sm"] {
+        @apply app-image-picker-sm;
+      }
+
+      &[data-size-md="md"] {
+        @apply app-image-picker-md;
+      }
+    }
+
+    @media screen(lg) {
+      &[data-size-lg="sm"] {
+        @apply app-image-picker-sm;
+      }
+
+      &[data-size-lg="md"] {
+        @apply app-image-picker-md;
+      }
+    }
+
+    @media screen(xl) {
+      &[data-size-xl="sm"] {
+        @apply app-image-picker-sm;
+      }
+
+      &[data-size-xl="md"] {
+        @apply app-image-picker-md;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .app-image-picker-sm {
+    @apply p-6;
+    width: 196px;
+
+    &.has-image {
+      width: 258px;
+    }
+
+    .picker-placeholder-text {
+      @apply text-para-sm;
+      width: 148px;
+    }
+
+    .picker-file-name {
+      @apply text-label-sm;
+    }
+
+    .picker-actions {
+      @apply pt-6;
+    }
+  }
+
+  .app-image-picker-md {
+    @apply p-8;
+    width: 220px;
+
+    &.has-image {
+      width: 298px;
+    }
+
+    .picker-placeholder-text {
+      @apply text-para-md;
+      width: 172px;
+    }
+
+    .picker-file-name {
+      @apply text-label-md;
+    }
+
+    .picker-actions {
+      @apply pt-8;
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+<%= render component_tag(x: {data: x_data("appImagePicker", alpine_props), ":class": "hasImage && 'has-image'"}) do %>  
+  <div class="picker-file-name" x-show="hasImage">
+    <label x-text="name"></label>
+  </div>
+  <div class="picker-uploader" @image-uploader:load="setImage($event.detail.file)" x-ref="uploader">
+    <%= render Coco::ImageUploader.new(
+      **uploader_args,
+      click: false) do %>
+      <div class="picker-blank-state" x-show="!fileData">
+        <% if blank_state_text? %>
+          <div class="picker-placeholder-text">
+            <%= blank_state_text %>
+          </div>
+        <% end %>
+        <div class="picker-browse-trigger">
+          <%= coco_button(theme: :secondary, click: "$parent.openPicker") do %>
+            Browse your files
+          <% end %>
+        </div>
+      </div>
+      <div x-show="fileData" x-cloak>
+        <img :src="fileData" class="picker-thumbnail">
+      </div>
+    <% end %>
+  </div>
+  <div class="picker-actions" x-show="hasImage">
+    <%= coco_button(theme: :text_secondary, icon: :repeat, click: "$parent.replaceImage()") do %>
+      Replace
+    <% end %>
+
+    <%= coco_button(theme: :text_negative, icon: :trash_2, click: "$parent.clearImage(false)") do %>
+      Delete
+    <% end %>
+  </div>
+<% end %>
+
+  

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

@@ -0,0 +1,49 @@
+import { CocoComponent } from "@js/coco";
+import { getComponent } from "@helpers/alpine";
+
+export default CocoComponent("appImagePicker", ({ image }) => {
+  return {
+    use: [],
+    image: null,
+
+    get name() {
+      return this.image && this.image.name;
+    },
+
+    get src() {
+      return this.image && this.image.data;
+    },
+
+    get hasImage() {
+      return !!this.src;
+    },
+
+    get uploader() {
+      return getComponent(this.$refs.uploader.firstElementChild);
+    },
+
+    setImage(file, silent = false) {
+      this.image = file;
+      this.uploader.setFile(file);
+      if (silent === false) {
+        this.$dispatch("image-picker:select", { image: this.image });
+      }
+    },
+
+    clearImage(silent = false) {
+      this.uploader.clear();
+      this.image = null;
+      if (silent === false) {
+        this.$dispatch("image-picker:clear");
+      }
+    },
+
+    browseFiles() {
+      this.uploader.openPicker();
+    },
+
+    replaceImage() {
+      this.uploader.openPicker();
+    },
+  };
+});

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

@@ -0,0 +1,34 @@
+module Coco
+  module App
+    module Elements
+      class ImagePicker < Coco::Component
+        include Concerns::AcceptsOptions
+        include Coco::AppHelper
+
+        accepts_option :size, from: [:sm, :md, nil], default: :sm
+
+        renders_one :blank_state_text
+
+        before_render do
+          args[:resize]&.each { set_tag_data_attr("size-#{_1}", _2) }
+        end
+
+        attr_reader :uploader_args, :src
+
+        def initialize(input_name: nil, src: nil, accept: "image/*", form_builder: nil, **kwargs)
+          @src = src
+          @uploader_args = {name: input_name, accept: accept, form_builder: form_builder}
+        end
+
+        def alpine_props
+          {
+            image: {
+              name: (src.present? && File.basename(src)),
+              data: src
+            }
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+@layer components {
+  [data-coco][data-component="app-image-picker-button"] {
+    @apply inline-flex;
+    width: max-content;
+
+    [data-component="app-image-picker"] {
+      @apply rounded-md;
+    }
+
+    .picker-file-input {
+      @apply hidden;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<%= render component_tag(x: {
+  data: x_data("appImagePickerButton", alpine_props),
+  "@dropdown:mount": "onDropdownMount"
+}) do %> 
+  <%= input %>
+  <%= render button do |btn| %>
+    <% btn.with_dropdown do %>
+      <div
+        @image-picker:select="setSelectedImage($event.detail.image)"
+        @image-picker:clear="clearSelectedImage"
+        x-cloak>
+        <div data-role="image-picker">
+          <%= picker %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= button_text %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,67 @@
+import { CocoComponent } from "@js/coco";
+import { getData } from "@helpers/alpine";
+
+export default CocoComponent("appImagePickerButton", ({ image }) => {
+  return {
+    selectedImage: image,
+
+    dropdown: null,
+
+    init() {
+      this.$watch("selectedImage", (file) => {
+        const dataTransfer = new DataTransfer();
+        if (file && file.file instanceof File) {
+          dataTransfer.items.add(file.file);
+        }
+        this.$refs.fileInput.files = dataTransfer.files;
+
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      });
+    },
+
+    getPicker() {
+      return getData(
+        this.$root.querySelector("[data-role='image-picker'").firstElementChild
+      );
+    },
+
+    handleExternalDrop(event) {
+      this.readFile(event.dataTransfer.files[0]);
+    },
+
+    readFile(file) {
+      const reader = new FileReader();
+
+      reader.addEventListener("load", () => {
+        this.selectedImage = {
+          name: file.name,
+          file: file,
+          data: reader.result,
+        };
+      });
+
+      // reader.addEventListener("error", () => {
+      //   this.errors.push(`Error reading file: ${file.name}`);
+      // });
+
+      reader.readAsDataURL(file);
+    },
+
+    clearSelectedImage() {
+      this.dropdown.hide();
+      this.selectedImage = null;
+    },
+
+    setSelectedImage(image) {
+      this.dropdown.hide();
+      this.selectedImage = image;
+    },
+
+    onDropdownMount({ detail }) {
+      this.dropdown = detail.dropdown;
+      this.getPicker().setImage(this.selectedImage, true);
+    },
+  };
+});

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

@@ -0,0 +1,85 @@
+module Coco
+  module App
+    module Elements
+      class ImagePickerButton < Coco::Component
+        include Concerns::WithDropdownOptions
+        include Concerns::WrapsComponent
+        include Coco::AppHelper
+
+        wraps_component :button do |args|
+          Coco::App::Elements::Button.new(icon: :image_plus, **args)
+        end
+
+        renders_one :text, Coco::Content
+
+        renders_one :picker, ->(picker = nil, **kwargs, &block) do
+          if picker.is_a?(Coco::App::Elements::ImagePicker)
+            picker
+          else
+            picker&.to_s.presence || Coco::App::Elements::ImagePicker.new(
+              size: @size,
+              resize: @resize,
+              src: @src,
+              **kwargs
+            )
+          end
+        end
+
+        before_render do
+          with_picker(src: @src) unless picker?
+        end
+
+        attr_reader :src, :input_name
+
+        def initialize(src: nil, input_name: nil, form_builder: nil, direct_upload: false, **kwargs)
+          @src = src
+          @form_builder = form_builder
+          @input_name = input_name
+          @direct_upload = direct_upload
+
+          @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
+        end
+
+        def direct_upload?
+          @direct_upload
+        end
+
+        def alpine_props
+          {
+            image: {
+              name: (src.present? && File.basename(src)),
+              data: src
+            }
+          }
+        end
+
+        def input
+          if input_name
+            kwargs = {
+              class: "picker-file-input",
+              "x-ref": "fileInput",
+              direct_upload: @direct_upload
+            }
+
+            if direct_upload? && !helpers.respond_to?(:rails_direct_uploads_url)
+              kwargs[:data] = {direct_upload_url: @direct_upload}
+            end
+
+            if @form_builder
+              @form_builder.file_field(input_name, **kwargs)
+            else
+              file_field_tag(input_name, **kwargs)
+            end
+          end
+        end
+
+        def button_text
+          text || content
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,60 @@
+@layer components {
+  [data-coco][data-component="app-link"] {
+    @apply no-underline hover:underline;
+
+    &[data-theme="primary"] {
+      @apply app-link-primary;
+    }
+
+    &[data-theme="positive"] {
+      @apply app-link-positive;
+    }
+
+    &[data-theme="negative"] {
+      @apply app-link-negative;
+    }
+
+    &[data-theme="warning"] {
+      @apply app-link-warning;
+    }
+
+    &[data-theme="info"] {
+      @apply app-link-info;
+    }
+
+    &[data-theme="neutral-dark"] {
+      @apply app-link-neutral-dark;
+    }
+
+    &[data-theme="neutral-light"] {
+      @apply app-link-neutral-light;
+    }
+  }
+}
+
+@layer utilities {
+  .app-link-primary,
+  .app-link-positive {
+    @apply text-content-primary active:text-green-700;
+  }
+
+  .app-link-negative {
+    @apply text-content-negative active:text-red-800;
+  }
+
+  .app-link-warning {
+    @apply text-content-warning  active:text-amber-800;
+  }
+
+  .app-link-info {
+    @apply text-content-info active:text-info-800;
+  }
+
+  .app-link-neutral-dark {
+    @apply text-content-dark-1;
+  }
+
+  .app-link-neutral-light {
+    @apply text-content-light-1;
+  }
+}

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

@@ -0,0 +1,14 @@
+module Coco
+  module App
+    module Elements
+      class Link < Coco::Link
+        include Concerns::AcceptsOptions
+        include Concerns::AcceptsTheme
+
+        THEMES = %W[positive primary warning negative info neutral-dark neutral-light] << nil
+
+        accepts_option :theme, from: THEMES
+      end
+    end
+  end
+end

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

@@ -0,0 +1,65 @@
+@layer components {
+  [data-coco][data-component="app-menu"] {
+    width: fit-content;
+
+    .menu-item {
+      > * {
+        @apply w-full;
+      }
+
+      > [data-component="app-button"],
+      > [data-component="app-form-button"],
+      > [data-component="app-menu-button"] {
+        @apply hover:bg-gray-blend-50 active:bg-gray-blend-100;
+
+        .button-inner {
+          @apply justify-start text-left mx-0;
+        }
+
+        .button-content {
+          @apply !font-[400];
+        }
+      }
+    }
+
+    &[data-size="sm"] {
+      @apply py-1.5;
+
+      .menu-item {
+        [data-component="app-button"] > .button-element {
+          @apply px-4 py-2 text-label-sm;
+
+          .button-inner {
+            @apply gap-2;
+
+            > [data-component="icon"] {
+              @apply w-4 h-4;
+            }
+          }
+        }
+      }
+    }
+
+    &[data-size="md"] {
+      @apply py-2;
+
+      .menu-item {
+        [data-component="app-button"] > .button-element {
+          @apply px-5 py-2.5 text-label-md;
+
+          .button-inner {
+            @apply gap-2;
+
+            > [data-component="icon"] {
+              @apply w-5 h-5;
+            }
+          }
+        }
+      }
+    }
+
+    .divider {
+      @apply h-0 border-t border-gray-300;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+<%= render component_tag do %>
+  <ol class="menu-items">
+    <% items.each do |item| %>
+      <li class="menu-item">
+        <%= item %>
+      </li>
+    <% end %>
+  </ol>
+<% end %>

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

@@ -0,0 +1,40 @@
+module Coco
+  module App
+    module Elements
+      class Menu < Coco::Component
+        include Concerns::ActsAsButtonGroup
+        include Concerns::AcceptsOptions
+
+        accepts_option :size, from: [:sm, :md, nil], default: :sm
+
+        renders_many :htmls, ->(*args, **kwargs, &block) do
+          items << block.call
+        end
+
+        before_render do
+          args[:resize]&.each { set_tag_data_attr("size-#{_1}", _2) }
+        end
+
+        def button_kwargs(kwargs, type = nil)
+          btn_kwargs = {
+            theme: nil,
+            size: get_option_value(:size),
+            resize: args[:resize],
+            **kwargs,
+            fit: :full,
+            collapsible: false
+          }
+
+          if type == :menu
+            btn_kwargs[:toggle] = :horizontal
+            btn_kwargs[:dropdown] ||= {
+              placement: "right-start"
+            }
+          end
+
+          btn_kwargs
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+@layer components {
+  [data-coco][data-component="app-menu-button"] {
+    @apply inline-flex;
+    width: max-content;
+
+    &[data-fit="full"] {
+      @apply w-full;
+
+      .menu-trigger {
+        @apply w-full;
+      }
+    }
+
+    [data-component="menu"] {
+      @apply rounded-md;
+    }
+
+    .menu-item {
+      &:first-child > * {
+        @apply rounded-t-md;
+      }
+
+      &:last-child > * {
+        @apply rounded-b-md;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<%= render component_tag(x: {data: "appMenuButton"}) do %>
+  <%= render button do |btn| %>
+    <% if menu? %>
+      <% btn.with_dropdown do %>
+        <%= menu %>
+      <% end %>
+    <% end %>
+
+    <%= button_text %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,6 @@
+import { CocoComponent } from "@js/coco";
+import { getComponent } from "@helpers/alpine";
+
+export default CocoComponent("appMenuButton", () => {
+  return {};
+});

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

@@ -0,0 +1,36 @@
+module Coco
+  module App
+    module Elements
+      class MenuButton < Coco::Component
+        include Concerns::AcceptsOptions
+        include Concerns::WrapsComponent
+        include Coco::AppHelper
+
+        wraps_component :button do |args|
+          Coco::App::Elements::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **args)
+        end
+
+        accepts_option :fit, from: [:auto, :full]
+
+        renders_one :text, Coco::Content
+
+        renders_one :menu, ->(**kwargs) do
+          Coco::App::Elements::Menu.new(size: @size, resize: @resize, **kwargs)
+        end
+
+        attr_reader :size, :resize
+
+        def initialize(button: {}, **kwargs)
+          @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
+        end
+
+        def button_text
+          text || content
+        end
+      end
+    end
+  end
+end