avo 3.30.4 → 4.0.0.beta.2

data/app/assets/builds/avo/late-registration.js

@@ -0,0 +1,2 @@
+(()=>{var n=window.Stimulus;window.Avo.configuration.stimulus_controllers&&window.Avo.configuration.stimulus_controllers.forEach(([o,i])=>{n.register(o,window[i])});})();
+//# sourceMappingURL=late-registration.js.map

data/app/assets/builds/avo/late-registration.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../javascript/late-registration.js"],
+  "sourcesContent": ["const application = window.Stimulus\n\n// This is going run last so it can regiser custom StimulusJS controllers from plugins.\nif (window.Avo.configuration.stimulus_controllers) {\n  window.Avo.configuration.stimulus_controllers.forEach(([name, controller]) => {\n    application.register(name, window[controller])\n  })\n}\n"],
+  "mappings": "MAAA,IAAMA,EAAc,OAAO,SAGvB,OAAO,IAAI,cAAc,sBAC3B,OAAO,IAAI,cAAc,qBAAqB,QAAQ,CAAC,CAACC,EAAMC,CAAU,IAAM,CAC5EF,EAAY,SAASC,EAAM,OAAOC,CAAU,CAAC,CAC/C,CAAC",
+  "names": ["application", "name", "controller"]
+}

data/app/assets/config/avo_manifest.js

@@ -1,2 +1,3 @@
-//= link_directory ../images/avo
 //= link_tree ../builds
+//= link_tree ../images
+//= link_tree ../svgs

data/app/assets/images/avo/placeholder.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><g><path d="M61.5,61.1c0-11.8-8.7-21.5-19.5-21.5c-10.7,0-19.5,9.6-19.5,21.5s8.7,21.5,19.5,21.5C52.8,82.6,61.5,73,61.5,61.1z      M27.7,61.1c0-9,6.4-16.4,14.4-16.4s14.4,7.3,14.4,16.4S50,77.5,42.1,77.5S27.7,70.2,27.7,61.1z"/><path d="M44.6,54.3c0-1.4-1.1-2.5-2.5-2.5c-4.8,0-8.7,4.2-8.7,9.4c0,1.4,1.1,2.5,2.5,2.5s2.5-1.1,2.5-2.5c0-2.4,1.6-4.3,3.6-4.3     C43.5,56.8,44.6,55.7,44.6,54.3z"/><path d="M90.3,52.6c-1.1-9.3-5.8-21.5-12-31C72.7,12.9,63.3,2.5,50.7,2.5h-8.7c-11.6,0-21.5,11-24.6,27.4     c-1.1,5.7-3.2,11.2-5.2,16.3c-1.9,4.7-2.9,9.8-2.9,15c0,20,14.7,36.4,32.8,36.4h20.3c6,0,12.5-3.4,17.8-9.4     C88.3,79,92,66.1,90.3,52.6z M14.4,61.1c0-4.6,0.9-9,2.5-13.1c2.2-5.3,4.3-11.1,5.5-17.2C25,17.2,33.1,7.6,42.1,7.6     s17,9.6,19.6,23.2c1.2,6.2,3.3,11.9,5.5,17.2h0c1.7,4.1,2.5,8.5,2.5,13.1c0,17.2-12.4,31.3-27.7,31.3S14.4,78.4,14.4,61.1z      M76.3,84.8c-4.2,4.8-9.5,7.6-14,7.6h-3.7c9.6-6.3,16.1-18,16.1-31.3c0-5.2-1-10.3-2.9-15c0,0,0,0,0,0     c-2.1-5.1-4.1-10.5-5.2-16.3C64.9,20.7,61.1,13.2,56,8.4c15.5,4.9,27.6,30.3,29.3,44.8C86.7,65.2,83.5,76.7,76.3,84.8z"/></g></g></switch></svg>

data/app/assets/stylesheets/application.css

