@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/widgets/home-product-recommendation.tsx

@@ -0,0 +1,18 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+import RecommendationContent from '@theme/views/widgets/recommendation-content';
+
+type HomeProductRecommendationType = {
+  title: {
+    value: string;
+  };
+};
+
+export default async function HomeProductRecommendation() {
+  const data = await getWidgetData<HomeProductRecommendationType>({
+    slug: 'home-product-recommendation'
+  });
+
+  return <RecommendationContent data={data} />;
+}

package/app-template/src/widgets/home-single-banner.tsx

@@ -0,0 +1,87 @@
+import 'server-only';
+
+import { Link } from '@theme/components';
+import { getWidgetData } from '@akinon/next/data/server';
+import { ImageType } from '@akinon/next/types';
+import { Image } from '@akinon/next/components/image';
+
+type SingleBannerTextItem = {
+  value: {
+    content: string;
+    link_url: string;
+    link_name: string;
+    title: string;
+  };
+};
+
+type SingleBannerItem = {
+  kwargs: {
+    data_type: 'nested';
+    value: {
+      mobile_image: ImageType;
+      image: ImageType;
+    };
+  };
+
+  value: {
+    mobile_image?: string;
+    url: string;
+    alt: string;
+  };
+};
+
+type HomeSingleBannerType = {
+  text_overlay: SingleBannerTextItem;
+  single_banner: SingleBannerItem;
+};
+
+export default async function HomeSingleBanner() {
+  const data = await getWidgetData<HomeSingleBannerType>({
+    slug: 'home-single-banner'
+  });
+
+  return (
+    <div className="container relative">
+      {data?.attributes?.single_banner?.value && (
+        <Link
+          href={data?.attributes?.single_banner?.value?.url}
+          className="mb-7 block"
+        >
+          <Image
+            src={
+              data?.attributes?.single_banner?.kwargs?.value?.mobile_image?.url
+            }
+            alt={data?.attributes?.single_banner?.value?.alt}
+            aspectRatio={670 / 870}
+            sizes="670px"
+            fill
+          />
+
+          <Image
+            src={data?.attributes?.single_banner?.kwargs?.value?.image?.url}
+            alt={data?.attributes?.single_banner?.value?.alt}
+            aspectRatio={1370 / 480}
+            sizes="1370px"
+            fill
+          />
+        </Link>
+      )}
+      <div className="text-center lg:max-w-md lg:absolute lg:top-1/2 lg:-translate-y-1/2 lg:left-56 lg:transform">
+        <h3 className="text-2xl font-light mb-5 lg:text-5xl">
+          {data?.attributes?.text_overlay?.value?.title}
+        </h3>
+        <p className="text-sm mb-3">
+          {data?.attributes?.text_overlay?.value?.content}
+        </p>
+        {data?.attributes?.text_overlay?.value?.link_url && (
+          <Link
+            href={data?.attributes?.text_overlay?.value?.link_url}
+            className="text-sm font-medium underline"
+          >
+            {data?.attributes?.text_overlay?.value?.link_name}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}

package/app-template/src/widgets/home-stories-eng.tsx

@@ -0,0 +1,112 @@
+import 'server-only';
+
+import { ImageType } from '@akinon/next/types';
+import { getWidgetData } from '@akinon/next/data/server';
+
+import { Link } from '@theme/components';
+import { Image } from '@akinon/next/components/image';
+
+type StoryData = {
+  value: {
+    url: string;
+    alt: string;
+    image: string;
+  };
+  kwargs: {
+    data_type: 'nested';
+    value: {
+      image: ImageType;
+    };
+  };
+};
+
+type MobileLinks = {
+  value: {
+    url: string;
+    text: string;
+  };
+};
+
+type HomeStoriesEngType = {
+  mobileTitle?: {
+    value: string;
+  };
+  mobileSubtitle?: {
+    value: string;
+  };
+  stories: StoryData[];
+  mobileLinks: MobileLinks[];
+};
+
+export default async function HomeStoriesEng() {
+  const data = await getWidgetData<HomeStoriesEngType>({
+    slug: 'home-storieseng'
+  });
+
+  const TitleSection = () => (
+    <>
+      {data?.attributes?.mobileTitle ? (
+        <h2 className="text-5xl text-center font-light px-11 mb-2 lg:hidden">
+          {data?.attributes?.mobileTitle?.value}
+        </h2>
+      ) : null}
+      {data?.attributes?.mobileSubtitle ? (
+        <p className="text-sm text-center mb-2 lg:hidden">
+          {data?.attributes?.mobileSubtitle?.value}
+        </p>
+      ) : null}
+    </>
+  );
+
+  const MobileLinks = () => (
+    <ul className="flex justify-center text-sm font-medium underline mb-4 lg:hidden">
+      {data?.attributes?.mobileLinks?.map((item, index) => {
+        return (
+          <li
+            className="mr-4 first:ml-4"
+            key={`${item?.value?.text}__${index}`}
+          >
+            <Link href={item?.value?.url}>{item?.value?.text}</Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <section className="my-8">
+      <TitleSection />
+      <MobileLinks />
+
+      <div className="flex items-center overflow-x-auto pb-4 md:justify-center">
+        {data?.attributes?.stories?.map((story, index) => {
+          return (
+            <div
+              className="mr-4 flex-shrink-0 first:ms-4 w-32 md:w-32"
+              key={`story__${index}`}
+            >
+              <Link href={story?.value?.url} aria-label={story?.value?.alt}>
+                <Image
+                  src={story?.kwargs?.value?.image?.url}
+                  alt={story?.value?.alt}
+                  aspectRatio={1}
+                  sizes="(max-width: 768px) 112px, 140px"
+                  imageClassName="rounded-full mb-2" // TODO: Fix width and height
+                  fill
+                />
+              </Link>
+
+              <Link
+                href={story?.value?.url}
+                className="block text-center underline text-sm font-medium"
+                aria-label={story?.value?.alt}
+              >
+                {story?.value?.alt}
+              </Link>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/app-template/src/widgets/index.ts

@@ -0,0 +1,25 @@
+import 'server-only';
+
+import dynamic from 'next/dynamic';
+import { ComponentType } from 'react';
+import { WidgetResultType } from '@akinon/next/types';
+
+export const HOME_WIDGETS: {
+  [key: string]: ComponentType<WidgetResultType<unknown>>;
+} = {
+  'home-hero-slider': dynamic(
+    async () => import('@theme/widgets/home-hero-slider')
+  ),
+  'home-product-recommendation': dynamic(
+    async () => import('@theme/widgets/home-product-recommendation')
+  ),
+  'home-discovery': dynamic(
+    async () => import('@theme/widgets/home-discovery')
+  ),
+  'product-pointer-banners': dynamic(
+    async () => import('@theme/widgets/product-pointer-banners')
+  ),
+  'home-storieseng': dynamic(
+    async () => import('@theme/widgets/home-stories-eng')
+  )
+};

package/app-template/src/widgets/product-pointer-banners.tsx

@@ -0,0 +1,35 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+import {
+  PointerComponentProduct,
+  PointerComponentProductItem
+} from '@theme/types';
+
+import ProductPointerBanner from '@theme/views/product-pointer-banner-item';
+
+type ProductPointerBannersType = {
+  product_pointer_banner_left: PointerComponentProduct;
+  product_card_left: PointerComponentProductItem;
+  product_pointer_banner_right: PointerComponentProduct;
+  product_card_right: PointerComponentProductItem;
+};
+
+export default async function ProductPointerBanners() {
+  const data = await getWidgetData<ProductPointerBannersType>({
+    slug: 'product-pointer-banners'
+  });
+
+  return (
+    <div className="container xl:gap-5 xl:flex my-8">
+      <ProductPointerBanner
+        productItem={data?.attributes?.product_card_left}
+        productPointerItem={data?.attributes?.product_pointer_banner_left}
+      />
+      <ProductPointerBanner
+        productItem={data?.attributes?.product_card_right}
+        productPointerItem={data?.attributes?.product_pointer_banner_right}
+      />
+    </div>
+  );
+}

package/app-template/src/widgets/special-page-banner.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Link } from '@theme/components';
+import { SpecialPageType } from '@akinon/next/types';
+import { Image } from '@akinon/next/components/image';
+export interface Props {
+  data: SpecialPageType;
+}
+
+const SpecialPageBanner = (props: Props) => {
+  if (!props.data?.banner) {
+    return null;
+  }
+
+  return (
+    <>
+      <Link href={props.data?.banner_url || '#'}>
+        <Image
+          src={props.data?.banner_mobile}
+          alt={props.data?.name}
+          aspectRatio={768 / 375}
+          sizes="768px"
+          fill
+          className="block md:hidden"
+        />
+
+        <Image
+          src={props.data?.banner}
+          alt={props.data?.name}
+          aspectRatio={1370 / 400}
+          sizes="1370px"
+          fill
+          className="hidden md:block"
+        />
+      </Link>
+
+      {props.data?.banner_description && (
+        <div
+          className="my-9"
+          dangerouslySetInnerHTML={{
+            __html: props.data?.banner_description
+          }}
+        ></div>
+      )}
+    </>
+  );
+};
+
+export default SpecialPageBanner;

package/app-template/src/widgets/special-page-carousel.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { CarouselCore } from '@theme/components/carousel-core';
+import { Image } from '@akinon/next/components/image';
+import { Link } from '@theme/components';
+
+export interface Props {
+  slug: string;
+}
+
+export function SpecialPageCarousel(props: Props) {
+  const { data } = useGetWidgetQuery(props.slug);
+
+  if (data?.attributes?.special_page_category) {
+    return (
+      <CarouselCore
+        responsive={{
+          all: {
+            breakpoint: { max: 5000, min: 0 },
+            items: 2
+          },
+          medium: {
+            breakpoint: { max: 3000, min: 640 },
+            items: 4
+          }
+        }}
+        arrows={false}
+        swipeable={true}
+        showDots={true}
+        itemClass="pr-2.5"
+        containerAspectRatio={{ mobile: 608 / 166, desktop: 1370 / 294 }}
+      >
+        {data.attributes.special_page_category.map((item, i) => (
+          <div key={i.toString()}>
+            <Link href={item.value.url ? item.value.url : '#'}>
+              <Image
+                src={item.kwargs.value.mobile_image.url}
+                alt={item.value.alt}
+                draggable={false}
+                width={300}
+                height={300}
+                className="block md:hidden"
+              />
+
+              <Image
+                src={item.kwargs.value.image.url}
+                alt={item.value.alt}
+                draggable={false}
+                width={600}
+                height={600}
+                className="hidden md:block"
+              />
+              <div className="my-2 h-14">
+                <span className="text-sm">{item.value.title}</span>
+              </div>
+            </Link>
+          </div>
+        ))}
+      </CarouselCore>
+    );
+  }
+
+  return null;
+}
+
+export default SpecialPageCarousel;

package/app-template/src/widgets/widget-order.tsx

@@ -0,0 +1 @@
+export {};

package/app-template/tailwind.config.js

@@ -0,0 +1,170 @@
+const deepMerge = require('@akinon/next/utils/deep-merge');
+const defaultTheme = require('tailwindcss/defaultTheme');
+const plugins = require('./src/plugins');
+const fs = require('fs');
+const path = require('path');
+
+const themeName = require('./src/theme');
+
+const themeConfigPath = path.resolve(
+  __dirname,
+  `./src/themes/${themeName}/tailwind-theme.js`
+);
+
+let themeOverrides = {};
+
+if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
+  themeOverrides = require(themeConfigPath);
+}
+
+const defaultConfig = {
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx}',
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
+    './src/views/**/*.{js,ts,jsx,tsx}',
+    './src/widgets/**/*.{js,ts,jsx,tsx}',
+    './src/hooks/**/*.{js,ts,jsx,tsx}',
+    './src/utils/**/*.{js,ts,jsx,tsx}',
+    ...plugins
+      .map((plugin) => [
+        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
+        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
+      ])
+      .flat()
+  ],
+  theme: {
+    extend: {
+      fontSize: {
+        '2xs': '0.5rem'
+      },
+      outline: {
+        off: 'none'
+      },
+      width: {
+        '1/10': '10%',
+        '2/10': '20%',
+        '3/10': '30%',
+        '4/10': '40%',
+        '5/10': '50%',
+        '6/10': '60%',
+        '7/10': '70%',
+        '8/10': '80%',
+        '9/10': '90%'
+      },
+      transitionProperty: {
+        'max-width': 'max-width'
+      },
+      backgroundImage: {
+        'skeleton-shimmer':
+          'linear-gradient(90deg, #d7d7d7 0%, #ebebeb 40%, #eeeeee 60%, #d7d7d7)'
+      },
+      keyframes: {
+        'skeleton-shimmer': {
+          '100%': {
+            transform: 'translateX(100%)'
+          }
+        }
+      },
+      animation: {
+        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite'
+      }
+    },
+    colors: {
+      transparent: 'transparent',
+      white: '#ffffff',
+      primary: {
+        DEFAULT: '#000000',
+        hover: '#181818',
+        foreground: '#ffffff',
+        100: '#525252',
+        200: '#404040',
+        300: '#3d3d3d',
+        400: '#333333',
+        500: '#2d2d2d',
+        600: '#292929',
+        700: '#2b2b2b',
+        800: '#181818',
+        900: '#000000'
+      },
+      secondary: {
+        DEFAULT: '#e95151',
+        hover: '#d03838',
+        foreground: '#ffffff',
+        100: '#ffb7b7',
+        200: '#ff9e9e',
+        300: '#ff8484',
+        400: '#ff6b6b',
+        500: '#e95151',
+        600: '#d72b01',
+        700: '#b61e1e',
+        800: '#9d0505',
+        900: '#830000'
+      },
+      black: {
+        DEFAULT: '#000000',
+        100: '#525252',
+        200: '#404040',
+        300: '#3d3d3d',
+        400: '#333333',
+        500: '#2d2d2d',
+        600: '#292929',
+        700: '#2b2b2b',
+        800: '#181818',
+        900: '#000000'
+      },
+      gray: {
+        DEFAULT: '#ebebeb',
+        25: '#fdfdfd',
+        50: '#f7f7f7',
+        100: '#f5f5f5',
+        150: '#f4f4f4',
+        200: '#eeeeee',
+        300: '#ebebeb',
+        400: '#d7d7d7',
+        450: '#d4d4d4',
+        500: '#c9c9c9',
+        600: '#9d9d9d',
+        700: '#686868',
+        800: '#615f62',
+        850: '#58585a',
+        900: '#4a4f54',
+        950: '#424242'
+      },
+      error: {
+        DEFAULT: '#d72b01',
+        100: '#e20008'
+      },
+      success: {
+        DEFAULT: '#7b9d76',
+        100: '#7b9d76'
+      }
+    },
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: '0rem',
+        sm: '2rem',
+        '2xl': '0rem'
+      }
+    },
+    fontFamily: {
+      sans: ['Jost'].concat(defaultTheme.fontFamily.sans)
+    },
+    screens: {
+      xs: '575px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1170px',
+      '2xl': '1370px'
+    }
+  },
+  plugins: [require('@tailwindcss/typography')]
+};
+
+if (Object.keys(themeOverrides).length === 0) {
+  module.exports = defaultConfig;
+} else {
+  module.exports = deepMerge({}, defaultConfig, themeOverrides);
+}

package/app-template/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": { "@theme/*": ["./*"] },
+    "allowSyntheticDefaultImports": true,
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": false,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": false
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "../../packages/**/*"
+  ],
+  "exclude": ["node_modules", "../../packages/projectzero-cli/app-template"]
+}

package/app-template/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}