diff --git a/README.md b/README.md index a586199d2..6bd5057ec 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,32 @@ # Next.js Commerce +The all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js developers can clone, deploy and fully own their own store. +Start right now at nextjs.org/commerce -## Features +Demo live at: [commerce-demo.vercel.app](https://commerce-demo.vercel.app/) -## Todo +This project is currently under development. + +## Why +Ecommerce is one of the most important uses of the web and together we can raise the standard for ecommerce sites. + +## Goals and Features +- Performant by default +- SEO Ready +- Internationalization +- Responsive +- UI Components +- Theming +- Standarized Data Hooks +- Integrations - Integrate seamlessly with the most common ecommerce platforms. ## Contribute +Our Commitment to Open Source can be found [here](https://vercel.com/oss). + +1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device. +2. Create a new branch `git checkout -b MY_BRANCH_NAME` +3. Install yarn: `npm install -g yarn` +4. Install the dependencies: `yarn` +5. Run `yarn dev` to build and watch for code changes +7. The development branch is `development` (this is the branch pull requests should be made against). +On a release, the relevant parts of the changes in the `staging` branch are rebased into `master`. + diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx index 1519e371c..597ee328e 100644 --- a/components/auth/ForgotPassword.tsx +++ b/components/auth/ForgotPassword.tsx @@ -1,9 +1,7 @@ import { FC, useEffect, useState, useCallback } from 'react' import { validate } from 'email-validator' -import { Info } from '@components/icons' import { useUI } from '@components/ui/context' import { Logo, Button, Input } from '@components/ui' -import useSignup from '@lib/bigcommerce/use-signup' interface Props {} @@ -15,27 +13,15 @@ const ForgotPassword: FC = () => { const [dirty, setDirty] = useState(false) const [disabled, setDisabled] = useState(false) - const signup = useSignup() const { setModalView, closeModal } = useUI() - const handleSignup = async () => { + const handleResetPassword = async (e: React.SyntheticEvent) => { + e.preventDefault() + if (!dirty && !disabled) { setDirty(true) handleValidation() } - - // try { - // setLoading(true) - // setMessage('') - // await signup({ - // email, - // }) - // setLoading(false) - // closeModal() - // } catch ({ errors }) { - // setMessage(errors[0].message) - // setLoading(false) - // } } const handleValidation = useCallback(() => { @@ -50,7 +36,10 @@ const ForgotPassword: FC = () => { }, [handleValidation]) return ( -
+
@@ -63,7 +52,7 @@ const ForgotPassword: FC = () => {
-
+ ) } diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx index f41a128f5..e30b4c36a 100644 --- a/components/auth/LoginView.tsx +++ b/components/auth/LoginView.tsx @@ -1,6 +1,6 @@ import { FC, useEffect, useState, useCallback } from 'react' import { Logo, Modal, Button, Input } from '@components/ui' -import useLogin from '@lib/bigcommerce/use-login' +import useLogin from '@bigcommerce/storefront-data-hooks/use-login' import { useUI } from '@components/ui/context' import { validate } from 'email-validator' @@ -18,7 +18,9 @@ const LoginView: FC = () => { const login = useLogin() - const handleLogin = async () => { + const handleLogin = async (e: React.SyntheticEvent) => { + e.preventDefault() + if (!dirty && !disabled) { setDirty(true) handleValidation() @@ -54,7 +56,10 @@ const LoginView: FC = () => { }, [handleValidation]) return ( -
+
@@ -75,7 +80,7 @@ const LoginView: FC = () => {
- + ) } diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx index 2c0e6789c..65fa57833 100644 --- a/components/auth/SignUpView.tsx +++ b/components/auth/SignUpView.tsx @@ -3,7 +3,7 @@ import { validate } from 'email-validator' import { Info } from '@components/icons' import { useUI } from '@components/ui/context' import { Logo, Button, Input } from '@components/ui' -import useSignup from '@lib/bigcommerce/use-signup' +import useSignup from '@bigcommerce/storefront-data-hooks/use-signup' interface Props {} @@ -21,7 +21,9 @@ const SignUpView: FC = () => { const signup = useSignup() const { setModalView, closeModal } = useUI() - const handleSignup = async () => { + const handleSignup = async (e: React.SyntheticEvent) => { + e.preventDefault() + if (!dirty && !disabled) { setDirty(true) handleValidation() @@ -59,7 +61,10 @@ const SignUpView: FC = () => { }, [handleValidation]) return ( -
+
@@ -83,7 +88,7 @@ const SignUpView: FC = () => {
-
+ ) } diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 8929d044c..c9db7f89a 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -3,9 +3,9 @@ import cn from 'classnames' import Image from 'next/image' import Link from 'next/link' import { Trash, Plus, Minus } from '@components/icons' -import usePrice from '@lib/bigcommerce/use-price' -import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' -import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' +import usePrice from '@bigcommerce/storefront-data-hooks/use-price' +import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item' +import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item' import s from './CartItem.module.css' const CartItem = ({ diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index fdee9eecb..3f86cb0e7 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -2,10 +2,10 @@ import { FC } from 'react' import cn from 'classnames' import { UserNav } from '@components/core' import { Button } from '@components/ui' -import { ArrowLeft, Bag, Cross, Check } from '@components/icons' +import { Bag, Cross, Check } from '@components/icons' import { useUI } from '@components/ui/context' -import useCart from '@lib/bigcommerce/cart/use-cart' -import usePrice from '@lib/bigcommerce/use-price' +import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart' +import usePrice from '@bigcommerce/storefront-data-hooks/use-price' import CartItem from '../CartItem' import s from './CartSidebarView.module.css' @@ -47,11 +47,11 @@ const CartSidebarView: FC = () => { aria-label="Close panel" className="hover:text-gray-500 transition ease-in-out duration-150" > - +
- +
diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css new file mode 100644 index 000000000..259318ecf --- /dev/null +++ b/components/core/Footer/Footer.module.css @@ -0,0 +1,9 @@ +.link { + & > svg { + @apply transform duration-75 ease-linear; + } + + &:hover > svg { + @apply scale-110; + } +} diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 7d2348653..4cc4abc01 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -2,12 +2,12 @@ import { FC } from 'react' import cn from 'classnames' import Link from 'next/link' import { useRouter } from 'next/router' -import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' +import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' import getSlug from '@utils/get-slug' import { Github } from '@components/icons' import { Logo, Container } from '@components/ui' import { I18nWidget } from '@components/core' - +import s from './Footer.module.css' interface Props { className?: string children?: any @@ -83,7 +83,9 @@ const Footer: FC = ({ className, pages }) => {
- + + +
diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css index 464087ebc..ec2f8ea49 100644 --- a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css @@ -4,20 +4,20 @@ @screen md { @apply flex-row; } -} -.asideWrapper { - @apply pr-3 w-full relative; + & .asideWrapper { + @apply pr-3 w-full relative; - @screen md { - @apply w-48; - } -} - -.aside { - @apply flex flex-row w-full justify-around mb-12; - - @screen md { - @apply mb-0 block sticky top-32; + @screen md { + @apply w-48; + } + } + + & .aside { + @apply flex flex-row w-full justify-around mb-12; + + @screen md { + @apply mb-0 block sticky top-32; + } } } diff --git a/components/core/I18nWidget/I18nWidget.tsx b/components/core/I18nWidget/I18nWidget.tsx index 132553f7f..428f7bc1f 100644 --- a/components/core/I18nWidget/I18nWidget.tsx +++ b/components/core/I18nWidget/I18nWidget.tsx @@ -6,21 +6,52 @@ import { Menu } from '@headlessui/react' import { DoubleChevron } from '@components/icons' import s from './I18nWidget.module.css' -const LOCALES_MAP: Record = { - es: 'Español', - 'en-US': 'English', +interface LOCALE_DATA { + name: string + img: { + filename: string + alt: string + } +} + +const LOCALES_MAP: Record = { + es: { + name: 'Español', + img: { + filename: 'flag-es-co.svg', + alt: 'Bandera Colombiana', + }, + }, + 'en-US': { + name: 'English', + img: { + filename: 'flag-en-us.svg', + alt: 'US Flag', + }, + }, } const I18nWidget: FC = () => { - const { locale, locales, defaultLocale = 'en-US' } = useRouter() + const { + locale, + locales, + defaultLocale = 'en-US', + asPath: currentPath, + } = useRouter() const options = locales?.filter((val) => val !== locale) + const currentLocale = locale || defaultLocale + return (