coveragebook_components 0.12.2 → 0.13.1

data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-image-picker"] {
+  [data-coco][data-component="image-picker"] {
     .picker-blank-state {
       @apply flex flex-col items-center;
     }
@@ -23,47 +23,47 @@
     /* Sizes */
 
     &[data-size="sm"] {
-      @apply app-image-picker-sm;
+      @apply image-picker-sm;
     }
 
     &[data-size="md"] {
-      @apply app-image-picker-md;
+      @apply image-picker-md;
     }
 
     @media screen(md) {
       &[data-size-md="sm"] {
-        @apply app-image-picker-sm;
+        @apply image-picker-sm;
       }
 
       &[data-size-md="md"] {
-        @apply app-image-picker-md;
+        @apply image-picker-md;
       }
     }
 
     @media screen(lg) {
       &[data-size-lg="sm"] {
-        @apply app-image-picker-sm;
+        @apply image-picker-sm;
       }
 
       &[data-size-lg="md"] {
-        @apply app-image-picker-md;
+        @apply image-picker-md;
       }
     }
 
     @media screen(xl) {
       &[data-size-xl="sm"] {
-        @apply app-image-picker-sm;
+        @apply image-picker-sm;
       }
 
       &[data-size-xl="md"] {
-        @apply app-image-picker-md;
+        @apply image-picker-md;
       }
     }
   }
 }
 
 @layer utilities {
-  .app-image-picker-sm {
+  .image-picker-sm {
     @apply p-6;
     width: 196px;
 
@@ -85,7 +85,7 @@
     }
   }
 
-  .app-image-picker-md {
+  .image-picker-md {
     @apply p-8;
     width: 220px;
 

data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.html.erb

@@ -1,4 +1,4 @@
-<%= render component_tag(x: {data: x_data("appImagePicker", {src: src}), ":class": "hasImage && 'has-image'"}) do %>  
+<%= render component_tag(x: {data: x_data("imagePicker", {src: src}), ":class": "hasImage && 'has-image'"}) do %>  
   <div class="picker-file-name" x-show="hasImage">
     <label x-text="name"></label>
   </div>

data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.js

@@ -1,8 +1,8 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 import { getComponent } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 
-export default CocoComponent("appImagePicker", ({ src }) => {
+export default CocoComponent("imagePicker", ({ src }) => {
   return {
     image: {
       name: basename(src),

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

@@ -0,0 +1,20 @@
+module Coco
+  class ImagePicker < Coco::Component
+    include Concerns::AcceptsOptions
+
+    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(src: nil, accept: "image/*", **kwargs)
+      @src = src
+      @uploader_args = {accept: accept}
+    end
+  end
+end

data/app/components/coco/presented_component.rb

@@ -1,6 +1,6 @@
 module Coco
   class PresentedComponent < ViewComponent::Base
-    include Coco::ComponentHelper
+    include Coco::ComponentsHelper
 
     attr_accessor :subject
 

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

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

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

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

data/app/components/coco/{app/elements → utilities}/seamless_textarea/seamless_textarea.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-seamless-textarea"] {
+  [data-coco][data-component="seamless-textarea"] {
     @apply text-current;
 
     textarea {

data/app/components/coco/{app/elements → utilities}/seamless_textarea/seamless_textarea.html.erb

@@ -1,4 +1,4 @@
-<%= render component_tag(x: {data: "appSeamlessTextarea", options: "options"}) do %>
+<%= render component_tag(x: {data: "seamlessTextarea", options: "options"}) do %>
   <%= text_area_tag(nil, value,
       id: nil,
       placeholder: placeholder,

data/app/components/coco/{app/elements → utilities}/seamless_textarea/seamless_textarea.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
-export default CocoComponent("appSeamlessTextarea", () => {
+export default CocoComponent("seamlessTextarea", () => {
   return {
     height: null,
     observer: null,

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

@@ -0,0 +1,25 @@
+module Coco
+  class SeamlessTextarea < Coco::Component
+    include TagHelper
+    include Concerns::AcceptsOptions
+
+    accepts_option :multiline, from: [true, false]
+    accepts_option :focus, from: [true, false]
+
+    attr_reader :placeholder
+
+    def initialize(textarea: nil, value: nil, placeholder: nil, **kwargs)
+      @textarea_args = textarea.to_h
+      @value = value
+      @placeholder = placeholder
+    end
+
+    def multiline?
+      get_option_value(:multiline)
+    end
+
+    def value
+      (@value.presence || content.presence || "").strip_heredoc.strip
+    end
+  end
+end

data/app/helpers/coco/app_components_helper.rb

@@ -0,0 +1,35 @@
+module Coco
+  module AppComponentsHelper
+    def coco_plan_card(**, &block)
+      render Coco::App::PlanCard.new(**), &block
+    end
+
+    def coco_faqs(**, &block)
+      render Coco::App::Faqs.new(**), &block
+    end
+
+    def coco_contact_callout(**, &block)
+      render Coco::App::ContactCallout.new(**), &block
+    end
+
+    def coco_plan_picker(**, &block)
+      render Coco::App::PlanPicker.new(**), &block
+    end
+
+    def coco_app_header(*, **, &block)
+      render Coco::App::Header.new(*, **), &block
+    end
+
+    def coco_sidebar_nav(*, **, &block)
+      render Coco::App::SidebarNav::Navbar.new(*, **), &block
+    end
+
+    def coco_sidebar_nav_menu(*, **, &block)
+      render Coco::App::SidebarNav::Menu.new(*, **), &block
+    end
+
+    def coco_app_layout(**, &block)
+      render Coco::App::ApplicationLayout.new(**), &block
+    end
+  end
+end

data/app/helpers/coco/book_components_helper.rb

@@ -0,0 +1,11 @@
+module Coco
+  module BookComponentsHelper
+    def coco_editable_slide(**, &block)
+      render Coco::Book::EditableSlide.new(**), &block
+    end
+
+    def coco_media_slide(src = nil, **, &block)
+      render Coco::Book::MediaSlide.new(src: src, **), &block
+    end
+  end
+end

data/app/helpers/coco/components_helper.rb

@@ -0,0 +1,7 @@
+module Coco
+  module ComponentsHelper
+    include Coco::CoreComponentsHelper
+    include Coco::BookComponentsHelper
+    include Coco::AppComponentsHelper
+  end
+end

data/app/helpers/coco/core_components_helper.rb

@@ -0,0 +1,257 @@
+module Coco
+  module CoreComponentsHelper
+    include ActionView::Helpers::UrlHelper
+
+    # Buttons
+
+    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_menu_button(**, &block)
+      render Coco::MenuButton.new(**), &block
+    end
+
+    def coco_menu_item(type, **, &block)
+      render coco_component("menu_items/#{type}", **), &block
+    end
+
+    def coco_confirm_button(href = nil, **, &block)
+      render Coco::ConfirmButton.new(href: href, **), &block
+    end
+
+    def coco_color_picker_button(**, &block)
+      render Coco::ColorPickerButton.new(**), &block
+    end
+
+    def coco_image_picker_button(**, &block)
+      render Coco::ImagePickerButton.new(**), &block
+    end
+
+    def coco_layout_picker_button(**, &block)
+      render Coco::LayoutPickerButton.new(**), &block
+    end
+
+    def coco_toolbar(**, &block)
+      render Coco::Toolbar.new(**), &block
+    end
+
+    def coco_option_bar(**, &block)
+      render Coco::OptionBar.new(**), &block
+    end
+
+    # Embeds
+
+    def coco_embed(platform, url = nil, **)
+      case platform
+      when :youtube
+        render Coco::YoutubeEmbed.new(url: url, **)
+      else
+        raise ArgumentError, "`#{platform}` is not a valid embed type"
+      end
+    end
+
+    # Forms (WIP)
+
+    def coco_form_with(**, &block)
+      form_with(**, builder: Coco::AppFormBuilder, &block)
+    end
+
+    def coco_form_for(*, **, &block)
+      form_for(*, **, builder: Coco::AppFormBuilder, &block)
+    end
+
+    def coco_fields(**, &block)
+      fields(**, builder: Coco::AppFormBuilder, &block)
+    end
+
+    # Images
+
+    def coco_svg(path = nil, **)
+      render Coco::Svg.new(path: path, **)
+    end
+
+    def coco_image(src = nil, **)
+      render Coco::Image.new(src: src, **)
+    end
+
+    def coco_avatar(src, name = nil, **)
+      render Coco::Avatar.new(src: src, name: name, **)
+    end
+
+    def coco_icon(icon_name = nil, **, &block)
+      render Coco::Icon.new(name: icon_name, **), &block
+    end
+
+    # Indicators
+
+    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::Stamp.new(**props, **)
+    end
+
+    def coco_badge(text, **)
+      render Coco::Badge.new(**).with_content(text)
+    end
+
+    # Layout
+
+    def coco_spacer(size = Coco::Spacer::DEFAULT, **)
+      render Coco::Spacer.new(size:, **)
+    end
+    alias_method :space, :coco_spacer
+
+    def coco_stack(spacing: Coco::Spacer::DEFAULT, **, &block)
+      render Coco::Stack.new(spacing:, **), &block
+    end
+
+    def coco_panel(**, &block)
+      render Coco::Panel.new(**), &block
+    end
+
+    def coco_page(id, **, &block)
+      render Coco::Page.new(id: id, **), &block
+    end
+
+    # Messaging
+
+    def coco_notice(**, &block)
+      render Coco::Notice.new(**), &block
+    end
+
+    def coco_snackbar(**, &block)
+      render Coco::Snackbar.new(**), &block
+    end
+
+    def coco_toast(**, &block)
+      render Coco::Toast.new(**), &block
+    end
+
+    def coco_system_banner(**, &block)
+      render Coco::SystemBanner.new(**), &block
+    end
+
+    # Modals
+
+    def coco_modal(name = "default", **, &block)
+      render(Coco::Modal.new(name: name, **), &block)
+    end
+
+    def coco_modal_dialog(name = "default", **, &block)
+      render(Coco::Modal.new(name: name, **)) do |modal|
+        modal.with_container_dialog(&block)
+      end
+    end
+
+    def coco_modal_lightbox(name = "default", scroll_top: nil, **, &block)
+      render(Coco::Modal.new(name: name, scroll_top: scroll_top, **)) do |modal|
+        modal.with_container_lightbox(&block)
+      end
+    end
+
+    # Navigation
+
+    def coco_link(*args, **, &block)
+      href, content = if block
+        [args.first, nil]
+      else
+        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+      end
+
+      link = Coco::Link.new(href: href, **)
+      link = link.with_content(content) if !block && content.present?
+
+      render(link, &block)
+    end
+
+    def coco_link_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options, name = options, name, block if block
+      options ||= {}
+      html_options = Coco::ActionViewHelper.convert_options_to_data_attributes(options, html_options)
+
+      href = Coco::ActionViewHelper.url_target(name, options)
+
+      if block
+        coco_link(href, **html_options.symbolize_keys!, &block)
+      else
+        coco_link(name, href, **html_options.symbolize_keys!)
+      end
+    end
+
+    def coco_button_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options = options, name if block
+      options ||= {}
+      html_options ||= {}
+      html_options.symbolize_keys!
+
+      button = Coco::ButtonTo.new(action: options, type: :submit, **html_options)
+      button = button.with_content(name) unless block
+      render(button, &block)
+    end
+
+    def coco_pager_button(direction, **, &block)
+      render Coco::PagerButton.new(direction:, **), &block
+    end
+
+    # Typography
+
+    def coco_prose(**, &block)
+      render Coco::Prose.new(**), &block
+    end
+
+    def coco_seamless_textarea(**, &block)
+      render Coco::SeamlessTextarea.new(**), &block
+    end
+
+    # Utilties (internal)
+
+    def coco_placeholder(text_content = nil, **, &block)
+      render Coco::Placeholder.new(text_content:, **), &block
+    end
+
+    # General
+
+    def coco_tag(*, **, &block)
+      render Coco::Tag.new(*, **), &block
+    end
+
+    def coco_component(name, *, **)
+      resolve_component("coco/#{name}", *, **)
+    end
+
+    def resolve_component(...)
+      Coco::ComponentResolver.new(...)
+    end
+  end
+end

data/app/helpers/coco/helpers.rb

@@ -1,7 +1,7 @@
 module Coco
   module Helpers
-    include Coco::ComponentHelper
-    include Coco::UrlHelper
+    include Coco::ModalHelper
+    include Coco::ComponentsHelper
     include Coco::IntegrationHelper
   end
 end

data/app/helpers/coco/modal_helper.rb

@@ -0,0 +1,22 @@
+module Coco
+  module ModalHelper
+    def coco_modal_frame_id(name = "default")
+      "coco-modal-frame-#{name.to_s.dasherize}"
+    end
+
+    def coco_modal_data_attributes(name = "default")
+      return {} if name.nil?
+      {
+        turbo: true,
+        turbo_frame: coco_modal_frame_id(name)
+      }
+    end
+
+    # Deprecated, do not use
+    def coco_link_to_modal(*, data: {}, modal: nil, **kwargs, &)
+      kwargs[:data] = coco_modal_data_attributes(modal || "default").merge(data)
+
+      coco_link_to(*, **kwargs, &)
+    end
+  end
+end

data/config/locales/coco.en.yml

@@ -1,24 +1,23 @@
 en:
   coco:
     app:
-      blocks:
-        slide_editor:
-          bg_color_picker:
-            label: "Background colour"
-          bg_image_picker:
-            label: "Background image"
-            blank_state: "Drag a jpg, png or gif onto the slide area or..."
-          text_color_picker:
-            label: "Text colour"
-          layout_picker:
-            label: "Layout"
-          undo_button:
-            tooltip: "Undo"
-          redo_button:
-            tooltip: "Redo"
-          save_button:
-            label: "Save"
-            saving_label: "Saving..."
+      slide_editor:
+        bg_color_picker:
+          label: "Background colour"
+        bg_image_picker:
+          label: "Background image"
+          blank_state: "Drag a jpg, png or gif onto the slide area or..."
+        text_color_picker:
+          label: "Text colour"
+        layout_picker:
+          label: "Layout"
+        undo_button:
+          tooltip: "Undo"
+        redo_button:
+          tooltip: "Redo"
+        save_button:
+          label: "Save"
+          saving_label: "Saving..."
     test:
       translatable:
         greeting: "Hello"

data/config/{tailwind.base.config.cjs → tailwind.config.cjs}

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 
+const defaultTheme = require("tailwindcss/defaultTheme");
 const { cocoPath } = require("./utils.cjs");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs");
 
 module.exports = {
   content: [
@@ -15,7 +17,15 @@ module.exports = {
   ],
   blocklist: ["container"],
   theme: {
+    colors,
+    screens,
+    fontFamily: {
+      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
+      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
+    },
     extend: {
+      fontSize,
       containers: {
         "slide-fluid": "700px",
       },

data/config/tokens.cjs

@@ -219,29 +219,15 @@ const fontSize = {
 };
 
 module.exports = {
-  app: {
-    colors: {
-      ...colors,
-      ...colorAliases,
-    },
-    screens,
-    fontSize,
-    fontFamily: {
-      displaySans: "proxima-nova",
-      bodySans: "proxima-nova",
-      displaySerif: "merriweather",
-    },
+  colors: {
+    ...colors,
+    ...colorAliases,
   },
-  book: {
-    colors: {
-      ...colors,
-      ...colorAliases,
-    },
-    screens,
-    fontSize,
-    fontFamily: {
-      displaySans: "proxima-nova",
-      bodySans: "proxima-nova",
-    },
+  screens,
+  fontSize,
+  fontFamily: {
+    displaySans: "proxima-nova",
+    bodySans: "proxima-nova",
+    displaySerif: "merriweather",
   },
 };

data/lib/coco/app_form_builder.rb

@@ -1,3 +1,3 @@
 class Coco::AppFormBuilder < ViewComponent::Form::Builder
-  namespace "Coco::App::Fields"
+  namespace "Coco::Fields"
 end

data/lib/coco/engine.rb

@@ -7,7 +7,7 @@ module Coco
   class Engine < ::Rails::Engine
     isolate_namespace Coco
 
-    COLLAPSE_DIRS = %w[shared]
+    COLLAPSE_DIRS = %w[shared layout messaging pickers buttons modals navigation utilities typography images indicators embeds]
 
     config.autoload_paths += %W[
       #{root}/app/components
@@ -22,11 +22,11 @@ module Coco
           autoloader.collapse("#{coco_dir}/#{path}")
         end
 
-        Dir.glob("#{coco_dir}/shared/**/*.rb").each do |path|
+        Dir.glob("#{coco_dir}/{#{COLLAPSE_DIRS.join(",")}}/**/*.rb").each do |path|
           autoloader.collapse(File.dirname(path))
         end
 
-        Dir.glob("#{coco_dir}/{app,book}/{blocks,elements,layouts}/**/*.rb").each do |path|
+        Dir.glob("#{coco_dir}/{app,book}/**/*.rb").each do |path|
           autoloader.collapse(File.dirname(path))
         end
       end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.12.2"
+  VERSION = "0.13.1"
 end