@akinon/projectzero 2.0.0-beta.12 → 2.0.0-beta.14

package/app-template/src/views/sales-contract-modal/index.tsx

@@ -169,19 +169,19 @@ export const SalesContractModal = ({ data }: Props) => {
               </div>
             </div>
 
-            <table className="w-full border border-gray-200">
+            <table className="w-full border">
               <thead className="text-sm">
                 <tr>
-                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
+                  <th className="border font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product')}
                   </th>
-                  <th className="border border-gray-200 font-normal py-2 px-3">
+                  <th className="border font-normal py-2 px-3">
                     {t('account.sales_contract.quantity')}
                   </th>
-                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
+                  <th className="border font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product_price')}
                   </th>
-                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
+                  <th className="border font-normal text-left py-2 px-3">
                     {t('account.sales_contract.total_price')}
                   </th>
                 </tr>
@@ -191,20 +191,20 @@ export const SalesContractModal = ({ data }: Props) => {
                 {data.orderitem_set.map((value, index) => {
                   return (
                     <tr key={index.toString()}>
-                      <td className="border border-gray-200 font-light text-left py-2 px-3">
+                      <td className="border font-light text-left py-2 px-3">
                         {value.product.name}
                       </td>
-                      <td className="border border-gray-200 font-light text-center py-2 px-3">
+                      <td className="border font-light text-center py-2 px-3">
                         {value.quantity ? value.quantity : '1'}
                       </td>
-                      <td className="border border-gray-200 font-light text-center py-2 px-3">
+                      <td className="border font-light text-center py-2 px-3">
                         <Price
                           value={
                             value.unit_price ? value.unit_price : value.price
                           }
                         />
                       </td>
-                      <td className="border border-gray-200 font-light text-right py-2 px-3">
+                      <td className="border font-light text-right py-2 px-3">
                         <Price
                           value={
                             value.total_amount
@@ -222,12 +222,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border border-gray-200 text-left py-2 px-3 font-normal"
+                    className="border text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.products_total')}
                   </th>
                   <td
-                    className="border border-gray-200 text-right py-2 px-3 font-light"
+                    className="border text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.discount_amount} />
@@ -237,12 +237,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border border-gray-200 text-left py-2 px-3 font-normal"
+                    className="border text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.shipping_price')}
                   </th>
                   <td
-                    className="border border-gray-200 text-right py-2 px-3 font-light"
+                    className="border text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.shipping_amount} />
@@ -252,12 +252,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border border-gray-200 text-left py-2 px-3 font-normal"
+                    className="border text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.payment_type')}
                   </th>
                   <td
-                    className="border border-gray-200 text-right py-2 px-3 font-light"
+                    className="border text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     {data.payment_option_slug}
@@ -267,12 +267,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border border-gray-200 text-left py-2 px-3 font-normal"
+                    className="border text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.order_total')}
                   </th>
                   <td
-                    className="border border-gray-200 text-right py-2 px-3 font-light"
+                    className="border text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.amount} />

package/app-template/src/widgets/footer-info.tsx

@@ -19,7 +19,7 @@ export default async function FooterInfo() {
   const data = await getWidgetData<FooterInfoType>({ slug: 'footer-info' });
 
   return (
-    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b border-gray-200 md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
+    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
       <div className="flex items-center mb-8">
         <div className="mr-3">
           <svg

package/app-template/src/widgets/footer-menu.tsx

@@ -2,6 +2,7 @@ import 'server-only';
 
 import { Link, Accordion } from '@theme/components';
 import { getWidgetData } from '@akinon/next/data/server';
+import { ServerVariables } from '@akinon/next/utils/server-variables';
 
 type SideItem = {
   value: string;
@@ -47,10 +48,11 @@ type FooterMenuType = {
 
 export default async function FooterMenu() {
   const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
+  const { locale } = ServerVariables;
 
   return (
     <div className="flex-1">
-      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l md:border-gray-200">
+      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l">
         <div>
           <div className="mb-4 font-medium" data-testid="footer-categories">
             {data?.attributes?.first_column_title?.value}
@@ -72,7 +74,7 @@ export default async function FooterMenu() {
                           : '_self'
                       }
                       data-testid={`footer-categories-${item?.value?.name
-                        ?.toLocaleLowerCase()
+                        ?.toLocaleLowerCase(locale)
                         .split(' ')
                         .join('')}`}
                     >
@@ -96,7 +98,9 @@ export default async function FooterMenu() {
                           ? '_blank'
                           : '_self'
                       }
-                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase()}`}
+                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase(
+                        locale
+                      )}`}
                     >
                       {item?.value?.name}
                     </Link>

package/app-template/src/widgets/footer-subscription/index.tsx

@@ -19,7 +19,7 @@ export default async function FooterSubscription() {
   });
 
   return (
-    <div className="py-4 border-t border-gray-200 md:border-t-0 lg:pl-7">
+    <div className="py-4 border-t md:border-t-0 lg:pl-7">
       <h3 className="mb-1 text-xs font-medium">
         {data?.attributes?.title?.value}
       </h3>

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

@@ -6,6 +6,41 @@ import { getWidgetData } from '@akinon/next/data/server';
 import { Link } from '@theme/components';
 import { Image } from '@akinon/next/components/image';
 
+function TitleSection({
+  mobileTitle,
+  mobileSubtitle
+}: {
+  mobileTitle?: { value: string };
+  mobileSubtitle?: { value: string };
+}) {
+  return (
+    <>
+      {mobileTitle ? (
+        <h2 className="text-5xl text-center font-light px-11 mb-2 lg:hidden">
+          {mobileTitle.value}
+        </h2>
+      ) : null}
+      {mobileSubtitle ? (
+        <p className="text-sm text-center mb-2 lg:hidden">
+          {mobileSubtitle.value}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+function MobileLinks({ mobileLinks }: { mobileLinks?: MobileLink[] }) {
+  return (
+    <ul className="flex justify-center text-sm font-medium underline mb-4 lg:hidden">
+      {mobileLinks?.map((item, index) => (
+        <li className="mr-4 first:ml-4" key={`${item?.value?.text}__${index}`}>
+          <Link href={item?.value?.url}>{item?.value?.text}</Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
 type StoryData = {
   value: {
     url: string;
@@ -20,7 +55,7 @@ type StoryData = {
   };
 };
 
-type MobileLinks = {
+type MobileLink = {
   value: {
     url: string;
     text: string;
@@ -35,7 +70,7 @@ type HomeStoriesEngType = {
     value: string;
   };
   stories: StoryData[];
-  mobileLinks: MobileLinks[];
+  mobileLinks: MobileLink[];
 };
 
 export default async function HomeStoriesEng() {
@@ -43,46 +78,19 @@ export default async function HomeStoriesEng() {
     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 />
+      <TitleSection
+        mobileTitle={data?.attributes?.mobileTitle}
+        mobileSubtitle={data?.attributes?.mobileSubtitle}
+      />
+      <MobileLinks mobileLinks={data?.attributes?.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 shrink-0 first:ms-4 w-32 md:w-32"
+              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}>

package/app-template/tailwind.config.js

@@ -1,5 +1,6 @@
-const getAkinonNextContent = require('@akinon/next/tailwind/content');
+const getAkinonNextContent = require("@akinon/next/tailwind/content");
 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');
@@ -28,6 +29,133 @@ const defaultConfig = {
     './src/utils/**/*.{js,ts,jsx,tsx}',
     ...getAkinonNextContent(plugins)
   ],
+  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')]
 };
 

package/app-template/tsconfig.json

@@ -4,17 +4,27 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
+      "@theme/*": [
+        "./*"
+      ],
+      "@root/*": [
+        "./app/[pz]/*"
+      ],
+      "@product/*": [
+        "./app/[pz]/product/*"
+      ],
       "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
+        "./app/[pz]/group-product/*"
+      ],
+      "@category/*": [
+        "./app/[pz]/category/*"
       ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
       "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
+        "./app/[pz]/special-page/*"
       ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
+      "@flat-page/*": [
+        "./app/[pz]/flat-page/*"
+      ]
     },
     "allowSyntheticDefaultImports": true,
     "composite": false,
@@ -26,7 +36,11 @@
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -37,7 +51,7 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
@@ -50,7 +64,11 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../../packages/**/*"
+    "../../packages/**/*",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
+  "exclude": [
+    "node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }