coveragebook_components 0.9.1 → 0.10.1.beta.0

data/app/components/coco/{base → shared}/button/button.rb

@@ -6,73 +6,90 @@ module Coco
     include Concerns::WithTooltip
     include Concerns::AcceptsTheme
 
-    SIZES = [:sm, :md, :lg, nil]
+    SIZES = [:xs, :sm, :md, :lg, nil]
 
     SIZE_ALIASES = {
       default: [:sm, {xl: :md}]
     }
 
-    THEMES = []
-
-    DEFAULT_THEME = nil
+    THEMES = [
+      "primary",
+      "text-primary",
+      "secondary",
+      "text-secondary",
+      "positive",
+      "text-positive",
+      "negative",
+      "text-negative",
+      "warning",
+      "text-warning",
+      "info",
+      "text-info",
+      "toolbar",
+      "toolbar-floating",
+      "text-toolbar",
+      "neutral-dark",
+      "neutral-light",
+      "text-neutral-light",
+      "text-neutral-dark",
+      "blank",
+      nil
+    ]
+
+    DEFAULT_THEME = "primary"
 
     tag_attr :type, :value, :name, :disabled, :href, :target
 
+    accepts_option :size, from: SIZES, default: :md
+    accepts_option :theme, from: THEMES, default: DEFAULT_THEME
     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 :variant
 
     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]
+        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],
+        private: true
     end
 
     renders_one :text, Coco::Content
 
+    renders_one :dropdown, types: {
+      content: ->(&block) { block.call },
+      confirmation: ->(**kwargs) do
+        set_option_value(:confirm, true)
+        Coco::App::Elements::ConfirmPanel.new(**kwargs)
+      end
+    }
+
     renders_many :states, ->(name = nil, **kwargs) do
       name ||= kwargs.fetch(:name)
       @states[name.to_sym] = kwargs.except!(:name)
     end
 
-    before_initialize do |kwargs|
-      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
-
-      set_tag_attr(:disabled, true) if disabled?
-      set_tag_attr(:type, "button") unless tag_attr?(:type) || link?
-
-      if dropdown? || confirm? && get_option(:dropdown, :placement).blank?
-        set_option_value(:dropdown, :placement, "bottom-start")
-      end
-    end
-
     attr_reader :on_click, :resize
 
-    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, tooltip: nil, **kwargs)
+    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, static: nil, **kwargs)
       @on_click = click
       @resize = resize.to_h
       @states = states.to_h
       @loading = loading
+      @static = static
       @active = active
     end
 
+    def with_dropdown(...)
+      with_dropdown_content(...)
+    end
+
+    def with_confirmation(...)
+      with_dropdown_confirmation(...)
+    end
+
     def toggle?
       toggle_direction.present? && button_text.present?
     end
@@ -89,6 +106,14 @@ module Coco
       text&.to_s || content&.to_s || ""
     end
 
+    def static?
+      if @static.nil?
+        !(confirm? || dropdown? || tooltip? || @states.any? || on_click.present? || get_option_value(:collapsible))
+      else
+        @static
+      end
+    end
+
     def loading?
       @loading == true
     end
@@ -101,6 +126,10 @@ module Coco
       get_option_value(:confirm)
     end
 
+    def tooltip?
+      get_option_value(:tooltip, :content).present?
+    end
+
     def disabled?
       get_option_value(:disabled)
     end
@@ -114,22 +143,16 @@ module Coco
     end
 
     def icon_only?
-      !states.find { _2[:text].present? }
-    end
-
-    def dropdown?
-      false
+      (@states.none? && button_text.blank?) ||
+        !states.find { _2[:text].present? }
     end
 
     def alpine_wrapper_attrs
       if dropdown? || confirm?
         {
           data: x_data("buttonDropdown"),
-          dropdown: jsify_data({offset: [0, 1], placement: get_option_value(:dropdown, :placement)}.compact),
-          "@dropdown:show": ("button.setState('active')" if dropdown?),
-          "@dropdown:hide": ("button.resetState()" if dropdown?),
-          "@confirmation:confirm": ("button.approveAndRun($event)" if confirm?),
-          "@confirmation:cancel": ("button.cancelConfirmation($event)" if confirm?)
+          dropdown: jsify_data({placement: get_option_value(:dropdown, :placement)}.compact),
+          bind: "root"
         }
       end
     end