@@ -0,0 +1,250 @@
+@import "tailwindcss";
+
+/* TODO: Figure out a way to add those dynamically */
+@source "../../../tmp/avo/packages/avo-advanced";
+@source "../../../tmp/avo/packages/avo-dashboards";
+@source "../../../tmp/avo/packages/avo-dynamic_filters";
+@source "../../../tmp/avo/packages/avo-kanban";
+@source "../../../tmp/avo/packages/avo-menu";
+@source "../../../tmp/avo/packages/avo-pro";
+@source "../../../tmp/avo/packages/avo-forms";
+
+/* @config "../../../tailwind.config.js"; */
+
+/* We couldn't find a way to implement blocklist in the CSS config */
+/* blocklist: ['bg-[#{chart_color(index)}]', 'bg-[${color}]'] */
+@source inline("break-all");
+
+/* Tailwind colors */
+/* red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose */
+
+@theme {
+  --spacing-3/4: 75%;
+
+  --color-application: rgb(var(--avo-color-application-background));
+
+  --color-primary-100: rgb(var(--avo-color-primary-100));
+  --color-primary-150: rgb(var(--avo-color-primary-150));
+  --color-primary-200: rgb(var(--avo-color-primary-200));
+  --color-primary-300: rgb(var(--avo-color-primary-300));
+  --color-primary-400: rgb(var(--avo-color-primary-400));
+  --color-primary-500: rgb(var(--avo-color-primary-500));
+  --color-primary-600: rgb(var(--avo-color-primary-600));
+  --color-primary-700: rgb(var(--avo-color-primary-700));
+  --color-primary-800: rgb(var(--avo-color-primary-800));
+  --color-primary-850: rgb(var(--avo-color-primary-850));
+  --color-primary-900: rgb(var(--avo-color-primary-900));
+
+  --aspect-media-library-item: 4 / 3;
+
+  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --shadow-panel: "0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04)";
+  --shadow-modal: " 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)";
+
+  --breakpoint-xs: 30rem;
+
+  --container-8xl: 96rem;
+
+  /* Tiny text size originally added for discreet information */
+  --text-tiny: 0.625rem;
+}
+
+@plugin '@tailwindcss/typography';
+
+/* Add dark mode variant */
+@custom-variant light (&:where(.light, .light *));
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant theme-brand (&:where(.theme-brand, .theme-brand *));
+@custom-variant theme-slate (&:where(.theme-slate, .theme-slate *));
+@custom-variant theme-stone (&:where(.theme-stone, .theme-stone *));
+@custom-variant theme-gray (&:where(.theme-gray, .theme-gray *));
+@custom-variant theme-zinc (&:where(.theme-zinc, .theme-zinc *));
+@custom-variant theme-neutral (&:where(.theme-neutral, .theme-neutral *));
+@custom-variant theme-taupe (&:where(.theme-taupe, .theme-taupe *));
+@custom-variant theme-mauve (&:where(.theme-mauve, .theme-mauve *));
+@custom-variant theme-mist (&:where(.theme-mist, .theme-mist *));
+@custom-variant theme-olive (&:where(.theme-olive, .theme-olive *));
+
+@custom-variant os-mac (&:where(.os-mac, .os-mac *));
+@custom-variant os-pc (&:where(.os-pc, .os-pc *));
+
+@custom-variant has-cover (&:where(.has-cover *));
+@custom-variant has-sidebar (&:where(.has-sidebar *));
+@custom-variant has-record-selector (&:where(.has-record-selector *));
+@custom-variant index-grid-view (&:where(.index-grid-view *));
+@custom-variant kanban-dragging (&:where(.kanban-dragging *));
+@custom-variant floating-controls (&:where(.floating-controls *));
+@custom-variant shift-pressed (&:where(.shift-pressed *));
+
+@custom-variant resource-index-view (&:where(.resource-index-view *));
+@custom-variant resource-show-view (&:where(.resource-show-view *));
+@custom-variant resource-edit-view (&:where(.resource-edit-view *));
+@custom-variant resource-new-view (&:where(.resource-new-view *));
+
+/* Used to determine if the filters buttons is displayed. */
+@custom-variant index-missing-resources (&:where(.index-missing-resources *));
+
+/* https://tailwindcss.com/docs/upgrade-guide#hover-styles-on-mobile */
+/* needed to fix hover on system tests we need to find a better solution */
+/* I discovered that the Tailwind v4 `hover` change is affecting the test browser. As a temporary fix, I forced a custom variant to preserve the Tailwind v3 `hover` behavior, since it resolves the failing tests. However, we’ll need to find a more robust long-term solution. This one was tricky to pinpoint. */
+@custom-variant hover (&:hover);
+
+@import "./css/components/ui/checkbox.css";
+
+@layer components {
+  @import "./../../../node_modules/easymde/dist/easymde.min.css";
+  @import "./../../../node_modules/tippy.js/dist/tippy.css";
+  @import "./../../../node_modules/tippy.js/themes/light.css";
+  @import "./../../../node_modules/flatpickr/dist/flatpickr.css";
+  @import "./../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css";
+  @import "./../../../node_modules/@yaireo/tagify/dist/tagify.css";
+  /* @import "./css/components/ui/checkbox.css"; */
+
+  @import "./css/fonts.css";
+  @import "./css/button-group.css";
+  @import "./css/typography.css";
+  @import "./css/tooltips.css";
+  @import "./css/loader.css";
+  @import "./css/pagination.css";
+  @import "./css/search.css";
+  @import "./css/active-storage.css";
+  @import "./css/scrollbar.css";
+  @import "./css/layout.css";
+  @import "./css/spinner.css";
+  @import "./css/table.css";
+  @import "./css/resource-controls.css";
+
+  @import "./css/fields/status.css";
+  @import "./css/fields/code.css";
+  @import "./css/fields/easy-mde.css";
+  @import "./css/fields/progress.css";
+  @import "./css/fields/key_value.css";
+  @import "./css/fields/trix.css";
+  @import "./css/fields/tags.css";
+  @import "./css/fields/tiptap.css";
+  @import "./css/fields/stars.css";
+
+  /* UI 4 */
+  @import "./css/variables.css";
+  @import "./css/components/ui/card.css";
+  @import "./css/components/ui/panel.css";
+  @import "./css/components/ui/panel_header.css";
+  @import "./css/components/ui/description_list.css";
+  @import "./css/components/ui/tabs.css";
+  @import "./css/components/ui/badge.css";
+  @import "./css/components/ui/file_upload_input.css";
+  @import "./css/components/ui/file_upload_item.css";
+  @import "./css/components/ui/dropdown.css";
+  @import "./css/components/ui/radio.css";
+  @import "./css/components/input.css";
+
+  @import "./css/components/field-wrapper.css";
+  @import "./css/components/avatar.css";
+  @import "./css/components/breadcrumbs.css";
+  @import "./css/components/button.css";
+  @import "./css/components/grid.css";
+  @import "./css/components/color_scheme_switcher.css";
+  @import "./css/components/discreet_information.css";
+  @import "./css/components/tooltip.css";
+  @import "./css/components/modal.css";
+  @import "./css/css-animations.css";
+  @import "./css/sidebar.css";
+
+  html,
+  body {
+    @apply antialiased relative h-full text-content;
+
+  }
+
+  .will-change-transform {
+    will-change: transform;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    will-change: opacity;
+    will-change: transform;
+
+    @apply transition transform duration-150;
+  }
+
+  .fade-enter-active {
+    @apply relative ease-out delay-150;
+  }
+
+  .fade-leave-active {
+    @apply relative ease-in;
+  }
+
+  .fade-enter {
+    @apply delay-150 opacity-0 -translate-y-1;
+  }
+
+  .fade-enter-to {
+    @apply delay-150 opacity-100 translate-y-0;
+  }
+
+  .fade-leave {
+    @apply opacity-100 translate-y-0;
+  }
+
+  .fade-leave-to {
+    @apply opacity-0 translate-y-1;
+  }
+
+  .turbo-progress-bar {
+    @apply bg-primary-400;
+  }
+
+  body.modal-open {
+    @apply overflow-hidden;
+  }
+
+  trix-editor {
+    max-height: 320px !important;
+    overflow-y: auto;
+  }
+
+  dialog#turbo-confirm {
+    @apply bg-transparent;
+  }
+
+  dl {
+    @apply text-sm grid gap-x-2 grid-cols-[max-content_1fr];
+
+    dt {
+      @apply font-bold;
+    }
+
+    dd {
+      @apply ms-0 col-start-2;
+    }
+  }
+
+  .panel-spacer {
+    @apply relative flex flex-col gap-y-12;
+
+    &>[data-component="avo/ui/panel_header_component"],
+    &>[data-component="avo/cover_component"] {
+      @apply -mb-8; /* Offset from the regular panel spacing */
+    }
+  }
+}
+
+.loading-spinner {
+  @apply absolute top-1/2 border-2 w-4 h-4 rounded-full;
+
+  border-color: var(--color-content);
+  border-right-color: var(--color-tertiary);
+  transform: translateY(-50%);
+  transform-origin: center center;
+  animation: text-input-spin 0.9s linear infinite;
+}
+
+@keyframes text-input-spin {
+  from { transform: translateY(-50%) rotate(0deg); }
+  to { transform: translateY(-50%) rotate(360deg); }
+}

