spree_admin 5.2.6 → 5.3.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6390ee879e264cc465b0782308537ecb4ddf72b1e44bb3be480895679f09dc0e
-  data.tar.gz: ee4c89a7cb0c3ea4d4849e2102c2eb0107f26eb05c5b216714a06ccb63224b57
+  metadata.gz: 31c4a9fdd108771bf4f0232f12a56dd9dc07c0a24458c1d5c0cc4d9c4db5ca1a
+  data.tar.gz: e9017e988e59ebc763fdee09d2f19e5d1f9680378ddc330a67a84e979459e178
 SHA512:
-  metadata.gz: 4abd46a6f7ed2d5024ede1d6a21590ad21e055913671056e7295d869b96f064404de387869addbded86c1446b729524d876498c9bf125c4f0dd45470b98623a7
-  data.tar.gz: 615a0e0d2c2c892f0580d08443cf56f2228fbd514c1321f35d93d60e3c6920aac868d5374fdc849ebf44d7b3fa4efa840c4b77351522c8123187cfc6bfc722e6
+  metadata.gz: aa284aafe9a1a170b1f3e06a01d1e3c27ea85da89bef4bdf2de556d30263417be85754ae34b36f9aa009735304debe4698c4a7a5928875e3db5052d851498088
+  data.tar.gz: 385ef2e97e47cd67b5520a34639ab0b7d82f6a10a4245865f22ee9807b5b04e0fd066547e68e88a4b90fc09de8d3fe041ae8d61a1168daed419c761de24af38c

data/Rakefile

@@ -11,5 +11,8 @@ task default: :spec
 desc "Generates a dummy app for testing"
 task :test_app do
   ENV['LIB_NAME'] = 'spree/admin'
-  Rake::Task['common:test_app'].invoke
+  Rake::Task['common:test_app'].execute(
+    javascript: true,
+    css: true
+  )
 end

data/app/assets/config/spree_admin_manifest.js

@@ -1,4 +1,3 @@
-//= link spree/admin/actiontext.css
 //= link spree/admin/application.css
 
 //= link_tree ../images

data/app/assets/tailwind/spree/admin/base/_animations.css

@@ -0,0 +1,151 @@
+/* ==========================================================================
+   ANIMATIONS
+   Native Tailwind animations replacing animate.css
+   ========================================================================== */
+
+@layer base {
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeOutDown {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+  }
+
+  @keyframes popIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes popOut {
+    from {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95) translateY(-4px);
+    }
+  }
+
+  @keyframes slideInRight {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOutRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes expandDown {
+    from {
+      opacity: 0;
+      grid-template-rows: 0fr;
+    }
+    to {
+      opacity: 1;
+      grid-template-rows: 1fr;
+    }
+  }
+
+  @keyframes collapseUp {
+    from {
+      opacity: 1;
+      grid-template-rows: 1fr;
+    }
+    to {
+      opacity: 0;
+      grid-template-rows: 0fr;
+    }
+  }
+}
+
+@layer utilities {
+  /* Base animation classes */
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-out both;
+  }
+
+  .animate-fade-in-down {
+    animation: fadeInDown 0.3s ease-out both;
+  }
+
+  .animate-fade-out-down {
+    animation: fadeOutDown 0.3s ease-out both;
+  }
+
+  /* Fast variants (matching animate__faster: 0.5s -> we use 0.15s for snappier feel) */
+  .animate-fade-in-fast {
+    animation: fadeIn 0.15s ease-out both;
+  }
+
+  .animate-fade-in-down-fast {
+    animation: fadeInDown 0.15s ease-out both;
+  }
+
+  .animate-fade-out-down-fast {
+    animation: fadeOutDown 0.15s ease-out both;
+  }
+
+  /* Pop animations (for dropdowns, modals, etc.) */
+  .animate-pop-in {
+    animation: popIn 0.15s ease-out both;
+    transform-origin: top center;
+  }
+
+  .animate-pop-out {
+    animation: popOut 0.1s ease-in both;
+    transform-origin: top center;
+  }
+
+  /* Slide animations (for drawers, sidebars, etc.) */
+  .animate-slide-in-right {
+    animation: slideInRight 0.25s ease-out both;
+  }
+
+  .animate-slide-out-right {
+    animation: slideOutRight 0.2s ease-in both;
+  }
+}