@@ -193,5 +216,47 @@ module Coco
       icon = icon.is_a?(Symbol) ? {name: icon} : icon
       icon.is_a?(Hash) ? render(Coco::Icon.new(**icon)) : icon
     end
+
+    before_initialize do |kwargs|
+      if kwargs.key?(:modal)
+        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+        kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+        kwargs.delete(:modal)
+      end
+
+      button_size = kwargs.fetch(:size, :default)&.to_sym
+      if button_size.in?(SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+        kwargs[:size], kwargs[:resize] = 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
+
+      set_tag_attr(:disabled, true) if disabled?
+      set_tag_attr(:type, "button") unless tag_attr?(:type) || link?
+
+      if confirm? && !dropdown?
+        with_confirmation do |confirm|
+          confirm.with_text { "Are you sure?" }
+          confirm.with_button { "Yes, continue" }
+        end
+      end
+
+      if (dropdown? || confirm?) && get_option(:dropdown, :placement).blank?
+        set_option_value(:dropdown, :placement, "bottom-start")
+      end
+    end
+    class << self
+      include Coco::SharedHelper
+    end
   end
 end

data/app/components/coco/{base → shared}/button/button_dropdown.js

@@ -1,7 +1,7 @@
-import { CocoComponent } from "@js/coco.js";
+import { CocoComponent } from "@assets/js/shared/coco.js";
 import { getComponent } from "@helpers/alpine";
 
-export default CocoComponent("buttonDropdown", (data = {}) => {
+export default CocoComponent("buttonDropdown", () => {
   return {
     dropdown: null,
     button: null,
@@ -23,5 +23,14 @@ export default CocoComponent("buttonDropdown", (data = {}) => {
         this.dropdown.show();
       }
     },
+
+    /* bindings */
+
+    root: {
+      "@dropdown:show": "button.setState('active')",
+      "@dropdown:hide": "button.resetState()",
+      "@confirmation:confirm": "button.approveAndRun($event)",
+      "@confirmation:cancel": "button.cancelConfirmation($event)",
+    },
   };
 });

data/app/components/coco/{app/elements → shared}/button_group/button_group.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-button-group"] {
+  [data-coco][data-component="button-group"] {
     width: fit-content;
     border-radius: 44px;
 

data/app/components/coco/{app/elements → shared}/button_group/button_group.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@js/coco.js";
+import { CocoComponent } from "@assets/js/shared/coco.js";
 import { getComponent } from "@helpers/alpine";
-import { createSingleton } from "@libs/tippy";
+import { createSingleton } from "@assets/js/libs/tippy";
 
 export default CocoComponent("appButtonGroup", () => {
   return {
@@ -19,7 +19,7 @@ export default CocoComponent("appButtonGroup", () => {
 
     get buttons() {
       const buttonElements = this.$el.querySelectorAll(
-        "[data-component='app-button']"
+        "[data-component='button']"
       );
       return Array.from(buttonElements).map((el) => getComponent(el));
     },
@@ -51,7 +51,15 @@ export default CocoComponent("appButtonGroup", () => {
       this.destroySingletonTooltip();
 
       this.tooltipInstances = this.buttons
-        .map((button) => button.shouldShowTooltip() && button.tippyInstance)
+        .map((button) => {
+          if (
+            button.tippyInstance &&
+            button.shouldShowTooltip &&
+            button.shouldShowTooltip()
+          ) {
+            return button.tippyInstance;
+          }
+        })
         .filter((t) => t);
 
       this.singletonTooltip = createSingleton(this.tooltipInstances, {

data/app/components/coco/shared/button_group/button_group.rb

@@ -0,0 +1,40 @@
+module Coco
+  class ButtonGroup < Coco::Component
+    include Concerns::ActsAsButtonGroup
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, default: :default, private: true
+    accepts_option :theme, default: :primary, private: true
+    accepts_option :segmented, from: [true, false], default: false
+    accepts_option :floating, from: [true, false], default: false
+    accepts_option :collapsible, from: [true, false, nil]
+
+    before_initialize do |kwargs|
+      if kwargs[:floating] == true
+        kwargs[:segmented] = true
+        kwargs[:theme] = :toolbar_floating
+      end
+      kwargs
+    end
+
+    def button_kwargs(kwargs, type = nil)
+      args = {
+        theme: get_option_value(:theme),
+        size: get_option_value(:size),
+        **kwargs
+      }
+
+      if component_args.key?(:resize)
+        args[:resize] = component_args[:resize]
+      end
+
+      if get_option_value(:collapsible) == false
+        args[:collapsible] = false
+      elsif get_option_value(:collapsible) == true
+        args[:static] = false
+      end
+
+      args
+    end
+  end
+end

data/app/components/coco/{app/elements → shared}/button_to/button_to.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-button-to"] {
+  [data-coco][data-component="button-to"] {
     @apply contents;
 
     form,

data/app/components/coco/shared/button_to/button_to.rb

@@ -0,0 +1,50 @@
+module Coco
+  class ButtonTo < Coco::Component
+    include Concerns::WrapsComponent
+    include Concerns::AcceptsOptions
+
+    accepts_option :fit, from: [:auto, :full]
+
+    wraps_component :button do |args|
+      Coco::Button.new(
+        type: :submit,
+        fit: get_option_value(:fit) || :auto,
+        **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

data/app/components/coco/{base → shared}/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("dropdown", () => {
   return {};

data/app/components/coco/{base → shared}/icon/icon.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco.js";
+import { CocoComponent } from "@assets/js/shared/coco.js";
 
 export default CocoComponent("icon", () => {
   return {

data/app/components/coco/{base → shared}/image_uploader/image_uploader.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("imageUploader", ({ click, drop }) => {
   return {

data/app/components/coco/{base → shared}/modal/modal.html.erb

@@ -24,11 +24,11 @@
 <% else %>
   <div data-role="inline-modal-content">
     <% if container_type == :dialog %>
-      <%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
+      <%= render Coco::ModalDialog.new(id: @container_id, title: title.to_s, dismissable: false) do %>
         <%= content %>
       <% end %>
     <% else %>
-      <%= coco_panel do %>
+      <%= coco_panel(id: @container_id) do %>
         <%= content %>
       <% end %>
     <% end %>

data/app/components/coco/{base → shared}/modal/modal.js

@@ -1,5 +1,5 @@
-import { CocoComponent } from "@js/coco";
-import { hideAll } from "@libs/tippy";
+import { CocoComponent } from "@assets/js/shared/coco";
+import { hideAll } from "@assets/js/libs/tippy";
 import { navigateTo } from "@helpers/location";
 
 export default CocoComponent("modal", () => {
@@ -40,7 +40,7 @@ export default CocoComponent("modal", () => {
     },
 
     visit(url) {
-      navigateTo(url, { frame: this.frame.id });
+      navigateTo(url, { frame: this.frame.id, turbo: true });
     },
 
     scrollTo(pos) {

data/app/components/coco/{base → shared}/modal/modal.rb

@@ -9,15 +9,17 @@ module Coco
     renders_one :title
 
     renders_one :container, types: {
-      dialog: ->(**kwargs, &block) do
+      dialog: ->(id: nil, **kwargs, &block) do
         @container_content = block
+        @container_id = id
         @container_type = :dialog
-        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
+        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end,
 
-      lightbox: ->(**kwargs, &block) do
+      lightbox: ->(id: nil, **kwargs, &block) do
         @container_type = :lightbox
-        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
+        @container_id = id
+        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end
     }
 

data/app/components/coco/{base → shared}/modal_dialog/modal_dialog.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("modalDialog", () => {
   return {

data/app/components/coco/{base → shared}/modal_lightbox/modal_lightbox.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("modalLightbox", () => {
   return {

data/app/components/coco/{base → shared}/placeholder/placeholder.html.erb

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

data/app/components/coco/{base → shared}/placeholder/placeholder.rb

@@ -5,5 +5,11 @@ module Coco
     accepts_option :size, from: [:auto, :full], default: :auto
     accepts_option :prose, from: [true, false], default: false
     accepts_option :boxed, from: [true, false], default: true
+
+    attr_reader :text_content
+
+    def initialize(text_content: nil, **)
+      @text_content = text_content
+    end
   end
 end

data/app/components/coco/{base → shared}/poll_controller/poll_controller.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 export default CocoComponent("pollController", () => {
   return {

data/app/helpers/coco/app_helper.rb

@@ -13,25 +13,6 @@ module Coco
       render(link, &block)
     end
 
-    def coco_button(*args, **kwargs, &block)
-      href, content = if block
-        [args.first, nil]
-      else
-        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
-      end
-
-      button = if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-        "ButtonTo"
-      else
-        "Button"
-      end
-
-      component = "Coco::App::Elements::#{button}".constantize.new(href: href, **kwargs)
-      component = component.with_content(content) if !block && content.present?
-
-      render(component, &block)
-    end
-
     def coco_menu_button(**, &block)
       render Coco::App::Elements::MenuButton.new(**), &block
     end
@@ -56,10 +37,6 @@ module Coco
       render Coco::App::Elements::DropdownButton.new(**), &block
     end
 
-    def coco_button_group(**, &block)
-      render Coco::App::Elements::ButtonGroup.new(**), &block
-    end
-
     def coco_toolbar(**, &block)
       render Coco::App::Elements::Toolbar.new(**), &block
     end
@@ -68,6 +45,23 @@ module Coco
       render Coco::App::Elements::SeamlessTextarea.new(**), &block
     end
 
+    def coco_stamp(type = nil, **)
+      props = case type
+      when :success, :positive
+        {icon: :check_circle, theme: :positive}
+      when :error, :negative
+        {icon: :alert_circle, theme: :negative}
+      when :warning
+        {icon: :alert_triangle, theme: :warning}
+      when :info
+        {icon: :info, theme: :info}
+      else
+        {}
+      end
+
+      render Coco::App::Elements::Stamp.new(**props, **)
+    end
+
     def coco_snackbar(**, &block)
       render Coco::App::Elements::Snackbar.new(**), &block
     end

data/app/helpers/coco/component_helper.rb

@@ -1,6 +1,6 @@
 module Coco
   module ComponentHelper
-    include Coco::BaseHelper
+    include Coco::SharedHelper
     include Coco::BookHelper
     include Coco::AppHelper
 

data/app/helpers/coco/{base_helper.rb → shared_helper.rb}

@@ -1,5 +1,5 @@
 module Coco
-  module BaseHelper
+  module SharedHelper
     def coco_tag(*, **, &block)
       render Coco::Tag.new(*, **), &block
     end
@@ -29,8 +29,31 @@ module Coco
       end
     end
 
-    def coco_placeholder(*, **, &block)
-      render Coco::Placeholder.new(*, **), &block
+    def coco_placeholder(text_content = nil, **, &block)
+      render Coco::Placeholder.new(text_content:, **), &block
+    end
+
+    def coco_button(*args, **kwargs, &block)
+      href, content = if block
+        [args.first, nil]
+      else
+        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+      end
+
+      button = if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
+        "Coco::ButtonTo"
+      else
+        "Coco::Button"
+      end
+
+      component = button.constantize.new(href: href, **kwargs)
+      component = component.with_content(content) if !block && content.present?
+
+      render(component, &block)
+    end
+
+    def coco_button_group(**, &block)
+      render Coco::ButtonGroup.new(**), &block
     end
 
     def coco_modal(name = "default", **, &block)

data/app/helpers/coco/url_helper.rb

@@ -22,7 +22,7 @@ module Coco
       html_options ||= {}
       html_options.symbolize_keys!
 
-      button = Coco::App::Elements::ButtonTo.new(action: options, type: :submit, **html_options)
+      button = Coco::ButtonTo.new(action: options, type: :submit, **html_options)
       button = button.with_content(name) unless block
       render(button, &block)
     end

data/config/tailwind.app.config.cjs

@@ -12,7 +12,7 @@ module.exports = merge(baseConfig, {
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
-      serif: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
     },
     extend: {
       fontSize,

data/config/tailwind.book.config.cjs

@@ -12,6 +12,7 @@ module.exports = merge(baseConfig, {
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
     },
     extend: {
       fontSize,

data/config/tokens.cjs

@@ -199,11 +199,16 @@ const fontSize = {
   "display-3": ["64px", "68px"],
   "display-4": ["48px", "52px"],
 
-  "heading-1": ["48px", "50px"],
-  "heading-2": ["36px", "40px"],
-  "heading-3": ["30px", "36px"],
+  "relaxed-display-1": ["96px", "104px"],
+  "relaxed-display-2": ["80px", "88px"],
+  "relaxed-display-3": ["64px", "72px"],
+  "relaxed-display-4": ["48px", "56px"],
+
+  "heading-1": ["40px", "48px"],
+  "heading-2": ["32px", "40px"],
+  "heading-3": ["28px", "36px"],
   "heading-4": ["24px", "30px"],
-  "heading-5": ["20px", "25px"],
+  "heading-5": ["20px", "24px"],
   "heading-6": ["16px", "20px"],
 
   "subheading-1": ["32px", "40px"],