coveragebook_components 0.16.0 → 0.17.1

data/app/assets/build/coco/tailwind.preset.js

@@ -2708,12 +2708,6 @@ module.exports = {
     },
     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"
@@ -2728,6 +2722,13 @@ module.exports = {
         17: "4.25rem",
         18: "4.5rem"
       },
+      aspectRatio: {
+        "4/3": "4 / 3",
+        "3/2": "3 / 2",
+        "3/2": "3 / 2",
+        "2/1": "2 / 1",
+        a4: "7 / 5"
+      },
       customForms: () => ({
         DEFAULT: {
           checkbox: {

data/app/assets/css/base/setup.css

@@ -1,32 +0,0 @@
-@import "./config";
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "./utils/text";
-@import "./tippy";
-
-@layer base {
-  :root {
-    --app-height: 100%;
-  }
-
-  html {
-    @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
-  }
-
-  a {
-    @apply text-current underline underline-offset-2;
-  }
-
-  [x-cloak] {
-    display: none !important;
-  }
-
-  [x-dropdown] {
-    [x-dropdown\:content] {
-      @apply hidden;
-    }
-  }
-}

data/app/assets/css/coco.css

@@ -1,3 +1,34 @@
-@import "./base/setup";
+@import "./base/config";
 
-@import-glob "@components/!(app|book)/**/*.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./base/utils/text";
+@import "./base/tippy";
+
+@import-glob "@components/**/*.css";
+
+@layer base {
+  :root {
+    --app-height: 100%;
+  }
+
+  html {
+    @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
+  }
+
+  a {
+    @apply text-current underline underline-offset-2;
+  }
+
+  [x-cloak] {
+    display: none !important;
+  }
+
+  [x-dropdown] {
+    [x-dropdown\:content] {
+      @apply hidden;
+    }
+  }
+}

data/app/assets/js/base/alpine/directives/dropdown.js

@@ -7,7 +7,7 @@ import { setData, getData } from "@helpers/alpine";
 export default function (Alpine) {
   Alpine.directive(
     "dropdown",
-    (el, { value, modifiers, expression }, { evaluate, effect }) => {
+    (el, { value, modifiers, expression }, { evaluate }) => {
       // Don't run for dropdown sub-elements
       // like `x-dropdown:trigger` and `x-dropdown:content`
       if (value) return;
@@ -21,7 +21,7 @@ export default function (Alpine) {
 
       contentTarget =
         contentTarget || el.querySelector("[x-dropdown\\:content]");
-      content = isNode(contentTarget)
+      const content = isNode(contentTarget)
         ? contentTarget.firstElementChild
         : contentTarget;
       triggerTarget =

data/app/assets/js/base/tippy/plugins/hide_on_esc.js

@@ -1,4 +1,4 @@
-export default hideOnEsc = {
+const hideOnEsc = {
   name: "hideOnEsc",
 
   defaultValue: true,
@@ -21,3 +21,5 @@ export default hideOnEsc = {
     };
   },
 };
+
+export default hideOnEsc;

data/app/assets/js/coco/coco.js

@@ -1,8 +1,6 @@
 import Alpine from "../base/alpine";
 import packageJSON from "@/package.json" assert { type: "json" };
 import { registerComponents } from "@helpers/alpine.js";
-import CocoComponent from "./component";
-import * as helpers from "@helpers/index";
 
 const Coco = {
   version: packageJSON.version,
@@ -24,16 +22,9 @@ const Coco = {
     this._components.push(...components);
   },
 
-  component(...args) {
-    return CocoComponent(...args);
-  },
-
   _components: [],
 
   _started: false,
 };
 
-Coco.Component = CocoComponent;
-Coco.helpers = helpers;
-
 export default Coco;

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/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/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/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,7 +1,7 @@
 module Coco
   module IntegrationHelper
-    def coco_stylesheet_tag(context = "coco", 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(...)
@@ -17,12 +17,12 @@ module Coco
     end
 
     class << self
-      def stylesheet_file_path(context = "coco", dev: ENV["COCO_PATH"], **opts)
-        File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.css")
+      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(context = "coco", dev: ENV["COCO_PATH"], **opts)
-        File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.js")
+      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

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.preset.js

@@ -14,12 +14,6 @@ module.exports = {
     },
     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",
@@ -34,6 +28,13 @@ module.exports = {
         17: "4.25rem",
         18: "4.5rem",
       },
+      aspectRatio: {
+        "4/3": "4 / 3",
+        "3/2": "3 / 2",
+        "3/2": "3 / 2",
+        "2/1": "2 / 1",
+        a4: "7 / 5",
+      },
       customForms: () => ({
         DEFAULT: {
           checkbox: {

data/lib/coco/engine.rb

@@ -25,10 +25,6 @@ module Coco
         Dir.glob("#{coco_dir}/{#{COLLAPSE_DIRS.join(",")}}/**/*.rb").each do |path|
           autoloader.collapse(File.dirname(path))
         end
-
-        Dir.glob("#{coco_dir}/{app,book}/**/*.rb").each do |path|
-          autoloader.collapse(File.dirname(path))
-        end
       end
 
       if Rails.env.production?

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.16.0"
+  VERSION = "0.17.1"
 end