coveragebook_components 0.15.0 → 0.17.0

data/app/assets/js/coco.js

@@ -1,7 +1,12 @@
 import "./base/polyfills";
+import helpers from "@helpers/index";
+import tippy from "./base/tippy";
 import Coco from "./coco/coco";
+import CocoComponent from "./coco/component";
+import tokens from "@config/tokens.js";
 import components from "./base/components";
 
 Coco.registerComponents(components);
 
 export default Coco;
+export { Coco, CocoComponent, tippy, helpers, tokens };

data/app/assets/js/helpers/index.js

@@ -1,7 +1,15 @@
+import * as alpine from "./alpine";
 import * as color from "./color";
 import * as dom from "./dom";
 import * as lang from "./lang";
 import * as location from "./location";
-import * as turboEvents from "./turbo_events";
+import * as path from "./path";
 
-export { color, dom, lang, location, turboEvents };
+export default {
+  ...alpine,
+  ...color,
+  ...dom,
+  ...lang,
+  ...location,
+  ...path,
+};

data/app/components/coco/buttons/button/button.css

@@ -154,10 +154,10 @@
     }
 
     &[data-theme="toolbar-floating"] {
-      @apply bg-white hover:bg-gray-100 active:bg-gray-200 border-gray-300;
+      @apply bg-white hover:bg-coco-gray-100 active:bg-coco-gray-200 border-coco-gray-300;
 
       &[data-state="active"] {
-        @apply bg-gray-200;
+        @apply bg-coco-gray-200;
       }
     }
 
@@ -303,18 +303,18 @@
     }
 
     &[data-theme="neutral-dark"] {
-      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600 antialiased;
+      @apply bg-background-dark-1 text-content-light-1 hover:bg-coco-gray-700 active:bg-coco-gray-600 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-dark-1;
       }
 
       &[data-state="active"] {
-        @apply bg-gray-600;
+        @apply bg-coco-gray-600;
       }
 
       &[data-disabled="true"] {
-        @apply bg-gray-300;
+        @apply bg-coco-gray-300;
       }
     }
 

data/app/components/coco/buttons/button_group/button_group.css

@@ -17,7 +17,7 @@
     }
 
     .divider {
-      @apply w-0 border-l border-gray-300 self-stretch;
+      @apply w-0 border-l border-coco-gray-300 self-stretch;
     }
 
     &[data-align="end"] {

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

@@ -7,7 +7,7 @@
     }
 
     .picker-button-color {
-      @apply w-full h-full block rounded-full bg-white border border-gray-900;
+      @apply w-full h-full block rounded-full bg-white border border-coco-gray-900;
     }
 
     [data-component="color-picker"] {

data/app/components/coco/buttons/layout_picker_button/layout_picker_button.html.erb

@@ -16,7 +16,11 @@
                   class="layout-picker-option"
                   :class="{'layout-picker-option-current': typeof selectedLayout !== 'undefined' && selectedLayout === '<%= options[:name] %>'}"
                   aria-label="<%= options[:name] %>">
-                  <%= coco_svg(options[:thumbnail]) %>
+                  <% if options[:thumbnail] %>
+                    <%= coco_svg(options[:thumbnail]) %>
+                  <% else %>
+                    <%= options[:icon] %>
+                  <% end %>
                 </button>
               <% end %>
             </div>

data/app/components/coco/buttons/layout_picker_button/layout_picker_button.rb

@@ -9,8 +9,8 @@ module Coco
       Coco::Button.new(**args)
     end
 
-    renders_many :layouts, ->(name:, thumbnail:, **layout_options) do
-      @layout_options << {name: name, thumbnail: thumbnail, **layout_options}
+    renders_many :layouts, ->(name:, thumbnail: nil, **layout_options, &block) do
+      @layout_options << {name: name, thumbnail: thumbnail, **layout_options, icon: block&.call}
     end
 
     attr_reader :layout_options, :size, :resize

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

@@ -65,7 +65,7 @@
     }
 
     .divider {
-      @apply h-0 border-t border-gray-300;
+      @apply h-0 border-t border-coco-gray-300;
     }
   }
 }

data/app/components/coco/buttons/menu_items/user_profile/user_profile.css

@@ -16,7 +16,7 @@
     }
 
     .user-profile-email {
-      @apply text-gray-500 label-sm italic truncate;
+      @apply text-coco-gray-500 label-sm italic truncate;
     }
   }
 }

data/app/components/coco/component.rb

@@ -3,7 +3,7 @@ module Coco
     include Concerns::AcceptsTagAttributes
     include Concerns::HasName
     include Concerns::Translatable
-    include Coco::CoreComponentsHelper
+    include Coco::ComponentsHelper
     include Coco::AlpineHelper
 
     def accepts_options?

data/app/components/coco/concerns/acts_as_field_with_options.rb

@@ -3,7 +3,6 @@ module Coco
     module ActsAsFieldWithOptions
       extend ActiveSupport::Concern
       include Concerns::HasName
-      include AppComponentsHelper
 
       def combine_options!
         @options[:data] ||= {}

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

@@ -2,7 +2,7 @@ module Coco
   module Fields
     class ButtonComponent < ViewComponent::Form::ButtonComponent
       include Concerns::ActsAsFieldWithOptions
-      include Coco::CoreComponentsHelper
+      include Coco::ComponentsHelper
 
       def call
         coco_button(**options) do

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

@@ -2,7 +2,7 @@ module Coco
   module Fields
     class SubmitComponent < ViewComponent::Form::SubmitComponent
       include Concerns::ActsAsFieldWithOptions