data/app/assets/stylesheets/css/button-group.css

@@ -0,0 +1,23 @@
+.button-group {
+  @apply flex;
+
+  .button {
+    @apply -me-px;
+
+    &:first-child {
+      @apply rounded-e-none;
+    }
+
+    &:last-child {
+      @apply rounded-s-none;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      @apply rounded-none;
+    }
+  }
+}
+
+form.button_to {
+  @apply inline-flex;
+}

data/app/assets/stylesheets/css/components/avatar.css

@@ -0,0 +1,128 @@
+/* Avatar Component Styles */
+.cado-avatar {
+  @apply relative block overflow-hidden size-full;
+}
+
+/* Size variants */
+.cado-avatar--large {
+  @apply size-20;
+}
+
+.cado-avatar--medium {
+  @apply size-12;
+}
+
+.cado-avatar--small {
+  @apply size-8;
+}
+
+.cado-avatar--tiny {
+  @apply size-5;
+}
+
+/* Shape variants */
+.cado-avatar--rounded {
+  @apply rounded-full;
+}
+
+.cado-avatar--square.cado-avatar--large {
+  @apply rounded-2xl;
+}
+
+.cado-avatar--square.cado-avatar--medium {
+  @apply rounded-xl;
+}
+
+.cado-avatar--square.cado-avatar--small,
+.cado-avatar--square.cado-avatar--tiny {
+  @apply rounded-md;
+}
+
+/* Background colors for different types and themes */
+.cado-avatar--placeholder,
+.cado-avatar--initials {
+  --bg: var(--color-tertiary);
+  --text: var(--color-foreground);
+  --bg-color: color-mix(in oklab, var(--bg), var(--color-primary) 85%);
+
+  background: color-mix(in oklab, var(--bg-color), var(--color-primary) 10%);
+  border-color: color-mix(in oklab, var(--bg), var(--color-content) 10%);
+  color: color-mix(in oklab, var(--text), var(--color-content) 40%);
+
+  @apply border;
+}
+
+.cado-avatar--initials.cado-avatar--orange {
+  --bg: var(--color-orange-400);
+  --text: var(--color-orange-600);
+}
+
+.cado-avatar--initials.cado-avatar--yellow {
+  --bg: var(--color-yellow-400);
+  --text: var(--color-yellow-600);
+}
+
+.cado-avatar--initials.cado-avatar--green {
+  --bg: var(--color-green-400);
+  --text: var(--color-green-600);
+}
+
+.cado-avatar--initials.cado-avatar--teal {
+  --bg: var(--color-teal-400);
+  --text: var(--color-teal-600);
+}
+
+.cado-avatar--initials.cado-avatar--blue {
+  --bg: var(--color-blue-400);
+  --text: var(--color-blue-600);
+}
+
+.cado-avatar--initials.cado-avatar--purple {
+  --bg: var(--color-purple-400);
+  --text: var(--color-purple-600);
+}
+
+/* Image container */
+.cado-avatar__image {
+  @apply absolute inset-0 size-full overflow-hidden;
+}
+
+.cado-avatar__img {
+  @apply size-full object-cover object-center bg-cover bg-center bg-no-repeat;
+}
+
+/* Initials text styling */
+.cado-avatar__initials {
+  @apply absolute top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 font-medium leading-none text-center whitespace-nowrap overflow-hidden text-ellipsis;
+}
+
+/* Initials text colors */
+.cado-avatar--initials .cado-avatar__initials {
+  /* @apply text-foreground; */
+}
+
+.cado-avatar--initials.cado-avatar--orange .cado-avatar__initials,
+.cado-avatar--initials.cado-avatar--yellow .cado-avatar__initials,
+.cado-avatar--initials.cado-avatar--green .cado-avatar__initials,
+.cado-avatar--initials.cado-avatar--teal .cado-avatar__initials,
+.cado-avatar--initials.cado-avatar--blue .cado-avatar__initials,
+.cado-avatar--initials.cado-avatar--purple .cado-avatar__initials {
+  /* @apply text-secondary; */
+}
+
+/* Font sizes for different avatar sizes */
+.cado-avatar--large .cado-avatar__initials {
+  @apply text-2xl leading-8 w-8;
+}
+
+.cado-avatar--medium .cado-avatar__initials {
+  @apply text-lg leading-6 w-6;
+}
+
+.cado-avatar--small .cado-avatar__initials {
+  @apply text-sm leading-6;
+}
+
+.cado-avatar--tiny .cado-avatar__initials {
+  @apply text-tiny leading-4;
+}