data/app/assets/tailwind/spree/admin/base/_base.css

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   BASE STYLES
+   ========================================================================== */
+
+@layer base {
+  html {
+    min-height: 100%;
+    letter-spacing: normal;
+    text-rendering: optimizeLegibility;
+    text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  *,
+  *::before,
+  *::after {
+    border-color: var(--color-gray-200);
+  }
+
+  body {
+    @apply text-base font-normal text-gray-950 bg-white;
+    font-family: var(--font-sans);
+    line-height: var(--line-height-base);
+  }
+
+  a {
+    color: var(--color-primary);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold leading-none;
+  }
+
+  strong, b {
+    @apply font-semibold;
+  }
+
+  h1 { @apply text-4xl; }
+  h2 { @apply text-3xl; }
+  h3 { @apply text-2xl; }
+  h4 { @apply text-xl; }
+  h5 { @apply text-lg; }
+  h6 { @apply text-base; }
+
+  hr {
+    @apply border-gray-200;
+  }
+
+  code {
+    @apply text-gray-950 bg-gray-50;
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.875em;
+  }
+
+  /* Turbo frame busy state */
+  turbo-frame.blur-busy[busy] {
+    @apply opacity-50 pointer-events-none transition-opacity duration-300 ease-in-out;
+  }
+
+  turbo-frame.blur-busy[busy] * {
+    @apply pointer-events-none transition-opacity duration-300 ease-in-out;
+  }
+}

data/app/assets/tailwind/spree/admin/base/_theme.css

@@ -0,0 +1,62 @@
+/* ==========================================================================
+   THEME - Design Tokens (CSS Custom Properties)
+   ========================================================================== */
+
+@theme {
+  /* Gray Scale */
+  --color-gray-25: #FAFAFA;
+
+  /* Legacy Colors, kept for old HTML from extensions/developer apps work properly */
+  --color-primary: var(--color-zinc-950);
+  --color-success: var(--color-green-900);
+  --color-danger: var(--color-red-600);
+  --color-warning: var(--color-yellow-900);
+  --color-info: var(--color-blue-900);
+
+  /* Typography */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Override Tailwind's text-* scale to match Spree design system */
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.813rem;
+  --text-base: 0.875rem;
+  --text-lg: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.75rem;
+  --text-4xl: 2rem;
+
+  --line-height-base: 21px;
+
+  /* Font Weights - matches Bootstrap/Spree Admin variables */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;  /* Note: Spree uses 600, not 700 */
+
+  /* Shadows */
+  --shadow-xs: rgba(43, 34, 51, 0.05) 0px 1px 1px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: rgba(0, 5, 13, 0.5) 0px 4px 8px 2px;
+  --shadow-dropdown: 0px 0px 0px 1px rgba(179, 179, 179, 0.5), 0px 6px 12px -3px rgba(179, 179, 179, 0.35), 0px 6px 18px 0px rgba(179, 179, 179, 0.35);
+
+  /* Layout Spacing */
+  --spacing-sidebar-width: 220px;
+  --spacing-sidebar-collapsed: 59px;
+  --spacing-header-height: 58px;
+
+  /* Transitions */
+  --transition-fast: 0.1s ease-in-out;
+  --transition-default: 0.15s ease-in-out;
+  --transition-slow: 0.3s ease-in-out;
+
+  /* Animations */
+  --animate-fade-in: fade-in 0.15s ease-in-out;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

data/app/assets/tailwind/spree/admin/base/_utilities.css

@@ -0,0 +1,26 @@
+@layer utilities {
+  .scrollbar-thin ::-webkit-scrollbar {
+    width: 0.35rem !important;
+  }
+  ::-webkit-scrollbar-track {
+    border-radius: 0.25rem !important;
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 0.25rem !important;
+    background-color: var(--color-gray-200);
+  }
+  
+  .scrollbar-none {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_alerts.css

@@ -0,0 +1,53 @@
+/* ==========================================================================
+   ALERTS
+   ========================================================================== */
+
+@layer components {
+  .alert {
+    @apply inline-flex flex-col justify-center relative bg-no-repeat py-3 px-4 pl-11 mb-4 min-h-10 border border-transparent rounded-lg;
+    background-position: 1rem center;
+    background-size: 1rem 1rem;
+  }
+
+  .alert > p:last-child {
+    @apply mb-0;
+  }
+
+  .alert a {
+    @apply font-medium text-zinc-950;
+  }
+
+  .alert-success {
+    @apply bg-green-50 text-green-900 border-green-100;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-check-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M9 12l2 2l4 -4' /%3E%3C/svg%3E");
+  }
+
+  .alert-danger {
+    @apply bg-red-50 text-red-900 border-red-100;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-exclamation-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 16v.01' /%3E%3C/svg%3E");
+  }
+
+  .alert-warning {
+    @apply text-inherit bg-yellow-100 border-yellow-200/10!;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-alert-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 8v4' /%3E%3Cpath d='M12 16h.01' /%3E%3C/svg%3E");
+  }
+
+  .alert-info {
+    @apply bg-sky-50 text-sky-900 border-sky-200/10!;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-info-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 9h.01' /%3E%3Cpath d='M11 12h1v4h1' /%3E%3C/svg%3E");
+  }
+
+  /* Page alerts */
+  .page-alerts .alert {
+    @apply rounded-xl;
+  }
+
+  /* Fixed alerts container */
+  .alerts-container {
+    @apply fixed w-full z-1070 top-1 left-0 right-0 flex flex-col items-center pointer-events-none;
+  }
+
+  .alerts-container .alert {
+    @apply border pointer-events-auto ease-in-out transition-all duration-200 shadow-sm;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_badges.css

@@ -0,0 +1,124 @@
+/* ==========================================================================
+   BADGES
+   ========================================================================== */
+
+@layer components {
+  .badge {
+    @apply inline-flex items-center text-center whitespace-nowrap align-baseline cursor-default text-xs font-normal leading-none rounded-md py-1 px-2;
+  }
+
+  .badge i {
+    @apply mr-1 text-[100%];
+  }
+
+  .badge .ti {
+    @apply text-xs leading-3;
+  }
+
+  /* Status badges - Green */
+  .badge-completed,
+  .badge-complete,
+  .badge-resumed,
+  .badge-considered_safe,
+  .badge-paid,
+  .badge-shipped,
+  .badge-active,
+  .badge-success,
+  .badge-sold,
+  .badge-open,
+  .badge-authorized,
+  .badge-published,
+  .badge-live,
+  .badge-processed,
+  .badge-create,
+  .badge-approved,
+  .badge-resolved,
+  .badge-reimbursed,
+  .badge-allocation {
+    @apply border border-transparent bg-green-200 text-green-900;
+  }
+
+  /* Status badges - Red */
+  .badge-failed,
+  .badge-considered_risky,
+  .badge-error,
+  .badge-errored,
+  .badge-invalid,
+  .badge-rejected,
+  .badge-destroy,
+  .badge-closed,
+  .badge-canceled,
+  .badge-partially_canceled,
+  .badge-void,
+  .badge-danger {
+    @apply border border-transparent bg-red-100! text-red-900;
+  }
+
+  /* Status badges - Orange/Warning */
+  .badge-returned,
+  .badge-credit_owed,
+  .badge-balance_due,
+  .badge-backorder,
+  .badge-checkout,
+  .badge-suspended,
+  .badge-archived,
+  .badge-warning,
+  .badge-ready {
+    @apply border border-transparent bg-yellow-200 text-yellow-900;
+  }
+
+  /* Status badges - Light/Neutral */
+  .badge-processing,
+  .badge-pending,
+  .badge-paused,
+  .badge-awaiting_return,
+  .badge-cart,
+  .badge-inactive,
+  .badge-address,
+  .badge-delivery,
+  .badge-payment,
+  .badge-confirm,
+  .badge-disabled,
+  .badge-draft,
+  .badge-onboarding,
+  .badge-light,
+  .badge-authorize,
+  .badge-eligible,
+  .badge-invited {
+    @apply bg-white text-gray-600 border border-gray-200 font-normal;
+  }
+
+  .badge-processing:hover,
+  .badge-pending:hover,
+  .badge-paused:hover,
+  .badge-awaiting_return:hover,
+  .badge-cart:hover,
+  .badge-inactive:hover,
+  .badge-address:hover,
+  .badge-delivery:hover,
+  .badge-payment:hover,
+  .badge-confirm:hover,
+  .badge-disabled:hover,
+  .badge-draft:hover,
+  .badge-onboarding:hover,
+  .badge-light:hover,
+  .badge-authorize:hover,
+  .badge-eligible:hover,
+  .badge-invited:hover {
+    @apply bg-white text-gray-600;
+  }
+
+  /* Status badges - Info/Notice */
+  .badge-notice,
+  .badge-update,
+  .badge-partial,
+  .badge-capture,
+  .badge-info {
+    @apply border border-transparent bg-blue-50 text-blue-900;
+  }
+
+  /* Pill badges */
+  .badge-pill {
+    @apply px-2.5 rounded-full;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_breadcrumbs.css

@@ -0,0 +1,22 @@
+/* ==========================================================================
+   BREADCRUMBS
+   ========================================================================== */
+
+@layer components {
+  .breadcrumb {
+    @apply flex flex-wrap items-center mb-0 list-none font-medium bg-transparent rounded-none;
+    @apply gap-2 p-0 pl-4 h-8 border-l border-gray-100;
+  }
+
+  .breadcrumb li a {
+    @apply no-underline;
+  }
+
+  .breadcrumb li a:hover {
+    @apply text-zinc-950 underline;
+  }
+
+  .breadcrumb li:last-child:not(:first-child) {
+    @apply font-semibold;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_bulk-editor.css

@@ -0,0 +1,53 @@
+/* Bulk Editor - Spreadsheet-style price editing */
+
+/* Input cell states */
+[data-bulk-editor-target="cell"] {
+  @apply transition-colors duration-75 cursor-cell caret-transparent;
+  /* Override any form styling */
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}
+
+/* Selected cells - light background on parent cell container */
+.bulk-editor-cell:has([data-bulk-editor-target="cell"].selected) {
+  @apply bg-blue-50;
+}
+
+/* Focused cell in selection mode - background on parent */
+.bulk-editor-cell:has([data-bulk-editor-target="cell"]:focus) {
+  @apply bg-blue-100;
+}
+
+/* Editing mode - white background, text cursor, visible caret */
+.bulk-editor-cell:has([data-bulk-editor-target="cell"].editing) {
+  @apply bg-white;
+}
+
+[data-bulk-editor-target="cell"].editing {
+  @apply cursor-text caret-inherit;
+}
+
+/* Selection overlay - single border around entire selection */
+.selection-overlay {
+  @apply absolute pointer-events-none border-2 border-blue-500 z-10 hidden;
+}
+
+/* Prevent text selection during drag operations */
+[data-controller="bulk-editor"].fill-dragging {
+  @apply select-none cursor-crosshair;
+}
+
+[data-controller="bulk-editor"].fill-dragging [data-bulk-editor-target="cell"] {
+  @apply cursor-crosshair;
+}
+
+/* Fill handle - blue dot at bottom-right corner of focused cell */
+.fill-handle {
+  @apply absolute w-3 h-3 bg-blue-600 border border-white rounded-lg cursor-crosshair z-10 shadow-xs hidden;
+}
+
+.fill-handle:hover {
+  @apply bg-blue-700 scale-125;
+}

data/app/assets/tailwind/spree/admin/components/_bulk-panel.css

@@ -0,0 +1,97 @@
+/* ==========================================================================
+   BULK PANEL
+   ========================================================================== */
+
+@layer components {
+  .bulk-panel-container {
+    @apply inline-flex items-center rounded-2xl bg-white shadow-dropdown h-12 gap-2;
+    animation: bounceInUp;
+    animation-duration: 0.5s;
+  }
+
+  @keyframes bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    from {
+      opacity: 0;
+      transform: translate3d(0, 3000px, 0) scaleY(5);
+    }
+
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0) scaleY(0.9);
+    }
+
+    75% {
+      transform: translate3d(0, 10px, 0) scaleY(0.95);
+    }
+
+    90% {
+      transform: translate3d(0, -5px, 0) scaleY(0.985);
+    }
+
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .bulk-panel-container .btn {
+    @apply h-10;
+  }
+
+  .bulk-panel-container .btn:hover {
+    @apply bg-gray-100;
+  }
+
+  .bulk-panel-container > * {
+    @apply h-10 flex items-center justify-center;
+  }
+
+  .bulk-panel-container > *:first-child {
+    @apply rounded-l-lg;
+  }
+
+  .bulk-panel-container > *:last-child {
+    @apply rounded-r-lg;
+  }
+
+  .bulk-panel-container > *:last-child .btn {
+    @apply rounded-r-lg;
+  }
+
+  .bulk-panel-container .btn-close {
+    @apply w-10;
+  }
+
+  #bulk-panel {
+    @apply fixed w-full text-center bottom-4 left-0;
+    z-index: 1020;
+  }
+
+  @media (min-width: 992px) {
+    #bulk-panel {
+      @apply left-1/4 w-3/4;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    #bulk-panel {
+      left: 16.66666667%;
+      width: 83.33333333%;
+    }
+  }
+
+  .bulk-operations-counter {
+    @apply pl-4 pr-0;
+  }
+
+  .bulk-operations-counter .bulk-operations-counter-label {
+    @apply pr-4 flex items-center justify-center gap-2 border-r border-gray-200;
+  }
+}