From 616e9292cd1db6bbc0cd28208e5403dd667152b9 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 27 Sep 2023 14:05:15 +0700 Subject: Update with chakra UI theme --- chakra.theme.js | 10 ++ package.json | 8 +- src/lib/checkout/components/CheckoutOld.jsx | 1 - src/lib/product/components/Product/ColumnsSLA.jsx | 89 ++++------- .../product/components/Product/ProductDesktop.jsx | 98 +++++------- .../components/Product/ProductDesktopVariant.jsx | 88 ++++------- .../product/components/Product/ProductMobile.jsx | 1 - .../components/Product/ProductMobileVariant.jsx | 11 +- .../product/components/ProductFilterDesktop.jsx | 165 ++++++++++++--------- src/lib/product/components/ProductSearch.jsx | 8 +- src/pages/_app.jsx | 14 +- src/styles/globals.css | 2 + tailwind.config.js | 92 ++++++------ 13 files changed, 269 insertions(+), 318 deletions(-) create mode 100644 chakra.theme.js diff --git a/chakra.theme.js b/chakra.theme.js new file mode 100644 index 00000000..f379db20 --- /dev/null +++ b/chakra.theme.js @@ -0,0 +1,10 @@ +import { extendTheme } from '@chakra-ui/react' + +const theme = extendTheme({ + fonts: { + heading: `'Inter', sans-serif`, + body: `'Inter', sans-serif` + } +}) + +export default theme diff --git a/package.json b/package.json index cb85bd28..cabe4ed4 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,10 @@ "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\" --config ./.prettierrc" }, "dependencies": { + "@chakra-ui/next-js": "^2.1.5", + "@chakra-ui/react": "^2.8.1", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@heroicons/react": "^2.0.13", "@hookform/resolvers": "^2.9.10", "@react-email/components": "^0.0.2", @@ -20,9 +24,9 @@ "classnames": "^2.3.2", "cookies-next": "^2.1.1", "flowbite": "^1.6.4", - "flowbite-react": "^0.4.2", - "framer-motion": "^7.6.7", + "framer-motion": "^7.10.3", "lodash-contrib": "^4.1200.1", + "lucide-react": "^0.279.0", "midtrans-client": "^1.3.1", "next": "13.0.0", "next-auth": "^4.22.3", diff --git a/src/lib/checkout/components/CheckoutOld.jsx b/src/lib/checkout/components/CheckoutOld.jsx index 088b641b..6852059e 100644 --- a/src/lib/checkout/components/CheckoutOld.jsx +++ b/src/lib/checkout/components/CheckoutOld.jsx @@ -22,7 +22,6 @@ import DesktopView from '@/core/components/views/DesktopView' import ExpedisiList from '../api/ExpedisiList' import whatsappUrl from '@/core/utils/whatsappUrl' import { createSlug } from '@/core/utils/slug' -import { Button, Modal } from 'flowbite-react' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' const SELF_PICKUP_ID = 32 diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx index 33da703a..e5296f96 100644 --- a/src/lib/product/components/Product/ColumnsSLA.jsx +++ b/src/lib/product/components/Product/ColumnsSLA.jsx @@ -1,8 +1,9 @@ import odooApi from '@/core/api/odooApi' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' -import { Button, Spinner } from 'flowbite-react' -import { memo, useEffect, useState } from 'react' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' +import { memo } from 'react' import { useQuery } from 'react-query' const ColumnSLA = ({ variant, product }) => { @@ -12,67 +13,35 @@ const ColumnSLA = ({ variant, product }) => { return ( <> - {dataSLA.isFetching ? ( -
- -
- ) : dataSLA?.data?.qty > 0 ? ( - dataSLA?.data?.qty - ) : ( - - Tanya Admin - - )} + + {dataSLA?.data?.qty > 0 ? ( + dataSLA?.data?.qty + ) : ( + + Tanya Admin + + )} + + - {dataSLA.isFetching ? ( - - ) : dataSLA?.data?.slaDate != '-' ? ( - - ) : ( - '-' - )} + + + + ) diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 6da289bc..5cc35df7 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -15,7 +15,6 @@ import ProductCard from '../ProductCard' import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' import ImageNext from 'next/image' @@ -23,6 +22,8 @@ import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import { LazyLoadComponent } from 'react-lazy-load-image-component' import ColumnsSLA from './ColumnsSLA' import { useProductCartContext } from '@/contexts/ProductCartContext' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -40,7 +41,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) - const {setRefreshCart , refreshCart} = useProductCartContext() + const { setRefreshCart, refreshCart } = useProductCartContext() const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -256,16 +257,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {

{product?.name}

-
Nomor SKU
-
SKU-{product.id}
+
Nomor SKU
+
SKU-{product.id}
-
Part Number
-
{product.code || '-'}
+
Part Number
+
{product.code || '-'}
-
Manufacture
-
+
Manufacture
+
{product.manufacture?.name ? ( {
-
Persiapan Barang
-
- {product.variants.length > 1 ? ( +
Persiapan Barang
+
+ {product.variants.length > 1 && ( - ) : product.variants[0].sla ? ( - product.variants[0].sla?.slaDate != '-' ? ( - - ) : ( - '-' - ) - ) : ( - + + {product.variants[0]?.sla?.slaDate} + + + + )} + )}
+ {product.variants.length === 1 && (
-
Stock
-
- {isLoadingSLA && ( -
- -
- )} +
Stock
+
+ {!product.variants[0]?.sla && } {product?.variants[0].sla?.qty > 0 && ( {product?.variants[0].sla?.qty} )} @@ -366,9 +337,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
)} +
1 ? '' : 'bg-gray_r-4'} `}> -
Berat Barang
-
+
Berat Barang
+
{product?.weight > 0 && {product?.weight} KG} {product?.weight == 0 && ( { const router = useRouter() @@ -149,16 +150,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })

{product?.name}

-
Nomor SKU
-
SKU-{product.id}
+
Nomor SKU
+
SKU-{product.id}
-
Part Number
-
{product.code || '-'}
+
Part Number
+
{product.code || '-'}
-
Manufacture
-
+
Manufacture
+
{product.manufacture?.name ? (
+
-
Persiapan Barang
-
- {product.sla ? ( - product.sla?.slaDate != '-' ? ( - - ) : ( - '-' - ) - ) : ( - +
Persiapan Barang
+
+ {!product?.sla && } + {product?.sla && ( + + + {product?.sla?.slaDate} + + + )}
+
-
Stock
-
- {isLoadingSLA && ( -
- -
- )} +
Stock
+
-
Berat Barang
-
+
Berat Barang
+ - ): ( + ) : ( '-' )} diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index ce6c12ed..b64349c7 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -2,7 +2,21 @@ import { useRouter } from 'next/router' import { useState } from 'react' import _ from 'lodash' import { toQuery } from 'lodash-contrib' -import { Accordion, Checkbox, Label, TextInput } from 'flowbite-react' +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Button, + Checkbox, + Input, + InputGroup, + InputLeftAddon, + Stack, + VStack +} from '@chakra-ui/react' const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { const router = useRouter() @@ -13,7 +27,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu const [priceFrom, setPriceFrom] = useState(query?.priceFrom) const [priceTo, setPriceTo] = useState(query?.priceTo) - const handleCategorysChange = (event) => { + const handleCategoriesChange = (event) => { const value = event.target.value const isChecked = event.target.checked if (isChecked) { @@ -48,80 +62,95 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu return ( <> - - - Kategori - -
+ + + + + Brand + + + + + + + {brands.map((brand, index) => ( +
+ + {brand} + +
+ ))} + + + + + + + + Kategori + + + + + + {categories.map((category, index) => (
- +
))} -
- - - - {!defaultBrand && ( - <> - Brand - -
- {brands.map((brand, index) => ( -
- - -
- ))} -
- - - )} - - - Harga - -
- setPriceFrom(e.target.value)} - /> -
-
- setPriceTo(e.target.value)} - /> -
- - + + + + + + + + Harga + + + + + + + + Rp + setPriceFrom(e.target.value)} + /> + + + Rp + setPriceTo(e.target.value)} + /> + + + + -
- -
+ + ) } diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index ae9618d2..df9aa91b 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -39,9 +39,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { const oddIndexSuggestions = response.data.spellcheck.suggestions.filter( (_, index) => index % 2 === 1 ) + const oddIndexCollations = response.data.spellcheck.collations.filter( (_, index) => index % 2 === 1 ) + const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => { oddIndexCollations.forEach((collation) => { acc.push(collation.collationQuery) @@ -52,7 +54,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { return acc }, []) - setQ(dataSpellings[0]) + if (dataSpellings.length > 0) { + setQ(dataSpellings[0]) + } setSpellings(dataSpellings) }) @@ -183,7 +187,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { defaultBrand={defaultBrand} />
-
+

Hasil Pencarian

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index d5b59486..afebc293 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,6 +1,5 @@ import '../styles/globals.css' import 'react-loading-skeleton/dist/skeleton.css' -import '@fontsource/inter' import NextProgress from 'next-progress' import { useRouter, Router } from 'next/router' @@ -8,19 +7,16 @@ import { AnimatePresence, motion } from 'framer-motion' import { Toaster } from 'react-hot-toast' import { QueryClient, QueryClientProvider } from 'react-query' import useDevice from '@/core/hooks/useDevice' -import { createContext, useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' import { SessionProvider } from 'next-auth/react' import { ProductProvider } from '@/contexts/ProductContext' import { ProductCartProvider } from '@/contexts/ProductCartContext' +import { ChakraProvider } from '@chakra-ui/react' +import theme from '../../chakra.theme' const queryClient = new QueryClient() -export const AuthContext = createContext({ - authenticated: false, - setAuthenticated: (auth) => {} -}) - function MyApp({ Component, pageProps: { session, ...pageProps } }) { const router = useRouter() const { isMobile } = useDevice() @@ -86,7 +82,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { - + + + diff --git a/src/styles/globals.css b/src/styles/globals.css index 58afd5d8..06ae7ca2 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; diff --git a/tailwind.config.js b/tailwind.config.js index 97e23d04..86e1e769 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./node_modules/flowbite-react/**/*.js', './src/**/*.{js,ts,jsx,tsx}'], + content: ['./src/**/*.{js,ts,jsx,tsx}'], plugins: [require('flowbite/plugin')], darkMode: 'class', theme: { @@ -56,59 +56,59 @@ module.exports = { 12: '#171717' }, primary: { - 100: "#FDDACC", - 200: "#FCAE99", - 300: "#F67766", - 400: "#ED4540", - 500: "#E20613", - 600: "#C20420", - 700: "#A20329", - 800: "#83012C", - 900: "#6C012D", + 100: '#FDDACC', + 200: '#FCAE99', + 300: '#F67766', + 400: '#ED4540', + 500: '#E20613', + 600: '#C20420', + 700: '#A20329', + 800: '#83012C', + 900: '#6C012D' }, success: { - 100: "#ECFBD2", - 200: "#D4F8A6", - 300: "#B1EB77", - 400: "#8ED853", - 500: "#5EBF22", - 600: "#45A418", - 700: "#308911", - 800: "#1E6E0A", - 900: "#125B06", + 100: '#ECFBD2', + 200: '#D4F8A6', + 300: '#B1EB77', + 400: '#8ED853', + 500: '#5EBF22', + 600: '#45A418', + 700: '#308911', + 800: '#1E6E0A', + 900: '#125B06' }, info: { - 100: "#CAFDF8", - 200: "#97FBF9", - 300: "#62EDF5", - 400: "#3BD5EC", - 500: "#00B3E0", - 600: "#008BC0", - 700: "#0068A1", - 800: "#004A81", - 900: "#00356B", + 100: '#CAFDF8', + 200: '#97FBF9', + 300: '#62EDF5', + 400: '#3BD5EC', + 500: '#00B3E0', + 600: '#008BC0', + 700: '#0068A1', + 800: '#004A81', + 900: '#00356B' }, warning: { - 100: "#FEF8CD", - 200: "#FEEF9C", - 300: "#FCE26B", - 400: "#FAD646", - 500: "#F8C20A", - 600: "#D5A107", - 700: "#B28305", - 800: "#8F6503", - 900: "#775101", + 100: '#FEF8CD', + 200: '#FEEF9C', + 300: '#FCE26B', + 400: '#FAD646', + 500: '#F8C20A', + 600: '#D5A107', + 700: '#B28305', + 800: '#8F6503', + 900: '#775101' }, danger: { - 100: "#FCE0D1", - 200: "#F9BBA5", - 300: "#EF8B76", - 400: "#E05E52", - 500: "#CC2020", - 600: "#AF1724", - 700: "#921026", - 800: "#760A26", - 900: "#610625" + 100: '#FCE0D1', + 200: '#F9BBA5', + 300: '#EF8B76', + 400: '#E05E52', + 500: '#CC2020', + 600: '#AF1724', + 700: '#921026', + 800: '#760A26', + 900: '#610625' } } } -- cgit v1.2.3