🔧 config: src folders structure

:%s

package.json

@@ -2,7 +2,8 @@
   "name": "nextjs-commerce",
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev",
+    "dev-windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
     "build": "next build",
     "start": "next start",
     "analyze": "BUNDLE_ANALYZE=both yarn build",

pages/_app.tsx

@@ -1,5 +1,5 @@
-import '@assets/main.css'
+import '../src/styles/main.css'
-import '@assets/chrome-bug.css'
+import '../src/styles/chrome-bug.css'
 import 'keen-slider/keen-slider.min.css'
 
 import { FC, useEffect } from 'react'

pages/index.tsx

@@ -1,53 +1,13 @@
-import commerce from '@lib/api/commerce'
-import { Layout } from '@components/common'
-import { ProductCard } from '@components/product'
-import { Grid, Marquee, Hero } from '@components/ui'
-// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 
-export async function getStaticProps({
+import { ButtonCommon, Layout } from 'src/components/common'
-  preview,
+export default function Home() {
-  locale,
-  locales,
-}: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const productsPromise = commerce.getAllProducts({
-    variables: { first: 6 },
-    config,
-    preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
-  })
-  const pagesPromise = commerce.getAllPages({ config, preview })
-  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
-  const { products } = await productsPromise
-  const { pages } = await pagesPromise
-  const { categories, brands } = await siteInfoPromise
-
-  return {
-    props: {
-      products,
-      categories,
-      brands,
-      pages,
-    },
-    revalidate: 60,
-  }
-}
-
-export default function Home({
-  products,
-  categories,
-  brands,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <HomeAllProductsGrid
+      <div>This is home page</div>
-        products={products}
+      <ButtonCommon />
-        categories={categories}
+      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
-        brands={brands}
+      <p>Go to <code>src/components</code> to make your awesome component!</p>
-      />
+      <p>Go to <code>src/styles</code> to find global styles!</p>
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.module.css

@@ -0,0 +1,5 @@
+/* style demo here */
+
+.buttonCommon {
+  color: red;
+}

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -0,0 +1,15 @@
+import { FC, useRef, useEffect } from 'react'
+import s from './ButtonCommon.module.css'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ButtonCommon: FC<Props> = ({ }) => {
+    return (
+        <div className={s.buttonCommon}>This is button common</div>
+    )
+}
+
+export default ButtonCommon

src/components/common/Header/Header.module.css

@@ -0,0 +1,5 @@
+/* style demo here */
+
+.header {
+  color: green;
+}

src/components/common/Header/Header.tsx

@@ -0,0 +1,15 @@
+import { FC, useRef, useEffect } from 'react'
+import s from './Header.module.css'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const Header: FC<Props> = ({ }) => {
+    return (
+        <div className={s.header}>This is Header</div>
+    )
+}
+
+export default Header

src/components/common/Layout/Layout.tsx

@@ -0,0 +1,24 @@
+import { FC, useRef, useEffect } from 'react'
+import Header from '../Header/Header'
+import { CommerceProvider } from '@framework'
+import { useRouter } from 'next/router'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+// note: demo code
+const Layout: FC<Props> = ({ children }) => {
+    const { locale = 'en-US' } = useRouter()
+
+    return (
+        <CommerceProvider locale={locale}>
+            <Header />
+            <main>{children}</main>
+        </CommerceProvider>
+
+    )
+}
+
+export default Layout

src/components/common/index.ts

@@ -0,0 +1,3 @@
+export { default as ButtonCommon } from './ButtonCommon/ButtonCommon'
+export { default as Layout } from './Layout/Layout'
+

src/components/icons/index.ts

@@ -0,0 +1 @@
+// index here

src/components/modules/cart/index.ts

@@ -0,0 +1 @@
+// index here

src/components/modules/home/HomeBanner/HomeBanner.module.css

@@ -0,0 +1,5 @@
+/* style demo here */
+
+.homeBanner {
+  color: green;
+}

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import s from './HomeBanner.module.css'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HomeBanner: FC<Props> = ({ }) => {
+    return (
+        <div className={s.homeBanner}>This is HomeBanner</div>
+    )
+}
+
+export default HomeBanner

src/components/modules/home/index.ts

@@ -0,0 +1 @@
+export { default as HomeBanner } from './HomeBanner/HomeBanner'

src/styles/base.css

@@ -0,0 +1,137 @@
+:root {
+  --primary: #ffffff;
+  --primary-2: #f1f3f5;
+  --secondary: #000000;
+  --secondary-2: #111;
+  --selection: var(--cyan);
+
+  --text-base: #000000;
+  --text-primary: #000000;
+  --text-secondary: white;
+
+  --hover: rgba(0, 0, 0, 0.075);
+  --hover-1: rgba(0, 0, 0, 0.15);
+  --hover-2: rgba(0, 0, 0, 0.25);
+  --cyan: #22b8cf;
+  --green: #37b679;
+  --red: #da3c3c;
+  --purple: #f81ce5;
+  --blue: #0070f3;
+
+  --pink: #ff0080;
+  --pink-light: #ff379c;
+
+  --magenta: #eb367f;
+
+  --violet: #7928ca;
+  --violet-dark: #4c2889;
+
+  --accent-0: #fff;
+  --accent-1: #fafafa;
+  --accent-2: #eaeaea;
+  --accent-3: #999999;
+  --accent-4: #888888;
+  --accent-5: #666666;
+  --accent-6: #444444;
+  --accent-7: #333333;
+  --accent-8: #111111;
+  --accent-9: #000;
+
+  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
+    'Helvetica', sans-serif;
+}
+
+[data-theme='dark'] {
+  --primary: #000000;
+  --primary-2: #111;
+  --secondary: #ffffff;
+  --secondary-2: #f1f3f5;
+  --hover: rgba(255, 255, 255, 0.075);
+  --hover-1: rgba(255, 255, 255, 0.15);
+  --hover-2: rgba(255, 255, 255, 0.25);
+  --selection: var(--purple);
+
+  --text-base: white;
+  --text-primary: white;
+  --text-secondary: black;
+
+  --accent-9: #fff;
+  --accent-8: #fafafa;
+  --accent-7: #eaeaea;
+  --accent-6: #999999;
+  --accent-5: #888888;
+  --accent-4: #666666;
+  --accent-3: #444444;
+  --accent-2: #333333;
+  --accent-1: #111111;
+  --accent-0: #000;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+  touch-action: manipulation;
+  font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  font-family: var(--font-sans);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--primary);
+  color: var(--text-primary);
+  overscroll-behavior-x: none;
+}
+
+body {
+  position: relative;
+  min-height: 100%;
+  margin: 0;
+}
+
+a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

src/styles/chrome-bug.css

@@ -0,0 +1,12 @@
+/**
+ * Chrome has a bug with transitions on load since 2012!
+ *
+ * To prevent a "pop" of content, you have to disable all transitions until
+ * the page is done loading.
+ *
+ * https://lab.laukstein.com/bug/input
+ * https://twitter.com/timer150/status/1345217126680899584
+ */
+body.loading * {
+  transition: none !important;
+}

src/styles/main.css

@@ -0,0 +1,6 @@
+@tailwind base;
+@import './base.css';
+
+@tailwind components;
+
+@tailwind utilities;

src/utils/funtion.utils.ts

@@ -0,0 +1 @@
+// funtion utils here

src/utils/language.utils.ts

@@ -0,0 +1,6 @@
+export const LANGUAGE = {
+    BUTTON_LABEL: {
+        BUY_NOW: 'Buy now',
+        SHOP_NOW: 'Shop now',
+    },
+}