From 332f45c5e75760d77da8fd85db41d0455388be7e Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Mon, 31 May 2021 16:34:44 -0300 Subject: [PATCH] Adding Collapse --- commerce.config.json | 6 +- .../ProductView/ProductView.module.css | 20 ---- .../product/ProductView/ProductView.tsx | 26 ++--- components/product/Swatch/Swatch.module.css | 4 +- components/ui/Button/Button.module.css | 5 +- components/ui/Collapse/Collapse.module.css | 24 ++++ components/ui/Collapse/Collapse.tsx | 46 ++++++++ components/ui/Collapse/index.ts | 2 + package.json | 3 + tsconfig.json | 4 +- yarn.lock | 104 ++++++++++++++++++ 11 files changed, 200 insertions(+), 44 deletions(-) create mode 100644 components/ui/Collapse/Collapse.module.css create mode 100644 components/ui/Collapse/Collapse.tsx create mode 100644 components/ui/Collapse/index.ts diff --git a/commerce.config.json b/commerce.config.json index 0967ef424..6f2958c8a 100644 --- a/commerce.config.json +++ b/commerce.config.json @@ -1 +1,5 @@ -{} +{ + "features": { + "customCheckout": true + } +} diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index 8a9a60473..198fbc747 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -94,23 +94,3 @@ @apply right-0 top-0 text-black bg-white w-14 h-14; } } - -.tab { - @apply border-b border-accent-2 py-4 px-2 flex flex-col; -} - -.tab .header { - @apply flex flex-row items-center; -} - -.tab .header .label { - @apply text-sm font-medium; -} - -.tab .icon { - @apply mr-3 text-accent-6 transform; -} - -.tab .icon.open { - transform: rotate(90deg); -} diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index bfbe7cf7a..4e79fed0d 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -10,7 +10,7 @@ import usePrice from '@framework/product/use-price' import { useAddItem } from '@framework/cart' import { getVariant, SelectedOptions } from '../helpers' import WishlistButton from '@components/wishlist/WishlistButton' -import { ChevronDown, ChevronRight } from '@components/icons' +import Collapse from '@components/ui/Collapse' interface Props { children?: any @@ -27,7 +27,6 @@ const ProductView: FC = ({ product }) => { }) const { openSidebar } = useUI() const [loading, setLoading] = useState(false) - const [tabId, setTabId] = useState('') const [choices, setChoices] = useState({}) useEffect(() => { @@ -161,21 +160,14 @@ const ProductView: FC = ({ product }) => {
-
    -
  • -
    - tabId('1')} - /> - Details -
    -
    - 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. + + + This is a limited edition production run. Printing starts when the + drop ends. +
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index ede13267b..0d23b2ecb 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/components/product/Swatch/Swatch.module.css @@ -35,7 +35,7 @@ } .active { - @apply border-accents-9 border-2; + @apply border-accent-9 border-2; padding-right: 1px; padding-left: 1px; } @@ -46,7 +46,7 @@ } .active.textLabel { - @apply border-accents-9 border-2; + @apply border-accent-9 border-2; padding-right: calc(1rem - 1px); padding-left: calc(1rem - 1px); } diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index 5797f55b0..75b3ff0f9 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -1,8 +1,9 @@ .root { @apply bg-secondary text-accent-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 transition ease-in-out duration-150 - shadow-sm font-semibold text-center justify-center uppercase - py-4 border border-transparent items-center; + shadow-sm text-center justify-center uppercase + py-4 border border-transparent items-center text-sm font-semibold + tracking-wide; } .root:hover { diff --git a/components/ui/Collapse/Collapse.module.css b/components/ui/Collapse/Collapse.module.css new file mode 100644 index 000000000..2132bf0b2 --- /dev/null +++ b/components/ui/Collapse/Collapse.module.css @@ -0,0 +1,24 @@ +.root { + @apply border-b border-accent-2 py-4 px-2 flex flex-col; +} + +.header { + @apply flex flex-row items-center; +} + +.header .label { + @apply text-sm font-medium; +} + +.content { + @apply pt-3 overflow-hidden pl-9; +} + +.icon { + @apply mr-3 text-accent-6; + transition: transform 0.2s ease; +} + +.icon.open { + transform: rotate(90deg); +} diff --git a/components/ui/Collapse/Collapse.tsx b/components/ui/Collapse/Collapse.tsx new file mode 100644 index 000000000..8e6686db5 --- /dev/null +++ b/components/ui/Collapse/Collapse.tsx @@ -0,0 +1,46 @@ +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 = ({ 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 new file mode 100644 index 000000000..1e584a53b --- /dev/null +++ b/components/ui/Collapse/index.ts @@ -0,0 +1,2 @@ +export { default } from './Collapse' +export * from './Collapse' diff --git a/package.json b/package.json index 5a9d40b79..02a449400 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@reach/portal": "^0.11.2", + "@react-spring/web": "^9.2.1", "@vercel/fetch": "^6.1.0", "autoprefixer": "^10.2.4", "body-scroll-lock": "^3.1.5", @@ -41,7 +42,9 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-merge-refs": "^1.1.0", + "react-spring": "^9.2.1", "react-ticker": "^1.2.2", + "react-use-measure": "^2.0.4", "shopify-buy": "^2.11.0", "swell-js": "^4.0.0-next.0", "swr": "^0.4.0", diff --git a/tsconfig.json b/tsconfig.json index e20f37099..9e712fb18 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,8 +22,8 @@ "@components/*": ["components/*"], "@commerce": ["framework/commerce"], "@commerce/*": ["framework/commerce/*"], - "@framework": ["framework/shopify"], - "@framework/*": ["framework/shopify/*"] + "@framework": ["framework/bigcommerce"], + "@framework/*": ["framework/bigcommerce/*"] } }, "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"], diff --git a/yarn.lock b/yarn.lock index 1b1fce30e..7df31dbda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -963,6 +963,86 @@ tslib "^2.0.0" warning "^4.0.3" +"@react-spring/animated@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.1.tgz#545cc03614f3f8a156fb722c644b3b59ea676a17" + integrity sha512-UAa74fsxWWQ6+3U1xdPBHVOBvvRYpSFs8Eo/I0msq7GxO4r7/muU/9loihKj5SfT3OW7hG9rnLEKQFImD7XUNw== + dependencies: + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + +"@react-spring/core@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.1.tgz#df0e6cc29a7866cb248f5a915f3a69241af1da48" + integrity sha512-c4cu77//wZGO3URAob3+NynINDFos57wgVYcQHQYGOCLYwPzg6NVFf8ERfqzuFMeMgrvCkns7HZOxshPC/wzag== + dependencies: + "@react-spring/animated" "~9.2.0" + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + +"@react-spring/konva@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.1.tgz#7ba9ad5d615961a7bfc60761333ee666c00b2ce5" + integrity sha512-GnvEXElYerpD7313hwqIEbsHXz18HgHAUGWe4XV6Sf+KHhCQvw/z97PJLD5KD6XU5MawaQTYkwvqvJ6eTLV0Nw== + dependencies: + "@react-spring/animated" "~9.2.0" + "@react-spring/core" "~9.2.0" + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + +"@react-spring/native@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.1.tgz#be1aa591c90d25dac6b68a678b50d1cbb0e4e70a" + integrity sha512-sWum3JgFpmnpdVZKThpihl1X15oQF/zBiVTQ+csOJDBnB9jhW42WYu9r6ib9M2yxAelS17u7FnDCIfLZf7V1bg== + dependencies: + "@react-spring/animated" "~9.2.0" + "@react-spring/core" "~9.2.0" + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + +"@react-spring/shared@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.1.tgz#90ccd02b8d0ad126e0614a3cddff90664f255192" + integrity sha512-N1EWfOl/viy6ylj+r/YH/CmVNA4z9W1dB/3MgUrLXYVgOBc2uML4ljWOSlr2YqbyWuc9Eae6J6nuxQ+iarWQsQ== + dependencies: + "@react-spring/types" "~9.2.0" + rafz "^0.1.13" + +"@react-spring/three@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.1.tgz#d8df125de9e8325b51ff308c58561a8683523c80" + integrity sha512-0gRz2y8G5szbtywvTDbaT3B+1Xseq5Yu2X02Ey8k18IksAncMZ/KFcRJIYFQn+7OlLVaoxPzXibSUNT4notWMg== + dependencies: + "@react-spring/animated" "~9.2.0" + "@react-spring/core" "~9.2.0" + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + +"@react-spring/types@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.1.tgz#734bbc12b4db57ca55680fd4cb197bd6e0f6a8a9" + integrity sha512-UMXLNW1l/iJCRRAsTpeqgQYjims9j8QSSMbkgi1mFZytDuaQ6r6f9ngfLgx9uDW2VSdvoNdEqGM9abVDGc4E1g== + +"@react-spring/web@^9.2.1", "@react-spring/web@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.1.tgz#aeb2427545e631e29d70f3ad38afa35da560f1c5" + integrity sha512-7YimWKLuHhUZhuDchfn4Yo631KqULWCgrDLOZBu0o4AZwVMFvguVY1g0Tpm5K+68Z7kJaS0n5pf8wlwtGIOs+w== + dependencies: + "@react-spring/animated" "~9.2.0" + "@react-spring/core" "~9.2.0" + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + +"@react-spring/zdog@~9.2.0": + version "9.2.1" + resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.1.tgz#93a7c7ba15d215608cf7d222c7e50352a2a66b17" + integrity sha512-OjXoSo3/Lp8OKK0V3spyB8FWw0ttfwEdMlJyS1Ed8edLwbVv+60G6EqQT4S7M433R8W1M6Ck5f9fw0EedWsmhQ== + dependencies: + "@react-spring/animated" "~9.2.0" + "@react-spring/core" "~9.2.0" + "@react-spring/shared" "~9.2.0" + "@react-spring/types" "~9.2.0" + "@samverschueren/stream-to-observable@^0.3.0": version "0.3.1" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301" @@ -5522,6 +5602,11 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +rafz@^0.1.13: + version "0.1.14" + resolved "https://registry.yarnpkg.com/rafz/-/rafz-0.1.14.tgz#164f01cf7cc6094e08467247ef351ef5c8d278fe" + integrity sha512-YiQkedSt1urYtYbvHhTQR3l67M8SZbUvga5eJFM/v4vx/GmDdtXlE2hjJIyRjhhO/PjcdGC+CXCYOUA4onit8w== + randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -5581,11 +5666,30 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-spring@^9.2.1: + version "9.2.1" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.1.tgz#999ff52142fbf85180b79b3b7b9266e0d3539f8d" + integrity sha512-HLkEbuRvRtvAwkeqqwZXIEaKPPc17ViI5DYPtYTpgu2H9jmndm/kp1BfxRwpu5+m4ecGzUUX7RRNWEfwWY6oWA== + dependencies: + "@react-spring/core" "~9.2.0" + "@react-spring/konva" "~9.2.0" + "@react-spring/native" "~9.2.0" + "@react-spring/three" "~9.2.0" + "@react-spring/web" "~9.2.0" + "@react-spring/zdog" "~9.2.0" + react-ticker@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24" integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA== +react-use-measure@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.4.tgz#cb675b36eaeaf3681b94d5f5e08b2a1e081fedc9" + integrity sha512-7K2HIGaPMl3Q9ZQiEVjen3tRXl4UDda8LiTPy/QxP8dP2rl5gPBhf7mMH6MVjjRNv3loU7sNzey/ycPNnHVTxQ== + dependencies: + debounce "^1.2.0" + react@^17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"