@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { useLocalization } from '@akinon/next/hooks';
-import { Select } from './select';
-
-interface LanguageSelectProps {
-  className?: string;
-}
-
-export const LanguageSelect = (props: LanguageSelectProps) => {
-  const { locale, locales, setLocale } = useLocalization();
-
-  const handleChange = async (e) => {
-    const selectedLanguage = e.currentTarget.value;
-
-    setLocale(selectedLanguage);
-  };
-
-  return (
-    <Select
-      onChange={handleChange}
-      options={locales.map((lang) => ({
-        value: lang.value,
-        label: lang.label
-      }))}
-      value={locale}
-      icon="globe"
-      data-testid="language"
-      borderless
-      className={props.className}
-    />
-  );
-};

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

@@ -1,53 +0,0 @@
-'use client';
-
-import { useLocalization } from '@akinon/next/hooks';
-import { LocaleUrlStrategy } from '@akinon/next/localization';
-import { urlLocaleMatcherRegex } from '@akinon/next/utils';
-import NextLink, { LinkProps as NextLinkProps } from 'next/link';
-import { useMemo } from 'react';
-
-interface LinkProps extends NextLinkProps {
-  children: React.ReactNode;
-  className?: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-}
-
-export const Link = ({
-  children,
-  target,
-  className,
-  href,
-  ...rest
-}: LinkProps) => {
-  const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
-  const formattedHref = useMemo(() => {
-    if (typeof href !== 'string' || href.startsWith('http')) {
-      return href;
-    }
-
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
-
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
-    }
-
-    return href || '#';
-  }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
-
-  return (
-    <NextLink
-      href={formattedHref}
-      target={target}
-      className={className}
-      {...rest}
-    >
-      {children}
-    </NextLink>
-  );
-};

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

@@ -1,23 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-
-type LoaderSpinnerProps = {
-  className?: string;
-  borderType?: 'solid' | 'dotted' | 'dashed';
-};
-
-export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({
-  borderType = 'solid',
-  className
-}) => {
-  return (
-    <div className="w-full h-full flex justify-center items-center">
-      <div
-        className={twMerge(
-          'w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin',
-          `border-${borderType}`,
-          className
-        )}
-      />
-    </div>
-  );
-};

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

@@ -1,66 +0,0 @@
-'use client';
-
-import ReactPortal from './react-portal';
-import { Icon } from './icon';
-import { twMerge } from 'tailwind-merge';
-import { useEffect } from 'react';
-
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
-
-export const Modal = (props: ModalProps) => {
-  const {
-    children,
-    portalId,
-    open,
-    setOpen,
-    title = '',
-    showCloseButton = true,
-    className
-  } = props;
-
-  useEffect(() => {
-    document.body.style.overflow = open ? 'hidden' : 'auto';
-
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, [open]);
-
-  if (!open) return null;
-
-  return (
-    <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
-      <section
-        className={twMerge(
-          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
-          className
-        )}
-      >
-        {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
-            {showCloseButton && (
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="ml-auto"
-              >
-                <Icon name="close" size={16} />
-              </button>
-            )}
-          </div>
-        )}
-        {children}
-      </section>
-    </ReactPortal>
-  );
-};

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

