coveragebook_components 0.5.0

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

@@ -0,0 +1,5 @@
+@layer components {
+  [data-coco][data-component="app-notice"] {
+    @apply rounded-xl overflow-hidden;
+  }
+}

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

@@ -0,0 +1,5 @@
+<%= render component_tag(x: { data: "appNotice" }) do %>
+  <%= render alert do %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appNotice", () => {
+  return {};
+});

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

@@ -0,0 +1,22 @@
+module Coco
+  module App
+    module Elements
+      class Notice < Coco::Component
+        include Concerns::AcceptsOptions
+        include Concerns::WrapsComponent
+
+        accepts_option :dismissable, from: [true, false], default: true
+
+        wraps_component :alert do |args|
+          Coco::App::Elements::Alert.new(**args, dismissable: get_option_value(:dismissable))
+        end
+
+        %i[title action secondary_action link].each do |slot_name|
+          renders_one slot_name, ->(**kwargs, &block) do
+            alert.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+@layer components {
+  [data-coco][data-component="app-seamless-textarea"] {
+    @apply text-current;
+
+    textarea {
+      @apply block p-0 m-0 border-none w-full focus:ring-0 text-current;
+
+      overflow: hidden;
+      resize: none;
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      line-height: inherit;
+      background: inherit;
+      text-align: inherit;
+      overflow-wrap: anywhere;
+
+      &::placeholder {
+        @apply text-current opacity-40 transition-opacity;
+      }
+
+      &:hover,
+      &:focus {
+        &::placeholder {
+          @apply opacity-60;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+<%= render component_tag(x: {data: "appSeamlessTextarea"}) do %>
+  <%= text_area(
+      spellcheck: false,
+      rows: 1,
+      **x_attrs({
+        "@keydown.enter.prevent": (true unless multiline?),
+        "@input": "onResize",
+        ref: "textarea",
+        "model.debounce": "value"
+      })
+    ) %>
+<% end %>

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

@@ -0,0 +1,37 @@
+import { CocoComponent } from "@js/coco";
+import { withSizeObserver } from "@js/base/mixins";
+
+export default CocoComponent("appSeamlessTextarea", () => {
+  return {
+    use: [withSizeObserver()],
+
+    height: null,
+    observer: null,
+    value: null,
+
+    get singleLine() {
+      return this.assertData("multiline", "false");
+    },
+
+    init() {
+      this.value = this.$refs.textarea.value;
+    },
+
+    onResize() {
+      const textarea = this.$refs.textarea;
+
+      if (textarea) {
+        const styles = window.getComputedStyle(textarea);
+        const fontSize = styles.getPropertyValue("font-size");
+
+        textarea.style.height = "4px";
+        let newHeight = textarea.scrollHeight - parseInt(fontSize, 10) * 0.16;
+        textarea.style.height = `${newHeight}px`;
+
+        if (this.height !== newHeight) {
+          this.height = newHeight;
+        }
+      }
+    },
+  };
+});

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

@@ -0,0 +1,44 @@
+module Coco
+  module App
+    module Elements
+      class SeamlessTextarea < Coco::Component
+        include TagHelper
+        include Concerns::WrapsComponent
+        include Concerns::AcceptsOptions
+
+        wraps_component :textarea
+
+        accepts_option :multiline, from: [true, false]
+
+        attr_reader :name, :id
+
+        def initialize(name:, value: nil, id: nil, placeholder: nil, textarea: nil, form_builder: nil, **kwargs)
+          @name = name
+          @value = value
+          @form_builder = form_builder
+          @textarea_args = textarea.to_h
+          @textarea_args[:id] = id
+          @textarea_args[:placeholder] = placeholder
+        end
+
+        def multiline?
+          get_option_value(:multiline)
+        end
+
+        def value
+          (@value.presence || content.presence || "").strip_heredoc.strip
+        end
+
+        def text_area(**html_args)
+          args = @textarea_args.merge(html_args.compact)
+
+          if @form_builder
+            @form_builder.text_area(name, value: value, **args)
+          else
+            text_area_tag(name, value, **args)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,105 @@
+@layer components {
+  [data-coco][data-component="app-snackbar"] {
+    @apply bg-background-dark-2 rounded-xl overflow-hidden shadow-xl w-full;
+    max-width: 360px;
+
+    .snackbar-container {
+      @apply flex items-center py-2 pl-4 pr-2;
+    }
+
+    .snackbar-icon {
+      @apply flex-none mr-2.5 flex text-content-light-1 items-center;
+
+      .coco-icon {
+        @apply w-5 h-5;
+      }
+    }
+
+    .snackbar-content {
+      @apply text-label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
+    }
+
+    .coco-button .button-element {
+      @apply hover:bg-background-dark-3;
+    }
+
+    .snackbar-action {
+      @apply flex-none ml-auto;
+
+      .coco-button .button-element {
+        @apply px-2 text-content-info-inverse;
+      }
+    }
+
+    .snackbar-dismiss {
+      @apply flex-none ml-auto;
+
+      .coco-button .button-element {
+        @apply text-content-light-2 hover:text-content-light-1;
+      }
+    }
+
+    /* Positioning */
+
+    &[data-position="static"] {
+      @apply static;
+    }
+
+    &[data-position="fixed"] {
+      @apply fixed bottom-8 left-1/2 -translate-x-1/2;
+      z-index: 1000;
+    }
+
+    /* Themes */
+
+    &[data-theme="positive"] {
+      .snackbar-icon {
+        @apply text-content-positive-inverse;
+      }
+    }
+
+    &[data-theme="warning"] {
+      .snackbar-icon {
+        @apply text-content-warning-inverse;
+      }
+    }
+
+    &[data-theme="negative"] {
+      .snackbar-icon {
+        @apply text-content-negative-inverse;
+      }
+    }
+
+    &[data-theme="pending"] {
+      .snackbar-icon {
+        @apply text-content-info-inverse;
+      }
+    }
+
+    /* Transitions */
+
+    &.snackbar-enter {
+      @apply transition ease-out duration-150;
+    }
+
+    &.snackbar-enter-start {
+      @apply opacity-0 scale-90;
+    }
+
+    &.snackbar-enter-end {
+      @apply opacity-100 scale-100;
+    }
+
+    &.snackbar-leave {
+      @apply transition ease-in duration-150;
+    }
+
+    &.snackbar-leave-start {
+      @apply opacity-100 scale-100;
+    }
+
+    &.snackbar-leave-end {
+      @apply opacity-0 scale-90;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+<%= render component_tag(x: {
+  data: "appSnackbar",
+  "bind": "root",
+  cloak: true
+}) do %>
+  <div class="snackbar-container">
+    <% if icon? %>
+      <div class="snackbar-icon" data-role="icon">
+        <%= icon %>  
+      </div>
+    <% end %>
+    <div class="snackbar-content" data-role="content">
+      <%= content %>
+    </div>
+    <% if action? %>
+      <div class="snackbar-action"
+        x-ref="action"
+        @click="notification.dismiss"
+        data-role="action">
+        <%= action %>
+      </div>
+    <% end %>
+    <div
+      class="snackbar-dismiss"
+      x-ref="dismiss"
+      data-role="dismiss">
+      <%= coco_button(
+        icon: :x,
+        size: :sm,
+        theme: :blank,
+        class: "snackbar-dismiss-button",
+        click: "notification.dismiss"
+      ) %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,25 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appSnackbar", () => {
+  return {
+    use: false,
+
+    notificationType: "snackbar",
+    options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
+
+    root: {
+      "x-options": "options",
+      "x-notification": "notificationType",
+      "x-show": "notification.shown && !notification.dismissed",
+      "@mouseover": "notification.clearAutoDismiss",
+      "@mouseout": "notification.startAutoDismiss",
+      "@snackbar:show.document": "notification.clearFromQueue",
+      "x-transition:enter": "snackbar-enter",
+      "x-transition:enter-start": "snackbar-enter-start",
+      "x-transition:enter-end": "snackbar-enter-end",
+      "x-transition:leave": "snackbar-leave",
+      "x-transition:leave-start": "snackbar-leave-start",
+      "x-transition:leave-end": "snackbar-leave-end",
+    },
+  };
+});

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

@@ -0,0 +1,38 @@
+module Coco
+  module App
+    module Elements
+      class Snackbar < Coco::Component
+        include Concerns::WithIcon
+        include Concerns::ActsAsNotification
+
+        THEME_ICONS = {
+          positive: :check,
+          warning: :alert_triangle,
+          negative: :alert_circle,
+          pending: :loader_2
+        }.freeze
+
+        accepts_option :theme, from: [:positive, :warning, :negative, :pending]
+
+        renders_one :action, ->(**kwargs, &block) do
+          Coco::App::Elements::Button.new(**kwargs, theme: :blank, size: :sm, icon: nil)
+        end
+
+        before_render do
+          theme = get_option_value(:theme)
+
+          unless tag_attr?(:id)
+            set_tag_attr(:id, "snackbar-#{rand(1000)}")
+          end
+
+          if !icon? && theme.present?
+            icon_opts = get_option_group(:icon).values
+            icon_name = THEME_ICONS[theme]
+            spin = theme == :pending
+            icon(**icon_opts, name: icon_name, spin: spin)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+@layer components {
+  [data-coco][data-component="app-system-banner"] {
+  }
+}

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

@@ -0,0 +1,5 @@
+<%= render component_tag(x: { data: "appSystemBanner" }) do %>
+  <%= render alert do %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appSystemBanner", () => {
+  return {};
+});

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

@@ -0,0 +1,29 @@
+module Coco
+  module App
+    module Elements
+      class SystemBanner < Coco::Component
+        include Concerns::AcceptsOptions
+        include Concerns::WrapsComponent
+
+        wraps_component :alert do |args|
+          theme = vivid_theme_name(args.fetch(:theme, nil)) || :info_vivid
+          Coco::App::Elements::Alert.new(**args, theme: theme, banner: true, single_line: true)
+        end
+
+        %i[title action secondary_action link].each do |slot_name|
+          renders_one slot_name, ->(**kwargs, &block) do
+            alert.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          end
+        end
+
+        private
+
+        def vivid_theme_name(theme)
+          if theme.present?
+            "#{theme.to_s.underscore.gsub("_vivid", "")}_vivid".to_sym
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+@layer components {
+  [data-coco][data-component="app-toast"] {
+    @apply shadow-xl rounded-xl overflow-hidden w-full;
+    max-width: 360px;
+
+    /* Positioning */
+
+    &[data-position="static"] {
+      @apply static;
+    }
+
+    &[data-position="fixed"] {
+      @apply fixed top-8 right-8;
+      z-index: 1000;
+    }
+
+    /* Transitions */
+
+    &.toast-enter {
+      @apply transition ease-out duration-150;
+    }
+
+    &.toast-enter-start {
+      @apply opacity-0 scale-90;
+    }
+
+    &.toast-enter-end {
+      @apply opacity-100 scale-100;
+    }
+
+    &.toast-leave {
+      @apply transition ease-in duration-300;
+    }
+
+    &.toast-leave-start {
+      @apply opacity-100 scale-100;
+    }
+
+    &.toast-leave-end {
+      @apply opacity-0 scale-90;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+<%= render component_tag(x: {
+  data: "appToast",
+  bind: "root",
+  cloak: true
+}) do %>
+  <%= render alert do %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,26 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appToast", () => {
+  return {
+    use: false,
+
+    notificationType: "toast",
+    options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
+
+    root: {
+      "x-options": "options",
+      "x-notification": "notificationType",
+      "x-show": "notification.shown && !notification.dismissed",
+      "x-transition:enter": "toast-enter",
+      "x-transition:enter-start": "toast-enter-start",
+      "x-transition:enter-end": "toast-enter-end",
+      "x-transition:leave": "toast-leave",
+      "x-transition:leave-start": "toast-leave-start",
+      "x-transition:leave-end": "toast-leave-end",
+      "@mouseover": "notification.clearAutoDismiss",
+      "@mouseout": "notification.startAutoDismiss",
+      "@alert:dismiss": "notification.dismiss",
+      "@toast:show.document": "notification.clearFromQueue",
+    },
+  };
+});

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

@@ -0,0 +1,23 @@
+module Coco
+  module App
+    module Elements
+      class Toast < Coco::Component
+        include Concerns::WrapsComponent
+        include Concerns::ActsAsNotification
+
+        accepts_option :dismissable, from: [true, false], default: true
+        accepts_option :dismiss, from: [true, false], default: false
+
+        wraps_component :alert do |args|
+          Coco::App::Elements::Alert.new(**args, dismissable: get_option_value(:dismissable))
+        end
+
+        %i[title action secondary_action link].each do |slot_name|
+          renders_one slot_name, ->(**kwargs, &block) do
+            alert.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+@layer components {
+  [data-coco][data-component="app-toolbar"] {
+    .toolbar-sections {
+      @apply flex items-center gap-x-2;
+    }
+
+    .toolbar-section {
+      @apply min-w-[1%] flex-grow flex;
+    }
+
+    .toolbar-section-start {
+      @apply justify-start;
+    }
+
+    .toolbar-section-end {
+      @apply justify-end;
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+<%= render component_tag(x: { data: "appToolbar", "bind:class": "{ready}"}) do %>
+  <div class="toolbar-sections">
+    <div class="toolbar-section toolbar-section-start" x-ref="startSection" :style="{width: startSectionWidth}">
+      <%= start_section %>
+    </div>
+    <div class="toolbar-section toolbar-section-end" x-ref="endSection" :style="{width: endSectionWidth}">
+      <%= end_section %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,49 @@
+import { CocoComponent } from "@js/coco";
+import { getComponent } from "@helpers/alpine";
+
+export default CocoComponent("appToolbar", () => {
+  return {
+    ready: false,
+    startSectionWidth: null,
+    endSectionWidth: null,
+
+    get startGroupEl() {
+      return this.$refs.startSection.firstElementChild;
+    },
+
+    get endGroupEl() {
+      return this.$refs.endSection.firstElementChild;
+    },
+
+    get groups() {
+      return [this.startGroupEl, this.endGroupEl]
+        .filter((g) => g)
+        .map((el) => getComponent(el, false));
+    },
+
+    init() {
+      const toolbarWidth = this.$el.offsetWidth;
+      let startSectionWidth = 0;
+      let endSectionWidth = 0;
+
+      if (this.startGroupEl) {
+        startSectionWidth = Math.ceil(
+          (this.startGroupEl.offsetWidth / toolbarWidth) * 100
+        );
+      }
+
+      if (this.endGroupEl) {
+        endSectionWidth = Math.ceil(
+          (this.endGroupEl.offsetWidth / toolbarWidth) * 100
+        );
+      }
+
+      this.$nextTick(() => {
+        this.startSectionWidth = `${startSectionWidth}%`;
+        this.endSectionWidth = `${endSectionWidth}%`;
+        this.groups.forEach((group) => group.onResize());
+        this.ready = true;
+      });
+    },
+  };
+});

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

@@ -0,0 +1,41 @@
+module Coco
+  module App
+    module Elements
+      class Toolbar < Coco::Component
+        include Coco::AppHelper
+
+        renders_many :sections,
+          ->(*args, align: nil, **kwargs, &block) do
+            alignment = if align.nil?
+              @sections[:start].nil? ? :start : :end
+            else
+              align
+            end.to_sym
+
+            unless @sections[alignment].nil?
+              raise "Toolbar already has a `#{alignment}` section defined"
+            end
+
+            component = Coco::App::Elements::ButtonGroup.new(**kwargs, theme: :toolbar, collapsible: true)
+            @sections[alignment] = view_context.render(component, &block)
+          end
+
+        def initialize(**kwargs)
+          @sections = {
+            start: nil,
+            end: nil
+          }
+          super(**kwargs)
+        end
+
+        def start_section
+          @sections[:start]
+        end
+
+        def end_section
+          @sections[:end]
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/fields/button_component.rb

@@ -0,0 +1,16 @@
+module Coco
+  module App
+    module Fields
+      class ButtonComponent < ViewComponent::Form::ButtonComponent
+        include Concerns::ActsAsFieldWithOptions
+        include Coco::AppHelper
+
+        def call
+          coco_button(**options) do
+            content || value
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/fields/check_box_component.rb

@@ -0,0 +1,9 @@
+module Coco
+  module App
+    module Fields
+      class CheckBoxComponent < ViewComponent::Form::CheckBoxComponent
+        include Concerns::ActsAsFieldWithOptions
+      end
+    end
+  end
+end