@evershop/evershop 2.1.0 → 2.1.1

package/src/components/admin/grid/Filter.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import './Filter.scss';
-
-export interface FilterProps {
-  title: string;
-  options: Array<{
-    label: string;
-    value: string;
-    onSelect: () => void;
-  }>;
-  selectedOption?: string;
-}
-export function Filter({ title, options, selectedOption }: FilterProps) {
-  const [show, setShow] = React.useState(false);
-
-  return (
-    <div className="filter-container">
-      <button
-        type="button"
-        onClick={() => setShow(!show)}
-        className="flex gap-2 justify-center items-center"
-      >
-        <span>{selectedOption || title}</span>
-        {!show && (
-          <svg
-            width="6"
-            height="5"
-            viewBox="0 0 118 106"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M54.6478 2.69522C56.5621 -0.689529 61.4379 -0.689535 63.3522 2.69521L117.134 97.7885C119.019 101.122 116.611 105.25 112.782 105.25H5.21828C1.38899 105.25 -1.01899 101.122 0.866121 97.7886L54.6478 2.69522Z"
-              fill="#2F2F2F"
-            />
-          </svg>
-        )}
-
-        {show && (
-          <svg
-            width="6"
-            height="5"
-            viewBox="0 0 118 106"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M63.3522 103.305C61.4379 106.69 56.5621 106.69 54.6478 103.305L0.866142 8.21144C-1.01897 4.8783 1.38901 0.749989 5.2183 0.749989L112.782 0.749998C116.611 0.749999 119.019 4.8783 117.134 8.21144L63.3522 103.305Z"
-              fill="#2F2F2F"
-            />
-          </svg>
-        )}
-      </button>
-      {show && (
-        <ul>
-          {options.map((option) => (
-            <li key={option.value}>
-              <a
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault();
-                  option.onSelect();
-                }}
-              >
-                {option.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-Filter.defaultProps = {
-  title: '',
-  options: [],
-  selectedOption: ''
-};

package/src/components/admin/grid/Pagination.scss

@@ -1,26 +0,0 @@
-.next a,
-.first a,
-.last a,
-.prev a {
-  width: 2.188rem;
-  height: 2.188rem;
-  color: var(--border);
-  display: flex;
-  border: 1px solid var(--divider);
-  border-radius: 3px;
-  justify-content: center;
-  align-items: center;
-  svg {
-    width: 55%;
-  }
-}
-.pagination input {
-  text-align: center;
-}
-.current .field-suffix {
-  display: none;
-  padding: 0;
-}
-.current select {
-  text-align: center;
-}

package/src/components/admin/grid/Pagination.tsx

@@ -1,178 +0,0 @@
-import { ChevronDoubleLeftIcon } from '@heroicons/react/24/outline';
-import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
-import React from 'react';
-import './Pagination.scss';
-
-export interface PaginationProps {
-  total: number;
-  limit: number;
-  page: number;
-}
-
-export function Pagination({ total, limit, page }: PaginationProps) {
-  const limitInput = React.useRef<HTMLInputElement>(null);
-
-  React.useEffect(() => {
-    if (limitInput.current) {
-      limitInput.current.value = limit.toString();
-    }
-  }, []);
-
-  const onKeyPress = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    e.preventDefault();
-    let pageNumber = parseInt(e.target.value, 10);
-    if (page < 1) pageNumber = 1;
-    if (page > Math.ceil(total / limit)) pageNumber = Math.ceil(total / limit);
-    const url = new URL(window.location.href);
-    url.searchParams.set('page', pageNumber.toString());
-    window.location.href = url.href;
-  };
-
-  const onPrev = (e: React.MouseEvent) => {
-    e.preventDefault();
-    const prev = page - 1;
-    if (page === 1) return;
-    const url = new URL(window.location.href);
-    url.searchParams.set('page', prev.toString());
-    window.location.href = url.href;
-  };
-
-  const onNext = (e: React.MouseEvent) => {
-    e.preventDefault();
-    const next = page + 1;
-    if (page * limit >= total) return;
-    const url = new URL(window.location.href);
-    url.searchParams.set('page', next.toString());
-    window.location.href = url.href;
-  };
-
-  const onFirst = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (page === 1) return;
-    const url = new URL(window.location.href);
-    url.searchParams.delete('page');
-    window.location.href = url.href;
-  };
-
-  const onLast = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (page === Math.ceil(total / limit)) return;
-    const url = new URL(window.location.href);
-    url.searchParams.set('page', Math.ceil(total / limit).toString());
-    window.location.href = url.href;
-  };
-
-  const onKeyPressLimit = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.which !== 13) return;
-    e.preventDefault();
-    const limitNumber = parseInt((e.target as HTMLInputElement).value, 10);
-    if (limitNumber < 1) return;
-    const url = new URL(window.location.href);
-    url.searchParams.set('limit', limitNumber.toString());
-    window.location.href = url.href;
-  };
-
-  return (
-    <div className="pagination flex px-5">
-      <div className="flex justify-between w-full space-x-2 mt-2 mb-2">
-        <div className="flex space-x-2 items-center">
-          <div className="self-center">
-            <span>Show</span>
-          </div>
-          <div className="limit">
-            <div
-              className="form-field flex items-center"
-              style={{ width: '4rem', marginBottom: '0' }}
-            >
-              <input
-                type="number"
-                onKeyDown={(e) => onKeyPressLimit(e)}
-                ref={limitInput}
-              />
-            </div>
-          </div>
-          <div className="self-center">
-            <span>per page</span>
-          </div>
-        </div>
-        <div className="flex space-x-2">
-          {page > 1 && (
-            <>
-              <div className="first self-center">
-                <a href="#" onClick={(e) => onFirst(e)}>
-                  <ChevronDoubleLeftIcon width={20} height={20} />
-                </a>
-              </div>
-              <div className="prev self-center">
-                <a href="#" onClick={(e) => onPrev(e)}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-4 w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 19l-7-7 7-7"
-                    />
-                  </svg>
-                </a>
-              </div>
-            </>
-          )}
-          <div className="current" style={{ width: '5rem' }}>
-            <div className="form-field mb-0">
-              <select
-                onChange={(e) => {
-                  onKeyPress(e);
-                }}
-              >
-                {Array.from(
-                  { length: Math.ceil(total / limit) },
-                  (_, i) => i + 1
-                ).map((item) => (
-                  <option key={item} value={item}>
-                    {item}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-          {page * limit < total && (
-            <>
-              <div className="next self-center">
-                <a href="#" onClick={(e) => onNext(e)}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-4 w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </a>
-              </div>
-              <div className="last self-center">
-                <a href="#" onClick={(e) => onLast(e)}>
-                  <ChevronDoubleRightIcon width={20} height={20} />
-                </a>
-              </div>
-            </>
-          )}
-          <div className="self-center">
-            <span>{total} records</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/common/Button.scss

@@ -1,66 +0,0 @@
-.button {
-  display: inline-block;
-  position: relative;
-  border: 1px solid rgba(186, 191, 195, 1);
-  border-radius: 3px;
-  padding: 0.438rem 1rem;
-  font-weight: 600;
-  color: inherit;
-  background-color: white;
-  border-top-color: rgba(201, 204, 207, 1);
-  border-bottom-color: rgba(186, 191, 196, 1);
-  &:hover {
-    text-decoration: none;
-    background-color: rgba(201, 204, 207, 0.05);
-  }
-  &.primary {
-    background-color: var(--primary);
-    border: 0;
-    color: white;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-    &:hover {
-      background-color: #006e52;
-    }
-  }
-  &.danger {
-    background-color: var(--critical);
-    border: 0;
-    color: white;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-    &:hover {
-      background-color: #bc2200;
-    }
-  }
-  &.outline.interactive {
-    border-color: var(--interactive);
-    color: var(--interactive);
-    &:hover {
-      background-color: #e6eef9;
-    }
-  }
-  &.outline.danger {
-    background-color: transparent;
-    box-shadow: none;
-    border-color: var(--critical);
-    color: var(--critical);
-    &:hover {
-      background-color: #fff4f4;
-    }
-  }
-  &.loading {
-    background-color: var(--divider);
-    &:hover {
-      background-color: var(--divider);
-    }
-    span {
-      opacity: 0;
-    }
-    svg {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -1rem;
-      margin-left: -1rem;
-    }
-  }
-}

package/src/components/common/Button.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import './Button.scss';
-
-export interface ButtonProps {
-  title: string | React.ReactNode;
-  outline?: boolean;
-  variant?: 'primary' | 'secondary' | 'danger';
-  onAction?: () => void;
-  url?: string;
-  isLoading?: boolean;
-  type?: 'button' | 'submit' | 'reset';
-  className?: string;
-}
-
-const Button: React.FC<ButtonProps> = ({
-  title,
-  outline = false,
-  variant = 'primary',
-  onAction,
-  url = undefined,
-  isLoading = false,
-  type = 'button',
-  className: _className = ''
-}) => {
-  const className = ['button', variant];
-  if (outline === true) className.push('outline');
-  if (isLoading === true) className.push('loading');
-  if (_className) className.push(_className);
-
-  const onActionFunc = (e) => {
-    e.preventDefault();
-    if (isLoading === true) return;
-    onAction && onAction();
-  };
-
-  if (!url) {
-    return (
-      <button
-        type={type}
-        onClick={(e) => {
-          if (type !== 'submit') {
-            e.preventDefault();
-            onActionFunc(e);
-          } else {
-            e.stopPropagation();
-          }
-        }}
-        className={className.join(' ')}
-      >
-        <span>{title}</span>
-        {isLoading === true && (
-          <svg
-            style={{
-              background: 'rgb(255, 255, 255, 0)',
-              display: 'block',
-              shapeRendering: 'auto'
-            }}
-            width="2rem"
-            height="2rem"
-            viewBox="0 0 100 100"
-            preserveAspectRatio="xMidYMid"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              stroke="#5c5f62"
-              strokeWidth="10"
-              r="43"
-              strokeDasharray="202.63272615654165 69.54424205218055"
-            >
-              <animateTransform
-                attributeName="transform"
-                type="rotate"
-                repeatCount="indefinite"
-                dur="1s"
-                values="0 50 50;360 50 50"
-                keyTimes="0;1"
-              />
-            </circle>
-          </svg>
-        )}
-      </button>
-    );
-  } else {
-    return (
-      <a href={url} className={className.join(' ')}>
-        <span>{title}</span>
-      </a>
-    );
-  }
-};
-
-export default Button;

package/src/components/common/form/ColorField.tsx

@@ -1,104 +0,0 @@
-import { Tooltip } from '@components/common/form/Tooltip.js';
-import { getNestedError } from '@components/common/form/utils/getNestedError.js';
-import { _ } from '@evershop/evershop/lib/locale/translate/_';
-import React from 'react';
-import {
-  useFormContext,
-  RegisterOptions,
-  FieldPath,
-  FieldValues
-} from 'react-hook-form';
-
-interface ColorFieldProps<T extends FieldValues = FieldValues>
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'type'> {
-  name: FieldPath<T>;
-  label?: string;
-  error?: string;
-  helperText?: string;
-  required?: boolean;
-  validation?: RegisterOptions<T>;
-  defaultValue?: string;
-  wrapperClassName?: string;
-}
-
-export function ColorField<T extends FieldValues = FieldValues>({
-  name,
-  label,
-  error,
-  wrapperClassName,
-  helperText,
-  required,
-  validation,
-  defaultValue,
-  className,
-  ...props
-}: ColorFieldProps<T>) {
-  const {
-    register,
-    formState: { errors },
-    watch,
-    setValue
-  } = useFormContext<T>();
-
-  const fieldError = getNestedError(name, errors, error);
-  const fieldId = `field-${name}`;
-  const value = watch(name) || '#000000';
-
-  const { valueAsNumber, valueAsDate, ...cleanValidation } = validation || {};
-  const validationRules = {
-    ...cleanValidation,
-    ...(required &&
-      !validation?.required && {
-        required: _('${field} is required', { field: label || name })
-      }),
-    pattern: validation?.pattern || {
-      value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
-      message: _('Please enter a valid hex color')
-    }
-  };
-
-  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(name, e.target.value as any);
-  };
-
-  return (
-    <div
-      className={`form-field ${wrapperClassName} ${fieldError ? 'error' : ''}`}
-    >
-      {label && (
-        <label htmlFor={fieldId}>
-          {label}
-          {required && <span className="required-indicator">*</span>}
-          {helperText && <Tooltip content={helperText} position="top" />}
-        </label>
-      )}
-
-      <div className="color-input-group">
-        <input
-          id={fieldId}
-          type="color"
-          {...register(name, validationRules)}
-          className={`color-picker ${className || ''}`}
-          aria-invalid={fieldError ? 'true' : 'false'}
-          aria-describedby={fieldError ? `${fieldId}-error` : undefined}
-          {...props}
-        />
-
-        <input
-          type="text"
-          value={value}
-          placeholder="#000000"
-          onChange={handleTextChange}
-          className="color-input"
-          aria-invalid={fieldError ? 'true' : 'false'}
-        />
-      </div>
-
-      {fieldError && (
-        <p id={`${fieldId}-error`} className="field-error">
-          {fieldError}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/common/modal/Modal.tsx

@@ -1,105 +0,0 @@
-import { Card } from '@components/admin/Card.js';
-import React, { useEffect, useCallback, useState } from 'react';
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  closeOnEscape?: boolean;
-  closeOnBackdropClick?: boolean;
-  [key: string]: any;
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  className,
-  closeOnEscape = true,
-  closeOnBackdropClick = true,
-  ...restProps
-}) => {
-  const [isRendered, setIsRendered] = useState(isOpen);
-
-  useEffect(() => {
-    if (isOpen) {
-      setIsRendered(true);
-    }
-  }, [isOpen]);
-
-  const handleTransitionEnd = () => {
-    if (!isOpen) {
-      setIsRendered(false);
-    }
-  };
-
-  const handleModalKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (closeOnEscape && e.key === 'Escape') {
-        onClose();
-      }
-    },
-    [closeOnEscape, onClose]
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (closeOnBackdropClick && e.target === e.currentTarget) {
-        onClose();
-      }
-    },
-    [closeOnBackdropClick, onClose]
-  );
-
-  useEffect(() => {
-    if (isRendered) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
-    }
-
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, [isRendered]);
-
-  useEffect(() => {
-    if (!isRendered) return;
-    document.addEventListener('keydown', handleModalKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleModalKeyDown);
-    };
-  }, [isRendered, handleModalKeyDown]);
-
-  if (!isRendered) {
-    return null;
-  }
-
-  return (
-    <>
-      <div
-        onClick={handleBackdropClick}
-        role="presentation"
-        className={`fixed inset-0 bg-black bg-opacity-50 z-1001 transition-opacity duration-300 z-30 ${
-          isOpen ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
-      <div
-        role="dialog"
-        aria-modal="true"
-        onTransitionEnd={handleTransitionEnd}
-        className={`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-lg z-50 w-full max-w-2xl max-h-[80vh] overflow-auto overscroll-contain transition-all duration-300 ${
-          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-        } ${className || ''}`}
-        {...restProps}
-      >
-        <Card title={title}>
-          <Card.Session>{children}</Card.Session>
-        </Card>
-      </div>
-    </>
-  );
-};