@akinon/projectzero 1.32.0-rc.2 → 1.32.0

package/app-template/src/components/pwa-tags.tsx

@@ -1,233 +0,0 @@
-import { Metadata } from '@akinon/next/types';
-
-const pwaTags: Metadata = {
-  manifest: '/manifest.json',
-  themeColor: '#FFFFFF',
-  formatDetection: {
-    telephone: false
-  },
-  appleWebApp: {
-    capable: true,
-    title: 'Project ZERO | Next',
-    statusBarStyle: 'default'
-  },
-  other: {
-    ['mobile-web-app-capable']: 'yes',
-    ['application-name']: 'Project ZERO Next'
-  },
-  icons: [
-    {
-      rel: 'mask-icon',
-      type: 'image/svg+xml',
-      url: 'safari-pinned-tab.svg'
-    },
-    {
-      rel: 'apple-touch-icon',
-      type: 'image/png',
-      sizes: '57x57',
-      url: 'apple-touch-icon.png'
-    },
-    {
-      rel: 'apple-touch-icon',
-      type: 'image/png',
-      sizes: '152x152',
-      url: 'apple-touch-icon-152x152.png'
-    },
-    {
-      rel: 'apple-touch-icon',
-      type: 'image/png',
-      sizes: '167x167',
-      url: 'apple-touch-icon-167x167.png'
-    },
-    {
-      rel: 'apple-touch-icon',
-      type: 'image/png',
-      sizes: '180x180',
-      url: 'apple-touch-icon-180x180.png'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2048-2732.jpg',
-      media:
-        '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2732-2048.jpg',
-      media:
-        '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1668-2388.jpg',
-      media:
-        '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2388-1668.jpg',
-      media:
-        '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1536-2048.jpg',
-      media:
-        '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2048-1536.jpg',
-      media:
-        '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1668-2224.jpg',
-      media:
-        '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2224-1668.jpg',
-      media:
-        '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1620-2160.jpg',
-      media:
-        '(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2160-1620.jpg',
-      media:
-        '(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1284-2778.jpg',
-      media:
-        '(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2778-1284.jpg',
-      media:
-        '(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1170-2532.jpg',
-      media:
-        '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2532-1170.jpg',
-      media:
-        '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1125-2436.jpg',
-      media:
-        '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2436-1125.jpg',
-      media:
-        '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1242-2688.jpg',
-      media:
-        '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2688-1242.jpg',
-      media:
-        '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-828-1792.jpg',
-      media:
-        '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1792-828.jpg',
-      media:
-        '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1242-2208.jpg',
-      media:
-        '(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-2208-1242.jpg',
-      media:
-        '(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-750-1334.jpg',
-      media:
-        '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1334-750.jpg',
-      media:
-        '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-640-1136.jpg',
-      media:
-        '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
-    },
-    {
-      rel: 'apple-touch-startup-image',
-      type: 'image/png',
-      url: 'apple-splash-1136-640.jpg',
-      media:
-        '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
-    }
-  ]
-};
-
-export default pwaTags;

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

@@ -1,18 +0,0 @@
-import { forwardRef } from 'react';
-import { RadioProps } from '@theme/components/types';
-import { twMerge } from 'tailwind-merge';
-
-const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <label className={twMerge('flex items-center text-xs', props.className)}>
-      <input type="radio" {...rest} ref={ref} className="w-4 h-4" />
-      {children && <span className="text-xs ml-2">{children}</span>}
-    </label>
-  );
-});
-
-Radio.displayName = 'Radio';
-
-export { Radio };

package/app-template/src/components/react-portal.tsx

