coveragebook_components 0.14.0 → 0.16.0

data/app/helpers/coco/integration_helper.rb

@@ -1,19 +1,33 @@
 module Coco
   module IntegrationHelper
-    def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **)
-      javascript_include_tag("coco/#{context}#{".dev" if dev}", **)
+    def coco_stylesheet_tag(context = "coco", dev: ENV["COCO_PATH"], **)
+      stylesheet_link_tag("coco#{"/dev" if dev}/#{context}", **)
     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")
+    def coco_stylesheet_file_path(...)
+      IntegrationHelper.stylesheet_file_path(...)
     end
 
-    def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
-      stylesheet_link_tag("coco/#{context}#{".dev" if dev}", **)
+    def coco_javascript_file_path(...)
+      IntegrationHelper.javascript_file_path(...)
     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")
+    def coco_tailwind_preset_path(...)
+      IntegrationHelper.tailwind_preset_path(...)
+    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")
+      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")
+      end
+
+      def tailwind_preset_path
+        File.join(Coco::Engine.root, "app/assets/build/coco/tailwind.preset.js")
+      end
     end
   end
 end

data/config/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+const { cocoPath } = require("./utils.js");
+
+module.exports = {
+  presets: [require("./tailwind.preset.js")],
+  content: [
+    cocoPath("@components/**/*.{erb,rb,js}", true),
+    cocoPath("@assets/**/*.{erb,rb}", true),
+  ],
+  blocklist: ["container"],
+};

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

@@ -1,21 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 
 const defaultTheme = require("tailwindcss/defaultTheme");
-const { cocoPath } = require("./utils.cjs");
-const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
 
 module.exports = {
-  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,
@@ -37,8 +25,13 @@ module.exports = {
         "spin-reverse": "spin 1.5s linear infinite reverse",
       },
       spacing: {
+        4.5: "1.125rem",
+        5.5: "1.375rem",
+        6.5: "1.675rem",
+        7.5: "1.875rem",
         13: "3.25rem",
         15: "3.75rem",
+        17: "4.25rem",
         18: "4.5rem",
       },
       customForms: () => ({
@@ -64,31 +57,10 @@ module.exports = {
   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") }
-      );
-    },
+    require("../app/assets/css/plugins/colors.js"),
+    require("../app/assets/css/plugins/icons.js"),
+    require("../app/assets/css/plugins/layout.js"),
+    require("../app/assets/css/plugins/text.js"),
+    require("../app/assets/css/plugins/aspect.js"),
   ],
 };

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

