From 3f01d040512e6e65c5c21c6c649ec5d39b01b673 Mon Sep 17 00:00:00 2001 From: Taek Been Nam Date: Tue, 11 Jun 2024 14:12:33 -0400 Subject: [PATCH 01/11] remove comment --- .storybook/manager.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 6acebf6..cce8129 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -6,7 +6,6 @@ const theme = create({ // Brand assets brandTitle: "NomadHair", - // TODO: Replace with real url. brandUrl: "https://nomadhair.co/", brandImage: "https://res.cloudinary.com/dtsdpcbcv/image/upload/v1712891768/logo-light-lg_pmi0xn.svg", From 13965d61d91acc5ef5ee8e9be7ea40f1ab3a5ffa Mon Sep 17 00:00:00 2001 From: Taek Been Nam Date: Tue, 11 Jun 2024 14:13:00 -0400 Subject: [PATCH 02/11] remove carousel --- .../molecules/carousel/carousel.stories.tsx | 98 ------- components/molecules/carousel/carousel.tsx | 260 ------------------ components/molecules/carousel/index.ts | 17 -- 3 files changed, 375 deletions(-) delete mode 100644 components/molecules/carousel/carousel.stories.tsx delete mode 100644 components/molecules/carousel/carousel.tsx delete mode 100644 components/molecules/carousel/index.ts diff --git a/components/molecules/carousel/carousel.stories.tsx b/components/molecules/carousel/carousel.stories.tsx deleted file mode 100644 index 3f457f4..0000000 --- a/components/molecules/carousel/carousel.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, -} from "./carousel"; -import { Container } from "@/components/templates/container"; - -const meta: Meta = { - title: "Molecules/Carousel", - component: Carousel, - parameters: { - layout: "centered", - }, - args: { - orientation: "horizontal", - }, - argTypes: { - orientation: { - options: ["horizontal", "vertical"], - control: { type: "radio" }, - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - render: ({ orientation }) => ( - - - - {Array.from({ length: 5 }).map((_, index) => ( - -
- {index} -
- - ))} - - - - - - ), -}; - -export const Responsive: Story = { - render: ({ orientation }) => ( - - - - {Array.from({ length: 5 }).map((_, index) => ( - -
- {index} -
- - ))} - - - - - - ), -}; - -export const Vertical: Story = { - args: { - orientation: "vertical", - }, - render: ({ orientation }) => ( - - - - {Array.from({ length: 5 }).map((_, index) => ( - -
- {index} -
- - ))} - - - - - - ), -}; diff --git a/components/molecules/carousel/carousel.tsx b/components/molecules/carousel/carousel.tsx deleted file mode 100644 index ca523cf..0000000 --- a/components/molecules/carousel/carousel.tsx +++ /dev/null @@ -1,260 +0,0 @@ -"use client"; - -import * as React from "react"; -import useEmblaCarousel, { - type UseEmblaCarouselType, -} from "embla-carousel-react"; -import { ArrowLeft, ArrowRight } from "lucide-react"; - -import { cn } from "@/lib/utils"; -import { Button } from "@/components/atoms/button"; - -type CarouselApi = UseEmblaCarouselType[1]; -type UseCarouselParameters = Parameters; -type CarouselOptions = UseCarouselParameters[0]; -type CarouselPlugin = UseCarouselParameters[1]; - -type CarouselProps = { - opts?: CarouselOptions; - plugins?: CarouselPlugin; - orientation?: "horizontal" | "vertical"; - setApi?: (api: CarouselApi) => void; -}; - -type CarouselContextProps = { - carouselRef: ReturnType[0]; - api: ReturnType[1]; - scrollPrev: () => void; - scrollNext: () => void; - canScrollPrev: boolean; - canScrollNext: boolean; -} & CarouselProps; - -const CarouselContext = React.createContext(null); - -function useCarousel() { - const context = React.useContext(CarouselContext); - - if (!context) { - throw new Error("useCarousel must be used within a "); - } - - return context; -} - -const Carousel = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & CarouselProps ->( - ( - { - orientation = "horizontal", - opts, - setApi, - plugins, - className, - children, - ...props - }, - ref, - ) => { - const [carouselRef, api] = useEmblaCarousel( - { - ...opts, - axis: orientation === "horizontal" ? "x" : "y", - }, - plugins, - ); - const [canScrollPrev, setCanScrollPrev] = React.useState(false); - const [canScrollNext, setCanScrollNext] = React.useState(false); - - const onSelect = React.useCallback((api: CarouselApi) => { - if (!api) { - return; - } - - setCanScrollPrev(api.canScrollPrev()); - setCanScrollNext(api.canScrollNext()); - }, []); - - const scrollPrev = React.useCallback(() => { - api?.scrollPrev(); - }, [api]); - - const scrollNext = React.useCallback(() => { - api?.scrollNext(); - }, [api]); - - const handleKeyDown = React.useCallback( - (event: React.KeyboardEvent) => { - if (event.key === "ArrowLeft") { - event.preventDefault(); - scrollPrev(); - } else if (event.key === "ArrowRight") { - event.preventDefault(); - scrollNext(); - } - }, - [scrollPrev, scrollNext], - ); - - React.useEffect(() => { - if (!api || !setApi) { - return; - } - - setApi(api); - }, [api, setApi]); - - React.useEffect(() => { - if (!api) { - return; - } - - onSelect(api); - api.on("reInit", onSelect); - api.on("select", onSelect); - - return () => { - api?.off("select", onSelect); - }; - }, [api, onSelect]); - - return ( - -
- {children} -
- - ); - }, -); -Carousel.displayName = "Carousel"; - -const CarouselContent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { - const { carouselRef, orientation } = useCarousel(); - - return ( -
-
-
- ); -}); -CarouselContent.displayName = "CarouselContent"; - -const CarouselItem = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { - const { orientation } = useCarousel(); - - return ( -
- ); -}); -CarouselItem.displayName = "CarouselItem"; - -const CarouselPrevious = React.forwardRef< - HTMLButtonElement, - React.ComponentProps ->(({ className, variant = "ghost", size = "icon", ...props }, ref) => { - const { orientation, scrollPrev, canScrollPrev } = useCarousel(); - - return ( -