@akinon/projectzero 2.0.0-beta.2 → 2.0.0-beta.21

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,40 +78,13 @@ 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) => {

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

@@ -23,3 +23,10 @@ export const HOME_WIDGETS: {
     async () => import('@theme/widgets/home-stories-eng')
   )
 };
+
+export const FLATPAGE_COMPONENT: {
+  [key: string]: ComponentType<WidgetResultType<unknown>>;
+} = {
+  'about-us': dynamic(async () => import('@theme/widgets/flatpages/about-us')),
+  'blog-list': dynamic(async () => import('@theme/widgets/flatpages/blog-list'))
+};

package/app-template/src/widgets/schemas/about-us.json

@@ -0,0 +1,46 @@
+{
+  "title": {
+    "key": "title",
+    "label": "Title",
+    "data_type": "text",
+    "is_localizable": true
+  },
+  "content": {
+    "key": "content",
+    "label": "Content",
+    "display": "html-editor",
+    "data_type": "area",
+    "is_localizable": true
+  },
+  "image_1": {
+    "key": "image_1",
+    "label": "Banner Image 1* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "image_2": {
+    "key": "image_2",
+    "label": "Banner Image 2* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "image_3": {
+    "key": "image_3",
+    "label": "Banner Image 3* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "highlight_section": {
+    "key": "highlight_section",
+    "label": "Highlight Section Content",
+    "display": "html-editor",
+    "data_type": "area",
+    "is_localizable": true
+  },
+  "highlight_section_title": {
+    "key": "highlight_section_title",
+    "label": "Highlight Section Title",
+    "data_type": "text",
+    "is_localizable": true
+  }
+}

package/app-template/src/widgets/schemas/blog-list.json

@@ -0,0 +1,37 @@
+{
+  "blogs": {
+    "key": "blogs",
+    "label": "Blogs",
+    "is_localizable": true,
+    "multi": true,
+    "data_type": "nested",
+    "schema": {
+      "title": {
+        "key": "title",
+        "label": "Title",
+        "data_type": "text"
+      },
+      "description": {
+        "key": "description",
+        "label": "Description",
+        "data_type": "text"
+      },
+      "date": {
+        "key": "date",
+        "display": "date_picker",
+        "label": "Date",
+        "data_type": "text"
+      },
+      "image": {
+        "key": "image",
+        "label": "Image* (Ex: 370x250px)",
+        "data_type": "image"
+      },
+      "link": {
+        "key": "link",
+        "label": "Link",
+        "data_type": "text"
+      }
+    }
+  }
+}

package/app-template/src/widgets/schemas/blog.json

@@ -0,0 +1,29 @@
+{
+  "title": {
+    "key": "title",
+    "label": "Title",
+    "data_type": "text"
+  },
+  "description": {
+    "key": "description",
+    "label": "Description",
+    "display": "html-editor",
+    "data_type": "area"
+  },
+  "date": {
+    "key": "date",
+    "display": "date_picker",
+    "label": "Date",
+    "data_type": "text"
+  },
+  "image": {
+    "key": "image",
+    "label": "Image* (Ex: 1072x923px)",
+    "data_type": "image"
+  },
+  "link": {
+    "key": "link",
+    "label": "Product Link",
+    "data_type": "text"
+  }
+}

package/app-template/tailwind.config.js

@@ -1,3 +1,4 @@
+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');
@@ -19,6 +20,8 @@ if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
 
 const defaultConfig = {
   content: [
+    './node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
+    '../../node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
     './src/app/**/*.{js,ts,jsx,tsx}',
     './src/pages/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}',
@@ -26,12 +29,7 @@ const defaultConfig = {
     './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()
+    ...getAkinonNextContent(plugins)
   ],
   theme: {
     extend: {
@@ -64,10 +62,20 @@ const defaultConfig = {
           '100%': {
             transform: 'translateX(100%)'
           }
+        },
+        'slide-in': {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' }
+        },
+        'slide-out': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-100%)' }
         }
       },
       animation: {
-        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite'
+        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite',
+        'slide-in': 'slide-in 0.4s ease-out forwards',
+        'slide-out': 'slide-out 0.4s ease-out forwards'
       }
     },
     colors: {
@@ -110,12 +118,15 @@ const defaultConfig = {
         500: '#2d2d2d',
         600: '#292929',
         700: '#2b2b2b',
+        750: '#121212',
         800: '#181818',
+        850: '#0a0a0a',
         900: '#000000'
       },
       gray: {
         DEFAULT: '#ebebeb',
         25: '#fdfdfd',
+        30: '#fafafa',
         50: '#f7f7f7',
         100: '#f5f5f5',
         150: '#f4f4f4',
@@ -125,6 +136,7 @@ const defaultConfig = {
         450: '#d4d4d4',
         500: '#c9c9c9',
         600: '#9d9d9d',
+        650: '#7d7d7d',
         700: '#686868',
         800: '#615f62',
         850: '#58585a',

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"
+  ]
 }