diff --git a/package.json b/package.json index 95b46c497..ae35568bc 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index dae0311b4..578f7c680 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,5 @@ -import '@assets/main.css' -import '@assets/chrome-bug.css' +import '../src/styles/main.css' +import '../src/styles/chrome-bug.css' import 'keen-slider/keen-slider.min.css' import { FC, useEffect } from 'react' diff --git a/pages/index.tsx b/pages/index.tsx index 82e112bd6..103b3567e 100644 --- a/pages/index.tsx +++ b/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({ - preview, - 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) { +import { ButtonCommon, Layout } from 'src/components/common' +export default function Home() { return ( <> - +
This is home page
+ +

Go to pages/index.tsx to get your hand dirty!

+

Go to src/components to make your awesome component!

+

Go to src/styles to find global styles!

) } diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.css b/src/components/common/ButtonCommon/ButtonCommon.module.css new file mode 100644 index 000000000..6cbe5d4aa --- /dev/null +++ b/src/components/common/ButtonCommon/ButtonCommon.module.css @@ -0,0 +1,5 @@ +/* style demo here */ + +.buttonCommon { + color: red; +} \ No newline at end of file diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx new file mode 100644 index 000000000..96732424a --- /dev/null +++ b/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 = ({ }) => { + return ( +
This is button common
+ ) +} + +export default ButtonCommon diff --git a/src/components/common/Header/Header.module.css b/src/components/common/Header/Header.module.css new file mode 100644 index 000000000..e2f7fbbf0 --- /dev/null +++ b/src/components/common/Header/Header.module.css @@ -0,0 +1,5 @@ +/* style demo here */ + +.header { + color: green; +} \ No newline at end of file diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx new file mode 100644 index 000000000..a032152cb --- /dev/null +++ b/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 = ({ }) => { + return ( +
This is Header
+ ) +} + +export default Header diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx new file mode 100644 index 000000000..356ecfce5 --- /dev/null +++ b/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 = ({ children }) => { + const { locale = 'en-US' } = useRouter() + + return ( + +
+
{children}
+ + + ) +} + +export default Layout diff --git a/src/components/common/index.ts b/src/components/common/index.ts new file mode 100644 index 000000000..4911a0637 --- /dev/null +++ b/src/components/common/index.ts @@ -0,0 +1,3 @@ +export { default as ButtonCommon } from './ButtonCommon/ButtonCommon' +export { default as Layout } from './Layout/Layout' + diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts new file mode 100644 index 000000000..71fb01f59 --- /dev/null +++ b/src/components/icons/index.ts @@ -0,0 +1 @@ +// index here \ No newline at end of file diff --git a/src/components/modules/cart/index.ts b/src/components/modules/cart/index.ts new file mode 100644 index 000000000..71fb01f59 --- /dev/null +++ b/src/components/modules/cart/index.ts @@ -0,0 +1 @@ +// index here \ No newline at end of file diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.css b/src/components/modules/home/HomeBanner/HomeBanner.module.css new file mode 100644 index 000000000..3e25230ff --- /dev/null +++ b/src/components/modules/home/HomeBanner/HomeBanner.module.css @@ -0,0 +1,5 @@ +/* style demo here */ + +.homeBanner { + color: green; +} \ No newline at end of file diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx new file mode 100644 index 000000000..7a254ec10 --- /dev/null +++ b/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 = ({ }) => { + return ( +
This is HomeBanner
+ ) +} + +export default HomeBanner diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts new file mode 100644 index 000000000..a83854f9f --- /dev/null +++ b/src/components/modules/home/index.ts @@ -0,0 +1 @@ +export { default as HomeBanner } from './HomeBanner/HomeBanner' diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 000000000..00081f459 --- /dev/null +++ b/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; + } +} diff --git a/src/styles/chrome-bug.css b/src/styles/chrome-bug.css new file mode 100644 index 000000000..245ec8f09 --- /dev/null +++ b/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; +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..c934f3969 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,6 @@ +@tailwind base; +@import './base.css'; + +@tailwind components; + +@tailwind utilities; diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts new file mode 100644 index 000000000..410d3fdcc --- /dev/null +++ b/src/utils/funtion.utils.ts @@ -0,0 +1 @@ +// funtion utils here \ No newline at end of file diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts new file mode 100644 index 000000000..4343ed9db --- /dev/null +++ b/src/utils/language.utils.ts @@ -0,0 +1,6 @@ +export const LANGUAGE = { + BUTTON_LABEL: { + BUY_NOW: 'Buy now', + SHOP_NOW: 'Shop now', + }, +} \ No newline at end of file