@akinon/projectzero 2.0.0-beta.2 → 2.0.0-beta.20

package/app-template/src/components/action-tooltip.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import clsx from 'clsx';
+
+interface ActionTooltipProps {
+  widgetData: {
+    attributes: Record<string, any>;
+    name: string;
+    template: string;
+    slug: string;
+  };
+  selectedWidget: any;
+  designMode: boolean;
+  onDelete?: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onCopy?: () => void;
+}
+
+export function ActionTooltip({
+  widgetData,
+  selectedWidget,
+  designMode,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  onCopy
+}: ActionTooltipProps) {
+  if (!widgetData?.attributes) {
+    return null;
+  }
+
+  const componentId = Object.keys(widgetData.attributes)[0];
+  const attributes = widgetData.attributes[componentId];
+
+  if (!attributes) {
+    return null;
+  }
+
+  const isRootContainer = !attributes.parentId;
+
+  if (isRootContainer) {
+    return null;
+  }
+
+  const isContainer = ['container'].includes(attributes.type);
+  const isCollectionItem = selectedWidget?.id?.includes('-');
+
+  const isSelected = isCollectionItem
+    ? selectedWidget?.id === componentId
+    : selectedWidget?.id?.split('-')[0] === componentId?.split('-')[0];
+
+  if (!designMode || !selectedWidget || !isSelected) {
+    return null;
+  }
+
+  return (
+    <section className="flex absolute justify-center right-[29px] mr-[4px] bottom-[-1px] z-[51] w-[73px] h-[21px] bg-[#292b2c] overflow-hidden gap-[9px]">
+      <button
+        className={clsx('bg-[#292b2c] text-white hover:opacity-80')}
+        onClick={onMoveUp}
+      >
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.94 2.33 2.557 3.715a.546.546 0 0 1-.771-.772L4.1.628a.546.546 0 0 1 .771 0l2.315 2.314a.546.546 0 0 1-.772.772L5.031 2.33v5.626a.546.546 0 0 1-1.09 0V2.33z"
+            fill="#FFF"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        className={clsx(
+          'bg-[#292b2c] text-white hover:opacity-80',
+          isContainer && 'disabled'
+        )}
+        onClick={onMoveDown}
+      >
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.697 6.64 2.314 5.257a.546.546 0 0 0-.771.771l2.314 2.315a.546.546 0 0 0 .772 0l2.314-2.315a.546.546 0 0 0-.772-.771L4.788 6.64V1.014a.546.546 0 0 0-1.09 0V6.64z"
+            fill="#FFF"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        className="bg-[#292b2c] text-white hover:opacity-80"
+        onClick={onDelete}
+      >
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.8986356,1.49777209 L5.4463047,1.49777209 L5.4463047,1.089312 C5.4463047,0.499342458 4.94696224,0 4.3569927,0 L2.9046618,0 C2.31469226,0 1.8153498,0.499342458 1.8153498,1.089312 L1.8153498,1.49777209 L0.363018903,1.49777209 C0.181509452,1.49777209 0,1.63384035 0,1.86079099 C0,2.08774162 0.181509452,2.17836871 0.363018903,2.17836871 L0.771478991,2.17836871 L0.771478991,6.9438215 C0.771478991,7.53379103 1.27082145,7.98769231 1.86079099,7.98769231 L5.4914906,7.98769231 C6.08146013,7.98769231 6.53536141,7.48834985 6.53536141,6.9438215 L6.53536141,2.17836871 L6.9438215,2.17836871 C7.12533095,2.17836871 7.3068404,2.04230044 7.3068404,1.8153498 C7.3068404,1.58839917 7.07988976,1.49777209 6.89838031,1.49777209 L6.8986356,1.49777209 Z M2.5416429,1.089312 C2.5416429,0.862361361 2.72315235,0.680851909 2.95010299,0.680851909 L4.40243389,0.680851909 C4.62938452,0.680851909 4.81089397,0.862361361 4.81089397,1.089312 L4.81089397,1.49777209 L2.5416429,1.49777209 L2.5416429,1.089312 L2.5416429,1.089312 Z M5.8093236,6.8986356 C5.8093236,7.12558623 5.62781415,7.2616545 5.4463047,7.2616545 L1.81560509,7.2616545 C1.58865445,7.2616545 1.407145,7.08014505 1.407145,6.8986356 L1.407145,2.17862399 L5.8093236,2.17862399 L5.8093236,6.8986356 Z M2.9046618,3.31312189 C2.72315235,3.31312189 2.5416429,3.44919016 2.5416429,3.67614079 L2.5416429,5.8093236 C2.5416429,5.99083305 2.67771116,6.1723425 2.9046618,6.1723425 C3.13161244,6.1723425 3.2676807,6.03627424 3.2676807,5.8093236 L3.2676807,3.63095489 C3.2676807,3.44944544 3.08617125,3.31337718 2.9046618,3.31337718 L2.9046618,3.31312189 Z M4.3569927,3.31312189 C4.17548325,3.31312189 3.9939738,3.44919016 3.9939738,3.63069961 L3.9939738,5.80906831 C3.9939738,5.99057777 4.13004206,6.17208722 4.3569927,6.17208722 C4.58394334,6.17208722 4.7200116,6.03601895 4.7200116,5.80906831 L4.7200116,3.63069961 C4.67457042,3.44919016 4.53850215,3.31312189 4.3569927,3.31312189 Z"
+            fill="#FFF"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        className="bg-[#292b2c] text-white hover:opacity-80"
+        onClick={onCopy}
+      >
+        <svg
+          width="8px"
+          height="10px"
+          viewBox="0 0 8 10"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            id="dynamic-widget"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+          >
+            <g
+              id="dynamic-widget---02"
+              transform="translate(-543, -615)"
+              fill="#FFFFFF"
+              fillRule="nonzero"
+              stroke="#FFFFFF"
+              strokeWidth="0.307692308"
+            >
+              <g id="Grou5" transform="translate(484, 610)">
+                <g id="Group-5" transform="translate(59.6154, 6)">
+                  <path
+                    d="M4.35136402,1.39920627 L0.632480235,1.39920627 C0.283491141,1.39920627 0,1.68269742 0,2.03168651 L0,7.36751977 C0,7.71650886 0.283491141,8 0.632480235,8 L4.35136402,8 C4.70035311,8 4.98384425,7.71650886 4.98384425,7.36751977 L4.98384425,2.03168651 C4.98209431,1.68269742 4.69885316,1.39920627 4.35136402,1.39920627 Z M4.53985813,7.36576982 C4.53985813,7.47051655 4.45461079,7.55576388 4.34986407,7.55576388 L0.630980282,7.55576388 C0.526233555,7.55576388 0.440986219,7.47051655 0.440986219,7.36576982 L0.440986219,2.03143652 C0.440986219,1.92668979 0.526233555,1.84144245 0.630980282,1.84144245 L4.34986407,1.84144245 C4.45461079,1.84144245 4.53985813,1.92668979 4.53985813,2.03143652 L4.53985813,7.36576982 Z"
+                    id="Shape"
+                  ></path>
+                  <path
+                    d="M5.77331958,0 L2.0544358,0 C1.7054467,0 1.42195556,0.283491141 1.42195556,0.632480235 C1.42195556,0.755226399 1.52020249,0.853723321 1.64319865,0.853723321 C1.76619481,0.853723321 1.86444174,0.755476391 1.86444174,0.632480235 C1.86444174,0.527733508 1.94968907,0.442486172 2.0544358,0.442486172 L5.77331958,0.442486172 C5.87806631,0.442486172 5.96331365,0.527733508 5.96331365,0.632480235 L5.96331365,5.96831349 C5.96331365,6.07306022 5.87806631,6.15830755 5.77331958,6.15830755 C5.65057342,6.15830755 5.5520765,6.25655448 5.5520765,6.37955064 C5.5520765,6.5025468 5.65032343,6.60079373 5.77331958,6.60079373 C6.12230868,6.60079373 6.40579982,6.31730258 6.40579982,5.96831349 L6.40579982,0.632480235 C6.40579982,0.283491141 6.12230868,0 5.77331958,0 Z"
+                    id="Path"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </button>
+    </section>
+  );
+}

