@a2v2ai/uikit 0.0.36 → 0.0.38

package/Carousel/Carousel.tsx

@@ -0,0 +1,301 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { cva } from "class-variance-authority"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../Button/Button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselOrientation = "horizontal" | "vertical"
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & 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 carouselVariants = cva("relative", {
+  variants: {
+    orientation: {
+      horizontal: "",
+      vertical: "",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})
+
+const carouselContentVariants = cva("flex", {
+  variants: {
+    orientation: {
+      horizontal: "-ml-4",
+      vertical: "-mt-4 flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})
+
+const carouselItemVariants = cva("min-w-0 shrink-0 grow-0 basis-full", {
+  variants: {
+    orientation: {
+      horizontal: "pl-4",
+      vertical: "pt-4",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})
+
+interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: CarouselOrientation
+  setApi?: (api: CarouselApi) => void
+}
+
+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)
+
+    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)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn(carouselVariants({ orientation }), 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(carouselContentVariants({ orientation }), 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(carouselItemVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "small", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      roundness="round"
+      className={cn(
+        "absolute h-8 w-8 p-0",
+        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}
+    >
+      <ArrowLeft 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 = "small", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      roundness="round"
+      className={cn(
+        "absolute h-8 w-8 p-0",
+        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}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  carouselVariants,
+  carouselContentVariants,
+  carouselItemVariants,
+  useCarousel,
+  type CarouselApi,
+  type CarouselProps,
+  type CarouselOptions,
+  type CarouselPlugin,
+  type CarouselOrientation,
+}

package/ChatBubble/ChatBubble.stories.tsx

@@ -0,0 +1,339 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { ChatBubble } from "./ChatBubble"
+
+const meta: Meta<typeof ChatBubble> = {
+  title: "Components/ChatBubble",
+  component: ChatBubble,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#1a1a1a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["left", "right"],
+      description: "The side of the chat bubble",
+    },
+    color: {
+      control: "select",
+      options: ["blue", "grey", "green", "lightGrey"],
+      description: "The color variant of the bubble",
+    },
+    theme: {
+      control: "select",
+      options: ["dark", "light"],
+      description: "The theme variant",
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large", "xlarge"],
+      description: "The text size of the bubble",
+    },
+    label: {
+      control: "text",
+      description: "Label shown above the bubble",
+    },
+    showLabel: {
+      control: "boolean",
+      description: "Whether to show the label",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ChatBubble>
+
+export const Default: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const RightSide: Story = {
+  args: {
+    side: "right",
+    color: "blue",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const Grey: Story = {
+  args: {
+    side: "left",
+    color: "grey",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const Green: Story = {
+  args: {
+    side: "left",
+    color: "green",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const LightTheme: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "light",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const LightGrey: Story = {
+  args: {
+    side: "left",
+    color: "lightGrey",
+    theme: "light",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const GreyLight: Story = {
+  args: {
+    side: "left",
+    color: "grey",
+    theme: "light",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const NoLabel: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "dark",
+    showLabel: false,
+    children: "Message without a label",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const LongMessage: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "dark",
+    label: "Your name",
+    children:
+      "This is a longer message that demonstrates how the chat bubble handles multiple lines of text. The bubble should expand to accommodate the content while maintaining proper padding and border radius.",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+// Conversation example
+export const Conversation: Story = {
+  render: () => (
+    <Flex gap={4} className="w-[400px]">
+      <ChatBubble side="left" color="grey" theme="dark" label="Alice">
+        Hey! How are you doing?
+      </ChatBubble>
+      <ChatBubble side="right" color="blue" theme="dark" label="You">
+        I'm doing great, thanks for asking!
+      </ChatBubble>
+      <ChatBubble side="left" color="grey" theme="dark" label="Alice">
+        That's wonderful to hear. Want to grab lunch later?
+      </ChatBubble>
+      <ChatBubble side="right" color="green" theme="dark" label="You">
+        Sounds perfect! See you at noon.
+      </ChatBubble>
+    </Flex>
+  ),
+}
+
+// All Variants
+export const AllVariants: Story = {
+  render: () => (
+    <Flex gap={8}>
+      {/* Dark Theme */}
+      <Flex gap={4}>
+        <Typography variant="h4" className="text-white">Dark Theme</Typography>
+        <Flex direction="row" gap={4}>
+          {/* Left side variants */}
+          <Flex gap={4}>
+            <ChatBubble side="left" color="blue" theme="dark" label="Blue Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="grey" theme="dark" label="Grey Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="green" theme="dark" label="Green Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="lightGrey" theme="dark" label="Light Grey Left">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+          {/* Right side variants */}
+          <Flex gap={4}>
+            <ChatBubble side="right" color="blue" theme="dark" label="Blue Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="grey" theme="dark" label="Grey Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="green" theme="dark" label="Green Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="lightGrey" theme="dark" label="Light Grey Right">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Light Theme */}
+      <Flex gap={4} className="bg-white p-6 rounded-lg">
+        <Typography variant="h4">Light Theme</Typography>
+        <Flex direction="row" gap={4}>
+          {/* Left side variants */}
+          <Flex gap={4}>
+            <ChatBubble side="left" color="blue" theme="light" label="Blue Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="grey" theme="light" label="Grey Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="green" theme="light" label="Green Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="lightGrey" theme="light" label="Light Grey Left">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+          {/* Right side variants */}
+          <Flex gap={4}>
+            <ChatBubble side="right" color="blue" theme="light" label="Blue Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="grey" theme="light" label="Grey Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="green" theme="light" label="Green Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="lightGrey" theme="light" label="Light Grey Right">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Sizes */}
+      <Flex gap={4}>
+        <Typography variant="h4" className="text-white">Sizes</Typography>
+        <Flex gap={2} className="w-[400px]">
+          <ChatBubble side="left" color="blue" theme="dark" size="small" label="Small">
+            Small text size
+          </ChatBubble>
+          <ChatBubble side="left" color="blue" theme="dark" size="medium" label="Medium">
+            Medium text size
+          </ChatBubble>
+          <ChatBubble side="left" color="blue" theme="dark" size="large" label="Large">
+            Large text size
+          </ChatBubble>
+          <ChatBubble side="left" color="blue" theme="dark" size="xlarge" label="XLarge">
+            Extra large text size
+          </ChatBubble>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+}