diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx deleted file mode 100644 index dbac371c7..000000000 --- a/components/auth/ForgotPassword.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { FC, useEffect, useState, useCallback } from 'react' -import { validate } from 'email-validator' -import { useUI } from '@components/ui/context' -import { Logo, Button, Input } from '@components/ui' - -interface Props {} - -const ForgotPassword: FC = () => { - // Form State - const [email, setEmail] = useState('') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState('') - const [dirty, setDirty] = useState(false) - const [disabled, setDisabled] = useState(false) - - const { setModalView, closeModal } = useUI() - - const handleResetPassword = async (e: React.SyntheticEvent) => { - e.preventDefault() - - if (!dirty && !disabled) { - setDirty(true) - handleValidation() - } - } - - const handleValidation = useCallback(() => { - // Unable to send form unless fields are valid. - if (dirty) { - setDisabled(!validate(email)) - } - }, [email, dirty]) - - useEffect(() => { - handleValidation() - }, [handleValidation]) - - return ( -
-
- -
-
- {message && ( -
{message}
- )} - - -
- -
- - - Do you have an account? - {` `} - setModalView('LOGIN_VIEW')} - > - Log In - - -
-
- ) -} - -export default ForgotPassword diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx deleted file mode 100644 index 35ff98f66..000000000 --- a/components/auth/LoginView.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { FC, useEffect, useState, useCallback } from 'react' -import { Logo, Button, Input } from '@components/ui' -import useLogin from '@framework/auth/use-login' -import { useUI } from '@components/ui/context' -import { validate } from 'email-validator' - -interface Props {} - -const LoginView: FC = () => { - // Form State - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState('') - const [dirty, setDirty] = useState(false) - const [disabled, setDisabled] = useState(false) - const { setModalView, closeModal } = useUI() - - const login = useLogin() - - const handleLogin = async (e: React.SyntheticEvent) => { - e.preventDefault() - - if (!dirty && !disabled) { - setDirty(true) - handleValidation() - } - - try { - setLoading(true) - setMessage('') - await login({ - email, - password, - }) - setLoading(false) - closeModal() - } catch ({ errors }) { - setMessage(errors[0].message) - setLoading(false) - } - } - - const handleValidation = useCallback(() => { - // Test for Alphanumeric password - const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) - - // Unable to send form unless fields are valid. - if (dirty) { - setDisabled(!validate(email) || password.length < 7 || !validPassword) - } - }, [email, password, dirty]) - - useEffect(() => { - handleValidation() - }, [handleValidation]) - - return ( -
-
- -
-
- {message && ( - - )} - - - - -
- Don't have an account? - {` `} - setModalView('SIGNUP_VIEW')} - > - Sign Up - -
-
-
- ) -} - -export default LoginView diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx deleted file mode 100644 index a85a3bc27..000000000 --- a/components/auth/SignUpView.tsx +++ /dev/null @@ -1,114 +0,0 @@ -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 '@framework/auth/use-signup' - -interface Props {} - -const SignUpView: FC = () => { - // Form State - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [firstName, setFirstName] = useState('') - const [lastName, setLastName] = useState('') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState('') - const [dirty, setDirty] = useState(false) - const [disabled, setDisabled] = useState(false) - - const signup = useSignup() - const { setModalView, closeModal } = useUI() - - const handleSignup = async (e: React.SyntheticEvent) => { - e.preventDefault() - - if (!dirty && !disabled) { - setDirty(true) - handleValidation() - } - - try { - setLoading(true) - setMessage('') - await signup({ - email, - firstName, - lastName, - password, - }) - setLoading(false) - closeModal() - } catch ({ errors }) { - setMessage(errors[0].message) - setLoading(false) - } - } - - const handleValidation = useCallback(() => { - // Test for Alphanumeric password - const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) - - // Unable to send form unless fields are valid. - if (dirty) { - setDisabled(!validate(email) || password.length < 7 || !validPassword) - } - }, [email, password, dirty]) - - useEffect(() => { - handleValidation() - }, [handleValidation]) - - return ( -
-
- -
-
- {message && ( -
{message}
- )} - - - - - - - - {' '} - - Info: Passwords must be longer than 7 chars and - include numbers.{' '} - - -
- -
- - - Do you have an account? - {` `} - setModalView('LOGIN_VIEW')} - > - Log In - - -
-
- ) -} - -export default SignUpView diff --git a/components/auth/index.ts b/components/auth/index.ts deleted file mode 100644 index 11571fac7..000000000 --- a/components/auth/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as LoginView } from './LoginView' -export { default as SignUpView } from './SignUpView' -export { default as ForgotPassword } from './ForgotPassword' diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css deleted file mode 100644 index dd43314fb..000000000 --- a/components/cart/CartItem/CartItem.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.root { - @apply flex flex-col py-4; -} - -.root:first-child { - padding-top: 0; -} - -.quantity { - appearance: textfield; - @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black; -} - -.quantity::-webkit-outer-spin-button, -.quantity::-webkit-inner-spin-button { - @apply appearance-none m-0; -} - -.productImage { - position: absolute; - transform: scale(1.9); - width: 100%; - height: 100%; - left: 30% !important; - top: 30% !important; - z-index: 1; -} - -.productName { - @apply font-medium cursor-pointer pb-1; - margin-top: -4px; -} diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx deleted file mode 100644 index a59024e06..000000000 --- a/components/cart/CartItem/CartItem.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react' -import cn from 'classnames' -import Image from 'next/image' -import Link from 'next/link' -import s from './CartItem.module.css' -import { Trash, Plus, Minus, Cross } from '@components/icons' -import { useUI } from '@components/ui/context' -import type { LineItem } from '@commerce/types/cart' -import usePrice from '@framework/product/use-price' -import useUpdateItem from '@framework/cart/use-update-item' -import useRemoveItem from '@framework/cart/use-remove-item' -import Quantity from '@components/ui/Quantity' - -type ItemOption = { - name: string - nameId: number - value: string - valueId: number -} - -const CartItem = ({ - item, - variant = 'default', - currencyCode, - ...rest -}: { - variant?: 'default' | 'display' - item: LineItem - currencyCode: string -}) => { - const { closeSidebarIfPresent } = useUI() - const [removing, setRemoving] = useState(false) - const [quantity, setQuantity] = useState(item.quantity) - const removeItem = useRemoveItem() - const updateItem = useUpdateItem({ item }) - - const { price } = usePrice({ - amount: item.variant.price * item.quantity, - baseAmount: item.variant.listPrice * item.quantity, - currencyCode, - }) - - const handleChange = async ({ - target: { value }, - }: ChangeEvent) => { - setQuantity(Number(value)) - await updateItem({ quantity: Number(value) }) - } - - const increaseQuantity = async (n = 1) => { - const val = Number(quantity) + n - setQuantity(val) - await updateItem({ quantity: val }) - } - - const handleRemove = async () => { - setRemoving(true) - try { - await removeItem(item) - } catch (error) { - setRemoving(false) - } - } - - // TODO: Add a type for this - const options = (item as any).options - - useEffect(() => { - // Reset the quantity state if the item quantity changes - if (item.quantity !== Number(quantity)) { - setQuantity(item.quantity) - } - }, [item.quantity]) - - return ( -
  • -
    -
    - - closeSidebarIfPresent()} - className={s.productImage} - width={150} - height={150} - src={item.variant.image!.url} - alt={item.variant.image!.altText} - unoptimized - /> - -
    -
    - - closeSidebarIfPresent()} - > - {item.name} - - - {options && options.length > 0 && ( -
    - {options.map((option: ItemOption, i: number) => ( -
    - {option.name} - {option.name === 'Color' ? ( - - ) : ( - - {option.value} - - )} - {i === options.length - 1 ? '' : } -
    - ))} -
    - )} - {variant === 'display' && ( -
    {quantity}x
    - )} -
    -
    - {price} -
    -
    - {variant === 'default' && ( - increaseQuantity(1)} - decrease={() => increaseQuantity(-1)} - /> - )} -
    • - ) -} - -export default CartItem diff --git a/components/cart/CartItem/index.ts b/components/cart/CartItem/index.ts deleted file mode 100644 index b5f6dc52f..000000000 --- a/components/cart/CartItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CartItem' diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css deleted file mode 100644 index c9ffbed50..000000000 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.root { - min-height: 100vh; -} - -.root.empty { - @apply bg-secondary text-secondary; -} - -.lineItemsList { - @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2; -} diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx deleted file mode 100644 index 128b928a8..000000000 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC } from 'react' -import s from './CartSidebarView.module.css' -import CartItem from '../CartItem' -import { Button, Text } from '@components/ui' -import { useUI } from '@components/ui/context' -import { Bag, Cross, Check } from '@components/icons' -import useCart from '@framework/cart/use-cart' -import usePrice from '@framework/product/use-price' -import SidebarLayout from '@components/common/SidebarLayout' - -const CartSidebarView: FC = () => { - const { closeSidebar, setSidebarView } = useUI() - const { data, isLoading, isEmpty } = useCart() - - const { price: subTotal } = usePrice( - data && { - amount: Number(data.subtotalPrice), - currencyCode: data.currency.code, - } - ) - const { price: total } = usePrice( - data && { - amount: Number(data.totalPrice), - currencyCode: data.currency.code, - } - ) - const handleClose = () => closeSidebar() - const goToCheckout = () => setSidebarView('CHECKOUT_VIEW') - - const error = null - const success = null - - return ( - - {isLoading || isEmpty ? ( -
    - - - -

    - Your cart is empty -

    -

    - Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. -

    -
    - ) : error ? ( -
    - - - -

    - We couldn’t process the purchase. Please check your card information - and try again. -

    -
    - ) : success ? ( -
    - - - -

    - Thank you for your order. -

    -
    - ) : ( - <> -
    - - - My Cart - - -
      - {data!.lineItems.map((item: any) => ( - - ))} -
    -
    - -
    -
      -
    • - Subtotal - {subTotal} -
      • -
    • - Taxes - Calculated at checkout -
      • -
    • - Shipping - FREE -
      • -
    -
    - Total - {total} -
    -
    - {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? ( - - ) : ( - - )} -
    -
    - - )} -     - ) -} - -export default CartSidebarView diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts deleted file mode 100644 index 0262e448e..000000000 --- a/components/cart/CartSidebarView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CartSidebarView' diff --git a/components/cart/index.ts b/components/cart/index.ts deleted file mode 100644 index 3e53fa34a..000000000 --- a/components/cart/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as CartSidebarView } from './CartSidebarView' -export { default as CartItem } from './CartItem' diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css deleted file mode 100644 index 34c1b487c..000000000 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - min-height: calc(100vh - 322px); -} - -.lineItemsList { - @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2; -} diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx deleted file mode 100644 index fb562e7af..000000000 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC } from 'react' -import CartItem from '@components/cart/CartItem' -import { Button, Text } from '@components/ui' -import { useUI } from '@components/ui/context' -import useCart from '@framework/cart/use-cart' -import usePrice from '@framework/product/use-price' -import ShippingWidget from '../ShippingWidget' -import PaymentWidget from '../PaymentWidget' -import SidebarLayout from '@components/common/SidebarLayout' -import s from './CheckoutSidebarView.module.css' - -const CheckoutSidebarView: FC = () => { - const { setSidebarView } = useUI() - const { data } = useCart() - - const { price: subTotal } = usePrice( - data && { - amount: Number(data.subtotalPrice), - currencyCode: data.currency.code, - } - ) - const { price: total } = usePrice( - data && { - amount: Number(data.totalPrice), - currencyCode: data.currency.code, - } - ) - - return ( - setSidebarView('CART_VIEW')} - > -
    - - Checkout - - - setSidebarView('PAYMENT_VIEW')} /> - setSidebarView('SHIPPING_VIEW')} /> - -
      - {data!.lineItems.map((item: any) => ( - - ))} -
    -
    - -
    -
      -
    • - Subtotal - {subTotal} -
      • -
    • - Taxes - Calculated at checkout -
      • -
    • - Shipping - FREE -
      • -
    -
    - Total - {total} -
    -
    - {/* Once data is correcly filled */} - {/* */} - -
    -
    -     - ) -} - -export default CheckoutSidebarView diff --git a/components/checkout/CheckoutSidebarView/index.ts b/components/checkout/CheckoutSidebarView/index.ts deleted file mode 100644 index 168bc58f4..000000000 --- a/components/checkout/CheckoutSidebarView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CheckoutSidebarView' diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css deleted file mode 100644 index f3880c72c..000000000 --- a/components/checkout/PaymentMethodView/PaymentMethodView.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.fieldset { - @apply flex flex-col my-3; -} - -.fieldset .label { - @apply text-accent-7 uppercase text-xs font-medium mb-2; -} - -.fieldset .input, -.fieldset .select { - @apply p-2 border border-accent-2 w-full text-sm font-normal; -} - -.fieldset .input:focus, -.fieldset .select:focus { - @apply outline-none shadow-outline-normal; -} diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx deleted file mode 100644 index a5f6f4b51..000000000 --- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import { Button, Text } from '@components/ui' -import { useUI } from '@components/ui/context' -import s from './PaymentMethodView.module.css' -import SidebarLayout from '@components/common/SidebarLayout' - -const PaymentMethodView: FC = () => { - const { setSidebarView } = useUI() - - return ( - setSidebarView('CHECKOUT_VIEW')}> -
    - Payment Method -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    -
    -
    - -
    -     - ) -} - -export default PaymentMethodView diff --git a/components/checkout/PaymentMethodView/index.ts b/components/checkout/PaymentMethodView/index.ts deleted file mode 100644 index 951b3c318..000000000 --- a/components/checkout/PaymentMethodView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './PaymentMethodView' diff --git a/components/checkout/PaymentWidget/PaymentWidget.module.css b/components/checkout/PaymentWidget/PaymentWidget.module.css deleted file mode 100644 index 38dcab0c0..000000000 --- a/components/checkout/PaymentWidget/PaymentWidget.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.root { - @apply border border-accent-2 px-6 py-5 mb-4 text-center - flex items-center cursor-pointer hover:border-accent-4; -} diff --git a/components/checkout/PaymentWidget/PaymentWidget.tsx b/components/checkout/PaymentWidget/PaymentWidget.tsx deleted file mode 100644 index e1892934e..000000000 --- a/components/checkout/PaymentWidget/PaymentWidget.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react' -import s from './PaymentWidget.module.css' -import { ChevronRight, CreditCard } from '@components/icons' - -interface ComponentProps { - onClick?: () => any -} - -const PaymentWidget: FC = ({ onClick }) => { - /* Shipping Address - Only available with checkout set to true - - This means that the provider does offer checkout functionality. */ - return ( -
    -
    - - - Add Payment Method - - {/* VISA #### #### #### 2345 */} -
    -
    - -
    -
    - ) -} - -export default PaymentWidget diff --git a/components/checkout/PaymentWidget/index.ts b/components/checkout/PaymentWidget/index.ts deleted file mode 100644 index 18cadea57..000000000 --- a/components/checkout/PaymentWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './PaymentWidget' diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css deleted file mode 100644 index 157d3174e..000000000 --- a/components/checkout/ShippingView/ShippingView.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.fieldset { - @apply flex flex-col my-3; -} - -.fieldset .label { - @apply text-accent-7 uppercase text-xs font-medium mb-2; -} - -.fieldset .input, -.fieldset .select { - @apply p-2 border border-accent-2 w-full text-sm font-normal; -} - -.fieldset .input:focus, -.fieldset .select:focus { - @apply outline-none shadow-outline-normal; -} - -.radio { - @apply bg-black; -} diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx deleted file mode 100644 index 1d03a2aac..000000000 --- a/components/checkout/ShippingView/ShippingView.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import s from './ShippingView.module.css' -import Button from '@components/ui/Button' -import { useUI } from '@components/ui/context' -import SidebarLayout from '@components/common/SidebarLayout' - -const PaymentMethodView: FC = () => { - const { setSidebarView } = useUI() - - return ( - setSidebarView('CHECKOUT_VIEW')}> -
    -

    - Shipping -

    -
    -
    - - Same as billing address -
    -
    - - - Use a different shipping address - -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    -
    -
    - -
    -     - ) -} - -export default PaymentMethodView diff --git a/components/checkout/ShippingView/index.ts b/components/checkout/ShippingView/index.ts deleted file mode 100644 index 428e7e4fe..000000000 --- a/components/checkout/ShippingView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ShippingView' diff --git a/components/checkout/ShippingWidget/ShippingWidget.module.css b/components/checkout/ShippingWidget/ShippingWidget.module.css deleted file mode 100644 index 38dcab0c0..000000000 --- a/components/checkout/ShippingWidget/ShippingWidget.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.root { - @apply border border-accent-2 px-6 py-5 mb-4 text-center - flex items-center cursor-pointer hover:border-accent-4; -} diff --git a/components/checkout/ShippingWidget/ShippingWidget.tsx b/components/checkout/ShippingWidget/ShippingWidget.tsx deleted file mode 100644 index b072178b0..000000000 --- a/components/checkout/ShippingWidget/ShippingWidget.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC } from 'react' -import s from './ShippingWidget.module.css' -import { ChevronRight, MapPin } from '@components/icons' -import cn from 'classnames' - -interface ComponentProps { - onClick?: () => any -} - -const ShippingWidget: FC = ({ onClick }) => { - /* Shipping Address - Only available with checkout set to true - - This means that the provider does offer checkout functionality. */ - return ( -
    -
    - - - Add Shipping Address - - {/* - 1046 Kearny Street.
    - San Franssisco, California -     */} -
    -
    - -
    -
    - ) -} - -export default ShippingWidget diff --git a/components/checkout/ShippingWidget/index.ts b/components/checkout/ShippingWidget/index.ts deleted file mode 100644 index 88e6dca4b..000000000 --- a/components/checkout/ShippingWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ShippingWidget' diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx deleted file mode 100644 index 663538450..000000000 --- a/components/common/Avatar/Avatar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC, useRef, useEffect } from 'react' -import { useUserAvatar } from '@lib/hooks/useUserAvatar' - -interface Props { - className?: string - children?: any -} - -const Avatar: FC = ({}) => { - let ref = useRef() as React.MutableRefObject - let { userAvatar } = useUserAvatar() - - return ( -
    - {/* Add an image - We're generating a gradient as placeholder */} -
    - ) -} - -export default Avatar diff --git a/components/common/Avatar/index.ts b/components/common/Avatar/index.ts deleted file mode 100644 index a4600ec77..000000000 --- a/components/common/Avatar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Avatar' diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css deleted file mode 100644 index a3cb61cd2..000000000 --- a/components/common/FeatureBar/FeatureBar.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out; - - @screen md { - @apply flex text-left; - } -} diff --git a/components/common/FeatureBar/FeatureBar.tsx b/components/common/FeatureBar/FeatureBar.tsx deleted file mode 100644 index 8923a721e..000000000 --- a/components/common/FeatureBar/FeatureBar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import cn from 'classnames' -import s from './FeatureBar.module.css' - -interface FeatureBarProps { - className?: string - title: string - description?: string - hide?: boolean - action?: React.ReactNode -} - -const FeatureBar: React.FC = ({ - title, - description, - className, - action, - hide, -}) => { - const rootClassName = cn( - s.root, - { - transform: true, - 'translate-y-0 opacity-100': !hide, - 'translate-y-full opacity-0': hide, - }, - className - ) - return ( -
    - {title} - - {description} - - {action && action} -
    - ) -} - -export default FeatureBar diff --git a/components/common/FeatureBar/index.ts b/components/common/FeatureBar/index.ts deleted file mode 100644 index d78bc9d20..000000000 --- a/components/common/FeatureBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FeatureBar' diff --git a/components/common/Footer/Footer.module.css b/components/common/Footer/Footer.module.css deleted file mode 100644 index 2ba492086..000000000 --- a/components/common/Footer/Footer.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.root { - @apply border-t border-accent-2; -} - -.link { - & > svg { - @apply transform duration-75 ease-linear; - } - - &:hover > svg { - @apply scale-110; - } -} diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx deleted file mode 100644 index 04b80404e..000000000 --- a/components/common/Footer/Footer.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import Link from 'next/link' -import { useRouter } from 'next/router' -import type { Page } from '@commerce/types/page' -import getSlug from '@lib/get-slug' -import { Github, Vercel } from '@components/icons' -import { Logo, Container } from '@components/ui' -import { I18nWidget } from '@components/common' -import s from './Footer.module.css' - -interface Props { - className?: string - children?: any - pages?: Page[] -} - -const links = [ - { - name: 'Home', - url: '/', - }, -] - -const Footer: FC = ({ className, pages }) => { - const { sitePages } = usePages(pages) - const rootClassName = cn(s.root, className) - - return ( - - ) -} - -function usePages(pages?: Page[]) { - const { locale } = useRouter() - const sitePages: Page[] = [] - - if (pages) { - pages.forEach((page) => { - const slug = page.url && getSlug(page.url) - if (!slug) return - if (locale && !slug.startsWith(`${locale}/`)) return - sitePages.push(page) - }) - } - - return { - sitePages: sitePages.sort(bySortOrder), - } -} - -// Sort pages by the sort order assigned in the BC dashboard -function bySortOrder(a: Page, b: Page) { - return (a.sort_order ?? 0) - (b.sort_order ?? 0) -} - -export default Footer diff --git a/components/common/Footer/index.ts b/components/common/Footer/index.ts deleted file mode 100644 index 5d06e9b71..000000000 --- a/components/common/Footer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Footer' diff --git a/components/common/Head/Head.tsx b/components/common/Head/Head.tsx deleted file mode 100644 index b2c0c997b..000000000 --- a/components/common/Head/Head.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { FC } from 'react' -import NextHead from 'next/head' -import { DefaultSeo } from 'next-seo' -import config from '@config/seo.json' - -const Head: FC = () => { - return ( - <> - - - - - - - ) -} - -export default Head diff --git a/components/common/Head/index.ts b/components/common/Head/index.ts deleted file mode 100644 index b317a124b..000000000 --- a/components/common/Head/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Head' diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css deleted file mode 100644 index 91d1fdc60..000000000 --- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply flex flex-col w-full; - - @screen md { - @apply flex-row; - } -} diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx deleted file mode 100644 index d0fac461f..000000000 --- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import type { Product } from '@commerce/types/product' -import { Grid } from '@components/ui' -import { ProductCard } from '@components/product' -import s from './HomeAllProductsGrid.module.css' -import { getCategoryPath, getDesignerPath } from '@lib/search' -import { Category } from '@commerce/types/site' - -interface Props { - categories?: Category[] - brands?: any - products?: Product[] -} - -const HomeAllProductsGrid: FC = ({ - categories = [], - brands, - products = [], -}) => { - return ( -
    -
    - {categories.map((category) => ( -
    -
    {category.name}
    -
    - {products.slice(0, 4).map((product) => ( - - ))} -
    -
    - ))} -
    -
    - ) -} - -export default HomeAllProductsGrid diff --git a/components/common/HomeAllProductsGrid/index.ts b/components/common/HomeAllProductsGrid/index.ts deleted file mode 100644 index 31d313d16..000000000 --- a/components/common/HomeAllProductsGrid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HomeAllProductsGrid' diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css deleted file mode 100644 index 269aa5f61..000000000 --- a/components/common/I18nWidget/I18nWidget.module.css +++ /dev/null @@ -1,46 +0,0 @@ -.root { - @apply relative; -} - -.button { - @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear; -} - -.button:hover { - @apply border-accent-3 shadow-sm; -} - -.button:focus { - @apply outline-none; -} - -.dropdownMenu { - @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; - - @screen lg { - @apply absolute border border-accent-1 shadow-lg w-56 h-auto; - } -} - -.closeButton { - @screen md { - @apply hidden; - } -} - -.item { - @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center; - text-transform: capitalize; -} - -.item:hover { - @apply bg-accent-1; -} - -.icon { - transition: transform 0.2s ease; -} - -.icon.active { - transform: rotate(180deg); -} diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx deleted file mode 100644 index 58135f12a..000000000 --- a/components/common/I18nWidget/I18nWidget.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC, useState } from 'react' -import { useRouter } from 'next/router' -import s from './I18nWidget.module.css' -import { Cross, ChevronUp } from '@components/icons' -import ClickOutside from '@lib/click-outside' -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 [display, setDisplay] = useState(false) - const { - locale, - locales, - defaultLocale = 'en-US', - asPath: currentPath, - } = useRouter() - - const options = locales?.filter((val) => val !== locale) - const currentLocale = locale || defaultLocale - - return ( - setDisplay(false)}> - - - ) -} - -export default I18nWidget diff --git a/components/common/I18nWidget/index.ts b/components/common/I18nWidget/index.ts deleted file mode 100644 index 46525c3d4..000000000 --- a/components/common/I18nWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './I18nWidget' diff --git a/components/common/Layout/Layout.module.css b/components/common/Layout/Layout.module.css deleted file mode 100644 index bb90675a6..000000000 --- a/components/common/Layout/Layout.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.root { - @apply h-full bg-primary mx-auto transition-colors duration-150; - max-width: 2460px; -} diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx deleted file mode 100644 index ff6d72aaf..000000000 --- a/components/common/Layout/Layout.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import cn from 'classnames' -import React, { FC } from 'react' -import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import { CommerceProvider } from '@framework' -import { useUI } from '@components/ui/context' -import type { Page } from '@commerce/types/page' -import { Navbar, Footer } from '@components/common' -import type { Category } from '@commerce/types/site' -import ShippingView from '@components/checkout/ShippingView' -import CartSidebarView from '@components/cart/CartSidebarView' -import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' -import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' -import PaymentMethodView from '@components/checkout/PaymentMethodView' -import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView' - -import LoginView from '@components/auth/LoginView' -import s from './Layout.module.css' - -const Loading = () => ( -
    - -
    -) - -const dynamicProps = { - loading: () => , -} - -const SignUpView = dynamic( - () => import('@components/auth/SignUpView'), - dynamicProps -) - -const ForgotPassword = dynamic( - () => import('@components/auth/ForgotPassword'), - dynamicProps -) - -const FeatureBar = dynamic( - () => import('@components/common/FeatureBar'), - dynamicProps -) - -interface Props { - pageProps: { - pages?: Page[] - categories: Category[] - } -} - -const ModalView: FC<{ modalView: string; closeModal(): any }> = ({ - modalView, - closeModal, -}) => { - return ( - - {modalView === 'LOGIN_VIEW' && } - {modalView === 'SIGNUP_VIEW' && } - {modalView === 'FORGOT_VIEW' && } - - ) -} - -const ModalUI: FC = () => { - const { displayModal, closeModal, modalView } = useUI() - return displayModal ? ( - - ) : null -} - -const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({ - sidebarView, - closeSidebar, -}) => { - return ( - - {sidebarView === 'CART_VIEW' && } - {sidebarView === 'CHECKOUT_VIEW' && } - {sidebarView === 'PAYMENT_VIEW' && } - {sidebarView === 'SHIPPING_VIEW' && } - - ) -} - -const SidebarUI: FC = () => { - const { displaySidebar, closeSidebar, sidebarView } = useUI() - return displaySidebar ? ( - - ) : null -} - -const Layout: FC = ({ - children, - pageProps: { categories = [], ...pageProps }, -}) => { - const { acceptedCookies, onAcceptCookies } = useAcceptCookies() - const { locale = 'en-US' } = useRouter() - const navBarlinks = categories.slice(0, 2).map((c) => ({ - label: c.name, - href: `/search/${c.slug}`, - })) - - return ( - -
    - -
    {children}
    -
    - - - onAcceptCookies()}> - Accept cookies - - } - /> -
    -     - ) -} - -export default Layout diff --git a/components/common/Layout/index.ts b/components/common/Layout/index.ts deleted file mode 100644 index 0e2737eee..000000000 --- a/components/common/Layout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Layout' diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css deleted file mode 100644 index faa86d156..000000000 --- a/components/common/Navbar/Navbar.module.css +++ /dev/null @@ -1,35 +0,0 @@ -.root { - @apply sticky top-0 bg-primary z-40 transition-all duration-150; - min-height: 74px; -} - -.nav { - @apply relative flex flex-row justify-between py-4 md:py-4; -} - -.navMenu { - @apply hidden ml-6 space-x-4 lg:block; -} - -.link { - @apply inline-flex items-center leading-6 - transition ease-in-out duration-75 cursor-pointer - text-accent-5; -} - -.link:hover { - @apply text-accent-9; -} - -.link:focus { - @apply outline-none text-accent-8; -} - -.logo { - @apply cursor-pointer rounded-full border transform duration-100 ease-in-out; - - &:hover { - @apply shadow-md; - transform: scale(1.05); - } -} diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx deleted file mode 100644 index 2ce5f33b8..000000000 --- a/components/common/Navbar/Navbar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import s from './Navbar.module.css' -import NavbarRoot from './NavbarRoot' -import { Logo, Container } from '@components/ui' -import { Searchbar, UserNav } from '@components/common' - -interface Link { - href: string - label: string -} -interface NavbarProps { - links?: Link[] -} - -const Navbar: FC = ({ links }) => ( - - -
    -
    - - - - - - -
    - {process.env.COMMERCE_SEARCH_ENABLED && ( -
    - -
    - )} -
    - -
    -
    -
    - -
    -     -     -) - -export default Navbar diff --git a/components/common/Navbar/NavbarRoot.tsx b/components/common/Navbar/NavbarRoot.tsx deleted file mode 100644 index 2eb8c5429..000000000 --- a/components/common/Navbar/NavbarRoot.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC, useState, useEffect } from 'react' -import throttle from 'lodash.throttle' -import cn from 'classnames' -import s from './Navbar.module.css' - -const NavbarRoot: FC = ({ children }) => { - const [hasScrolled, setHasScrolled] = useState(false) - - useEffect(() => { - const handleScroll = throttle(() => { - const offset = 0 - const { scrollTop } = document.documentElement - const scrolled = scrollTop > offset - - if (hasScrolled !== scrolled) { - setHasScrolled(scrolled) - } - }, 200) - - document.addEventListener('scroll', handleScroll) - return () => { - document.removeEventListener('scroll', handleScroll) - } - }, [hasScrolled]) - - return ( -
    - {children} -
    - ) -} - -export default NavbarRoot diff --git a/components/common/Navbar/index.ts b/components/common/Navbar/index.ts deleted file mode 100644 index e6400ae40..000000000 --- a/components/common/Navbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Navbar' diff --git a/components/common/Searchbar/Searchbar.module.css b/components/common/Searchbar/Searchbar.module.css deleted file mode 100644 index 7f20ed973..000000000 --- a/components/common/Searchbar/Searchbar.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.root { - @apply relative text-sm bg-accent-0 text-base w-full transition-colors duration-150 border border-accent-2; -} - -.input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10; -} - -.input::placeholder { - @apply text-accent-3; -} - -.input:focus { - @apply outline-none shadow-outline-normal; -} - -.iconContainer { - @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none; -} - -.icon { - @apply h-5 w-5; -} - -@screen sm { - .input { - min-width: 300px; - } -} diff --git a/components/common/Searchbar/Searchbar.tsx b/components/common/Searchbar/Searchbar.tsx deleted file mode 100644 index 0fc276d02..000000000 --- a/components/common/Searchbar/Searchbar.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { FC, InputHTMLAttributes, useEffect, useMemo } from 'react' -import cn from 'classnames' -import s from './Searchbar.module.css' -import { useRouter } from 'next/router' - -interface Props { - className?: string - id?: string -} - -const Searchbar: FC = ({ className, id = 'search' }) => { - const router = useRouter() - - useEffect(() => { - router.prefetch('/search') - }, []) - - const handleKeyUp = (e: React.KeyboardEvent) => { - e.preventDefault() - - if (e.key === 'Enter') { - const q = e.currentTarget.value - - router.push( - { - pathname: `/search`, - query: q ? { q } : {}, - }, - undefined, - { shallow: true } - ) - } - } - - return useMemo( - () => ( -
    - - -
    - - - -
    -
    - ), - [] - ) -} - -export default Searchbar diff --git a/components/common/Searchbar/index.ts b/components/common/Searchbar/index.ts deleted file mode 100644 index e6c0e36c8..000000000 --- a/components/common/Searchbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Searchbar' diff --git a/components/common/SidebarLayout/SidebarLayout.module.css b/components/common/SidebarLayout/SidebarLayout.module.css deleted file mode 100644 index a8940dc52..000000000 --- a/components/common/SidebarLayout/SidebarLayout.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.root { - @apply relative h-full flex flex-col; -} - -.header { - @apply sticky top-0 pl-4 py-4 pr-6 - flex items-center justify-between - bg-accent-0 box-border w-full z-10; - min-height: 66px; -} - -.container { - @apply flex flex-col flex-1 box-border; -} - -@screen lg { - .header { - min-height: 74px; - } -} diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx deleted file mode 100644 index a4e60a758..000000000 --- a/components/common/SidebarLayout/SidebarLayout.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { FC } from 'react' -import { Cross, ChevronLeft } from '@components/icons' -import { UserNav } from '@components/common' -import cn from 'classnames' -import s from './SidebarLayout.module.css' - -type ComponentProps = { className?: string } & ( - | { handleClose: () => any; handleBack?: never } - | { handleBack: () => any; handleClose?: never } -) - -const SidebarLayout: FC = ({ - children, - className, - handleClose, - handleBack, -}) => { - return ( -
    -
    - {handleClose && ( - - )} - {handleBack && ( - - )} - - - -
    -
    {children}
    -
    - ) -} - -export default SidebarLayout diff --git a/components/common/SidebarLayout/index.ts b/components/common/SidebarLayout/index.ts deleted file mode 100644 index 45ded0cf0..000000000 --- a/components/common/SidebarLayout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SidebarLayout' diff --git a/components/common/UserNav/DropdownMenu.module.css b/components/common/UserNav/DropdownMenu.module.css deleted file mode 100644 index d6b13ecb5..000000000 --- a/components/common/UserNav/DropdownMenu.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.dropdownMenu { - @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; - - @screen lg { - @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto; - } -} - -.link { - @apply text-primary flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 leading-6 font-medium items-center; - text-transform: capitalize; -} - -.link:hover { - @apply bg-accent-1; -} - -.link.active { - @apply font-bold bg-accent-2; -} - -.off { - @apply hidden; -} diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx deleted file mode 100644 index f79fd5821..000000000 --- a/components/common/UserNav/DropdownMenu.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC, useRef, useState, useEffect } from 'react' -import { useTheme } from 'next-themes' -import { useRouter } from 'next/router' -import s from './DropdownMenu.module.css' -import { Avatar } from '@components/common' -import { Moon, Sun } from '@components/icons' -import { useUI } from '@components/ui/context' -import ClickOutside from '@lib/click-outside' -import useLogout from '@framework/auth/use-logout' - -import { - disableBodyScroll, - enableBodyScroll, - clearAllBodyScrollLocks, -} from 'body-scroll-lock' - -interface DropdownMenuProps { - open?: boolean -} - -const LINKS = [ - { - name: 'My Orders', - href: '/orders', - }, - { - name: 'My Profile', - href: '/profile', - }, - { - name: 'My Cart', - href: '/cart', - }, -] - -const DropdownMenu: FC = ({ open = false }) => { - const logout = useLogout() - const { pathname } = useRouter() - const { theme, setTheme } = useTheme() - const [display, setDisplay] = useState(false) - const { closeSidebarIfPresent } = useUI() - const ref = useRef() as React.MutableRefObject - - useEffect(() => { - if (ref.current) { - if (display) { - disableBodyScroll(ref.current) - } else { - enableBodyScroll(ref.current) - } - } - return () => { - clearAllBodyScrollLocks() - } - }, [display]) - - return ( - setDisplay(false)}> - - - ) -} - -export default DropdownMenu diff --git a/components/common/UserNav/UserNav.module.css b/components/common/UserNav/UserNav.module.css deleted file mode 100644 index 92f62c10d..000000000 --- a/components/common/UserNav/UserNav.module.css +++ /dev/null @@ -1,40 +0,0 @@ -.root { - @apply relative; -} - -.list { - @apply flex flex-row items-center justify-items-end h-full; -} - -.item { - @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary; - - &:hover { - @apply text-accent-6 transition scale-110 duration-100; - } - - &:last-child { - @apply mr-0; - } - - &:focus, - &:active { - @apply outline-none; - } -} - -.bagCount { - @apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs; - padding-left: 2.5px; - padding-right: 2.5px; - min-width: 1.25rem; - min-height: 1.25rem; -} - -.avatarButton { - @apply inline-flex justify-center rounded-full; -} - -.avatarButton:focus { - @apply outline-none; -} diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx deleted file mode 100644 index 5d7d28df3..000000000 --- a/components/common/UserNav/UserNav.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import cn from 'classnames' -import type { LineItem } from '@commerce/types/cart' -import useCart from '@framework/cart/use-cart' -import useCustomer from '@framework/customer/use-customer' -import { Avatar } from '@components/common' -import { Heart, Bag } from '@components/icons' -import { useUI } from '@components/ui/context' -import DropdownMenu from './DropdownMenu' -import s from './UserNav.module.css' - -interface Props { - className?: string -} - -const countItem = (count: number, item: LineItem) => count + item.quantity - -const UserNav: FC = ({ className }) => { - const { data } = useCart() - const { data: customer } = useCustomer() - const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI() - const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0 - - return ( - - ) -} - -export default UserNav diff --git a/components/common/UserNav/index.ts b/components/common/UserNav/index.ts deleted file mode 100644 index 9e35ac018..000000000 --- a/components/common/UserNav/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './UserNav' diff --git a/components/common/index.ts b/components/common/index.ts deleted file mode 100644 index 98dd3394b..000000000 --- a/components/common/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { default as Avatar } from './Avatar' -export { default as FeatureBar } from './FeatureBar' -export { default as Footer } from './Footer' -export { default as Layout } from './Layout' -export { default as Navbar } from './Navbar' -export { default as Searchbar } from './Searchbar' -export { default as UserNav } from './UserNav' -export { default as Head } from './Head' -export { default as I18nWidget } from './I18nWidget' diff --git a/components/icons/ArrowLeft.tsx b/components/icons/ArrowLeft.tsx deleted file mode 100644 index 8cc1e1294..000000000 --- a/components/icons/ArrowLeft.tsx +++ /dev/null @@ -1,27 +0,0 @@ -const ArrowLeft = ({ ...props }) => { - return ( - - - - - ) -} - -export default ArrowLeft diff --git a/components/icons/ArrowRight.tsx b/components/icons/ArrowRight.tsx deleted file mode 100644 index e644951d9..000000000 --- a/components/icons/ArrowRight.tsx +++ /dev/null @@ -1,28 +0,0 @@ -const ArrowRight = ({ ...props }) => { - return ( - - - - - ) -} - -export default ArrowRight diff --git a/components/icons/Bag.tsx b/components/icons/Bag.tsx deleted file mode 100644 index de2cde0d1..000000000 --- a/components/icons/Bag.tsx +++ /dev/null @@ -1,33 +0,0 @@ -const Bag = ({ ...props }) => { - return ( - - - - - - ) -} - -export default Bag diff --git a/components/icons/Check.tsx b/components/icons/Check.tsx deleted file mode 100644 index 89c91a1e3..000000000 --- a/components/icons/Check.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Check = ({ ...props }) => { - return ( - - - - ) -} - -export default Check diff --git a/components/icons/ChevronDown.tsx b/components/icons/ChevronDown.tsx deleted file mode 100644 index 542e8056d..000000000 --- a/components/icons/ChevronDown.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronDown = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronDown diff --git a/components/icons/ChevronLeft.tsx b/components/icons/ChevronLeft.tsx deleted file mode 100644 index 4efb6a522..000000000 --- a/components/icons/ChevronLeft.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronLeft = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronLeft diff --git a/components/icons/ChevronRight.tsx b/components/icons/ChevronRight.tsx deleted file mode 100644 index d72b77a32..000000000 --- a/components/icons/ChevronRight.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronUp = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronUp diff --git a/components/icons/ChevronUp.tsx b/components/icons/ChevronUp.tsx deleted file mode 100644 index 69b9959b8..000000000 --- a/components/icons/ChevronUp.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronUp = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronUp diff --git a/components/icons/CreditCard.tsx b/components/icons/CreditCard.tsx deleted file mode 100644 index 958c31193..000000000 --- a/components/icons/CreditCard.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const CreditCard = ({ ...props }) => { - return ( - - - - - ) -} - -export default CreditCard diff --git a/components/icons/Cross.tsx b/components/icons/Cross.tsx deleted file mode 100644 index 12e115ac9..000000000 --- a/components/icons/Cross.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Cross = ({ ...props }) => { - return ( - - - - - ) -} - -export default Cross diff --git a/components/icons/DoubleChevron.tsx b/components/icons/DoubleChevron.tsx deleted file mode 100644 index 198c30464..000000000 --- a/components/icons/DoubleChevron.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const DoubleChevron = ({ ...props }) => { - return ( - - - - ) -} - -export default DoubleChevron diff --git a/components/icons/Github.tsx b/components/icons/Github.tsx deleted file mode 100644 index 1195a3c3a..000000000 --- a/components/icons/Github.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const Github = ({ ...props }) => { - return ( - - - - ) -} - -export default Github diff --git a/components/icons/Heart.tsx b/components/icons/Heart.tsx deleted file mode 100644 index afa2f6aaa..000000000 --- a/components/icons/Heart.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const Heart = ({ ...props }) => { - return ( - - - - ) -} - -export default Heart diff --git a/components/icons/Info.tsx b/components/icons/Info.tsx deleted file mode 100644 index 67c79cf27..000000000 --- a/components/icons/Info.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const Info = ({ ...props }) => { - return ( - - - - - - ) -} - -export default Info diff --git a/components/icons/MapPin.tsx b/components/icons/MapPin.tsx deleted file mode 100644 index 6323b9c1c..000000000 --- a/components/icons/MapPin.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const MapPin = ({ ...props }) => { - return ( - - - - - ) -} - -export default MapPin diff --git a/components/icons/Minus.tsx b/components/icons/Minus.tsx deleted file mode 100644 index 1e9411dda..000000000 --- a/components/icons/Minus.tsx +++ /dev/null @@ -1,15 +0,0 @@ -const Minus = ({ ...props }) => { - return ( - - - - ) -} - -export default Minus diff --git a/components/icons/Moon.tsx b/components/icons/Moon.tsx deleted file mode 100644 index e02f2a30d..000000000 --- a/components/icons/Moon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const Moon = ({ ...props }) => { - return ( - - - - ) -} - -export default Moon diff --git a/components/icons/Plus.tsx b/components/icons/Plus.tsx deleted file mode 100644 index ad030b92e..000000000 --- a/components/icons/Plus.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const Plus = ({ ...props }) => { - return ( - - - - - ) -} - -export default Plus diff --git a/components/icons/Star.tsx b/components/icons/Star.tsx deleted file mode 100644 index d98f55e1d..000000000 --- a/components/icons/Star.tsx +++ /dev/null @@ -1,16 +0,0 @@ -const Star = ({ ...props }) => { - return ( - - - - ) -} - -export default Star diff --git a/components/icons/Sun.tsx b/components/icons/Sun.tsx deleted file mode 100644 index d3684bcb9..000000000 --- a/components/icons/Sun.tsx +++ /dev/null @@ -1,28 +0,0 @@ -const Sun = ({ ...props }) => { - return ( - - - - - - - - - - - - ) -} - -export default Sun diff --git a/components/icons/Trash.tsx b/components/icons/Trash.tsx deleted file mode 100644 index b005ea892..000000000 --- a/components/icons/Trash.tsx +++ /dev/null @@ -1,43 +0,0 @@ -const Trash = ({ ...props }) => { - return ( - - - - - - - ) -} - -export default Trash diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx deleted file mode 100644 index 96e619fdf..000000000 --- a/components/icons/Vercel.tsx +++ /dev/null @@ -1,40 +0,0 @@ -const Vercel = ({ ...props }) => { - return ( - - - - - - - - - - ) -} - -export default Vercel diff --git a/components/icons/index.ts b/components/icons/index.ts deleted file mode 100644 index 97eef6d58..000000000 --- a/components/icons/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -export { default as Bag } from './Bag' -export { default as Heart } from './Heart' -export { default as Trash } from './Trash' -export { default as Cross } from './Cross' -export { default as Plus } from './Plus' -export { default as Minus } from './Minus' -export { default as Check } from './Check' -export { default as Sun } from './Sun' -export { default as Moon } from './Moon' -export { default as Github } from './Github' -export { default as Info } from './Info' -export { default as Vercel } from './Vercel' -export { default as MapPin } from './MapPin' -export { default as Star } from './Star' -export { default as ArrowLeft } from './ArrowLeft' -export { default as ArrowRight } from './ArrowRight' -export { default as CreditCard } from './CreditCard' -export { default as ChevronUp } from './ChevronUp' -export { default as ChevronLeft } from './ChevronLeft' -export { default as ChevronDown } from './ChevronDown' -export { default as ChevronRight } from './ChevronRight' -export { default as DoubleChevron } from './DoubleChevron' diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css deleted file mode 100644 index d5d441fea..000000000 --- a/components/product/ProductCard/ProductCard.module.css +++ /dev/null @@ -1,114 +0,0 @@ -.root { - @apply relative max-h-full w-full box-border overflow-hidden - bg-no-repeat bg-center bg-cover transition-transform - ease-linear cursor-pointer inline-block bg-accent-1; - height: 100% !important; -} - -.root:hover { - & .productImage { - transform: scale(1.2625); - } - - & .header .name span, - & .header .price, - & .wishlistButton { - @apply bg-secondary text-secondary; - } - - &:nth-child(6n + 1) .header .name span, - &:nth-child(6n + 1) .header .price, - &:nth-child(6n + 1) .wishlistButton { - @apply bg-violet text-white; - } - - &:nth-child(6n + 5) .header .name span, - &:nth-child(6n + 5) .header .price, - &:nth-child(6n + 5) .wishlistButton { - @apply bg-blue text-white; - } - - &:nth-child(6n + 3) .header .name span, - &:nth-child(6n + 3) .header .price, - &:nth-child(6n + 3) .wishlistButton { - @apply bg-pink text-white; - } - - &:nth-child(6n + 6) .header .name span, - &:nth-child(6n + 6) .header .price, - &:nth-child(6n + 6) .wishlistButton { - @apply bg-cyan text-white; - } -} - -.header { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.header .name { - @apply pt-0 max-w-full w-full leading-extra-loose - transition-colors ease-in-out duration-500; - font-size: 2rem; - letter-spacing: 0.4px; -} - -.header .name span { - @apply py-4 px-6 bg-primary text-primary font-bold - transition-colors ease-in-out duration-500; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.header .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide - transition-colors ease-in-out duration-500; -} - -.imageContainer { - @apply flex items-center justify-center overflow-hidden; -} - -.imageContainer > div { - min-width: 100%; -} - -.imageContainer .productImage { - @apply transform transition-transform duration-500 - object-cover scale-120; -} - -.root .wishlistButton { - @apply top-0 right-0 z-30 absolute; -} - -/* Variant Simple */ -.simple .header .name { - @apply pt-2 text-lg leading-10 -mt-1; -} - -.simple .header .price { - @apply text-sm; -} - -/* Variant Slim */ -.slim { - @apply bg-transparent relative overflow-hidden - box-border; -} - -.slim .header { - @apply absolute inset-0 flex items-center justify-end mr-8 z-20; -} - -.slim span { - @apply bg-accent-9 text-accent-0 inline-block p-3 - font-bold text-xl break-words; -} - -.root:global(.secondary) .header span { - @apply bg-accent-0 text-accent-9; -} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx deleted file mode 100644 index 39c19db00..000000000 --- a/components/product/ProductCard/ProductCard.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import Link from 'next/link' -import type { Product } from '@commerce/types/product' -import s from './ProductCard.module.css' -import Image, { ImageProps } from 'next/image' -import WishlistButton from '@components/wishlist/WishlistButton' -import usePrice from '@framework/product/use-price' -import ProductTag from '../ProductTag' -interface Props { - className?: string - product: Product - noNameTag?: boolean - imgProps?: Omit - variant?: 'default' | 'slim' | 'simple' -} - -const placeholderImg = '/product-img-placeholder.svg' - -const ProductCard: FC = ({ - product, - imgProps, - className, - noNameTag = false, - variant = 'default', - ...props -}) => { - const { price } = usePrice({ - amount: product.price.value, - baseAmount: product.price.retailPrice, - currencyCode: product.price.currencyCode!, - }) - - const rootClassName = cn( - s.root, - { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' }, - className - ) - - return ( - - - {variant === 'slim' && ( - <> -
    - {product.name} -
    - {product?.images && ( - {product.name - )} - - )} - - {variant === 'simple' && ( - <> - {process.env.COMMERCE_WISHLIST_ENABLED && ( - - )} - {!noNameTag && ( -
    -

    - {product.name} -

    -
    - {`${price} ${product.price?.currencyCode}`} -
    -
    - )} -
    - {product?.images && ( - {product.name - )} -
    - - )} - - {variant === 'default' && ( - <> - {process.env.COMMERCE_WISHLIST_ENABLED && ( - - )} - -
    - {product?.images && ( - {product.name - )} -
    - - )} -     - - ) -} - -export default ProductCard diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts deleted file mode 100644 index 4559faa14..000000000 --- a/components/product/ProductCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductCard' diff --git a/components/product/ProductOptions/ProductOptions.tsx b/components/product/ProductOptions/ProductOptions.tsx deleted file mode 100644 index 9261406bc..000000000 --- a/components/product/ProductOptions/ProductOptions.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Swatch } from '@components/product' -import type { ProductOption } from '@commerce/types/product' -import { SelectedOptions } from '../helpers' -import React from 'react' -interface ProductOptionsProps { - options: ProductOption[] - selectedOptions: SelectedOptions - setSelectedOptions: React.Dispatch> -} - -const ProductOptions: React.FC = React.memo( - ({ options, selectedOptions, setSelectedOptions }) => { - return ( -
    - {options.map((opt) => ( -
    -

    - {opt.displayName} -

    -
    - {opt.values.map((v, i: number) => { - const active = selectedOptions[opt.displayName.toLowerCase()] - return ( - { - setSelectedOptions((selectedOptions) => { - return { - ...selectedOptions, - [opt.displayName.toLowerCase()]: - v.label.toLowerCase(), - } - }) - }} - /> - ) - })} -
    -
    - ))} -
    - ) - } -) - -export default ProductOptions diff --git a/components/product/ProductOptions/index.ts b/components/product/ProductOptions/index.ts deleted file mode 100644 index 252415ab7..000000000 --- a/components/product/ProductOptions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductOptions' diff --git a/components/product/ProductSidebar/ProductSidebar.module.css b/components/product/ProductSidebar/ProductSidebar.module.css deleted file mode 100644 index b6ecc2b77..000000000 --- a/components/product/ProductSidebar/ProductSidebar.module.css +++ /dev/null @@ -1,84 +0,0 @@ -.root { - @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden; - min-height: auto; -} - -.main { - @apply relative px-0 pb-0 box-border flex flex-col col-span-1; - min-height: 500px; -} - -.header { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.header .name { - @apply pt-0 max-w-full w-full leading-extra-loose; - font-size: 2rem; - letter-spacing: 0.4px; -} - -.header .name span { - @apply py-4 px-6 bg-primary text-primary font-bold; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.header .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide; -} - -.sidebar { - @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full; -} - -.sliderContainer { - @apply flex items-center justify-center overflow-x-hidden bg-violet; -} - -.imageContainer { - @apply text-center; -} - -.imageContainer > div, -.imageContainer > div > div { - @apply h-full; -} - -.sliderContainer .img { - @apply w-full h-auto max-h-full object-cover; -} - -.button { - width: 100%; -} - -.wishlistButton { - @apply absolute z-30 top-0 right-0; -} - -.relatedProductsGrid { - @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7; -} - -@screen lg { - .root { - @apply grid-cols-12; - } - - .main { - @apply mx-0 col-span-8; - } - - .sidebar { - @apply col-span-4 py-6; - } - - .imageContainer { - max-height: 600px; - } -} diff --git a/components/product/ProductSidebar/ProductSidebar.tsx b/components/product/ProductSidebar/ProductSidebar.tsx deleted file mode 100644 index fe8a71aa5..000000000 --- a/components/product/ProductSidebar/ProductSidebar.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import s from './ProductSidebar.module.css' -import { useAddItem } from '@framework/cart' -import { FC, useEffect, useState } from 'react' -import { ProductOptions } from '@components/product' -import type { Product } from '@commerce/types/product' -import { Button, Text, Rating, Collapse, useUI } from '@components/ui' -import { - getProductVariant, - selectDefaultOptionFromProduct, - SelectedOptions, -} from '../helpers' - -interface ProductSidebarProps { - product: Product - className?: string -} - -const ProductSidebar: FC = ({ product, className }) => { - const addItem = useAddItem() - const { openSidebar } = useUI() - const [loading, setLoading] = useState(false) - const [selectedOptions, setSelectedOptions] = useState({}) - - useEffect(() => { - selectDefaultOptionFromProduct(product, setSelectedOptions) - }, []) - - const variant = getProductVariant(product, selectedOptions) - const addToCart = async () => { - setLoading(true) - try { - await addItem({ - productId: String(product.id), - variantId: String(variant ? variant.id : product.variants[0].id), - }) - openSidebar() - setLoading(false) - } catch (err) { - setLoading(false) - } - } - - return ( -
    - - -
    - -
    36 reviews
    -
    -
    - {process.env.COMMERCE_CART_ENABLED && ( - - )} -
    -
    - - This is a limited edition production run. Printing starts when the - drop ends. - - - This is a limited edition production run. Printing starts when the - drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due - to COVID-19. - -
    -
    - ) -} - -export default ProductSidebar diff --git a/components/product/ProductSidebar/index.ts b/components/product/ProductSidebar/index.ts deleted file mode 100644 index 7e00359c4..000000000 --- a/components/product/ProductSidebar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductSidebar' diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css deleted file mode 100644 index 8d7265eb8..000000000 --- a/components/product/ProductSlider/ProductSlider.module.css +++ /dev/null @@ -1,64 +0,0 @@ -.root { - @apply relative w-full h-full select-none; - overflow: hidden; -} - -.slider { - @apply relative h-full transition-opacity duration-150; - opacity: 0; -} - -.slider.show { - opacity: 1; -} - -.thumb { - @apply transition-transform transition-colors - ease-linear duration-75 overflow-hidden inline-block - cursor-pointer h-full; - width: 125px; - width: calc(100% / 3); -} - -.thumb.selected { - @apply bg-white; -} - -.thumb img { - height: 85% !important; -} - -.album { - width: 100%; - height: 100%; - @apply bg-violet-dark; - box-sizing: content-box; - overflow-y: hidden; - overflow-x: auto; - white-space: nowrap; - height: 125px; - scrollbar-width: none; -} - -/* Hide scrollbar for Chrome, Safari and Opera */ -.album::-webkit-scrollbar { - display: none; -} - -@screen md { - .thumb:hover { - transform: scale(1.02); - background-color: rgba(255, 255, 255, 0.08); - } - - .thumb.selected { - @apply bg-white; - } - - .album { - height: 182px; - } - .thumb { - width: 235px; - } -} diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx deleted file mode 100644 index 8c3441906..000000000 --- a/components/product/ProductSlider/ProductSlider.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { useKeenSlider } from 'keen-slider/react' -import React, { - Children, - FC, - isValidElement, - useState, - useRef, - useEffect, -} from 'react' -import cn from 'classnames' -import { a } from '@react-spring/web' -import s from './ProductSlider.module.css' -import ProductSliderControl from '../ProductSliderControl' - -interface ProductSliderProps { - children: React.ReactNode[] - className?: string -} - -const ProductSlider: React.FC = ({ - children, - className = '', -}) => { - const [currentSlide, setCurrentSlide] = useState(0) - const [isMounted, setIsMounted] = useState(false) - const sliderContainerRef = useRef(null) - const thumbsContainerRef = useRef(null) - - const [ref, slider] = useKeenSlider({ - loop: true, - slidesPerView: 1, - mounted: () => setIsMounted(true), - slideChanged(s) { - const slideNumber = s.details().relativeSlide - setCurrentSlide(slideNumber) - - if (thumbsContainerRef.current) { - const $el = document.getElementById( - `thumb-${s.details().relativeSlide}` - ) - if (slideNumber >= 3) { - thumbsContainerRef.current.scrollLeft = $el!.offsetLeft - } else { - thumbsContainerRef.current.scrollLeft = 0 - } - } - }, - }) - - // Stop the history navigation gesture on touch devices - useEffect(() => { - const preventNavigation = (event: TouchEvent) => { - // Center point of the touch area - const touchXPosition = event.touches[0].pageX - // Size of the touch area - const touchXRadius = event.touches[0].radiusX || 0 - - // We set a threshold (10px) on both sizes of the screen, - // if the touch area overlaps with the screen edges - // it's likely to trigger the navigation. We prevent the - // touchstart event in that case. - if ( - touchXPosition - touchXRadius < 10 || - touchXPosition + touchXRadius > window.innerWidth - 10 - ) - event.preventDefault() - } - - sliderContainerRef.current!.addEventListener( - 'touchstart', - preventNavigation - ) - - return () => { - if (sliderContainerRef.current) { - sliderContainerRef.current!.removeEventListener( - 'touchstart', - preventNavigation - ) - } - } - }, []) - - const onPrev = React.useCallback(() => slider.prev(), [slider]) - const onNext = React.useCallback(() => slider.next(), [slider]) - - return ( -
    -
    - {slider && } - {Children.map(children, (child) => { - // Add the keen-slider__slide className to children - if (isValidElement(child)) { - return { - ...child, - props: { - ...child.props, - className: `${ - child.props.className ? `${child.props.className} ` : '' - }keen-slider__slide`, - }, - } - } - return child - })} -
    - - - {slider && - Children.map(children, (child, idx) => { - if (isValidElement(child)) { - return { - ...child, - props: { - ...child.props, - className: cn(child.props.className, s.thumb, { - [s.selected]: currentSlide === idx, - }), - id: `thumb-${idx}`, - onClick: () => { - slider.moveToSlideRelative(idx) - }, - }, - } - } - return child - })} - -
    - ) -} - -export default ProductSlider diff --git a/components/product/ProductSlider/index.ts b/components/product/ProductSlider/index.ts deleted file mode 100644 index 504440410..000000000 --- a/components/product/ProductSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductSlider' diff --git a/components/product/ProductSliderControl/ProductSliderControl.module.css b/components/product/ProductSliderControl/ProductSliderControl.module.css deleted file mode 100644 index c744e7598..000000000 --- a/components/product/ProductSliderControl/ProductSliderControl.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.control { - @apply bg-violet absolute bottom-10 right-10 flex flex-row - border-accent-0 border text-accent-0 z-30 shadow-xl select-none; - height: 48px; -} - -.leftControl, -.rightControl { - @apply px-9 cursor-pointer; - transition: background-color 0.2s ease; -} - -.leftControl:hover, -.rightControl:hover { - background-color: var(--violet-dark); -} - -.leftControl:focus, -.rightControl:focus { - @apply outline-none; -} - -.rightControl { - @apply border-l border-accent-0; -} - -.leftControl { - margin-right: -1px; -} diff --git a/components/product/ProductSliderControl/ProductSliderControl.tsx b/components/product/ProductSliderControl/ProductSliderControl.tsx deleted file mode 100644 index 4e767b5db..000000000 --- a/components/product/ProductSliderControl/ProductSliderControl.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import cn from 'classnames' -import React from 'react' -import s from './ProductSliderControl.module.css' -import { ArrowLeft, ArrowRight } from '@components/icons' - -interface ProductSliderControl { - onPrev: React.MouseEventHandler - onNext: React.MouseEventHandler -} - -const ProductSliderControl: React.FC = React.memo( - ({ onPrev, onNext }) => ( -
    - - -
    - ) -) -export default ProductSliderControl diff --git a/components/product/ProductSliderControl/index.ts b/components/product/ProductSliderControl/index.ts deleted file mode 100644 index 5b63c466f..000000000 --- a/components/product/ProductSliderControl/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductSliderControl' diff --git a/components/product/ProductTag/ProductTag.module.css b/components/product/ProductTag/ProductTag.module.css deleted file mode 100644 index faf2fd97f..000000000 --- a/components/product/ProductTag/ProductTag.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.root { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.root .name { - @apply pt-0 max-w-full w-full leading-extra-loose; - font-size: 2rem; - letter-spacing: 0.4px; - line-height: 2.2em; -} - -.root .name span { - @apply py-4 px-6 bg-primary text-primary font-bold; - min-height: 70px; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.root .name span.fontsizing { - display: flex; - padding-top: 1.5rem; -} - -.root .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide; -} diff --git a/components/product/ProductTag/ProductTag.tsx b/components/product/ProductTag/ProductTag.tsx deleted file mode 100644 index 2bc80b878..000000000 --- a/components/product/ProductTag/ProductTag.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import cn from 'classnames' -import { inherits } from 'util' -import s from './ProductTag.module.css' - -interface ProductTagProps { - className?: string - name: string - price: string - fontSize?: number -} - -const ProductTag: React.FC = ({ - name, - price, - className = '', - fontSize = 32, -}) => { - return ( -
    -

    - - {name} - -

    -
    {price}
    -
    - ) -} - -export default ProductTag diff --git a/components/product/ProductTag/index.ts b/components/product/ProductTag/index.ts deleted file mode 100644 index cb345e8bd..000000000 --- a/components/product/ProductTag/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductTag' diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css deleted file mode 100644 index 0b3ebf564..000000000 --- a/components/product/ProductView/ProductView.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.root { - @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden; - min-height: auto; -} - -.main { - @apply relative px-0 pb-0 box-border flex flex-col col-span-1; - min-height: 500px; -} - -.sidebar { - @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full; -} - -.sliderContainer { - @apply flex items-center justify-center overflow-x-hidden bg-violet; -} - -.imageContainer { - @apply text-center; -} - -.imageContainer > div, -.imageContainer > div > div { - @apply h-full; -} - -.sliderContainer .img { - @apply w-full h-auto max-h-full object-cover; -} - -.button { - width: 100%; -} - -.wishlistButton { - @apply absolute z-30 top-0 right-0; -} - -.relatedProductsGrid { - @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7; -} - -@screen lg { - .root { - @apply grid-cols-12; - } - - .main { - @apply mx-0 col-span-8; - } - - .sidebar { - @apply col-span-4 py-6; - } - - .imageContainer { - max-height: 600px; - } -} diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx deleted file mode 100644 index cfe26983a..000000000 --- a/components/product/ProductView/ProductView.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import cn from 'classnames' -import Image from 'next/image' -import { NextSeo } from 'next-seo' -import s from './ProductView.module.css' -import { FC } from 'react' -import type { Product } from '@commerce/types/product' -import usePrice from '@framework/product/use-price' -import { ProductSlider, ProductCard } from '@components/product' -import { Container, Text } from '@components/ui' -import ProductSidebar from '../ProductSidebar' -import ProductTag from '../ProductTag' -import { WishlistButton } from '@components/wishlist' -interface ProductViewProps { - product: Product - relatedProducts: Product[] -} - -const ProductView: FC = ({ product, relatedProducts }) => { - const { price } = usePrice({ - amount: product.price.value, - baseAmount: product.price.retailPrice, - currencyCode: product.price.currencyCode!, - }) - - return ( - <> - -
    -
    - -
    - - {product.images.map((image, i) => ( -
    - {image.alt -
    - ))} -     -
    - {process.env.COMMERCE_WISHLIST_ENABLED && ( - - )} -
    - - -
    -
    -
    - Related Products -
    - {relatedProducts.map((p) => ( -
    - -
    - ))} -
    -
    -     - - - ) -} - -export default ProductView diff --git a/components/product/ProductView/index.ts b/components/product/ProductView/index.ts deleted file mode 100644 index 9ac144801..000000000 --- a/components/product/ProductView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductView' diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css deleted file mode 100644 index 79a69e548..000000000 --- a/components/product/Swatch/Swatch.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.swatch { - box-sizing: border-box; - composes: root from '@components/ui/Button/Button.module.css'; - @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex - items-center justify-center cursor-pointer transition duration-150 ease-in-out - p-0 shadow-none border-accent-3 border box-border select-none; - margin-right: calc(0.75rem - 1px); - overflow: hidden; - width: 48px; - height: 48px; -} - -.swatch::before, -.swatch::after { - box-sizing: border-box; -} - -.swatch:hover { - @apply transform scale-110 bg-hover; -} - -.swatch > span { - @apply absolute; -} - -.color { - @apply text-black transition duration-150 ease-in-out; -} - -.color :hover { - @apply text-black; -} - -.color.dark, -.color.dark:hover { - color: white !important; -} - -.active { - @apply border-accent-9 border-2; - padding-right: 1px; - padding-left: 1px; -} - -.textLabel { - @apply w-auto px-4; - min-width: 3rem; -} - -.active.textLabel { - @apply border-accent-9 border-2; - padding-right: calc(1rem - 1px); - padding-left: calc(1rem - 1px); -} diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx deleted file mode 100644 index d04e77a78..000000000 --- a/components/product/Swatch/Swatch.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import cn from 'classnames' -import React from 'react' -import s from './Swatch.module.css' -import { Check } from '@components/icons' -import Button, { ButtonProps } from '@components/ui/Button' -import { isDark } from '@lib/colors' -interface SwatchProps { - active?: boolean - children?: any - className?: string - variant?: 'size' | 'color' | string - color?: string - label?: string | null -} - -const Swatch: React.FC & SwatchProps> = React.memo( - ({ - active, - className, - color = '', - label = null, - variant = 'size', - ...props - }) => { - variant = variant?.toLowerCase() - - if (label) { - label = label?.toLowerCase() - } - - const swatchClassName = cn( - s.swatch, - { - [s.color]: color, - [s.active]: active, - [s.size]: variant === 'size', - [s.dark]: color ? isDark(color) : false, - [s.textLabel]: !color && label && label.length > 3, - }, - className - ) - - return ( - - ) - } -) - -export default Swatch diff --git a/components/product/Swatch/index.ts b/components/product/Swatch/index.ts deleted file mode 100644 index c8a795498..000000000 --- a/components/product/Swatch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Swatch' diff --git a/components/product/helpers.ts b/components/product/helpers.ts deleted file mode 100644 index d3fbd5ef5..000000000 --- a/components/product/helpers.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Product } from '@commerce/types/product' -export type SelectedOptions = Record -import { Dispatch, SetStateAction } from 'react' - -export function getProductVariant(product: Product, opts: SelectedOptions) { - const variant = product.variants.find((variant) => { - return Object.entries(opts).every(([key, value]) => - variant.options.find((option) => { - if ( - option.__typename === 'MultipleChoiceOption' && - option.displayName.toLowerCase() === key.toLowerCase() - ) { - return option.values.find((v) => v.label.toLowerCase() === value) - } - }) - ) - }) - return variant -} - -export function selectDefaultOptionFromProduct( - product: Product, - updater: Dispatch> -) { - // Selects the default option - product.variants[0].options?.forEach((v) => { - updater((choices) => ({ - ...choices, - [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(), - })) - }) -} diff --git a/components/product/index.ts b/components/product/index.ts deleted file mode 100644 index 8b70f8e2e..000000000 --- a/components/product/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as Swatch } from './Swatch' -export { default as ProductView } from './ProductView' -export { default as ProductCard } from './ProductCard' -export { default as ProductSlider } from './ProductSlider' -export { default as ProductOptions } from './ProductOptions' diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css deleted file mode 100644 index 2ac7544f7..000000000 --- a/components/ui/Button/Button.module.css +++ /dev/null @@ -1,48 +0,0 @@ -.root { - @apply bg-accent-9 text-accent-0 cursor-pointer inline-flex - px-10 py-5 leading-6 transition ease-in-out duration-150 - shadow-sm text-center justify-center uppercase - border border-transparent items-center text-sm font-semibold - tracking-wide; - max-height: 64px; -} - -.root:hover { - @apply border-accent-9 bg-accent-6; -} - -.root:focus { - @apply shadow-outline-normal outline-none; -} - -.root[data-active] { - @apply bg-accent-6; -} - -.loading { - @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed; -} - -.slim { - @apply py-2 transform-none normal-case; -} - -.ghost { - @apply border border-accent-2 bg-accent-0 text-accent-9 text-sm; -} - -.ghost:hover { - @apply border-accent-9 bg-accent-9 text-accent-0; -} - -.disabled, -.disabled:hover { - @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed; - filter: grayscale(1); - -webkit-transform: translateZ(0); - -webkit-perspective: 1000; - -webkit-backface-visibility: hidden; -} - -.progress { -} diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx deleted file mode 100644 index b29fb432a..000000000 --- a/components/ui/Button/Button.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import cn from 'classnames' -import React, { - forwardRef, - ButtonHTMLAttributes, - JSXElementConstructor, - useRef, -} from 'react' -import mergeRefs from 'react-merge-refs' -import s from './Button.module.css' -import { LoadingDots } from '@components/ui' - -export interface ButtonProps extends ButtonHTMLAttributes { - href?: string - className?: string - variant?: 'flat' | 'slim' | 'ghost' - active?: boolean - type?: 'submit' | 'reset' | 'button' - Component?: string | JSXElementConstructor - width?: string | number - loading?: boolean - disabled?: boolean -} - -const Button: React.FC = forwardRef((props, buttonRef) => { - const { - className, - variant = 'flat', - children, - active, - width, - loading = false, - disabled = false, - style = {}, - Component = 'button', - ...rest - } = props - const ref = useRef(null) - - const rootClassName = cn( - s.root, - { - [s.ghost]: variant === 'ghost', - [s.slim]: variant === 'slim', - [s.loading]: loading, - [s.disabled]: disabled, - }, - className - ) - - return ( - - {children} - {loading && ( - - - - )} - - ) -}) - -export default Button diff --git a/components/ui/Button/index.ts b/components/ui/Button/index.ts deleted file mode 100644 index aa076c58e..000000000 --- a/components/ui/Button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Button' -export * from './Button' diff --git a/components/ui/Collapse/Collapse.module.css b/components/ui/Collapse/Collapse.module.css deleted file mode 100644 index fb4a82a90..000000000 --- a/components/ui/Collapse/Collapse.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.root { - @apply border-b border-accent-2 py-4 flex flex-col outline-none; -} - -.header { - @apply flex flex-row items-center; -} - -.header .label { - @apply text-base font-medium; -} - -.content { - @apply pt-3 overflow-hidden pl-8; -} - -.icon { - @apply mr-3 text-accent-6; - margin-left: -6px; - transition: transform 0.2s ease; -} - -.icon.open { - transform: rotate(90deg); -} diff --git a/components/ui/Collapse/Collapse.tsx b/components/ui/Collapse/Collapse.tsx deleted file mode 100644 index b2f9525ac..000000000 --- a/components/ui/Collapse/Collapse.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import cn from 'classnames' -import React, { FC, ReactNode, useState } from 'react' -import s from './Collapse.module.css' -import { ChevronRight } from '@components/icons' -import { useSpring, a } from '@react-spring/web' -import useMeasure from 'react-use-measure' - -export interface CollapseProps { - title: string - children: ReactNode -} - -const Collapse: FC = React.memo(({ title, children }) => { - const [isActive, setActive] = useState(false) - const [ref, { height: viewHeight }] = useMeasure() - - const animProps = useSpring({ - height: isActive ? viewHeight : 0, - config: { tension: 250, friction: 32, clamp: true, duration: 150 }, - opacity: isActive ? 1 : 0, - }) - - const toggle = () => setActive((x) => !x) - - return ( -
    -
    - - {title} -
    - -
    - {children} -
    -     -
    - ) -}) - -export default Collapse diff --git a/components/ui/Collapse/index.ts b/components/ui/Collapse/index.ts deleted file mode 100644 index 1e584a53b..000000000 --- a/components/ui/Collapse/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Collapse' -export * from './Collapse' diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx deleted file mode 100644 index 538b1cac7..000000000 --- a/components/ui/Container/Container.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import cn from 'classnames' -import React, { FC } from 'react' - -interface ContainerProps { - className?: string - children?: any - el?: HTMLElement - clean?: boolean -} - -const Container: FC = ({ - children, - className, - el = 'div', - clean, -}) => { - const rootClassName = cn(className, { - 'mx-auto max-w-8xl px-6': !clean, - }) - - let Component: React.ComponentType> = - el as any - - return {children} -} - -export default Container diff --git a/components/ui/Container/index.ts b/components/ui/Container/index.ts deleted file mode 100644 index 9dbd596a8..000000000 --- a/components/ui/Container/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Container' diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css deleted file mode 100644 index 27e4c5b19..000000000 --- a/components/ui/Grid/Grid.module.css +++ /dev/null @@ -1,154 +0,0 @@ -.root { - @apply grid grid-cols-1 gap-0; - - @screen lg { - @apply grid-cols-3 grid-rows-2; - } - - & > * { - @apply row-span-1 bg-transparent box-border overflow-hidden; - height: 500px; - max-height: 800px; - - @screen lg { - @apply col-span-1; - height: inherit; - } - } -} - -.default { - & > * { - @apply bg-transparent; - } -} - -.layoutNormal { - @apply gap-3; -} - -@screen md { - .layoutNormal > * { - max-height: min-content !important; - } -} - -@screen lg { - .layoutNormal > * { - max-height: 400px; - } -} - -.layoutA { - & > *:nth-child(6n + 1), - & > *:nth-child(6n + 5) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(6n + 1) { - @apply bg-violet; - } - - & > *:nth-child(6n + 2) { - @apply bg-accent-8; - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - - & > *:nth-child(6n + 6) { - @apply bg-cyan; - } - } -} - -.layoutB { - & > *:nth-child(6n + 2), - & > *:nth-child(6n + 4) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(6n + 1) { - @apply bg-violet; - } - - & > *:nth-child(6n + 2) { - @apply bg-accent-8; - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - - & > *:nth-child(6n + 6) { - @apply bg-cyan; - } - } -} - -.layoutC { - & > *:nth-child(12n + 1), - & > *:nth-child(12n + 8) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(12n + 1) { - @apply bg-violet; - height: var(--row-height); - } - - & > *:nth-child(12n + 8) { - @apply bg-cyan; - height: var(--row-height); - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - } -} - -.layoutD { - & > *:nth-child(12n + 2), - & > *:nth-child(12n + 7) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(12n + 2) { - @apply bg-violet; - } - - & > *:nth-child(12n + 7) { - @apply bg-cyan; - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - } -} diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx deleted file mode 100644 index 55ca78277..000000000 --- a/components/ui/Grid/Grid.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import cn from 'classnames' -import { FC, ReactNode, Component } from 'react' -import s from './Grid.module.css' - -interface GridProps { - className?: string - children?: ReactNode[] | Component[] | any[] - layout?: 'A' | 'B' | 'C' | 'D' | 'normal' - variant?: 'default' | 'filled' -} - -const Grid: FC = ({ - className, - layout = 'A', - children, - variant = 'default', -}) => { - const rootClassName = cn( - s.root, - { - [s.layoutA]: layout === 'A', - [s.layoutB]: layout === 'B', - [s.layoutC]: layout === 'C', - [s.layoutD]: layout === 'D', - [s.layoutNormal]: layout === 'normal', - [s.default]: variant === 'default', - [s.filled]: variant === 'filled', - }, - className - ) - return
    {children}
    -} - -export default Grid diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts deleted file mode 100644 index ddb51299b..000000000 --- a/components/ui/Grid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Grid' diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css deleted file mode 100644 index a0f1798f5..000000000 --- a/components/ui/Hero/Hero.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.root { - @apply flex flex-col py-16 mx-auto; -} - -.title { - @apply text-accent-0 font-extrabold text-4xl leading-none tracking-tight; -} - -.description { - @apply mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl; -} - -@screen lg { - .root { - @apply flex-row items-start justify-center py-32; - } - .title { - @apply text-5xl max-w-xl text-right leading-10 -mt-3; - line-height: 3.5rem; - } - .description { - @apply mt-0 ml-6; - } -} - -@screen xl { - .title { - @apply text-6xl; - } -} diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx deleted file mode 100644 index 58d13e5de..000000000 --- a/components/ui/Hero/Hero.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { FC } from 'react' -import { Container } from '@components/ui' -import { ArrowRight } from '@components/icons' -import s from './Hero.module.css' -import Link from 'next/link' -interface HeroProps { - className?: string - headline: string - description: string -} - -const Hero: FC = ({ headline, description }) => { - return ( -
    - -
    -

    {headline}

    -
    -

    {description}

    - - - Read it here - - - -
    -
    -     -
    - ) -} - -export default Hero diff --git a/components/ui/Hero/index.ts b/components/ui/Hero/index.ts deleted file mode 100644 index b08fa5ac8..000000000 --- a/components/ui/Hero/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Hero' diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css deleted file mode 100644 index 34507f445..000000000 --- a/components/ui/Input/Input.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accent-3 text-accent-6; -} - -.root:focus { - @apply outline-none shadow-outline-normal; -} diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx deleted file mode 100644 index e630728b2..000000000 --- a/components/ui/Input/Input.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import cn from 'classnames' -import s from './Input.module.css' -import React, { InputHTMLAttributes } from 'react' - -export interface InputProps extends InputHTMLAttributes { - className?: string - onChange?: (...args: any[]) => any -} - -const Input: React.FC = (props) => { - const { className, children, onChange, ...rest } = props - - const rootClassName = cn(s.root, {}, className) - - const handleOnChange = (e: any) => { - if (onChange) { - onChange(e.target.value) - } - return null - } - - return ( - - ) -} - -export default Input diff --git a/components/ui/Input/index.ts b/components/ui/Input/index.ts deleted file mode 100644 index aa97178e5..000000000 --- a/components/ui/Input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Input' diff --git a/components/ui/Link/Link.tsx b/components/ui/Link/Link.tsx deleted file mode 100644 index 27f30e863..000000000 --- a/components/ui/Link/Link.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import NextLink, { LinkProps as NextLinkProps } from 'next/link' - -const Link: React.FC = ({ href, children, ...props }) => { - return ( - - {children} - - ) -} - -export default Link diff --git a/components/ui/Link/index.ts b/components/ui/Link/index.ts deleted file mode 100644 index 518d37298..000000000 --- a/components/ui/Link/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Link' diff --git a/components/ui/LoadingDots/LoadingDots.module.css b/components/ui/LoadingDots/LoadingDots.module.css deleted file mode 100644 index 6054de3c7..000000000 --- a/components/ui/LoadingDots/LoadingDots.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.root { - @apply inline-flex text-center items-center leading-7; -} - -.root .dot { - @apply rounded-full h-2 w-2; - background-color: currentColor; - animation-name: blink; - animation-duration: 1.4s; - animation-iteration-count: infinite; - animation-fill-mode: both; - margin: 0 2px; -} - -.root .dot:nth-of-type(2) { - animation-delay: 0.2s; -} - -.root .dot::nth-of-type(3) { - animation-delay: 0.4s; -} - -@keyframes blink { - 0% { - opacity: 0.2; - } - 20% { - opacity: 1; - } - 100% { - opacity: 0.2; - } -} diff --git a/components/ui/LoadingDots/LoadingDots.tsx b/components/ui/LoadingDots/LoadingDots.tsx deleted file mode 100644 index 27ce9f25f..000000000 --- a/components/ui/LoadingDots/LoadingDots.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import s from './LoadingDots.module.css' - -const LoadingDots: React.FC = () => { - return ( - - - - - - ) -} - -export default LoadingDots diff --git a/components/ui/LoadingDots/index.ts b/components/ui/LoadingDots/index.ts deleted file mode 100644 index 63df282bf..000000000 --- a/components/ui/LoadingDots/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LoadingDots' diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx deleted file mode 100644 index f15bde40a..000000000 --- a/components/ui/Logo/Logo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Logo = ({ className = '', ...props }) => ( - - - - -) - -export default Logo diff --git a/components/ui/Logo/index.ts b/components/ui/Logo/index.ts deleted file mode 100644 index 93dce23b4..000000000 --- a/components/ui/Logo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Logo' diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css deleted file mode 100644 index e5ecb16ef..000000000 --- a/components/ui/Marquee/Marquee.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.root { - @apply w-full min-w-full relative flex flex-row items-center overflow-hidden py-0; - max-height: 320px; -} - -.root > div { - max-height: 320px; - padding: 0; - margin: 0; -} - -.root > div > * > *:nth-child(2) * { - max-height: 100%; -} - -.primary { - @apply bg-accent-0; -} - -.secondary { - @apply bg-accent-9; -} diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx deleted file mode 100644 index ce5ec2338..000000000 --- a/components/ui/Marquee/Marquee.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import cn from 'classnames' -import s from './Marquee.module.css' -import { FC, ReactNode, Component, Children } from 'react' -import { default as FastMarquee } from 'react-fast-marquee' - -interface MarqueeProps { - className?: string - children?: ReactNode[] | Component[] | any[] - variant?: 'primary' | 'secondary' -} - -const Marquee: FC = ({ - className = '', - children, - variant = 'primary', -}) => { - const rootClassName = cn( - s.root, - { - [s.primary]: variant === 'primary', - [s.secondary]: variant === 'secondary', - }, - className - ) - - return ( - - {Children.map(children, (child) => ({ - ...child, - props: { - ...child.props, - className: cn(child.props.className, `${variant}`), - }, - }))} - - ) -} - -export default Marquee diff --git a/components/ui/Marquee/index.ts b/components/ui/Marquee/index.ts deleted file mode 100644 index b59b75568..000000000 --- a/components/ui/Marquee/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Marquee' diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css deleted file mode 100644 index f30d7c90a..000000000 --- a/components/ui/Modal/Modal.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.root { - @apply fixed bg-black bg-opacity-40 flex items-center inset-0 z-50 justify-center; - backdrop-filter: blur(0.8px); - -webkit-backdrop-filter: blur(0.8px); -} - -.modal { - @apply bg-primary p-12 border border-accent-2 relative; -} - -.modal:focus { - @apply outline-none; -} - -.close { - @apply hover:text-accent-5 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6; -} diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx deleted file mode 100644 index bb42b3d1b..000000000 --- a/components/ui/Modal/Modal.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { FC, useRef, useEffect, useCallback } from 'react' -import s from './Modal.module.css' -import FocusTrap from '@lib/focus-trap' -import { Cross } from '@components/icons' -import { - disableBodyScroll, - clearAllBodyScrollLocks, - enableBodyScroll, -} from 'body-scroll-lock' -interface ModalProps { - className?: string - children?: any - onClose: () => void - onEnter?: () => void | null -} - -const Modal: FC = ({ children, onClose }) => { - const ref = useRef() as React.MutableRefObject - - const handleKey = useCallback( - (e: KeyboardEvent) => { - if (e.key === 'Escape') { - return onClose() - } - }, - [onClose] - ) - - useEffect(() => { - if (ref.current) { - disableBodyScroll(ref.current, { reserveScrollBarGap: true }) - window.addEventListener('keydown', handleKey) - } - return () => { - if (ref && ref.current) { - enableBodyScroll(ref.current) - } - clearAllBodyScrollLocks() - window.removeEventListener('keydown', handleKey) - } - }, [handleKey]) - - return ( -
    -
    - - {children} -
    -
    - ) -} - -export default Modal diff --git a/components/ui/Modal/index.ts b/components/ui/Modal/index.ts deleted file mode 100644 index e24753a1e..000000000 --- a/components/ui/Modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Modal' diff --git a/components/ui/Quantity/Quantity.module.css b/components/ui/Quantity/Quantity.module.css deleted file mode 100644 index fa60cc56e..000000000 --- a/components/ui/Quantity/Quantity.module.css +++ /dev/null @@ -1,27 +0,0 @@ -.actions { - @apply flex p-1 border-accent-2 border items-center justify-center - w-12 text-accent-7; - transition-property: border-color, background, color, transform, box-shadow; - - transition-duration: 0.15s; - transition-timing-function: ease; - user-select: none; -} - -.actions:hover { - @apply border bg-accent-1 border-accent-3 text-accent-9; - transition: border-color; - z-index: 10; -} - -.actions:focus { - @apply outline-none; -} - -.actions:disabled { - @apply cursor-not-allowed; -} - -.input { - @apply bg-transparent px-4 w-full h-full focus:outline-none select-none pointer-events-auto; -} diff --git a/components/ui/Quantity/Quantity.tsx b/components/ui/Quantity/Quantity.tsx deleted file mode 100644 index abde145aa..000000000 --- a/components/ui/Quantity/Quantity.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { FC } from 'react' -import s from './Quantity.module.css' -import { Cross, Plus, Minus } from '@components/icons' -import cn from 'classnames' -export interface QuantityProps { - value: number - increase: () => any - decrease: () => any - handleRemove: React.MouseEventHandler - handleChange: React.ChangeEventHandler - max?: number -} - -const Quantity: FC = ({ - value, - increase, - decrease, - handleChange, - handleRemove, - max = 6, -}) => { - return ( -
    - - - - -
    - ) -} - -export default Quantity diff --git a/components/ui/Quantity/index.ts b/components/ui/Quantity/index.ts deleted file mode 100644 index 5ee880cc9..000000000 --- a/components/ui/Quantity/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Quantity' -export * from './Quantity' diff --git a/components/ui/README.md b/components/ui/README.md deleted file mode 100644 index 5bf4fe510..000000000 --- a/components/ui/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# UI - -Building blocks to build a rich graphical interfaces. Components should be atomic and pure. Serve one purpose. diff --git a/components/ui/Rating/Rating.module.css b/components/ui/Rating/Rating.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/components/ui/Rating/Rating.tsx b/components/ui/Rating/Rating.tsx deleted file mode 100644 index 259e642ea..000000000 --- a/components/ui/Rating/Rating.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { FC } from 'react' -import rangeMap from '@lib/range-map' -import { Star } from '@components/icons' -import cn from 'classnames' - -export interface RatingProps { - value: number -} - -const Quantity: React.FC = React.memo(({ value = 5 }) => { - return ( -
    - {rangeMap(5, (i) => ( - = Math.floor(value), - })} - > - - - ))} -
    - ) -}) - -export default Quantity diff --git a/components/ui/Rating/index.ts b/components/ui/Rating/index.ts deleted file mode 100644 index 1354efb25..000000000 --- a/components/ui/Rating/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Rating' -export * from './Rating' diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css deleted file mode 100644 index f6a49387f..000000000 --- a/components/ui/Sidebar/Sidebar.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.root { - @apply fixed inset-0 h-full z-50 box-border; -} - -.sidebar { - @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto overflow-x-hidden; - -webkit-overflow-scrolling: touch !important; -} - -.backdrop { - @apply absolute inset-0 bg-black bg-opacity-40 duration-100 ease-linear; - backdrop-filter: blur(0.8px); - -webkit-backdrop-filter: blur(0.8px); -} diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx deleted file mode 100644 index ce0eeefe2..000000000 --- a/components/ui/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FC, useEffect, useRef } from 'react' -import s from './Sidebar.module.css' -import cn from 'classnames' -import { - disableBodyScroll, - enableBodyScroll, - clearAllBodyScrollLocks, -} from 'body-scroll-lock' - -interface SidebarProps { - children: any - onClose: () => void -} - -const Sidebar: FC = ({ children, onClose }) => { - const ref = useRef() as React.MutableRefObject - - useEffect(() => { - if (ref.current) { - disableBodyScroll(ref.current, { reserveScrollBarGap: true }) - } - return () => { - if (ref && ref.current) { - enableBodyScroll(ref.current) - } - clearAllBodyScrollLocks() - } - }, []) - - return ( -
    -
    -
    -
    -
    -
    - {children} -
    -
    -
    -
    -
    - ) -} - -export default Sidebar diff --git a/components/ui/Sidebar/index.ts b/components/ui/Sidebar/index.ts deleted file mode 100644 index 877187ca3..000000000 --- a/components/ui/Sidebar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Sidebar' diff --git a/components/ui/Skeleton/Skeleton.module.css b/components/ui/Skeleton/Skeleton.module.css deleted file mode 100644 index 37c164de7..000000000 --- a/components/ui/Skeleton/Skeleton.module.css +++ /dev/null @@ -1,48 +0,0 @@ -.skeleton { - @apply block; - background-image: linear-gradient( - 270deg, - var(--accent-0), - var(--accent-2), - var(--accent-0), - var(--accent-1) - ); - background-size: 400% 100%; - animation: loading 8s ease-in-out infinite; -} - -.wrapper { - @apply block relative; - - &:not(.show)::before { - content: none; - } - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 100; - background-image: linear-gradient( - 270deg, - var(--accent-0), - var(--accent-2), - var(--accent-0), - var(--accent-1) - ); - background-size: 400% 100%; - animation: loading 8s ease-in-out infinite; - } -} - -@keyframes loading { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} diff --git a/components/ui/Skeleton/Skeleton.tsx b/components/ui/Skeleton/Skeleton.tsx deleted file mode 100644 index 9cef2c1ac..000000000 --- a/components/ui/Skeleton/Skeleton.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { CSSProperties } from 'react' -import cn from 'classnames' -import px from '@lib/to-pixels' -import s from './Skeleton.module.css' - -interface SkeletonProps { - show?: boolean - block?: boolean - className?: string - style?: CSSProperties - width?: string | number - height?: string | number - boxHeight?: string | number -} - -const Skeleton: React.FC = ({ - style, - width, - height, - children, - className, - show = true, - boxHeight = height, -}) => { - // Automatically calculate the size if there are children - // and no fixed sizes are specified - const shouldAutoSize = !!children && !(width || height) - - // Defaults - width = width || 24 - height = height || 24 - boxHeight = boxHeight || height - - return ( - - {children} - - ) -} - -export default Skeleton diff --git a/components/ui/Skeleton/index.ts b/components/ui/Skeleton/index.ts deleted file mode 100644 index 3ec6c0031..000000000 --- a/components/ui/Skeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Skeleton' diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css deleted file mode 100644 index f572fdf18..000000000 --- a/components/ui/Text/Text.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.body { - @apply text-base leading-7 max-w-6xl mx-auto; -} - -.heading { - @apply text-5xl pt-1 pb-2 font-semibold tracking-wide cursor-pointer mb-2; -} - -.pageHeading { - @apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide; -} - -.sectionHeading { - @apply pt-1 pb-2 text-2xl font-bold tracking-wide cursor-pointer mb-2; -} diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx deleted file mode 100644 index 6106c209a..000000000 --- a/components/ui/Text/Text.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { - FunctionComponent, - JSXElementConstructor, - CSSProperties, -} from 'react' -import cn from 'classnames' -import s from './Text.module.css' - -interface TextProps { - variant?: Variant - className?: string - style?: CSSProperties - children?: React.ReactNode | any - html?: string - onClick?: () => any -} - -type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' - -const Text: FunctionComponent = ({ - style, - className = '', - variant = 'body', - children, - html, - onClick, -}) => { - const componentsMap: { - [P in Variant]: React.ComponentType | string - } = { - body: 'div', - heading: 'h1', - pageHeading: 'h1', - sectionHeading: 'h2', - } - - const Component: - | JSXElementConstructor - | React.ReactElement - | React.ComponentType - | string = componentsMap![variant!] - - const htmlContentProps = html - ? { - dangerouslySetInnerHTML: { __html: html }, - } - : {} - - return ( - - {children} - - ) -} - -export default Text diff --git a/components/ui/Text/index.ts b/components/ui/Text/index.ts deleted file mode 100644 index e1e5fa74e..000000000 --- a/components/ui/Text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Text' diff --git a/components/ui/context.tsx b/components/ui/context.tsx deleted file mode 100644 index d2f5aebfd..000000000 --- a/components/ui/context.tsx +++ /dev/null @@ -1,216 +0,0 @@ -import React, { FC, useCallback, useMemo } from 'react' -import { ThemeProvider } from 'next-themes' - -export interface State { - displaySidebar: boolean - displayDropdown: boolean - displayModal: boolean - sidebarView: string - modalView: string - userAvatar: string -} - -const initialState = { - displaySidebar: false, - displayDropdown: false, - displayModal: false, - modalView: 'LOGIN_VIEW', - sidebarView: 'CHECKOUT_VIEW', - userAvatar: '', -} - -type Action = - | { - type: 'OPEN_SIDEBAR' - } - | { - type: 'CLOSE_SIDEBAR' - } - | { - type: 'OPEN_DROPDOWN' - } - | { - type: 'CLOSE_DROPDOWN' - } - | { - type: 'OPEN_MODAL' - } - | { - type: 'CLOSE_MODAL' - } - | { - type: 'SET_MODAL_VIEW' - view: MODAL_VIEWS - } - | { - type: 'SET_SIDEBAR_VIEW' - view: SIDEBAR_VIEWS - } - | { - type: 'SET_USER_AVATAR' - value: string - } - -type MODAL_VIEWS = - | 'SIGNUP_VIEW' - | 'LOGIN_VIEW' - | 'FORGOT_VIEW' - | 'NEW_SHIPPING_ADDRESS' - | 'NEW_PAYMENT_METHOD' - -type SIDEBAR_VIEWS = 'CART_VIEW' | 'CHECKOUT_VIEW' | 'PAYMENT_METHOD_VIEW' - -export const UIContext = React.createContext(initialState) - -UIContext.displayName = 'UIContext' - -function uiReducer(state: State, action: Action) { - switch (action.type) { - case 'OPEN_SIDEBAR': { - return { - ...state, - displaySidebar: true, - } - } - case 'CLOSE_SIDEBAR': { - return { - ...state, - displaySidebar: false, - } - } - case 'OPEN_DROPDOWN': { - return { - ...state, - displayDropdown: true, - } - } - case 'CLOSE_DROPDOWN': { - return { - ...state, - displayDropdown: false, - } - } - case 'OPEN_MODAL': { - return { - ...state, - displayModal: true, - displaySidebar: false, - } - } - case 'CLOSE_MODAL': { - return { - ...state, - displayModal: false, - } - } - case 'SET_MODAL_VIEW': { - return { - ...state, - modalView: action.view, - } - } - case 'SET_SIDEBAR_VIEW': { - return { - ...state, - sidebarView: action.view, - } - } - case 'SET_USER_AVATAR': { - return { - ...state, - userAvatar: action.value, - } - } - } -} - -export const UIProvider: FC = (props) => { - const [state, dispatch] = React.useReducer(uiReducer, initialState) - - const openSidebar = useCallback( - () => dispatch({ type: 'OPEN_SIDEBAR' }), - [dispatch] - ) - const closeSidebar = useCallback( - () => dispatch({ type: 'CLOSE_SIDEBAR' }), - [dispatch] - ) - const toggleSidebar = useCallback( - () => - state.displaySidebar - ? dispatch({ type: 'CLOSE_SIDEBAR' }) - : dispatch({ type: 'OPEN_SIDEBAR' }), - [dispatch, state.displaySidebar] - ) - const closeSidebarIfPresent = useCallback( - () => state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' }), - [dispatch, state.displaySidebar] - ) - - const openDropdown = useCallback( - () => dispatch({ type: 'OPEN_DROPDOWN' }), - [dispatch] - ) - const closeDropdown = useCallback( - () => dispatch({ type: 'CLOSE_DROPDOWN' }), - [dispatch] - ) - - const openModal = useCallback( - () => dispatch({ type: 'OPEN_MODAL' }), - [dispatch] - ) - const closeModal = useCallback( - () => dispatch({ type: 'CLOSE_MODAL' }), - [dispatch] - ) - - const setUserAvatar = useCallback( - (value: string) => dispatch({ type: 'SET_USER_AVATAR', value }), - [dispatch] - ) - - const setModalView = useCallback( - (view: MODAL_VIEWS) => dispatch({ type: 'SET_MODAL_VIEW', view }), - [dispatch] - ) - - const setSidebarView = useCallback( - (view: SIDEBAR_VIEWS) => dispatch({ type: 'SET_SIDEBAR_VIEW', view }), - [dispatch] - ) - - const value = useMemo( - () => ({ - ...state, - openSidebar, - closeSidebar, - toggleSidebar, - closeSidebarIfPresent, - openDropdown, - closeDropdown, - openModal, - closeModal, - setModalView, - setSidebarView, - setUserAvatar, - }), - [state] - ) - - return -} - -export const useUI = () => { - const context = React.useContext(UIContext) - if (context === undefined) { - throw new Error(`useUI must be used within a UIProvider`) - } - return context -} - -export const ManagedUIContext: FC = ({ children }) => ( - - {children} - -) diff --git a/components/ui/index.ts b/components/ui/index.ts deleted file mode 100644 index 47bdbd9ff..000000000 --- a/components/ui/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -export { default as Hero } from './Hero' -export { default as Logo } from './Logo' -export { default as Grid } from './Grid' -export { default as Button } from './Button' -export { default as Sidebar } from './Sidebar' -export { default as Marquee } from './Marquee' -export { default as Container } from './Container' -export { default as LoadingDots } from './LoadingDots' -export { default as Skeleton } from './Skeleton' -export { default as Modal } from './Modal' -export { default as Text } from './Text' -export { default as Input } from './Input' -export { default as Collapse } from './Collapse' -export { default as Quantity } from './Quantity' -export { default as Rating } from './Rating' -export { useUI } from './context' diff --git a/components/wishlist/WishlistButton/WishlistButton.module.css b/components/wishlist/WishlistButton/WishlistButton.module.css deleted file mode 100644 index 3bdf1e710..000000000 --- a/components/wishlist/WishlistButton/WishlistButton.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.root { - transition-duration: 0.2s; - transition-timing-function: ease; - transition-property: color, background-color, opacity; - @apply p-3 text-accent-9 flex items-center - justify-center font-semibold cursor-pointer - bg-accent-0 text-sm; -} - -.root:focus { - @apply outline-none; -} - -.icon { - transition-duration: 0.2s; - transition-timing-function: ease; - transition-property: transform, fill; - color: currentColor; -} - -.icon.loading { - fill: var(--pink-light); -} - -.icon.inWishlist { - fill: var(--pink); -} - -@screen lg { - .root { - @apply p-4; - } -} diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx deleted file mode 100644 index a48eac170..000000000 --- a/components/wishlist/WishlistButton/WishlistButton.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { FC, useState } from 'react' -import cn from 'classnames' -import { useUI } from '@components/ui' -import { Heart } from '@components/icons' -import useAddItem from '@framework/wishlist/use-add-item' -import useCustomer from '@framework/customer/use-customer' -import useWishlist from '@framework/wishlist/use-wishlist' -import useRemoveItem from '@framework/wishlist/use-remove-item' -import s from './WishlistButton.module.css' -import type { Product, ProductVariant } from '@commerce/types/product' - -type Props = { - productId: Product['id'] - variant: ProductVariant -} & React.ButtonHTMLAttributes - -const WishlistButton: FC = ({ - productId, - variant, - className, - ...props -}) => { - const { data } = useWishlist() - const addItem = useAddItem() - const removeItem = useRemoveItem() - const { data: customer } = useCustomer() - const { openModal, setModalView } = useUI() - const [loading, setLoading] = useState(false) - - // @ts-ignore Wishlist is not always enabled - const itemInWishlist = data?.items?.find( - // @ts-ignore Wishlist is not always enabled - (item) => - item.product_id === Number(productId) && - (item.variant_id as any) === Number(variant.id) - ) - - const handleWishlistChange = async (e: any) => { - e.preventDefault() - - if (loading) return - - // A login is required before adding an item to the wishlist - if (!customer) { - setModalView('LOGIN_VIEW') - return openModal() - } - - setLoading(true) - - try { - if (itemInWishlist) { - await removeItem({ id: itemInWishlist.id! }) - } else { - await addItem({ - productId, - variantId: variant?.id!, - }) - } - - setLoading(false) - } catch (err) { - setLoading(false) - } - } - - return ( - - ) -} - -export default WishlistButton diff --git a/components/wishlist/WishlistButton/index.ts b/components/wishlist/WishlistButton/index.ts deleted file mode 100644 index 66e88074b..000000000 --- a/components/wishlist/WishlistButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './WishlistButton' diff --git a/components/wishlist/index.ts b/components/wishlist/index.ts deleted file mode 100644 index 9fe0a3541..000000000 --- a/components/wishlist/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WishlistButton } from './WishlistButton' diff --git a/next.config.js b/next.config.js index 515b2ae7c..d3ad64f4a 100644 --- a/next.config.js +++ b/next.config.js @@ -13,6 +13,10 @@ const isVendure = provider === 'vendure' module.exports = withCommerceConfig({ commerce, + images: { + // todo: replace domains for images + domains: ['user-images.githubusercontent.com'], + }, i18n: { locales: ['en-US', 'es'], defaultLocale: 'en-US', diff --git a/pages/404.tsx b/pages/404.tsx index 7fb30b9de..8a357fb51 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,4 +1,5 @@ -import { Layout } from '@components/common' +import { Layout } from "src/components/common" + export default function NotFound() { return (
    diff --git a/pages/demo.tsx b/pages/demo.tsx index f23c10583..38f91037c 100644 --- a/pages/demo.tsx +++ b/pages/demo.tsx @@ -1,16 +1,12 @@ -import { Layout, RecipeDetail } from 'src/components/common'; -import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail'; -import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'; +import { Layout } from 'src/components/common'; export default function Demo() { return <> - - - - - + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam. } diff --git a/pages/index.tsx b/pages/index.tsx index daabf0cf1..7d23ebadd 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,33 +1,17 @@ import { Layout } from 'src/components/common'; import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; -import {SelectCommon} from 'src/components/common' - -const OPTION_SORT = [ - { - name: "By Name" - }, - { - name: "Price (High to Low)" - }, - { - name: "On Sale" - } -] export default function Home() { return ( <> - {/* - + - */} - Sort By - Sort By + {/* // todo: uncomment */} {/* */} diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss index da306f38f..ef2671947 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.module.scss +++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss @@ -8,6 +8,7 @@ :global(.customArrow) { width: 64px; height: 64px; + border-radius: .8rem; &:focus { outline: none; } diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss new file mode 100644 index 000000000..126028d3c --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.module.scss @@ -0,0 +1,12 @@ +@import '../../../styles/utilities'; + + +.cartDrawer { + @apply flex flex-col h-full; + .body { + @apply overflow-y-auto overflow-x-hidden h-full custom-scroll; + } + .bottom { + padding-top: 1.6rem; + } +} \ No newline at end of file diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx new file mode 100644 index 000000000..0a432bb65 --- /dev/null +++ b/src/components/common/CartDrawer/CartDrawer.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; +import { DrawerCommon } from '..'; +import s from './CartDrawer.module.scss'; +import CartCheckoutButton from './components/CartCheckoutButton/CartCheckoutButton'; +import CartMessage from './components/CartMessage/CartMessage'; +import CartRecommendation from './components/CartRecommendation/CartRecommendation'; +import ProductsInCart from './components/ProductsInCart/ProductsInCart'; + +interface Props { + visible: boolean + onClose: () => void +} + +const CartDrawer = ({ visible, onClose }: Props) => { + return ( + +
    +
    + + +
    +
    + + +
    +
    +     + ) +} + +export default CartDrawer; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss new file mode 100644 index 000000000..3f90bffbd --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss @@ -0,0 +1,6 @@ +.cartCheckoutButton { + padding: 1.6rem; + button { + width: 100%; + } +} diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx new file mode 100644 index 000000000..0cd7d00a2 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx @@ -0,0 +1,13 @@ +import React, { memo } from 'react'; +import { ButtonCommon } from 'src/components/common'; +import s from './CartCheckoutButton.module.scss'; + +const CartCheckoutButton = memo(() => { + return ( +
    + Check out - Rp 120.500 +
    + ) +}) + +export default CartCheckoutButton; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss new file mode 100644 index 000000000..59d8e8ddc --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss @@ -0,0 +1,16 @@ +@import "../../../../../styles/utilities"; + +.cartMessage { + @apply flex bg-info; + padding: 1.2rem 1.6rem; + .text { + color: var(--white); + font-weight: bold; + margin-right: 0.8rem; + } + .icon { + svg path { + fill: var(--text-placeholder); + } + } +} diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx new file mode 100644 index 000000000..2cc85fb49 --- /dev/null +++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx @@ -0,0 +1,18 @@ +import React, { memo } from 'react'; +import { IconInfo } from 'src/components/icons'; +import s from './CartMessage.module.scss'; + +const CartMessage = memo(() => { + return ( +
    +
    + You save - Rp 150 +
    +
    + +
    +
    + ) +}) + +export default CartMessage; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss new file mode 100644 index 000000000..88664460c --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss @@ -0,0 +1,26 @@ +@import '../../../../../styles/utilities'; + +.cartRecommendation { + @apply w-full bg-background-gray; + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply font-bold text-active sm-headline; + } + } + .productCardWarpper { + padding-left: 1.6rem; + :global(.customArrow) { + @apply bg-line; + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx new file mode 100644 index 000000000..bbc40647e --- /dev/null +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx @@ -0,0 +1,43 @@ +import { TOptionsEvents } from 'keen-slider'; +import React from 'react'; +import { CarouselCommon, ViewAllItem } from 'src/components/common'; +import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'; +import s from './CartRecommendation.module.scss'; + +const option: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1, + }, + '(min-width: 768px)': { + slidesPerView: 2.5, + } + }, +} + +const CartRecommendation = () => { + return ( +
    +
    +
    + Recommendation +
    + +
    +
    + + data={PRODUCT_DATA_TEST} + Component={ProductCard} + itemKey="cart-recommendation" + option={option} + /> +
    +
    + ) +} + +export default CartRecommendation; diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss new file mode 100644 index 000000000..4988d4a66 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss @@ -0,0 +1,54 @@ +@import "../../../../../styles/utilities"; + +.productCartItem { + @apply grid; + grid-template-columns: 2fr 1fr; + padding-bottom: 1.6rem; + padding-top: 1.6rem; + .info { + @apply flex; + .imgWrap { + width: 11rem; + height: 7.5rem; + margin-right: 1.6rem; + img { + object-fit: contain; + } + } + .detail { + min-height: 9rem; + .name { + &:hover { + color: var(--primary); + } + } + .price { + margin-top: 0.8rem; + .old { + margin-bottom: 0.8rem; + .number { + margin-right: 0.8rem; + color: var(--text-label); + text-decoration: line-through; + } + } + .current { + @apply text-active font-bold sm-headline; + } + } + } + } + + .actions { + @apply flex flex-col justify-between items-end; + margin-left: 1.6rem; + .iconDelete { + @apply cursor-pointer; + &:hover { + svg path { + fill: var(--negative); + } + } + } + } +} diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx new file mode 100644 index 000000000..7ec3ecbdb --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import Link from 'next/link' +import { QuanittyInput } from 'src/components/common'; +import { IconDelete } from 'src/components/icons'; +import { ROUTE } from 'src/utils/constanst.utils'; +import { ProductProps } from 'src/utils/types.utils'; +import ImgWithLink from '../../../ImgWithLink/ImgWithLink'; +import LabelCommon from '../../../LabelCommon/LabelCommon'; +import s from './ProductCartItem.module.scss'; + +export interface ProductCartItempProps extends ProductProps { + quantity: number, +} + +const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => { + return ( +
    +
    + + +
    + +
    +     + +
    + + +
    + {name} {weight ? `(${weight})` : ''} +
    +     + +
    + { + oldPrice && +
    + {oldPrice} + {discount} +
    + } +
    {price}
    +
    +
    +
    +
    +
    + +
    + +
    +
    + ) +} + +export default ProductCartItem; \ No newline at end of file diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss new file mode 100644 index 000000000..61ef7421e --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss @@ -0,0 +1,9 @@ +.productsInCart { + padding: 1.6rem 1.6rem 0 1.6rem; + list-style: none; + li { + &:not(:last-child) { + border-bottom: 1px solid var(--border-line); + } + } +} diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx new file mode 100644 index 000000000..b455d4d73 --- /dev/null +++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem'; +import s from './ProductsInCart.module.scss'; + +interface Props { + data: ProductCartItempProps[] +} + +const ProductsInCart = ({ data }: Props) => { + return ( +
      + { + data.map(item =>
    • + +
      • ) + } +
    + ) +} + +export default ProductsInCart; \ No newline at end of file diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss new file mode 100644 index 000000000..3253eac50 --- /dev/null +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -0,0 +1,52 @@ +@import "../../../styles/utilities"; + +.drawerCommon { + @apply fixed flex justify-end transition-all duration-200; + overflow: hidden; + top: 0; + right: 0; + height: 100vh; + width: 90%; + box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15); + z-index: 20000; + + .inner { + @apply flex flex-col bg-white; + width: fit-content; + height: 100vh; + width: 100%; + margin-right: 0; + @screen md { + max-width: 55rem; + } + .top { + @apply flex justify-between items-center; + padding: 1.6rem; + .heading { + @apply sm-headline; + } + .iconClose { + @apply cursor-pointer transition-all duration-200; + &:hover { + svg path { + fill: var(--primary); + } + } + } + } + } + .content { + overflow-y: auto; + height: 100%; + } + &.hide { + transform: translateX(110%); + } + + @screen md { + width: unset; + .inner { + min-width: 48rem; + } + } +} diff --git a/src/components/common/DrawerCommon/DrawerCommon.tsx b/src/components/common/DrawerCommon/DrawerCommon.tsx new file mode 100644 index 000000000..deb1af3eb --- /dev/null +++ b/src/components/common/DrawerCommon/DrawerCommon.tsx @@ -0,0 +1,36 @@ +import React, { useRef } from 'react'; +import s from './DrawerCommon.module.scss'; +import classNames from 'classnames'; +import { IconClose } from 'src/components/icons'; + +interface Props { + visible: boolean + title?: string + children?: React.ReactNode + onClose: () => void +} + +const DrawerCommon = ({ title, visible, children, onClose }: Props) => { + return ( +
    +
    +
    +

    + {title} +

    +
    + +
    +
    +
    + {children} +
    +
    +
    + ) +} + +export default DrawerCommon; \ No newline at end of file diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss index a61c059e6..2832211c1 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss @@ -52,7 +52,10 @@ } a { @appy no-underline; - &.iconFovourite { + &:hover { + opacity: .8; + } + &.iconFavourite { svg path { fill: var(--negative); } diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index 969964608..aa962605d 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -5,6 +5,7 @@ import InputSearch from 'src/components/common/InputSearch/InputSearch' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +import Logo from '../../../Logo/Logo' import s from './HeaderMenu.module.scss' interface Props { @@ -39,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
    -
    Online Grocery
    + @@ -51,14 +52,14 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
    • - +
    • - + diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss index b1587bfa6..413f96cdb 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.module.scss +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -1,4 +1,9 @@ .imgWithLink { - @apply w-full h-full; - object-fit: cover; + position: relative; + min-width: 5rem; + width: 100%; + height: 100%; + img { + object-fit: cover; + } } diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx index 43ac1caa6..092322085 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.tsx +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -1,5 +1,6 @@ import React from 'react' import s from './ImgWithLink.module.scss' +import Image from 'next/image' export interface ImgWithLinkProps { src: string, @@ -8,8 +9,9 @@ export interface ImgWithLinkProps { const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { return ( - {alt} - +
      + {alt} +
      ) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index aa5da11e1..17f520185 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,6 +1,8 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' +import { useModalCommon } from 'src/components/hooks' +import { CartDrawer } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -13,12 +15,24 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() + const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false }) + const toggle = () => { + if (visibleCartDrawer) { + closeCartDrawer() + } else { + openModal() + } + } return (
      {children}
      + +
      diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss index d2443dccc..ddd8ed901 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss @@ -11,7 +11,7 @@ padding-top: 5.6rem; padding-bottom: 5.6rem; border: none; - background-color: #f5f4f2; + background-color: var(--background-gray); } .productsWrap { @apply spacing-horizontal-left; diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 2660c4880..da6bfc49f 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -1,7 +1,7 @@ -@import '../../../styles/utilities'; +@import "../../../styles/utilities"; .logo { - display: flex; + @apply flex justify-center items-center; .eclipse { width: 3.2rem; height: 3.2rem; @@ -10,9 +10,9 @@ margin-right: 1.2rem; } .content { - @apply font-logo; + @apply font-logo font-bold; font-size: 16px; line-height: 32px; letter-spacing: -0.02em; } -} \ No newline at end of file +} diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 96d1820e0..58a0ea5de 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -1,14 +1,18 @@ import s from './Logo.module.scss' +import Link from 'next/link' +import { ROUTE } from 'src/utils/constanst.utils' const Logo = () => { - return( -
      -
      -
      -
      - ONLINE GROCERY -
      -
      + return ( + + +
      +
      +
      + ONLINE GROCERY +
      +       + ) } diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss index 8fc270b2a..ae5b76c3d 100644 --- a/src/components/common/MenuDropdown/MenuDropdown.module.scss +++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss @@ -3,6 +3,9 @@ .menuDropdown { @apply relative cursor-pointer; width: fit-content; + .label { + all: unset; + } &:hover { .label { color: var(--primary); @@ -65,6 +68,16 @@ margin-top: 0.4rem; li { @apply block w-full transition-all duration-200 cursor-pointer text-active; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + overflow-x: hidden; + position: relative; + max-width: 15rem; + white-space: nowrap; + text-overflow: ellipsis; button { all: unset; color: currentColor; diff --git a/src/components/common/MenuDropdown/MenuDropdown.tsx b/src/components/common/MenuDropdown/MenuDropdown.tsx index bd3f0c851..ca25f22f8 100644 --- a/src/components/common/MenuDropdown/MenuDropdown.tsx +++ b/src/components/common/MenuDropdown/MenuDropdown.tsx @@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) => [s.menuDropdown]: true, [s.arrow]: isHasArrow, })}> - +
      , @@ -64,7 +64,7 @@ const QuanittyInput = ({ return (
      - +
      - +
      ) diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 77b875765..6fe49c9b1 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -33,3 +33,5 @@ export { default as ModalInfo} from "./ModalInfo/ModalInfo" export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' +export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' +export { default as CartDrawer} from './CartDrawer/CartDrawer' diff --git a/src/components/icons/IconClose.tsx b/src/components/icons/IconClose.tsx new file mode 100644 index 000000000..018ee8cd6 --- /dev/null +++ b/src/components/icons/IconClose.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +const IconClose = () => { + return ( + + + + ) +} + +export default IconClose diff --git a/src/components/icons/IconDelete.tsx b/src/components/icons/IconDelete.tsx new file mode 100644 index 000000000..4daff3f80 --- /dev/null +++ b/src/components/icons/IconDelete.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconDelete = () => { + return ( + + + + ) +} + +export default IconDelete diff --git a/src/components/icons/Minus.tsx b/src/components/icons/IconMinus.tsx similarity index 94% rename from src/components/icons/Minus.tsx rename to src/components/icons/IconMinus.tsx index 7c3b97d30..abf3a2907 100644 --- a/src/components/icons/Minus.tsx +++ b/src/components/icons/IconMinus.tsx @@ -1,4 +1,4 @@ -const ArrowRight = ({ ...props }) => { +const IconMinus = ({ ...props }) => { return ( { ) } -export default ArrowRight +export default IconMinus diff --git a/src/components/icons/Plus.tsx b/src/components/icons/IconPlus.tsx similarity index 91% rename from src/components/icons/Plus.tsx rename to src/components/icons/IconPlus.tsx index c8b2fcca3..63d6d2dd4 100644 --- a/src/components/icons/Plus.tsx +++ b/src/components/icons/IconPlus.tsx @@ -1,4 +1,4 @@ -const ArrowLeft = ({ ...props }) => { +const IconPlus = ({ ...props }) => { return ( { ) } -export default ArrowLeft +export default IconPlus diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 1cdb56079..d773a0b03 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -23,3 +23,7 @@ export { default as IconCheck } from './IconCheck' export { default as IconTime } from './IconTime' export { default as IconPeople } from './IconPeople' export { default as IconLocation } from './IconLocation' +export { default as IconClose } from './IconClose' +export { default as IconDelete } from './IconDelete' +export { default as IconPlus } from './IconPlus' +export { default as IconMinus } from './IconMinus' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index e90a6434f..e8719581f 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -6,7 +6,7 @@ --primary-lightest: #effaf4; --info-dark: #00317a; - --info: #297fff; + --info: #3468B7; --info-border-line: #d6e7ff; --info-light: #ebf3ff; @@ -33,6 +33,7 @@ --disabled: #cccccc; --border-line: #ebebeb; --background: #fff; + --background-gray: #F5F4F2; --gray: #f8f8f8; --white: #fff; --background-arrow:rgba(20, 20, 20, 0.05); diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 56f9494ec..cc13ea3cf 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -120,6 +120,25 @@ font-family: var(--font-logo); } + .custom-scroll { + overflow-y: auto; + &::-webkit-scrollbar-track { + background-color: var(--background-gray); + border-radius: 10px; + } + + &::-webkit-scrollbar { + border-radius: 10px; + width: 6px; + background-color: var(--background-gray); + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: var(--primary) + } + } + .u-form { .body { > div { diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index c732f6ed6..f680fa39c 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -8,6 +8,7 @@ export const SOCIAL_LINKS = { export const ROUTE = { HOME: '/', PRODUCTS: '/products', + PRODUCT_DETAIL: '/product', ABOUT: '/about', ACCOUNT: '/account', RECIPES: '/recipes', diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts index b22668e15..64c8128ae 100644 --- a/src/utils/demo-data.ts +++ b/src/utils/demo-data.ts @@ -3,6 +3,7 @@ import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard" export const PRODUCT_DATA_TEST = [ { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -10,6 +11,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -17,6 +19,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Carrot', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -24,6 +27,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Salad', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -31,6 +35,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -38,6 +43,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -45,6 +51,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -52,6 +59,7 @@ export const PRODUCT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -59,9 +67,55 @@ export const PRODUCT_DATA_TEST = [ }, ] +export const PRODUCT_CART_DATA_TEST = [ + { + name: 'Tomato', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + oldPrice: 'Rp 32.000', + discount: '15%', + quantity: 1, + }, + { + name: 'Cucumber', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png", + oldPrice: 'Rp 32.000', + discount: '15%', + quantity: 2, + }, + { + name: 'Carrot', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png", + oldPrice: 'Rp 32.000', + discount: '20%', + quantity: 3, + }, + { + name: 'Salad', + slug: 'tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png", + quantity: 1, + }, +] + export const INGREDIENT_DATA_TEST = [ { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -69,6 +123,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -77,6 +132,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Carrot', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -84,6 +140,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Salad', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -92,6 +149,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -99,6 +157,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -106,6 +165,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Tomato', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', @@ -113,6 +173,7 @@ export const INGREDIENT_DATA_TEST = [ }, { name: 'Cucumber', + slug: 'tomato', weight: '250g', category: 'VEGGIE', price: 'Rp 27.500', diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 3d2383495..c87305f2b 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -1,8 +1,11 @@ export interface ProductProps { - category: string + category?: string name: string + slug: string weight: string price: string + oldPrice?: string + discount?: string imageSrc: string isNotSell?: boolean } @@ -17,7 +20,7 @@ export interface FeaturedProductProps { export interface RecipeProps { title: string - description:string + description: string imageSrc: string } diff --git a/tailwind.config.js b/tailwind.config.js index 894a7ab6e..69ab1ade5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -47,6 +47,7 @@ module.exports = { 'line': 'var(--border-line)', 'background': 'var(--background)', + 'background-gray': 'var(--background-gray)', 'white': 'var(--white)', 'background-arrow': 'var(--background-arrow)',