-      include Coco::CoreComponentsHelper
+      include Coco::ComponentsHelper
 
       def call
         coco_button(**options, type: :submit) do

data/app/components/coco/indicators/badge/badge.css

@@ -24,7 +24,7 @@
     }
 
     &[data-theme="neutral-muted"] {
-      @apply bg-gray-300 text-content-dark-3;
+      @apply bg-coco-gray-300 text-content-dark-3;
     }
 
     &[data-theme="primary"] {

data/app/components/coco/layout/panel/panel.css

@@ -8,7 +8,7 @@
 
     /* Only style Coco panels that are not rendered inside legacy panel components */
     &:not([data-component="panel"] [data-component="panel"]) {
-      @apply block bg-content-light-1 border border-gray-300 shadow-md rounded-xl;
+      @apply block bg-content-light-1 border border-coco-gray-300 shadow-md rounded-xl;
 
       .panel-content {
         @apply block;

data/app/components/coco/modals/modal/modal.css

@@ -82,7 +82,7 @@
     @apply max-w-2xl mx-auto;
 
     [data-component="modal-dialog"] {
-      @apply border border-gray-300 shadow-md rounded-xl;
+      @apply border border-coco-gray-300 shadow-md rounded-xl;
     }
   }
 }

data/app/components/coco/modals/modal_dialog/modal_dialog.css

@@ -9,7 +9,7 @@
 
     .modal-dialog-header {
       @apply relative flex items-center;
-      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-coco-gray-300 rounded-t-xl bg-white;
     }
 
     .modal-dialog-title {

data/app/components/coco/utilities/placeholder/placeholder.css

@@ -3,7 +3,7 @@
     @apply p-4;
 
     &[data-boxed="true"] {
-      @apply border border-dashed border-gray-400 bg-gray-50;
+      @apply border border-dashed border-coco-gray-400 bg-coco-gray-50;
     }
 
     &[data-prose="true"] {

data/app/helpers/coco/components_helper.rb

@@ -1,7 +1,257 @@
 module Coco
   module ComponentsHelper
-    include Coco::CoreComponentsHelper
-    include Coco::BookComponentsHelper
-    include Coco::AppComponentsHelper
+    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/integration_helper.rb

@@ -1,11 +1,33 @@
 module Coco
   module IntegrationHelper
-    def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
-      stylesheet_link_tag("coco#{"/dev" if dev}/#{context}", **)
+    def coco_stylesheet_tag(dev: ENV["COCO_PATH"], **)
+      stylesheet_link_tag("coco#{"/dev" if dev}/coco", **)
     end
 
-    def coco_stylesheet_file_path(context, dev: ENV["COCO_PATH"], **opts)
-      File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.css")
+    def coco_stylesheet_file_path(...)
+      IntegrationHelper.stylesheet_file_path(...)
+    end
+
+    def coco_javascript_file_path(...)
+      IntegrationHelper.javascript_file_path(...)
+    end
+
+    def coco_tailwind_preset_path(...)
+      IntegrationHelper.tailwind_preset_path(...)
+    end
+
+    class << self
+      def stylesheet_file_path(dev: ENV["COCO_PATH"], **opts)
+        File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/coco.css")
+      end
+
+      def javascript_file_path(dev: ENV["COCO_PATH"], **opts)
+        File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/coco.js")
+      end
+
+      def tailwind_preset_path
+        File.join(Coco::Engine.root, "app/assets/build/coco/tailwind.preset.js")
+      end
     end
   end
 end

data/config/locales/coco.en.yml

@@ -1,23 +1,5 @@
 en:
   coco:
-    app:
-      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.config.js

@@ -1,94 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 
-const defaultTheme = require("tailwindcss/defaultTheme");
 const { cocoPath } = require("./utils.js");
-const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
 
 module.exports = {
+  presets: [require("./tailwind.preset.js")],
   content: [
     cocoPath("@components/**/*.{erb,rb,js}", true),
     cocoPath("@assets/**/*.{erb,rb}", true),
-    cocoPath("@previews/**/*.{erb,rb}", true),
-  ],
-  safelist: [
-    {
-      pattern: /tippy-.+/,
-    },
   ],
   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",
-      },
-      aspectRatio: {
-        slide: "16 / 10",
-      },
-      animation: {
-        spin: "spin 1.5s linear infinite",
-        "spin-reverse": "spin 1.5s linear infinite reverse",
-      },
-      spacing: {
-        13: "3.25rem",
-        15: "3.75rem",
-        18: "4.5rem",
-      },
-      customForms: () => ({
-        DEFAULT: {
-          checkbox: {
-            "&:indeterminate": {
-              background:
-                "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
-              borderColor: "transparent",
-              backgroundColor: "currentColor",
-              backgroundSize: "100% 100%",
-              backgroundPosition: "center",
-              backgroundRepeat: "no-repeat",
-            },
-          },
-        },
-      }),
-    },
-  },
-  corePlugins: {
-    aspectRatio: false,
-  },
-  plugins: [
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/container-queries"),
-
-    ({ matchUtilities, theme }) => {
-      // Safari 14-compatible aspect ratio
-      matchUtilities(
-        {
-          aspect: (value) => ({
-            "@supports (aspect-ratio: 1 / 1)": {
-              aspectRatio: value,
-            },
-            "@supports not (aspect-ratio: 1 / 1)": {
-              "&::before": {
-                content: '""',
-                float: "left",
-                paddingTop: `calc(100% / (${value}))`,
-              },
-              "&::after": {
-                clear: "left",
-                content: '""',
-                display: "block",
-              },
-            },
-          }),
-        },
-        { values: theme("aspectRatio") }
-      );
-    },
-  ],
 };