@@ -1,47 +0,0 @@
-import { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-function createWrapperAndAppendToBody(wrapperId: string) {
-  const wrapperElement = document.createElement('div');
-  wrapperElement.setAttribute('id', wrapperId);
-  document.body.appendChild(wrapperElement);
-  return wrapperElement;
-}
-
-type Props = {
-  children: React.ReactNode;
-  wrapperId: string;
-};
-
-const ReactPortal: React.FC<Props> = ({
-  children,
-  wrapperId = 'react-portal-wrapper'
-}) => {
-  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
-    null
-  );
-
-  useEffect(() => {
-    let element = document.getElementById(wrapperId) as HTMLElement;
-    let modalCreated = false;
-
-    if (!element) {
-      modalCreated = true;
-      element = createWrapperAndAppendToBody(wrapperId);
-    }
-    setWrapperElement(element);
-
-    return () => {
-      // delete the programatically created element if it was created
-      if (modalCreated && element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    };
-  }, [wrapperId]);
-
-  if (wrapperElement === null) return null;
-
-  return createPortal(children, wrapperElement);
-};
-
-export default ReactPortal;

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

@@ -1,70 +0,0 @@
-import { forwardRef } from 'react';
-import { SelectProps } from '@theme/components/types';
-import clsx from 'clsx';
-import { Icon } from './icon';
-import { twMerge } from 'tailwind-merge';
-
-const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
-  const {
-    className,
-    options,
-    borderless = false,
-    icon,
-    iconSize,
-    error,
-    label,
-    required = false,
-    ...rest
-  } = props;
-
-  return (
-    <label
-      className={clsx('flex flex-col relative text-xs text-gray-800', {
-        'pl-7': icon
-      })}
-    >
-      {icon && (
-        <Icon
-          name={icon}
-          size={iconSize ?? 20}
-          className="absolute left-0 top-1/2 transform -translate-y-1/2"
-        />
-      )}
-
-      {label && (
-        <span className="mb-1">
-          {label} {required && <span className="text-secondary">*</span>}
-        </span>
-      )}
-      <select
-        {...rest}
-        ref={ref}
-        className={twMerge(
-          clsx(
-            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
-            !borderless &&
-              'border border-gray-200 transition-all duration-150 hover:border-primary'
-          ),
-          className
-        )}
-      >
-        {options.map((option) => (
-          <option
-            key={option.value}
-            value={option.value}
-            className={option.class}
-          >
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
-      )}
-    </label>
-  );
-});
-
-Select.displayName = 'Select';
-
-export { Select };

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

@@ -1,21 +0,0 @@
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-type ShimmerProps = {
-  className?: string;
-};
-
-export const Shimmer: React.FC<ShimmerProps> = ({ className }) => {
-  return (
-    <div
-      className={clsx(['absolute top-0 left-0 w-full h-full animate-pulse'])}
-    >
-      <div
-        className={twMerge(
-          'w-full h-full bg-black bg-opacity-20 shadow-[0 0 30px 30px rgba(255,255,255,0.2)]',
-          className
-        )}
-      ></div>
-    </div>
-  );
-};

package/app-template/src/components/skeleton-article.tsx

@@ -1,15 +0,0 @@
-import { Shimmer } from './shimmer';
-import { Skeleton } from './skeleton';
-import { SkeletonWrapper } from './skeleton-wrapper';
-
-export const SkeletonArticle = () => {
-  return (
-    <SkeletonWrapper>
-      <Skeleton type="title" />
-      <Skeleton type="text" />
-      <Skeleton type="text" />
-      <Skeleton type="text" />
-      <Shimmer />
-    </SkeletonWrapper>
-  );
-};

package/app-template/src/components/skeleton-product.tsx

@@ -1,14 +0,0 @@
-import { SkeletonWrapper } from './skeleton-wrapper';
-import { Skeleton } from './skeleton';
-import { Shimmer } from './shimmer';
-
-export const SkeletonProduct = () => {
-  return (
-    <SkeletonWrapper>
-      <Skeleton type="image" />
-      <Skeleton type="title" />
-      <Skeleton type="price" />
-      <Shimmer />
-    </SkeletonWrapper>
-  );
-};

package/app-template/src/components/skeleton-profile.tsx

@@ -1,19 +0,0 @@
-import { Shimmer } from './shimmer';
-import { Skeleton } from './skeleton';
-import { SkeletonWrapper } from './skeleton-wrapper';
-
-export const SkeletonProfile = () => {
-  return (
-    <SkeletonWrapper>
-      <div>
-        <Skeleton type="avatar" />
-      </div>
-      <div>
-        <Skeleton type="title" />
-        <Skeleton type="text" />
-        <Skeleton type="text" />
-      </div>
-      <Shimmer />
-    </SkeletonWrapper>
-  );
-};

package/app-template/src/components/skeleton-wrapper.tsx

@@ -1,19 +0,0 @@
-import { twMerge } from 'tailwind-merge';
-
-type SkeletonWrapperProps = {
-  className?: string;
-  children: React.ReactNode;
-};
-
-export const SkeletonWrapper: React.FC<SkeletonWrapperProps> = ({
-  className,
-  children
-}) => {
-  return (
-    <div
-      className={twMerge('relative flex flex-col overflow-hidden', className)}
-    >
-      {children}
-    </div>
-  );
-};

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

