@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+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>
+  );
+};