@@ -1,21 +1,23 @@
-const tailwindColors = require("tailwindcss/colors");
-
 const colors = {
   transparent: "transparent",
   current: "currentColor",
-  black: tailwindColors.black,
-  white: tailwindColors.white,
+  black: "#000000",
+  white: "#FFFFFF",
+  coco: {
+    gray: {
+      50: "#F9FAFB",
+      100: "#F3F4F6",
+      200: "#E5E7EB",
+      300: "#D1D5DB",
+      400: "#9CA3AF",
+      500: "#6B7280",
+      600: "#4B5563",
+      700: "#374151",
+      800: "#1F2937",
+      900: "#111827",
+    },
+  },
   gray: {
-    50: "#F9FAFB",
-    100: "#F3F4F6",
-    200: "#E5E7EB",
-    300: "#D1D5DB",
-    400: "#9CA3AF",
-    500: "#6B7280",
-    600: "#4B5563",
-    700: "#374151",
-    800: "#1F2937",
-    900: "#111827",
     transparent: {
       50: "rgba(0, 12, 39, 0.06)",
       100: "rgba(0, 12, 39, 0.1)",
@@ -70,7 +72,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 = {
@@ -95,13 +108,13 @@ const colorAliases = {
     },
     light: {
       1: colors.white,
-      2: colors.gray[50],
-      3: colors.gray[100],
+      2: colors.coco.gray[50],
+      3: colors.coco.gray[100],
     },
     dark: {
-      1: colors.gray[900],
-      2: colors.gray[800],
-      3: colors.gray[700],
+      1: colors.coco.gray[900],
+      2: colors.coco.gray[800],
+      3: colors.coco.gray[700],
     },
     primary: {
       DEFAULT: colors.green[500],
@@ -126,15 +139,15 @@ const colorAliases = {
   },
   content: {
     dark: {
-      1: colors.gray[900],
-      2: colors.gray[800],
-      3: colors.gray[600],
-      muted: colors.gray[400],
+      1: colors.coco.gray[900],
+      2: colors.coco.gray[800],
+      3: colors.coco.gray[600],
+      muted: colors.coco.gray[400],
     },
     light: {
       1: colors.white,
-      2: colors.gray[200],
-      muted: colors.gray[400],
+      2: colors.coco.gray[200],
+      muted: colors.coco.gray[400],
     },
     primary: {
       DEFAULT: colors.green[500],

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.14.0"
+  VERSION = "0.16.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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.16.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-16 00:00:00.000000000 Z
+date: 2024-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -63,6 +63,8 @@ files:
 - app/assets/build/coco/app.js
 - app/assets/build/coco/book.css
 - app/assets/build/coco/book.js
+- app/assets/build/coco/coco.css
+- app/assets/build/coco/coco.js
 - app/assets/build/coco/icons/a-arrow-down.svg
 - app/assets/build/coco/icons/a-arrow-up.svg
 - app/assets/build/coco/icons/a-large-small.svg
@@ -1450,16 +1452,20 @@ files:
 - app/assets/build/coco/img/test/slides/slide-bg.jpg
 - app/assets/build/coco/img/test/slides/slide-foreground-landscape.jpg
 - app/assets/build/coco/img/test/slides/slide-foreground-portrait.jpg
+- app/assets/build/coco/tailwind.preset.js
 - app/assets/config/coco/manifest.js
 - app/assets/css/app.css
 - app/assets/css/base/config.css
 - app/assets/css/base/setup.css
 - app/assets/css/base/tippy.css
-- app/assets/css/base/utils/colors.css
-- app/assets/css/base/utils/icons.css
-- app/assets/css/base/utils/layout.css
 - app/assets/css/base/utils/text.css
 - app/assets/css/book.css
+- app/assets/css/coco.css
+- app/assets/css/plugins/aspect.js
+- app/assets/css/plugins/colors.js
+- app/assets/css/plugins/icons.js
+- app/assets/css/plugins/layout.js
+- app/assets/css/plugins/text.js
 - app/assets/custom_icons/other/eye-off-red.svg
 - app/assets/custom_icons/other/google-sso.svg
 - app/assets/custom_icons/other/layout-overlay.svg
@@ -1489,15 +1495,19 @@ files:
 - app/assets/js/base/alpine/directives/undo.js
 - app/assets/js/base/alpine/index.js
 - app/assets/js/base/alpine/utils/tippy_modifiers.js
-- app/assets/js/base/coco.js
-- app/assets/js/base/setup.js
+- app/assets/js/base/components.js
+- app/assets/js/base/polyfills.js
 - app/assets/js/base/tippy/index.js
 - app/assets/js/base/tippy/plugins/hide_on_esc.js
 - app/assets/js/book.js
+- app/assets/js/coco.js
+- app/assets/js/coco/coco.js
+- app/assets/js/coco/component.js
 - app/assets/js/helpers/alpine.js
 - app/assets/js/helpers/color.js
 - app/assets/js/helpers/dom.js
 - app/assets/js/helpers/file.js
+- app/assets/js/helpers/index.js
 - app/assets/js/helpers/lang.js
 - app/assets/js/helpers/location.js
 - app/assets/js/helpers/path.js
@@ -1758,11 +1768,13 @@ files:
 - app/helpers/coco/integration_helper.rb
 - app/helpers/coco/modal_helper.rb
 - app/helpers/coco/tag_helper.rb
+- config/exports.js
 - config/icons.json
 - config/locales/coco.en.yml
-- config/tailwind.config.cjs
-- config/tokens.cjs
-- config/utils.cjs
+- config/tailwind.config.js
+- config/tailwind.preset.js
+- config/tokens.js
+- config/utils.js
 - lib/coco.rb
 - lib/coco/action_view_helper.rb
 - lib/coco/app_form_builder.rb
@@ -1782,11 +1794,11 @@ files:
 - lib/generators/coco/templates/component.rb.tt
 - lib/generators/coco/templates/preview.rb.tt
 - lib/generators/coco/templates/test.rb.tt
-- lib/scripts/esbuild-plugin-build-icons.js
-- lib/scripts/esbuild-plugin-clean.js
-- lib/scripts/esbuild-plugin-import-glob.js
-- lib/scripts/map-aliased-path.js
-- lib/scripts/postcss-import-alias-glob.cjs
+- lib/scripts/esbuild-plugin-build-icons.mjs
+- lib/scripts/esbuild-plugin-clean.mjs
+- lib/scripts/esbuild-plugin-import-glob.mjs
+- lib/scripts/map-aliased-path.mjs
+- lib/scripts/postcss-import-alias-glob.js
 - lib/tasks/coco_tasks.rake
 homepage: https://github.com/coveragebook/coco
 licenses: []

data/app/assets/css/base/utils/colors.css

@@ -1,30 +0,0 @@
-@layer utilities {
-  /* Transparent gray blend-mode background utilities */
-
-  .bg-gray-blend-50 {
-    @apply bg-gray-transparent-50;
-    background-blend-mode: hard-light;
-  }
-
-  .bg-gray-blend-100 {
-    @apply bg-gray-transparent-100;
-    background-blend-mode: hard-light;
-  }
-
-  .bg-gray-blend-200 {
-    @apply bg-gray-transparent-200;
-    background-blend-mode: hard-light;
-  }
-
-  .border-gray-blend-50 {
-    @apply border-gray-transparent-50;
-  }
-
-  .border-gray-blend-100 {
-    @apply border-gray-transparent-100;
-  }
-
-  .border-gray-blend-200 {
-    @apply border-gray-transparent-200;
-  }
-}

data/app/assets/css/base/utils/icons.css

@@ -1,16 +0,0 @@
-@layer utilities {
-  .icon {
-  }
-
-  .icon-stroke {
-    @apply fill-none stroke-2 stroke-current text-current;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .icon-fill {
-    @apply fill-current text-current;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-}

data/app/assets/css/base/utils/layout.css

@@ -1,13 +0,0 @@
-@layer utilities {
-  .pl-app {
-    @apply pl-3 sm:pl-6 md:pl-8 lg:pl-10 xl:pl-11;
-  }
-
-  .pr-app {
-    @apply pr-3 sm:pr-6 md:pr-8 lg:pr-10 xl:pr-11;
-  }
-
-  .px-app {
-    @apply pl-app pr-app;
-  }
-}

data/app/assets/js/base/setup.js

@@ -1,8 +0,0 @@
-import packageJSON from "@/package.json" assert { type: "json" };
-
-import "container-query-polyfill";
-import Alpine from "./alpine";
-
-console.info("Initializing Coco JS", packageJSON.version);
-
-export { Alpine };