@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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

@@ -0,0 +1,267 @@
+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 && (
+            <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

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

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import NumberFormat, { NumberFormatProps } 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: NumberFormatProps & 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 (
+    <NumberFormat
+      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
+      {...{
+        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
+      }}
+      displayType={displayType}
+      thousandSeparator={thousandSeparator}
+      decimalScale={decimalScale}
+      decimalSeparator={decimalSeparator}
+      fixedDecimalScale={fixedDecimalScale}
+      {...rest}
+    />
+  );
+};