@evershop/evershop 2.1.0 → 2.1.1

package/src/components/common/form/editor/RawToolWrapper.ts

@@ -0,0 +1,79 @@
+/**
+ * Wrapper for @editorjs/raw that fixes keyboard event handling issues
+ * This ensures backspace and other keys work properly in the raw HTML block
+ */
+export class RawToolWrapper {
+  private rawTool: any;
+  private api: any;
+  private data: any;
+  private config: any;
+
+  constructor({ data, config, api, block }: any) {
+    this.data = data;
+    this.config = config;
+    this.api = api;
+
+    // We'll load the actual Raw tool dynamically
+    this.initializeRawTool({ data, config, api, block });
+  }
+
+  async initializeRawTool(params: any) {
+    const { default: RawTool } = await import('@editorjs/raw');
+    this.rawTool = new RawTool(params);
+  }
+
+  static get toolbox() {
+    return {
+      title: 'Raw HTML',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>'
+    };
+  }
+
+  render() {
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('ce-rawtool');
+
+    const textarea = document.createElement('textarea');
+    textarea.classList.add('ce-rawtool__textarea');
+    textarea.placeholder = 'Enter HTML code';
+    textarea.value = this.data?.html || '';
+
+    // Prevent EditorJS from handling keyboard events inside textarea
+    textarea.addEventListener('keydown', (event) => {
+      event.stopPropagation();
+    });
+
+    textarea.addEventListener('keyup', (event) => {
+      event.stopPropagation();
+    });
+
+    textarea.addEventListener('paste', (event) => {
+      event.stopPropagation();
+    });
+
+    // Handle input changes
+    textarea.addEventListener('input', () => {
+      this.data = { html: textarea.value };
+    });
+
+    wrapper.appendChild(textarea);
+    return wrapper;
+  }
+
+  save(blockContent: HTMLElement) {
+    const textarea = blockContent.querySelector('textarea');
+    return {
+      html: textarea?.value || ''
+    };
+  }
+
+  static get sanitize() {
+    return {
+      html: true
+    };
+  }
+
+  static get isReadOnlySupported() {
+    return true;
+  }
+}

package/src/components/common/form/editor/RowTemplates.tsx

@@ -8,8 +8,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     1: () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -21,8 +21,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '1:1': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -34,8 +34,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '1:2': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -47,8 +47,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '2:1': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -60,8 +60,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '2:3': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -74,8 +74,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '3:2': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -88,8 +88,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '1:1:1': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -101,8 +101,8 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     '1:2:1': () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
+        width="30"
+        height="30"
         viewBox="0 0 48 48"
         aria-hidden="true"
         focusable="false"