@@ -1,267 +0,0 @@
-import { MouseEvent, useCallback, useEffect, useState } from 'react';
-import { PaginationProps } from '@theme/components/types';
-import { twMerge } from 'tailwind-merge';
-import clsx from 'clsx';
-import { Link, Button } from '@theme/components';
-import usePagination from '@akinon/next/hooks/use-pagination';
-import { useLocalization } from '@akinon/next/hooks';
-import { useRouter } from '@akinon/next/hooks';
-import { useInView } from 'react-intersection-observer';
-
-export const Pagination = (props: PaginationProps) => {
-  const { t } = useLocalization();
-  const router = useRouter();
-  const {
-    total,
-    limit,
-    currentPage,
-    numberOfPages,
-    containerClassName,
-    prevClassName,
-    pageClassName,
-    nextClassName,
-    moreButtonClassName,
-    threshold = 1,
-    type = 'list',
-    onPageChange,
-    direction,
-    render
-  } = props;
-
-  const pagination = usePagination(total, limit, currentPage, numberOfPages);
-  const {
-    total: paginationTotal,
-    limit: paginationLimit,
-    page,
-    pageList,
-    prev,
-    next,
-    last,
-    setTotal,
-    setLimit
-  } = pagination;
-
-  const [paginationItems, setPaginationItems] = useState([]);
-  const showNext = currentPage * paginationLimit < paginationTotal;
-  const { ref, inView } = useInView({ threshold: 0.75 });
-  const [prevPage, setPrevPage] = useState(page);
-  const [nextPage, setNextPage] = useState(page);
-
-  const createListItems = useCallback(() => {
-    setPaginationItems([]);
-    const delta = 2;
-    const startPage = Math.max(Number(page) - delta, 1);
-    const endPage = Math.min(Number(page) + delta, numberOfPages);
-
-    setPaginationItems((prev) => [
-      ...prev,
-      {
-        page: pageList[0].page,
-        url: pageList[0].url
-      }
-    ]);
-
-    if (delta < startPage) {
-      setPaginationItems((prev) => [...prev, { page: '...', url: '#' }]);
-    }
-
-    for (let i = startPage; i <= endPage; i++) {
-      if (i === 1) continue;
-
-      setPaginationItems((prev) => [
-        ...prev,
-        {
-          page: pageList[i - 1]?.page,
-          url: pageList[i - 1]?.url
-        }
-      ]);
-    }
-
-    if (endPage < numberOfPages - threshold) {
-      setPaginationItems((prev) => [...prev, { page: '...', url: '#' }]);
-    }
-
-    if (page < numberOfPages - delta) {
-      setPaginationItems((prev) => [
-        ...prev,
-        {
-          page: pageList[pageList.length - threshold].page,
-          url: pageList[pageList.length - threshold].url
-        }
-      ]);
-    }
-  }, [numberOfPages, page, pageList, threshold]);
-
-  const handleClick = (e: MouseEvent<HTMLAnchorElement>, url: string) => {
-    e.preventDefault();
-
-    const newUrl = new URL(url, window.location.origin);
-    const page = newUrl.searchParams.get('page');
-
-    if (page === '1') {
-      newUrl.searchParams.delete('page');
-    }
-
-    router.push(newUrl.pathname + newUrl.search, undefined);
-  };
-
-  const handlePageChange = () => {
-    let changingPage;
-
-    if (direction === 'prev') {
-      changingPage = Number(type !== 'list' ? prevPage : page) - 1;
-      setPrevPage(changingPage);
-    } else {
-      changingPage = Number(type !== 'list' ? nextPage : page) + 1;
-      setNextPage(changingPage);
-    }
-
-    onPageChange(changingPage);
-  };
-
-  useEffect(() => {
-    if (inView) {
-      handlePageChange();
-    }
-  }, [inView]);
-
-  useEffect(() => {
-    if (type === 'list') {
-      createListItems();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (total && total !== paginationTotal) {
-      setTotal(total);
-    }
-  }, [total, paginationTotal, setTotal]);
-
-  useEffect(() => {
-    if (limit && limit !== paginationLimit) {
-      setLimit(limit);
-    }
-  }, [limit, paginationLimit, setLimit]);
-
-  if (render) {
-    return <>{render(pagination)}</>;
-  }
-
-  return direction === 'prev' && type !== 'list' ? (
-    <>
-      {Number(prevPage) !== 1 && (
-        <div className="flex justify-center items-center">
-          <Button
-            className={twMerge('px-5', moreButtonClassName)}
-            onClick={() => handlePageChange()}
-          >
-            {t('category.pagination.load_previous_page')}
-          </Button>
-        </div>
-      )}
-    </>
-  ) : (
-    <>
-      {type === 'more' && (
-        <div className="flex justify-center items-center">
-          <Button
-            className={twMerge(
-              'px-5',
-              Number(nextPage) === Number(last)
-                ? 'bg-gray-600 border-gray-600 pointer-events-none'
-                : 'bg-black',
-              moreButtonClassName
-            )}
-            onClick={() => handlePageChange()}
-            disabled={Number(nextPage) === Number(last)}
-          >
-            {t('category.pagination.more')}
-          </Button>
-        </div>
-      )}
-
-      {type === 'infinite' && Number(nextPage) !== last && (
-        <div ref={ref}></div>
-      )}
-
-      {(type === 'infinite' || type === 'more') &&
-        Number(nextPage) === last && (
-          <p className="text-center mt-8">
-            {t('category.pagination.shown_items')}
-          </p>
-        )}
-
-      {type === 'list' && (
-        <ul
-          className={twMerge(
-            'flex mt-8 mb-4 justify-center items-center',
-            containerClassName
-          )}
-        >
-          {prev && currentPage !== 1 && (
-            <li>
-              <Link
-                onClick={(e) => handleClick(e, prev)}
-                href={prev}
-                className={twMerge(
-                  'flex cursor-pointer text-sm px-2',
-                  prevClassName
-                )}
-              >
-                <span>&lt;</span>
-                <span className="hidden lg:inline-block ms-4">
-                  {t('category.pagination.previous')}
-                </span>
-              </Link>
-            </li>
-          )}
-
-          {paginationItems.map((item, i) => (
-            <li key={i}>
-              {item?.url != '#' ? (
-                <Link
-                  onClick={(e) => handleClick(e, item.url)}
-                  href={item.url}
-                  className={twMerge(
-                    clsx(
-                      'text-xs px-2 cursor-pointer',
-                      { 'pointer-events-none': item.url === null },
-                      Number(page) === Number(item?.page)
-                        ? 'font-semibold text-black-800'
-                        : 'text-gray-400'
-                    ),
-                    pageClassName
-                  )}
-                >
-                  {item?.page}
-                </Link>
-              ) : (
-                <span className="cursor-default text-xs flex items-center justify-center">
-                  {item?.page}
-                </span>
-              )}
-            </li>
-          ))}
-
-          {showNext && (
-            <li>
-              <Link
-                onClick={(e) => handleClick(e, next)}
-                href={next}
-                className={twMerge(
-                  'flex cursor-pointer text-xs px-2',
-                  nextClassName
-                )}
-              >
-                <span className="hidden lg:inline-block me-4">
-                  {t('category.pagination.next')}
-                </span>
-                <span>&gt;</span>
-              </Link>
-            </li>
-          )}
-        </ul>
-      )}
-    </>
-  );
-};

package/app-template/src/components/password-rules-feedback.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface passwordType {
-  password: string;
-  isVisible: boolean;
-
-}
-
-const PasswordRulesFeedback = (Props: passwordType) => {
-  const { password, isVisible } = Props;
-  const { t } = useLocalization();
-
-  const rules = [
-    {
-      rule: /.{6,}/,
-      description: 'auth.register.form.input_constraints.password_length',
-    },
-    {
-      rule: /[A-Z]/,
-      description: 'auth.register.form.input_constraints.uppercase_letter',
-    },
-    {
-      rule: /[a-z]/,
-      description: 'auth.register.form.input_constraints.lower_case',
-    },
-    {
-      rule: /[0-9]/,
-      description: 'auth.register.form.input_constraints.numeric_character',
-    },
-    {
-      rule: /[^a-zA-Z0-9\s]/,
-      description: 'auth.register.form.input_constraints.special_character',
-    },
-  ];
-
-  const passwordCheck = password && rules.some((item) => !password.match(item.rule));
-
-  return (
-    <ul className={twMerge(
-      'hidden text-xs absolute z-10 bg-gray-100 mt-3 top-full left-0 p-2 xs:p-3',
-      'after:content-empty after:absolute after:block after:w-0 after:border-[15px] after:border-solid after:border-transparent after:border-b-gray-100 after:border-t-0 after:-top-3',
-      isVisible ? 'flex flex-col' : !passwordCheck ? 'hidden' : '',
-    )}>
-      {rules.map((item, index) => (
-        <li
-          key={index}
-          className={twMerge(
-            password.match(item.rule) ? 'valid text-success' : 'invalid text-error',
-          )}
-        >
-          {t(`${item.description}`)}
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export default PasswordRulesFeedback;

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

@@ -1,54 +0,0 @@
-import { useMemo } from 'react';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
-import { getCurrency } from '@akinon/next/utils';
-import { PriceProps } from '@theme/types';
-import { useLocalization } from '@akinon/next/hooks';
-
-export const Price = (props: NumericFormatProps & PriceProps) => {
-  const {
-    value,
-    currencyCode,
-    displayType = 'text',
-    useCurrencySymbol = false,
-    useCurrencyAfterPrice = true,
-    useCurrencySpace = true,
-    useNegative = false,
-    useNegativeSpace = true,
-    thousandSeparator = '.',
-    decimalScale = 2,
-    decimalSeparator = ',',
-    fixedDecimalScale = true,
-    ...rest
-  } = props;
-  const { currency: selectedCurrencyCode } = useLocalization();
-  const currencyCode_ = currencyCode || selectedCurrencyCode;
-
-  // TODO: This is very bad practice. It broke decimalScale.
-  const _value = value?.toString().replace('.', ',');
-
-  const currency = useMemo(
-    () =>
-      getCurrency({
-        currencyCode: currencyCode_,
-        useCurrencySymbol,
-        useCurrencyAfterPrice,
-        useCurrencySpace
-      }),
-    [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
-  );
-
-  return (
-    <NumericFormat
-      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
-      {...{
-        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
-      }}
-      displayType={displayType}
-      thousandSeparator={thousandSeparator}
-      decimalScale={decimalScale}
-      decimalSeparator={decimalSeparator}
-      fixedDecimalScale={fixedDecimalScale}
-      {...rest}
-    />
-  );
-};