coveragebook_components 0.13.1 → 0.15.0

data/app/components/coco/app/sidebar_nav/item/item.js

@@ -1,5 +1,5 @@
 import tippy from "@assets/js/base/tippy";
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("appSidebarNavItem", () => {
   return {

data/app/components/coco/app/sidebar_nav/menu/menu.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { navigateTo } from "@helpers/location";
 
 export default CocoComponent("appSidebarNavMenu", () => {

data/app/components/coco/app/sidebar_nav/navbar/navbar.js

@@ -1,5 +1,5 @@
-import tokens from "@config/tokens.cjs";
-import { CocoComponent } from "@assets/js/base/coco";
+import tokens from "@config/tokens.js";
+import { CocoComponent } from "@assets/js/coco/component";
 
 const mobileMaxWidth = parseInt(tokens.screens.sm, 10);
 

data/app/components/coco/app/slide_editor/slide_editor.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 import { captureElementScreenshot } from "@helpers/screenshot";
 import { isDark } from "@helpers/color";

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

@@ -1,5 +1,5 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
-import { camelCase } from "lodash";
+import { CocoComponent } from "@assets/js/coco/component.js";
+import { camelCase } from "@helpers/lang";
 
 export default CocoComponent("button", (data = {}) => {
   return {

data/app/components/coco/buttons/button/button_dropdown.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
+import { CocoComponent } from "@assets/js/coco/component.js";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("buttonDropdown", () => {

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
+import { CocoComponent } from "@assets/js/coco/component.js";
 import { getComponent } from "@helpers/alpine";
 import { createSingleton } from "@assets/js/base/tippy";
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 
 export default CocoComponent("colorPickerButton", ({ selected }) => {

data/app/components/coco/buttons/confirm_panel/confirm_panel.js

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

data/app/components/coco/buttons/image_picker_button/image_picker_button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 
 export default CocoComponent("layoutPickerButton", ({ selected }) => {

data/app/components/coco/buttons/menu_button/menu_button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("menuButton", () => {

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("appToolbar", () => {

data/app/components/coco/images/icon/icon.js

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

data/app/components/coco/images/icon/icon.rb

@@ -9,7 +9,8 @@ module Coco
       "edit-3": "pen-line",
       "git-commit": "git-commit-horizontal",
       grid: "grid-3x3",
-      "user-circle": "circle-user"
+      "user-circle": "circle-user",
+      layout: "panels-top-left"
     }.freeze
 
     InvalidIconError = Class.new(StandardError)

data/app/components/coco/images/image_uploader/image_uploader.js

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

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

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco][data-component="badge"] {
-    @apply flex items-center whitespace-nowrap px-2 bg-background-dark-1 text-content-light-1 rounded-lg;
+    @apply flex items-center whitespace-nowrap px-2 rounded-lg;
     width: min-content;
 
     .badge-icon {
@@ -14,6 +14,22 @@
     &[data-size="md"] {
       @apply badge-md;
     }
+
+    &[data-theme="neutral-dark"] {
+      @apply bg-background-dark-1 text-content-light-1;
+    }
+
+    &[data-theme="neutral-light"] {
+      @apply bg-background-light-1 text-content-dark-1;
+    }
+
+    &[data-theme="neutral-muted"] {
+      @apply bg-gray-300 text-content-dark-3;
+    }
+
+    &[data-theme="primary"] {
+      @apply bg-background-primary text-content-light-1;
+    }
   }
 }
 

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

@@ -1,8 +1,12 @@
 module Coco
   class Badge < Coco::Component
     include Concerns::AcceptsOptions
+    include Concerns::AcceptsTheme
+
+    THEMES = ["neutral-dark", "neutral-light", "neutral-muted", "primary"]
 
     accepts_option :size, from: %i[sm md], default: :md
+    accepts_option :theme, from: THEMES, default: "neutral-dark"
 
     attr_reader :icon_name
 

data/app/components/coco/layout/page/page.js

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

data/app/components/coco/messaging/alert/alert.js

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import Cookies from "js-cookie";
 
 export default CocoComponent("systemBanner", (opts = {}) => {

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

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

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { hideAll } from "@assets/js/base/tippy";
 import { navigateTo } from "@helpers/location";
 

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

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

data/app/components/coco/modals/modal_lightbox/modal_lightbox.js

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

data/app/components/coco/pickers/color_picker/color_picker.js

@@ -1,5 +1,5 @@
 import iro from "@jaames/iro";
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { isValidHex, formatHex } from "@helpers/color";
 import { getComponent } from "@helpers/alpine";
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getComponent } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 

data/app/components/coco/utilities/dropdown/dropdown.js

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

data/app/components/coco/utilities/poll_controller/poll_controller.js

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

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

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

data/app/helpers/coco/app_components_helper.rb

@@ -16,6 +16,10 @@ module Coco
       render Coco::App::PlanPicker.new(**), &block
     end
 
+    def coco_plan_confirmation(**, &block)
+      render Coco::App::PlanConfirmation.new(**), &block
+    end
+
     def coco_app_header(*, **, &block)
       render Coco::App::Header.new(*, **), &block
     end

data/app/helpers/coco/integration_helper.rb

@@ -1,19 +1,11 @@
 module Coco
   module IntegrationHelper
-    def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **)
-      javascript_include_tag("coco/#{context}#{".dev" if dev}", **)
-    end
-
-    def coco_javascript_file_path(context, dev: ENV["COCO_PATH"])
-      File.join(Coco::Engine.root, "app/assets/build/coco/#{context}#{".dev" if dev}.js")
-    end
-
     def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
-      stylesheet_link_tag("coco/#{context}#{".dev" if dev}", **)
+      stylesheet_link_tag("coco#{"/dev" if dev}/#{context}", **)
     end
 
     def coco_stylesheet_file_path(context, dev: ENV["COCO_PATH"], **opts)
-      File.join(Coco::Engine.root, "app/assets/build/coco/#{context}#{".dev" if dev}.css")
+      File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.css")
     end
   end
 end

data/config/icons.json

@@ -1,4 +1,7 @@
 [
+  "a-arrow-down",
+  "a-arrow-up",
+  "a-large-small",
   "accessibility",
   "activity",
   "activity-square",
@@ -6,9 +9,10 @@
   "airplay",
   "alarm-clock",
   "alarm-clock-check",
+  "alarm-clock-minus",
   "alarm-clock-off",
-  "alarm-minus",
-  "alarm-plus",
+  "alarm-clock-plus",
+  "alarm-smoke",
   "album",
   "alert-circle",
   "alert-octagon",
@@ -45,6 +49,7 @@
   "angry",
   "annoyed",
   "antenna",
+  "anvil",
   "aperture",
   "app-window",
   "apple",
@@ -169,6 +174,7 @@
   "beer",
   "bell",
   "bell-dot",
+  "bell-electric",
   "bell-minus",
   "bell-off",
   "bell-plus",
@@ -226,6 +232,7 @@
   "brain",
   "brain-circuit",
   "brain-cog",
+  "brick-wall",
   "briefcase",
   "bring-to-front",
   "brush",
@@ -272,6 +279,7 @@
   "cast",
   "castle",
   "cat",
+  "cctv",
   "check",
   "check-check",
   "check-circle",
@@ -367,7 +375,9 @@
   "coffee",
   "cog",
   "coins",
-  "columns",
+  "columns-2",
+  "columns-3",
+  "columns-4",
   "combine",
   "command",
   "compass",
@@ -381,6 +391,7 @@
   "container",
   "contrast",
   "cookie",
+  "cooking-pot",
   "copy",
   "copy-check",
   "copy-minus",
@@ -467,6 +478,7 @@
   "fan",
   "fast-forward",
   "feather",
+  "fence",
   "ferris-wheel",
   "figma",
   "file",
@@ -531,6 +543,7 @@
   "filter",
   "filter-x",
   "fingerprint",
+  "fire-extinguisher",
   "fish",
   "fish-off",
   "fish-symbol",
@@ -687,6 +700,7 @@
   "indian-rupee",
   "infinity",
   "info",
+  "inspection-panel",
   "instagram",
   "italic",
   "iteration-ccw",
@@ -718,7 +732,6 @@
   "layers",
   "layers-2",
   "layers-3",
-  "layout",
   "layout-dashboard",
   "layout-grid",
   "layout-list",
@@ -793,9 +806,31 @@
   "menu-square",
   "merge",
   "message-circle",
+  "message-circle-code",
+  "message-circle-dashed",
+  "message-circle-heart",
+  "message-circle-more",
+  "message-circle-off",
+  "message-circle-plus",
+  "message-circle-question",
+  "message-circle-reply",
+  "message-circle-warning",
+  "message-circle-x",
   "message-square",
+  "message-square-code",
   "message-square-dashed",
+  "message-square-diff",
+  "message-square-dot",
+  "message-square-heart",
+  "message-square-more",
+  "message-square-off",
   "message-square-plus",
+  "message-square-quote",
+  "message-square-reply",
+  "message-square-share",
+  "message-square-text",
+  "message-square-warning",
+  "message-square-x",
   "messages-square",
   "mic",
   "mic-2",
@@ -880,20 +915,23 @@
   "palmtree",
   "panel-bottom",
   "panel-bottom-close",
-  "panel-bottom-inactive",
+  "panel-bottom-dashed",
   "panel-bottom-open",
   "panel-left",
   "panel-left-close",
-  "panel-left-inactive",
+  "panel-left-dashed",
   "panel-left-open",
   "panel-right",
   "panel-right-close",
-  "panel-right-inactive",
+  "panel-right-dashed",
   "panel-right-open",
   "panel-top",
   "panel-top-close",
-  "panel-top-inactive",
+  "panel-top-dashed",
   "panel-top-open",
+  "panels-left-bottom",
+  "panels-right-bottom",
+  "panels-top-left",
   "paperclip",
   "parentheses",
   "parking-circle",
@@ -958,6 +996,7 @@
   "pocket-knife",
   "podcast",
   "pointer",
+  "pointer-off",
   "popcorn",
   "popsicle",
   "pound-sterling",
@@ -1015,7 +1054,9 @@
   "route",
   "route-off",
   "router",
-  "rows",
+  "rows-2",
+  "rows-3",
+  "rows-4",
   "rss",
   "ruler",
   "russian-ruble",
@@ -1142,6 +1183,7 @@
   "square-stack",
   "square-user",
   "square-user-round",
+  "squircle",
   "squirrel",
   "stamp",
   "star",
@@ -1268,7 +1310,9 @@
   "user-round-cog",
   "user-round-minus",
   "user-round-plus",
+  "user-round-search",
   "user-round-x",
+  "user-search",
   "user-x",
   "users",
   "users-round",

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

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 
 const defaultTheme = require("tailwindcss/defaultTheme");
-const { cocoPath } = require("./utils.cjs");
-const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs");
+const { cocoPath } = require("./utils.js");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
 
 module.exports = {
   content: [

data/config/{tokens.cjs → tokens.js}

@@ -1,10 +1,8 @@
-const tailwindColors = require("tailwindcss/colors");
-
 const colors = {
   transparent: "transparent",
   current: "currentColor",
-  black: tailwindColors.black,
-  white: tailwindColors.white,
+  black: "#000000",
+  white: "#FFFFFF",
   gray: {
     50: "#F9FAFB",
     100: "#F3F4F6",
@@ -70,7 +68,18 @@ const colors = {
     800: "#075985",
     900: "#0C4A6E",
   },
-  teal: tailwindColors.teal,
+  teal: {
+    50: "#F0FDFA",
+    100: "#CCFBF1",
+    200: "#99F6E4",
+    300: "#5EEAD4",
+    400: "#2DD4BF",
+    500: "#14B8A6",
+    600: "#0D9488",
+    700: "#0F766E",
+    800: "#115E59",
+    900: "#134E4A",
+  },
 };
 
 const colorAliases = {
@@ -128,6 +137,7 @@ const colorAliases = {
     dark: {
       1: colors.gray[900],
       2: colors.gray[800],
+      3: colors.gray[600],
       muted: colors.gray[400],
     },
     light: {

data/lib/coco.rb

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

data/lib/scripts/{postcss-import-alias-glob.cjs → postcss-import-alias-glob.js}

@@ -3,7 +3,7 @@ const valueParser = require("postcss-value-parser");
 const path = require("path");
 const fg = require("fast-glob");
 const { sort } = require("fast-sort");
-const { cocoPath } = require("../../config/utils.cjs");
+const { cocoPath } = require("../../config/utils.js");
 
 const SORTERS = ["asc", "desc"];
 const DEFAULT_SORTER = "asc";

data/lib/tasks/coco_tasks.rake

@@ -5,6 +5,7 @@ namespace :coco do
   task :test, [:files] do |task, args|
     puts "🥥 Running Ruby tests..."
     system "npm run build:dev"
+    system "cd lookbook; npm run build:dev"
     system "bundle exec rake test TEST=#{args.files || "test/**/*_test.rb"}"
     puts "✅ Ruby tests complete"
   end
@@ -14,6 +15,7 @@ namespace :coco do
     task :ci do
       puts "🥥 Building assets..."
       Rake::Task["coco:assets:build"].execute
+      system "cd lookbook; npm run build"
       puts "🥥 Running Ruby tests..."
       Rake::Task["test"].execute
       puts "✅ Ruby tests complete"
@@ -44,10 +46,11 @@ namespace :coco do
   end
 
   namespace :assets do
-    desc "Build assets"
+    desc "Build production assets"
     task :build do
       puts "🥥 Building assets..."
       system "npm run build"
+      system "cd lookbook && npm run build"
       puts "✅ Asset build complete"
     end
   end