@@ -1,37 +0,0 @@
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-type SkeletonProps = {
-  className?: string;
-  type?:
-    | 'text'
-    | 'title'
-    | 'avatar'
-    | 'thumbnail'
-    | 'image'
-    | 'price'
-    | 'select'
-    | 'button';
-};
-
-export const Skeleton: React.FC<SkeletonProps> = ({ type, className }) => {
-  return (
-    <div
-      className={twMerge(
-        clsx([
-          'relative bg-gray-400 overflow-hidden',
-          'after:-translate-x-full after:z-10 after:bg-skeleton-shimmer after:animate-skeleton-shimmer after:absolute after:inset-0', // shimmer animation
-          { 'w-full h-3': type === 'text' },
-          { 'w-1/2 h-5 mb-3': type === 'title' },
-          { 'w-24 h-24 rounded-full': type === 'avatar' },
-          { 'w-24 h-24': type === 'thumbnail' },
-          { 'w-full h-40': type === 'image' },
-          { 'w-20 h-5': type === 'price' },
-          { 'w-full h-10': type === 'select' },
-          { 'w-full h-10': type === 'button' }
-        ]),
-        className
-      )}
-    ></div>
-  );
-};

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

@@ -1,12 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-
-export const Source = (props: ComponentPropsWithoutRef<'source'>) => {
-  const { srcSet, ...rest } = props;
-
-  return (
-    <source
-      srcSet={`/_next/image?url=${encodeURIComponent(srcSet)}&w=1080&q=75`}
-      {...rest}
-    />
-  );
-};

package/app-template/src/components/tab-panel.tsx

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-
-type Props = {
-  title: string;
-  icon?: string;
-  iconPosition?: string;
-  children: ReactElement | ReactElement[];
-};
-
-export const TabPanel = ({ children }: Props) => <div>{children}</div>;

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

@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-import clsx from 'clsx';
-import { Icon } from '@theme/components';
-import { twMerge } from 'tailwind-merge';
-
-export type Props = {
-  title: string;
-  icon?: string;
-  index: number;
-  setSelectedTab: (index: number) => void;
-  isActive?: boolean;
-  iconPosition?: string;
-  className?: string;
-};
-
-export const Tab = (props: Props) => {
-  const {
-    title,
-    setSelectedTab,
-    index,
-    isActive,
-    icon,
-    iconPosition,
-    className
-  } = props;
-
-  const handleOnClick = useCallback(() => {
-    setSelectedTab(index);
-  }, [setSelectedTab, index]);
-
-  return (
-    <button
-      onClick={handleOnClick}
-      className={twMerge(
-        clsx(
-          'text-sm flex items-center justify-center px-4 py-2 gap-3 cursor-pointer uppercase break-words',
-          isActive ? 'bg-primary' : 'bg-gray-100',
-          isActive ? 'text-white' : 'text-primary',
-          {
-            'flex-col': iconPosition === 'top',
-            'flex-col-reverse': iconPosition === 'bottom',
-            'flex-row-reverse': iconPosition === 'end'
-          }
-        ),
-        className
-      )}
-    >
-      {icon && (
-        <Icon
-          name={icon}
-          size={16}
-          className={isActive ? 'fill-white' : 'fill-primary'}
-        />
-      )}
-      {title}
-    </button>
-  );
-};

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

@@ -1,58 +0,0 @@
-import clsx from 'clsx';
-import { ReactElement, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import { Props as TabProps } from './tab';
-import { Tab } from './tab';
-
-type Props = {
-  children: ReactElement<TabProps>[];
-  preSelectedTabIndex?: number;
-  tabBarPosition?: string;
-  className?: string;
-};
-
-export const Tabs = (props: Props) => {
-  const { children, preSelectedTabIndex, tabBarPosition, className, ...rest } =
-    props;
-
-  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(
-    preSelectedTabIndex || 0
-  );
-
-  return (
-    <div
-      className={twMerge(
-        clsx({
-          'flex flex-col-reverse': tabBarPosition === 'bottom',
-          'flex flex-row gap-4':
-            tabBarPosition === 'left' || tabBarPosition === 'right',
-          'flex-row-reverse': tabBarPosition === 'right'
-        }),
-        className
-      )}
-      {...rest}
-    >
-      <ul
-        className={clsx('flex flex-wrap gap-4 mb-4', {
-          'flex-col max-w-[10rem]':
-            tabBarPosition === 'left' || tabBarPosition === 'right'
-        })}
-      >
-        {children.map((item, index) => (
-          <Tab
-            key={item.props.title}
-            title={item.props.title}
-            index={index}
-            icon={item.props.icon}
-            iconPosition={item.props.iconPosition}
-            isActive={index === selectedTabIndex}
-            setSelectedTab={setSelectedTabIndex}
-          />
-        ))}
-      </ul>
-
-      <div className="w-full">{children[selectedTabIndex]}</div>
-    </div>
-  );
-};