add Carousel component and Card skeleton

package.json

@@ -225,6 +225,7 @@
     "cmdk": "^0.2.1",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.3.1",
+    "embla-carousel-react": "^8.0.1",
     "i18next": "^23.10.1",
     "jodit": "^4.0.18",
     "jodit-react": "^4.0.15",

src/components/Skeletons/CardSkeleton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { cn } from "#/lib/utils";
+import { Card } from "#/components/ui/Card";
+import { Skeleton } from "#/components/ui/Skeleton";
+
+export function CardSkeleton({ className = "" }) {
+  return (
+    <Card.Root className={cn("bg-background", className)}>
+      <Card.Header>
+        <Card.Title>
+          <Skeleton className="h-2.5 w-3/4" />
+        </Card.Title>
+        <Skeleton className="h-2 w-1/2" />
+      </Card.Header>
+      <Card.Content>
+        <Skeleton className="h-2 w-full mb-2" />
+        <Skeleton className="h-2 w-[85%] mb-2" />
+        <Skeleton className="h-2 w-[90%]" />
+      </Card.Content>
+      <Card.Description>
+        <Skeleton className="h-10 w-full" />
+      </Card.Description>
+      <Card.Footer>
+        <Skeleton className="h-3 w-20" />
+        <Skeleton className="h-3 w-20 ml-4" />
+      </Card.Footer>
+    </Card.Root>
+  );
+}

src/components/ChartSkeleton.tsx → src/components/Skeletons/ChartSkeleton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Skeleton } from "./ui/Skeleton";
+import { Skeleton } from "#/components/ui/Skeleton";
 
 function BarSet() {
   return (

src/components/TableSkeleton.tsx → src/components/Skeletons/TableSkeleton.tsx

@@ -8,7 +8,7 @@ import {
   TableHeader,
   TableRow,
 } from "#/components/ui/Table";
-import { Skeleton } from "./ui/Skeleton";
+import { Skeleton } from "#/components/ui/Skeleton";
 
 export function TableSkeleton({
   rowsCount = 4,

src/components/Skeletons/index.tsx

@@ -0,0 +1,4 @@
+export * from "./CardSkeleton";
+export * from "./ChartSkeleton";
+export * from "./KpiSkeleton";
+export * from "./TableSkeleton";

src/components/index.ts

@@ -11,6 +11,4 @@ export * from "./OtpInput";
 export * from "./SubmitButton";
 export * from "./StrictModeDroppable";
 export * from "./Plot";
-export * from "./TableSkeleton";
-export * from "./KpiSkeleton";
-export * from "./ChartSkeleton";
+export * from "./Skeletons";

src/components/ui/Carousel.tsx

@@ -0,0 +1,263 @@
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import { cn } from "#/lib/utils";
+import { Button } from "#/components/ui/Button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  orientation?: "horizontal" | "vertical";
+  plugins?: CarouselPlugin;
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  canScrollNext: boolean;
+  canScrollPrev: boolean;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  scrollNext: () => void;
+  scrollPrev: () => void;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & 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);
+
+    // eslint-disable-next-line no-shadow
+    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<HTMLDivElement>) => {
+        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);
+
+      // eslint-disable-next-line consistent-return
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value={{
+          carouselRef,
+          api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

src/components/ui/index.ts

@@ -31,3 +31,4 @@ export * from "./Progress";
 export * from "./Spinner";
 export * from "./KpiCard";
 export * from "./Skeleton";
+export * from "./Carousel";

yarn.lock

@@ -3272,6 +3272,7 @@ __metadata:
     copy-to-clipboard: "npm:^3.3.3"
     css-loader: "npm:^6.10.0"
     date-fns: "npm:^3.3.1"
+    embla-carousel-react: "npm:^8.0.1"
     eslint: "npm:8.57.0"
     eslint-config-airbnb: "npm:19.0.4"
     eslint-config-prettier: "npm:9.1.0"
@@ -12650,6 +12651,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"embla-carousel-react@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "embla-carousel-react@npm:8.0.1"
+  dependencies:
+    embla-carousel: "npm:8.0.1"
+    embla-carousel-reactive-utils: "npm:8.0.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.1 || ^18.0.0
+  checksum: 10c0/a16af76be911133f00ff38491b0ed12f09571949234b22bfe83cbd2d8b0d3cf43b666ffc4fc6aaf17e04691495fdad69fc1bc33db3eeec9ba7f67fe8db056a25
+  languageName: node
+  linkType: hard
+
+"embla-carousel-reactive-utils@npm:8.0.1":
+  version: 8.0.1
+  resolution: "embla-carousel-reactive-utils@npm:8.0.1"
+  peerDependencies:
+    embla-carousel: 8.0.1
+  checksum: 10c0/c511dbbcd869f11f102e826aea600f1668f8097792b4e185678f44240466fe6a224b68833c408bd9eb6c9b26e40321b6f18f70f45bd19df3cd403d964e1fba95
+  languageName: node
+  linkType: hard
+
+"embla-carousel@npm:8.0.1":
+  version: 8.0.1
+  resolution: "embla-carousel@npm:8.0.1"
+  checksum: 10c0/9ce30759a77e75ff4ce490102c429794fd46f03bbcc4a6af4ecefbe55a5de5289b7ac0f7607d1774a9b23c241d5781bf3d45459590768b15679a9da5b56ef6df
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^10.3.0":
   version: 10.3.0
   resolution: "emoji-regex@npm:10.3.0"