@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,29 +0,0 @@
-import { forwardRef } from 'react';
-import { CheckboxProps } from '@theme/components/types';
-import { twMerge } from 'tailwind-merge';
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, checked, 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}
-          checked={checked ?? false}
-          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

@@ -1,81 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,349 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-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

@@ -1,41 +0,0 @@
-'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

@@ -1,122 +0,0 @@
-import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState, Ref } from 'react';
-import { Controller } from 'react-hook-form';
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
-import { InputProps } from '@theme/components/types';
-import { twMerge } from 'tailwind-merge';
-
-const PatternFormatWithRef = forwardRef(
-  (props: PatternFormatProps, ref: Ref<HTMLInputElement>) => {
-    return <PatternFormat {...props} getInputRef={ref} />;
-  }
-);
-PatternFormatWithRef.displayName = 'PatternFormatWithRef';
-
-export const Input = forwardRef<
-  HTMLInputElement,
-  InputProps &
-    Pick<
-      PatternFormatProps,
-      'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    > & {
-      format?: string;
-      defaultValue?: string;
-      type?: string;
-    }
->((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}
-              render={({ field }) => (
-                <PatternFormatWithRef
-                  format={format}
-                  mask={mask ?? ''}
-                  {...rest}
-                  {...field}
-                  {...inputProps}
-                  type={props.type as 'text' | 'password' | 'tel'}
-                />
-              )}
-            />
-            {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';