data/app/assets/stylesheets/css/components/breadcrumbs.css

@@ -0,0 +1,43 @@
+.breadcrumbs {
+  @apply w-full;
+}
+
+.breadcrumbs__container {
+  @apply flex flex-wrap gap-y-0 gap-x-px sm:gap-2 items-center;
+}
+
+.breadcrumbs__separator {
+  @apply text-content-secondary flex items-center;
+}
+
+.breadcrumb-element {
+  @apply inline-flex items-center gap-2 font-medium leading-6 text-sm rounded-lg px-2 py-0.5 text-content-secondary;
+}
+
+.breadcrumb-element__icon {
+  @apply shrink-0 flex items-center size-4 text-content-secondary;
+}
+
+.breadcrumb-element__initials {
+  /* TODO: refresh the design tokens (border color, bg, text color) */
+  @apply shrink-0 flex items-center justify-center;
+}
+
+.breadcrumb-element__avatar {
+  @apply inline-flex items-center;
+
+}
+
+.breadcrumb-element__text {
+  @apply shrink-0 whitespace-nowrap text-content;
+}
+
+.breadcrumb-element--link {
+  .breadcrumb-element__text {
+    @apply text-content-secondary;
+  }
+
+  &:hover {
+    @apply bg-secondary;
+  }
+}