package/app-template/src/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
+import { Link } from '@theme/components';
 import { ButtonProps } from '@theme/components/types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button data-testid="button" {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/app-template/src/components/carousel-core.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { forwardRef } from 'react';
 import 'react-multi-carousel/lib/styles.css';
 import Carousel, {
   CarouselProps as BaseCarouselProps
 } from 'react-multi-carousel';
-import { forwardRef } from 'react';
 import { useMediaQuery } from '@akinon/next/hooks';
 
 type ContainerAspectRatioType = {
@@ -20,15 +19,9 @@ interface CarouselProps extends BaseCarouselProps {
 const CarouselCore = forwardRef<Carousel, CarouselProps>((props, ref) => {
   const { containerAspectRatio } = props;
   const matches = useMediaQuery('(min-width: 768px)');
-  const [aspectRatio, setAspectRatio] = useState(containerAspectRatio.mobile);
-
-  useEffect(() => {
-    if (matches) {
-      setAspectRatio(containerAspectRatio.desktop);
-    } else {
-      setAspectRatio(containerAspectRatio.mobile);
-    }
-  }, [matches, containerAspectRatio]);
+  const aspectRatio = matches
+    ? containerAspectRatio.desktop
+    : containerAspectRatio.mobile;
 
   return (
     <div className="w-full" style={{ aspectRatio }}>

package/app-template/src/components/checkbox.tsx

@@ -9,6 +9,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     <label className={twMerge('flex flex-col text-xs', props.className)}>
       <div className="flex items-center">
         <input
+          data-testid="checkbox"
           type="checkbox"
           {...rest}
           ref={ref}
@@ -18,7 +19,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         {children && <span className="ml-2">{children}</span>}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </label>
   );

package/app-template/src/components/currency-select.tsx

@@ -9,6 +9,11 @@ import { Select } from './select';
 
 interface CurrencySelectProps {
   className?: string;
+  showIcon?: boolean;
+  /** Custom SVG icon content */
+  customIcon?: string;
+  /** Label format: 'full' (US Dollar), 'symbol' ($), 'code' (USD) */
+  labelFormat?: 'full' | 'symbol' | 'code';
 }
 
 export const CurrencySelect = (props: CurrencySelectProps) => {
@@ -17,6 +22,98 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
   const { t, currency, setCurrency } = useLocalization();
   const { currencies } = settings.localization;
 
+  // Currency symbol map for common currencies
+  const currencySymbolMap: Record<string, string> = {
+    usd: '$',
+    eur: '€',
+    gbp: '£',
+    try: '₺',
+    jpy: '¥',
+    cny: '¥',
+    krw: '₩',
+    inr: '₹',
+    rub: '₽',
+    brl: 'R$',
+    aud: 'A$',
+    cad: 'C$',
+    chf: 'CHF',
+    sek: 'kr',
+    nok: 'kr',
+    dkk: 'kr',
+    pln: 'zł',
+    mxn: '$',
+    sgd: 'S$',
+    hkd: 'HK$',
+    nzd: 'NZ$',
+    zar: 'R',
+    aed: 'د.إ',
+    sar: '﷼',
+    thb: '฿',
+    myr: 'RM',
+    php: '₱',
+    idr: 'Rp',
+    vnd: '₫',
+    egp: 'E£',
+    ngn: '₦',
+    pkr: '₨',
+    bdt: '৳',
+    cop: '$',
+    ars: '$',
+    clp: '$',
+    pen: 'S/',
+    ils: '₪',
+    kwd: 'د.ك',
+    qar: '﷼',
+    bhd: '.د.ب',
+    omr: '﷼'
+  };
+
+  // Currency full name map for common currencies
+  const currencyNameMap: Record<string, string> = {
+    usd: 'US Dollar',
+    eur: 'Euro',
+    gbp: 'British Pound',
+    try: 'Turkish Lira',
+    jpy: 'Japanese Yen',
+    cny: 'Chinese Yuan',
+    krw: 'South Korean Won',
+    inr: 'Indian Rupee',
+    rub: 'Russian Ruble',
+    brl: 'Brazilian Real',
+    aud: 'Australian Dollar',
+    cad: 'Canadian Dollar',
+    chf: 'Swiss Franc',
+    sek: 'Swedish Krona',
+    nok: 'Norwegian Krone',
+    dkk: 'Danish Krone',
+    pln: 'Polish Zloty',
+    mxn: 'Mexican Peso',
+    sgd: 'Singapore Dollar',
+    hkd: 'Hong Kong Dollar',
+    nzd: 'New Zealand Dollar',
+    zar: 'South African Rand',
+    aed: 'UAE Dirham',
+    sar: 'Saudi Riyal',
+    thb: 'Thai Baht',
+    myr: 'Malaysian Ringgit',
+    php: 'Philippine Peso',
+    idr: 'Indonesian Rupiah',
+    vnd: 'Vietnamese Dong',
+    egp: 'Egyptian Pound',
+    ngn: 'Nigerian Naira',
+    pkr: 'Pakistani Rupee',
+    bdt: 'Bangladeshi Taka',
+    cop: 'Colombian Peso',
+    ars: 'Argentine Peso',
+    clp: 'Chilean Peso',
+    pen: 'Peruvian Sol',
+    ils: 'Israeli Shekel',
+    kwd: 'Kuwaiti Dinar',
+    qar: 'Qatari Riyal',
+    bhd: 'Bahraini Dinar',
+    omr: 'Omani Rial'
+  };
+
   const handleChange = async (e) => {
     setSelectedCurrency(e.currentTarget.value);
     setIsModalOpen(true);
@@ -26,16 +123,64 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
     setCurrency(selectedCurrency);
   };
 
+  // Get currency symbol from map or use provided symbol
+  const getCurrencySymbol = (curr: { code: string; symbol?: string }) => {
+    if (curr.symbol) return curr.symbol;
+    return (
+      currencySymbolMap[curr.code.toLowerCase()] || curr.code.toUpperCase()
+    );
+  };
+
+  // Get currency full name from map or use provided label
+  const getCurrencyName = (curr: { code: string; label: string }) => {
+    const name = currencyNameMap[curr.code.toLowerCase()];
+    // If name exists in map, use it. Otherwise check if label looks like a full name (not just code)
+    if (name) return name;
+    // If label is different from code, assume it's a proper name
+    if (curr.label.toLowerCase() !== curr.code.toLowerCase()) return curr.label;
+    // Fallback to code uppercase
+    return curr.code.toUpperCase();
+  };
+
+  // Format label based on labelFormat prop
+  const formatLabel = (curr: {
+    code: string;
+    label: string;
+    symbol?: string;
+  }) => {
+    switch (props.labelFormat) {
+      case 'symbol':
+        // Return currency symbol ($, €, etc.)
+        return getCurrencySymbol(curr);
+      case 'code':
+        // Return currency code (USD, EUR, etc.)
+        return curr.code.toUpperCase();
+      case 'full':
+      default:
+        // Return full label (US Dollar, Euro, etc.)
+        return getCurrencyName(curr);
+    }
+  };
+
+  // Check if customIcon has actual SVG content
+  const hasValidCustomIcon =
+    props.customIcon &&
+    typeof props.customIcon === 'string' &&
+    props.customIcon.includes('<svg');
+
   return (
     <>
       <Select
         onChange={handleChange}
-        options={currencies.map((currency) => ({
-          value: currency.code,
-          label: currency.label
+        options={currencies.map((curr) => ({
+          value: curr.code,
+          label: formatLabel(curr)
         }))}
         value={currency}
-        icon="money"
+        icon={
+          props.showIcon !== false && !hasValidCustomIcon ? 'money' : undefined
+        }
+        customIcon={props.showIcon !== false ? props.customIcon : undefined}
         data-testid="currency"
         borderless
         className={props.className}
@@ -70,6 +215,7 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
               onClick={confirmModalHandleClick}
               appearance="filled"
               className="font-medium px-10 py-4 h-12"
+              data-testid="currency-modal-confirm"
             >
               {t('common.currency_modal.continue')}
             </Button>

package/app-template/src/components/file-input.tsx

@@ -1,8 +1,70 @@
+import { useState } from 'react';
 import { forwardRef } from 'react';
 import { FileInputProps } from '@theme/components/types';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function fileInput(props, ref) {
-    return <input type="file" {...props} ref={ref} />;
+  function FileInput(
+    {
+      buttonClassName,
+      onChange,
+      fileClassName,
+      fileNameWrapperClassName,
+      fileInputClassName,
+      ...props
+    },
+    ref
+  ) {
+    const { t } = useLocalization();
+    const [fileNames, setFileNames] = useState<string[]>([]);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      setFileNames(files.map((file) => file.name));
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="file"
+          {...props}
+          ref={ref}
+          className={twMerge(
+            'absolute inset-0 w-full h-full opacity-0 cursor-pointer',
+            fileInputClassName
+          )}
+          onChange={handleFileChange}
+        />
+        <button
+          type="button"
+          className={twMerge(
+            'bg-primary text-white py-2 px-4 text-sm',
+            buttonClassName
+          )}
+        >
+          {t('common.file_input.select_file')}
+        </button>
+        <div
+          className={twMerge('mt-1 text-gray-500', fileNameWrapperClassName)}
+        >
+          {fileNames.length > 0 ? (
+            <ul className={twMerge('list-disc pl-4 text-xs', fileClassName)}>
+              {fileNames.map((name, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <span className={twMerge('text-xs', fileClassName)}>
+              {t('common.file_input.no_file')}
+            </span>
+          )}
+        </div>
+      </div>
+    );
   }
 );