@@ -113,7 +113,7 @@ function RowTemplates({ addRow }: { addRow: (row: any) => void }) {
     )
   };
   return (
-    <div className="row-templates flex justify-center gap-7 border border-divider px-3">
+    <div className="row-templates flex justify-center gap-7 px-3">
       {Object.keys(templates).map((key) => (
         <a
           key={key}

package/src/components/common/modal/Alert.jsx

@@ -1,4 +1,4 @@
-import Button from '@components/common/Button';
+import { Button } from '@components/common/ui/Button.js';
 import { assign } from '@evershop/evershop/lib/util/assign';
 import { produce } from 'immer';
 import PropTypes from 'prop-types';
@@ -6,7 +6,13 @@ import React, { useReducer } from 'react';
 import ReactDOM from 'react-dom';
 
 import './Alert.scss';
-import { Card } from '@components/admin/Card';
+import { Card } from '@components/common/ui/Card';
+import {
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@components/common/ui/Card.js';
 
 const AlertContext = React.createContext();
 export const useAlertContext = () => React.useContext(AlertContext);
@@ -92,39 +98,35 @@ function Alert({ children }) {
               role="dialog"
             >
               <div className="modal">
-                <button
-                  type="button"
-                  className="modal-close-button text-icon"
-                  onClick={() => dispatch({ type: 'closing' })}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="1.5rem"
-                    className="w-6 h-6"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-                <Card title={alert.heading}>
-                  <Card.Session>{alert.content}</Card.Session>
+                <Card>
+                  {alert.heading && (
+                    <CardHeader>
+                      <CardTitle>{alert.heading}</CardTitle>
+                    </CardHeader>
+                  )}
+                  <CardContent>{alert.content}</CardContent>
                   {(alert.primaryAction !== undefined ||
                     alert.secondaryAction !== undefined) && (
-                    <Card.Session>
-                      <div className="flex justify-end space-x-2">
+                    <CardFooter>
+                      <div className="flex justify-end space-x-2 w-full">
                         {alert.primaryAction && (
-                          <Button {...alert.primaryAction} />
+                          <Button
+                            onClick={alert.primaryAction.onAction}
+                            variant={alert.primaryAction.variant}
+                          >
+                            {alert.primaryAction.title}
+                          </Button>
                         )}
                         {alert.secondaryAction && (
-                          <Button {...alert.secondaryAction} />
+                          <Button
+                            onClick={alert.secondaryAction.onAction}
+                            variant={alert.secondaryAction.variant}
+                          >
+                            {alert.secondaryAction.title}
+                          </Button>
                         )}
                       </div>
-                    </Card.Session>
+                    </CardFooter>
                   )}
                 </Card>
               </div>

package/src/components/common/react/client/Client.tsx

@@ -12,7 +12,9 @@ declare global {
 }
 
 const client = createClient({
-  url: '/api/graphql'
+  url: window.eContext?.config?.pageMeta?.route?.isAdmin
+    ? '/api/admin/graphql'
+    : '/api/graphql'
 });
 
 interface AppProps {

package/src/components/common/react/client/Index.jsx

@@ -3,12 +3,10 @@ import { App } from '@components/common/react/client/Client';
 import { HotReload } from '@components/common/react/client/HotReload';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import hot from 'webpack-hot-middleware/client?path=/eHot&reload=true&overlay=true';
 /** render */
 ReactDOM.render(
   <App>
     <Area />
-    <HotReload hot={hot} />
   </App>,
   document.getElementById('app')
 );

package/src/components/common/react/server/Server.tsx

@@ -1,13 +1,18 @@
 import Area from '@components/common/Area.js';
 import { Alert } from '@components/common/modal/Alert.js';
 import React from 'react';
+import { Route } from '../../../../types/route.js';
 
 interface ServerHtmlProps {
+  route: Route;
   css: string[];
   js: string[];
   appContext: string;
 }
-function ServerHtml({ css, js, appContext }: ServerHtmlProps) {
+function ServerHtml({ route, css, js, appContext }: ServerHtmlProps) {
+  const classes = route.isAdmin
+    ? `admin ${route.id}`
+    : `frontStore ${route.id}`;
   return (
     <>
       <head>
@@ -18,8 +23,8 @@ function ServerHtml({ css, js, appContext }: ServerHtmlProps) {
         ))}
         <Area noOuter id="head" />
       </head>
-      <body id="body">
-        <div id="app" className="bg-background">
+      <body id="body" className={classes}>
+        <div id="app">
           <Alert>
             <Area id="body" className="wrapper" />
           </Alert>

package/src/components/common/react/server/render.tsx

@@ -3,10 +3,11 @@ import ServerHtml from '@components/common/react/server/Server.js';
 import React from 'react';
 import { renderToString } from 'react-dom/server.js';
 
-function renderHtml(js, css, contextData, langeCode) {
+function renderHtml(route, js, css, contextData, langeCode) {
   const source = renderToString(
     <AppProvider value={JSON.parse(contextData)}>
       <ServerHtml
+        route={route}
         js={js}
         css={css}
         appContext={`var eContext = ${contextData}`}

package/src/components/common/ui/Accordion.tsx

@@ -0,0 +1,78 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { cn } from '@evershop/evershop/lib/util/cn';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import React from 'react';
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('flex w-full flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('not-last:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+      {...props}
+    >
+      <div
+        className={cn(
+          'pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/common/ui/Alert.tsx

@@ -0,0 +1,76 @@
+import { cn } from '@evershop/evershop/lib/util/cn';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn('absolute top-2.5 right-3', className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/common/ui/AlertDialog.tsx

@@ -0,0 +1,184 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { Button } from '@components/common/ui/Button.js';
+import { cn } from '@evershop/evershop/lib/util/cn';
+import * as React from 'react';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};

package/src/components/common/ui/AspectRatio.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@evershop/evershop/lib/util/cn';
+import React from 'react';
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          '--ratio': ratio
+        } as React.CSSProperties
+      }
+      className={cn('relative aspect-(--ratio)', className)}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };