@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { CheckboxProps } from '@theme/components/types';
+import { twMerge } from 'tailwind-merge';
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+  const { children, error, ...rest } = props;
+
+  return (
+    <label className={twMerge('flex flex-col text-xs', props.className)}>
+      <div className="flex items-center">
+        <input
+          type="checkbox"
+          {...rest}
+          ref={ref}
+          className="w-4 h-4 shrink-0"
+        />
+        {children && <span className="ml-2">{children}</span>}
+      </div>
+      {error && (
+        <span className="mt-1 text-sm text-error">{error.message}</span>
+      )}
+    </label>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

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

@@ -0,0 +1,81 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { useState } from 'react';
+import settings from 'settings';
+import { Button } from './button';
+import { Modal } from './modal';
+import { Select } from './select';
+
+interface CurrencySelectProps {
+  className?: string;
+}
+
+export const CurrencySelect = (props: CurrencySelectProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedCurrency, setSelectedCurrency] = useState('');
+  const { t, currency, setCurrency } = useLocalization();
+  const { currencies } = settings.localization;
+
+  const handleChange = async (e) => {
+    setSelectedCurrency(e.currentTarget.value);
+    setIsModalOpen(true);
+  };
+
+  const confirmModalHandleClick = () => {
+    setCurrency(selectedCurrency);
+  };
+
+  return (
+    <>
+      <Select
+        onChange={handleChange}
+        options={currencies.map((currency) => ({
+          value: currency.code,
+          label: currency.label
+        }))}
+        value={currency}
+        icon="money"
+        data-testid="currency"
+        borderless
+        className={props.className}
+      />
+
+      <Modal
+        portalId="currency-modal"
+        open={isModalOpen}
+        setOpen={setIsModalOpen}
+      >
+        <div className="p-6">
+          <h3
+            className="text-2xl font-bold text-center mb-4"
+            data-testid="currency-modal-title"
+          >
+            {t('common.currency_modal.title')}
+          </h3>
+          <p className="text-center mb-10">
+            {t('common.currency_modal.description')}
+          </p>
+
+          <div className="flex justify-center gap-x-6 my-6">
+            <Button
+              onClick={() => setIsModalOpen(false)}
+              appearance="outlined"
+              className="font-medium px-10 py-2 h-12"
+            >
+              {t('common.currency_modal.close')}
+            </Button>
+
+            <Button
+              onClick={confirmModalHandleClick}
+              appearance="filled"
+              className="font-medium px-10 py-4 h-12"
+            >
+              {t('common.currency_modal.continue')}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};

package/app-template/src/components/custom-loader.tsx

@@ -0,0 +1,21 @@
+import { Icon } from './icon';
+import { twMerge } from 'tailwind-merge';
+
+type CustomLoaderProps = {
+  iconName: string;
+  animateType: 'bounce' | 'spin';
+  className?: string;
+};
+
+export const CustomLoader: React.FC<CustomLoaderProps> = ({
+  iconName,
+  animateType = 'spin',
+  className
+}) => {
+  return (
+    <Icon
+      name={iconName}
+      className={twMerge(`animate-${animateType}`, className)}
+    />
+  );
+};

package/app-template/src/components/dynamic-form.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+export default function DynamicForm({
+  children,
+  className,
+  onSubmit
+}: {
+  children: ReactNode;
+  className?: string;
+  onSubmit?: () => void;
+}) {
+  return (
+    <form className={className} onSubmit={onSubmit}>
+      {children}
+    </form>
+  );
+}

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

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+import { FileInputProps } from '@theme/components/types';
+
+export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
+  function fileInput(props, ref) {
+    return <input type="file" {...props} ref={ref} />;
+  }
+);

package/app-template/src/components/generate-form-fields.tsx

@@ -0,0 +1,349 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button, Input, LoaderSpinner, Select } from '@theme/components';
+import { twMerge } from 'tailwind-merge';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import DynamicForm from './dynamic-form';
+import {
+  AllFieldClassesType,
+  FieldPropertiesType,
+  FormField,
+  FormPropertiesType,
+  Schema
+} from '@akinon/next/types';
+
+export function GenerateFormFields({
+  schema,
+  allFieldClasses,
+  fieldProperties,
+  formProperties,
+  submitButtonText
+}: {
+  schema: Schema;
+  allFieldClasses?: AllFieldClassesType;
+  fieldProperties: FieldPropertiesType[];
+  formProperties: FormPropertiesType;
+  submitButtonText: string;
+}) {
+  const [fields, setFields] = useState([]);
+  const [loading, setIsLoading] = useState(true);
+
+  const generateValidationSchema = () => {
+    const schemaObject = {};
+
+    Object.keys(schema).forEach((key) => {
+      const item = schema[key];
+
+      if (item.validators) {
+        const { validators } = item;
+        let fieldSchema;
+
+        if (item.input_type === 'integer') {
+          fieldSchema = yup
+            .number()
+            .transform((value) => (Number.isNaN(value) ? null : value))
+            .nullable();
+        } else {
+          fieldSchema = yup.string();
+        }
+
+        if (validators.required) {
+          fieldSchema = fieldSchema.required();
+        }
+
+        if (validators.min_length !== undefined) {
+          fieldSchema = fieldSchema.min(validators.min_length);
+        }
+
+        if (validators.max_length !== undefined) {
+          fieldSchema = fieldSchema.max(validators.max_length);
+        }
+
+        if (validators.min_value !== undefined) {
+          fieldSchema = fieldSchema.min(validators.min_value);
+        }
+
+        if (validators.max_value !== undefined) {
+          fieldSchema = fieldSchema.max(validators.max_value);
+        }
+
+        schemaObject[item.key] = fieldSchema;
+      }
+    });
+
+    return yup.object().shape(schemaObject);
+  };
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors }
+  } = useForm<FormField>({
+    resolver: yupResolver(generateValidationSchema())
+  });
+
+  useEffect(() => {
+    const sortedFields = Object.keys(schema)
+      .map((key) => {
+        const item = schema[key];
+
+        fieldProperties.find((fieldProperty) => {
+          if (fieldProperty.key === item.key) {
+            item.class = fieldProperty.className;
+            item.attributes = fieldProperty.attributes;
+            item.labelClass = fieldProperty.labelClassName;
+            item.wrapperClass = fieldProperty.wrapperClassName;
+          }
+        });
+
+        return item;
+      })
+      .sort((a, b) => a.order - b.order);
+
+    setFields(sortedFields);
+    setIsLoading(false);
+  }, [schema, fieldProperties]);
+
+  const onSubmit = async (data) => {
+    try {
+      const formData = new FormData();
+
+      Object.keys(data).forEach((key) => {
+        formData.append(key, data[key]);
+      });
+
+      fetch(formProperties.actionUrl, {
+        method: 'POST',
+        body: formData
+      });
+    } catch (error) {
+      console.error('Form submit error:', error);
+    }
+  };
+
+  const generateField = (field: FormField) => {
+    const inputType = field.input_type;
+
+    if (!inputType) {
+      return null;
+    }
+
+    switch (inputType) {
+      case 'text':
+      case 'email':
+        return (
+          <div
+            className={twMerge(
+              allFieldClasses?.wrapperClassName,
+              field.wrapperClass
+            )}
+            key={field.id}
+          >
+            <label
+              htmlFor={field.id}
+              className={twMerge(
+                allFieldClasses?.labelClassName,
+                field.labelClass
+              )}
+            >
+              {field.label}
+            </label>
+            <Input
+              id={field.id}
+              type={inputType === 'text' ? 'text' : 'email'}
+              className={twMerge(allFieldClasses?.className, field.class)}
+              name={field.key}
+              {...field.attributes}
+              error={errors[field.key]}
+              {...register(field.key)}
+            />
+          </div>
+        );
+
+      case 'integer':
+        return (
+          <div
+            className={twMerge(
+              allFieldClasses?.wrapperClassName,
+              field.wrapperClass
+            )}
+            key={field.id}
+          >
+            <label
+              htmlFor={field.id}
+              className={twMerge(
+                allFieldClasses?.labelClassName,
+                field.labelClass
+              )}
+            >
+              {field.label}
+            </label>
+            <Input
+              id={field.id}
+              type="number"
+              className={twMerge(allFieldClasses?.className, field?.class)}
+              name={field.key}
+              {...field.attributes}
+              error={errors[field.key]}
+              {...register(field.key, { valueAsNumber: true })}
+            />
+          </div>
+        );
+
+      case 'text_area':
+        return (
+          <div
+            className={twMerge(
+              allFieldClasses?.wrapperClassName,
+              field.wrapperClass
+            )}
+            key={field.id}
+          >
+            <label
+              htmlFor={field.id}
+              className={twMerge(
+                allFieldClasses?.labelClassName,
+                field.labelClass
+              )}
+            >
+              {field.label}
+            </label>
+            <textarea
+              id={field.id}
+              className={twMerge(allFieldClasses?.className, field.class)}
+              name={field.key}
+              {...field.attributes}
+              {...register(field.key)}
+            />
+            {errors[field.key] && (
+              <span className="mt-1 text-sm text-error">
+                {errors[field.key].message}
+              </span>
+            )}
+          </div>
+        );
+
+      case 'date':
+      case 'datetime':
+        return (
+          <div
+            className={twMerge(
+              allFieldClasses?.wrapperClassName,
+              field.wrapperClass
+            )}
+            key={field.id}
+          >
+            <label
+              htmlFor={field.id}
+              className={twMerge(
+                allFieldClasses?.labelClassName,
+                field.labelClass
+              )}
+            >
+              {field.label}
+            </label>
+            <Input
+              id={field.id}
+              type={inputType === 'date' ? 'date' : 'datetime-local'}
+              className={twMerge(allFieldClasses?.className, field?.class)}
+              name={field.key}
+              {...field.attributes}
+              error={errors[field.key]}
+              {...register(field.key)}
+            />
+          </div>
+        );
+
+      case 'integer_range':
+        return (
+          <div
+            className={twMerge(
+              allFieldClasses?.wrapperClassName,
+              field.wrapperClass
+            )}
+            key={field.id}
+          >
+            <label
+              htmlFor={field.id}
+              className={twMerge(
+                allFieldClasses?.labelClassName,
+                field.labelClass
+              )}
+            >
+              {field.label}
+            </label>
+            <Select
+              id={field.id}
+              className={twMerge(allFieldClasses?.className, field?.class)}
+              name={field.key}
+              {...field.attributes}
+              options={field.choices.map((choice) => ({
+                value: choice,
+                label: choice
+              }))}
+              {...field.attributes}
+              error={errors[field.key]}
+              {...register(field.key)}
+            />
+          </div>
+        );
+
+      case 'file':
+      case 'image':
+        return (
+          <div
+            className={twMerge(
+              allFieldClasses?.wrapperClassName,
+              field.wrapperClass
+            )}
+            key={field.id}
+          >
+            <label
+              htmlFor={field.id}
+              className={twMerge(
+                allFieldClasses?.labelClassName,
+                field.labelClass
+              )}
+            >
+              {field.label}
+            </label>
+            <Input
+              id={field.id}
+              type="file"
+              className={twMerge(allFieldClasses?.className, field?.class)}
+              name={field.key}
+              {...field.attributes}
+              error={errors[field.key]}
+              {...register(field.key)}
+            />
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <DynamicForm
+        className={formProperties.className}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        {loading ? (
+          <LoaderSpinner />
+        ) : (
+          <>
+            {fields.map((field: FormField) => generateField(field))}
+            <Button type="submit" className="w-full">
+              {submitButtonText}
+            </Button>
+          </>
+        )}
+      </DynamicForm>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { IconProps } from '@theme/components/types';
+import clsx from 'clsx';
+
+export const Icon = (props: IconProps) => {
+  const { name, size, className, ...rest } = props;
+
+  return (
+    <i
+      className={clsx(`flex pz-icon-${name}`, className)}
+      {...rest}
+      style={
+        size && {
+          fontSize: `${size}px`
+        }
+      }
+    />
+  );
+};

package/app-template/src/components/index.ts

@@ -0,0 +1,41 @@
+'use client';
+
+export * from './button';
+export * from './accordion';
+export * from './modal';
+export * from './icon';
+export * from './price';
+export * from './pagination';
+export * from './badge';
+export * from './language-select';
+export * from './source';
+export * from './link';
+export * from './currency-select';
+
+// Inputs
+export * from './input';
+export * from './select';
+export * from './radio';
+export * from './checkbox';
+export * from './file-input';
+
+// Loaders
+export * from './loader-spinner';
+export * from './custom-loader';
+
+// Tabs
+export * from './tab-panel';
+export * from './tab';
+export * from './tabs';
+
+// Skeletons
+export * from './skeleton';
+export * from './shimmer';
+export * from './skeleton-article';
+export * from './skeleton-product';
+export * from './skeleton-profile';
+export * from './skeleton-wrapper';
+
+// Head
+export * from './canonical-url';
+export * from './pwa-tags';

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

@@ -0,0 +1,110 @@
+import clsx from 'clsx';
+import { forwardRef, FocusEvent, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { InputProps } from '@theme/components/types';
+import { twMerge } from 'tailwind-merge';
+
+export const Input = forwardRef<
+  HTMLInputElement,
+  InputProps &
+    Pick<
+      NumberFormatProps,
+      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    >
+>((props, ref) => {
+  const [focused, setFocused] = useState(false);
+  const [hasValue, setHasValue] = useState(false);
+  const {
+    id,
+    label,
+    labelStyle,
+    error,
+    mask,
+    format,
+    required = false,
+    ...rest
+  } = props;
+  const hasFloatingLabel = label && labelStyle === 'floating';
+  const inputClass = twMerge(
+    clsx(
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600',
+      'focus-visible:outline-none', // disable outline on focus
+      { 'pt-3': hasFloatingLabel },
+      error
+        ? 'border-error focus:border-error'
+        : 'border-gray-500 hover:border-black focus:border-black'
+    ),
+    props.className
+  );
+  const inputProps: any = {
+    id,
+    ref,
+    className: inputClass,
+    onFocus: () => setFocused(true),
+    onBlur: (event: FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      setHasValue(!!event.target.value);
+    }
+  };
+
+  const Label = () => {
+    if (!label) return null;
+
+    return (
+      <label
+        htmlFor={id}
+        className={clsx(
+          'text-xs text-gray-800',
+          {
+            'absolute left-2.5 pointer-events-none transition-all transform -translate-y-1/2':
+              hasFloatingLabel
+          },
+          { 'mb-2': !hasFloatingLabel },
+          { 'top-1/3': hasFloatingLabel && (focused || hasValue) },
+          { 'top-1/2': !(hasFloatingLabel && (focused || hasValue)) }
+        )}
+      >
+        {label} {required && <span className="text-secondary">*</span>}
+      </label>
+    );
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="relative flex flex-col">
+        {props.format ? (
+          <>
+            {labelStyle !== 'floating' && <Label />}
+            <Controller
+              name={props.name ?? ''}
+              control={props.control}
+              defaultValue={false}
+              render={({ field }) => (
+                <NumberFormat
+                  format={format}
+                  mask={mask ?? ''}
+                  {...rest}
+                  {...field}
+                  {...inputProps}
+                />
+              )}
+            />
+            {labelStyle === 'floating' && <Label />}
+          </>
+        ) : (
+          <>
+            {labelStyle !== 'floating' && <Label />}
+            <input {...rest} {...inputProps} />
+            {labelStyle === 'floating' && <Label />}
+          </>
+        )}
+      </div>
+      {error && (
+        <span className="mt-1 text-sm text-error">{error.message}</span>
+      )}
+    </div>
+  );
+});
+
+Input.displayName = 'Input';