@rovula/ui 0.0.13 → 0.0.14

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -0,0 +1,176 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ActionButton from "./ActionButton";
+import { ArrowsUpDownIcon } from "@heroicons/react/16/solid";
+
+const meta = {
+  title: "Components/ActionButton",
+  component: ActionButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    variant: "solid",
+    size: "lg",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row justify-between">
+        <ActionButton {...props}>
+          <ArrowsUpDownIcon />
+        </ActionButton>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Preview = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+        <div className="flex flex-row justify-between items-center">
+          <h6 className="w-[20px] text-white">Default:</h6>
+          <div className="flex flex-row gap-2 ">
+            <ActionButton variant="solid" size="lg">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="solid" size="md">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="solid" size="sm">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="outline" size="lg">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="outline" size="md">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="outline" size="sm">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="icon" size="lg">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="md">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="sm">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="xs">
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+        </div>
+
+        <div className="flex flex-row justify-between">
+          <h6 className="w-[20px] text-white">Active:</h6>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="solid" size="lg" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="solid" size="md" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="solid" size="sm" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="outline" size="lg" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="outline" size="md" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="outline" size="sm" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="icon" size="lg" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="md" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="sm" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="xs" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+        </div>
+
+        <div className="flex flex-row justify-between">
+          <h6 className="w-[20px] text-white">Disabled:</h6>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="solid" size="lg" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="solid" size="md" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="solid" size="sm" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="outline" size="lg" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="outline" size="md" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="outline" size="sm" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+          <div className="flex flex-row gap-2">
+            <ActionButton variant="icon" size="lg" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="md" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="sm" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+            <ActionButton variant="icon" size="xs" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
+          </div>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/ActionButton/ActionButton.styles.ts

@@ -0,0 +1,79 @@
+import { cva } from "class-variance-authority";
+
+export const actionButtonVariants = cva(
+  ["bg-primary rounded box-border flex items-center justify-center"],
+  {
+    variants: {
+      variant: {
+        solid:
+          " bg-secondary-20 hover:bg-secondary-5 fill-secondary-foreground text-secondary-foreground",
+        outline: [
+          "bg-transparent border border-main-transparent-secondary-32 fill-secondary-70 text-secondary-70",
+          "hover:bg-main-transparent-secondary-8 hover:border-main-secondary-48 hover:fill-secondary-5 hover:text-secondary-5",
+        ],
+        icon: [
+          "rounded-full bg-transparent fill-secondary-70 text-secondary-70",
+          "hover:bg-main-transparent-secondary-8 hover:fill-secondary-5 hover:text-secondary-5",
+        ],
+      },
+      size: {
+        xs: "p-[2px] w-[18px] h-[18px]",
+        sm: "px-2 py-1 w-[38px] h-[30px]",
+        md: "px-3 py-2 w-[46px] h-[38px]",
+        lg: "px-4 py-3 w-[64px] h-[56px]",
+      },
+      disabled: {
+        true: "pointer-events-none border-grey2-500/[.32] text-grey2-500/[.32] fill-red-500",
+      },
+      active: {
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "solid",
+        disabled: true,
+        className: "bg-grey2-500 text-textcolor-medium fill-textcolor-medium",
+      },
+      {
+        variant: "solid",
+        active: true,
+        className:
+          "bg-primary-120 hover:bg-primary-100 text-primary-foreground",
+      },
+      {
+        variant: "outline",
+        active: true,
+        className:
+          "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+      },
+      {
+        variant: "icon",
+        active: true,
+        className:
+          "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+      },
+      {
+        size: "lg",
+        variant: "icon",
+        className: "w-[56px] h-[56px]",
+      },
+      {
+        size: "md",
+        variant: "icon",
+        className: "w-[38px] h-[38px]",
+      },
+      {
+        size: "sm",
+        variant: "icon",
+        className: "w-[30px] h-[30px]",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "solid",
+      disabled: false,
+      active: false,
+    },
+  }
+);

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,42 @@
+"use-client";
+
+import { cn } from "@/utils/cn";
+import React, { forwardRef } from "react";
+import { actionButtonVariants } from "./ActionButton.styles";
+
+export type ActionButtonProps = {
+  title?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "solid" | "outline" | "icon";
+  disabled?: boolean;
+  active?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ children, disabled, active, className, size, variant, ...props }, ref) => {
+    const actionButtonClassname = actionButtonVariants({
+      size,
+      variant,
+      active,
+      disabled,
+    });
+
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type="button"
+        aria-disabled={disabled || undefined}
+        disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+        className={cn(actionButtonClassname, className)}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export default ActionButton;

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Avatar, { AvatarProps } from "./Avatar";
+
+const meta = {
+  title: "Components/Avatar/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    imageUrl: "",
+    text: "AN",
+    size: "lg",
+    rounded: "full",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: any = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row justify-between">
+        <Avatar {...props} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Preview = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    const BORDER: AvatarProps["rounded"][] = ["full", "normal", "none"];
+
+    return (
+      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+        {BORDER.map((rounded) => (
+          <div key={rounded} className="flex flex-row items-center gap-3">
+            <Avatar
+              size="xxs"
+              rounded={rounded}
+              type="image"
+              imageUrl="https://i.pravatar.cc/300?img=59"
+              fallback="AS"
+            />
+            <Avatar
+              size="xs"
+              rounded={rounded}
+              type="image"
+              imageUrl="https://i.pravatar.cc/300?img=59"
+              fallback="AS"
+            />
+            <Avatar
+              size="sm"
+              rounded={rounded}
+              type="image"
+              imageUrl="https://i.pravatar.cc/300?img=59"
+              fallback="AS"
+            />
+            <Avatar
+              size="md"
+              rounded={rounded}
+              type="image"
+              imageUrl="https://i.pravatar.cc/300?img=59"
+              fallback="AS"
+            />
+            <Avatar
+              size="lg"
+              rounded={rounded}
+              type="image"
+              imageUrl="https://i.pravatar.cc/300?img=59"
+              fallback="AS"
+            />
+          </div>
+        ))}
+        {BORDER.map((rounded) => (
+          <div key={rounded} className="flex flex-row items-center gap-3">
+            <Avatar size="xxs" rounded={rounded} type="text" text="AS" />
+            <Avatar size="xs" rounded={rounded} type="text" text="AS" />
+            <Avatar size="sm" rounded={rounded} type="text" text="AS" />
+            <Avatar size="md" rounded={rounded} type="text" text="AS" />
+            <Avatar size="lg" rounded={rounded} type="text" text="AS" />
+          </div>
+        ))}
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+
+export const avatarVariants = cva(
+  [
+    "flex items-center justify-center bg-grey2-700 text-white typography-subtitile2 truncate",
+  ],
+  {
+    variants: {
+      size: {
+        xxs: "w-[24px] h-[24px] typography-subtitile3",
+        xs: "w-[32px] h-[32px]",
+        sm: "w-[40px] h-[40px]",
+        md: "w-[48px] h-[48px]",
+        lg: "w-[64px] h-[64px]",
+      },
+      rounded: {
+        normal: "rounded",
+        full: "rounded-full",
+        none: "rounded-none",
+      },
+    },
+
+    defaultVariants: {
+      size: "md",
+      rounded: "normal",
+    },
+  }
+);

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/utils/cn";
+import { AvatarBase, AvatarFallback, AvatarImage } from "./AvatarBase";
+import { avatarVariants } from "./Avatar.styles";
+
+type BaseAvatarProps = {
+  imageUrl?: string;
+  text?: string;
+  fallback?: React.ReactNode;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  size?: "xxs" | "xs" | "sm" | "md" | "lg";
+  rounded?: "full" | "normal" | "none";
+  className?: string;
+  imageClassName?: string;
+  fallbackClassName?: string;
+  style?: React.CSSProperties;
+};
+
+type AvatarText = {
+  text: string;
+  type: "text";
+} & BaseAvatarProps;
+
+type AvatarImage = {
+  imageUrl: string;
+  fallback: React.ReactNode;
+  type: "image";
+} & BaseAvatarProps;
+
+type AvatarIcon = {
+  icon: string;
+  type: "icon";
+} & BaseAvatarProps;
+
+export type AvatarProps = AvatarText | AvatarImage | AvatarIcon;
+
+export const formatAvatarName = (text: string) => {
+  if (!text.length) return "-";
+
+  const spitWithSpace = text.split(" ");
+  const first = text?.charAt(0);
+  const last = spitWithSpace?.[1]?.charAt(0) ?? text?.charAt(1) ?? "";
+
+  return `${first}${last}`;
+};
+
+const Avatar: React.FC<AvatarProps> = ({
+  text,
+  imageUrl,
+  icon,
+  fallback,
+  size,
+  rounded,
+  className,
+  imageClassName,
+  fallbackClassName,
+  type = "text",
+  children,
+  style,
+}) => {
+  const avatarClassname = avatarVariants({ size, rounded });
+
+  return (
+    <AvatarBase className={cn(avatarClassname, className)} style={style}>
+      {children || (
+        <>
+          {type === "image" && (
+            <>
+              <AvatarImage src={imageUrl} className={cn(imageClassName)} />
+              <AvatarFallback className={cn(fallbackClassName)}>
+                {typeof fallback === "string"
+                  ? formatAvatarName(fallback)
+                  : fallback}
+              </AvatarFallback>
+            </>
+          )}
+          {type === "text" && formatAvatarName(text ?? "")}
+          {type === "icon" && icon}
+        </>
+      )}
+    </AvatarBase>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/AvatarBase.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/utils/cn";
+
+const AvatarBase = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarBase.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { AvatarBase, AvatarImage, AvatarFallback };

package/src/components/Avatar/AvatarGroup.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import AvatarGroup from "./AvatarGroup";
+import Avatar from "./Avatar";
+
+const meta = {
+  title: "Components/Avatar/AvatarGroup",
+  component: AvatarGroup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AvatarGroup>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    imageUrl: "",
+    text: "AN",
+    size: "lg",
+    rounded: "full",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: any = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row justify-between">
+        <AvatarGroup {...props}>
+          <Avatar size="lg" rounded="full" type="text" text="AS" />
+          <Avatar size="lg" rounded="full" type="text" text="AS" />
+          <Avatar size="lg" rounded="full" type="text" text="AS" />
+        </AvatarGroup>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Preview = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+        <div className="flex flex-row items-center gap-3">
+          <AvatarGroup>
+            <Avatar size="lg" rounded="full" type="text" text="AS" />
+            <Avatar size="lg" rounded="full" type="text" text="AS" />
+            <Avatar
+              size="lg"
+              rounded="full"
+              type="image"
+              imageUrl="https://i.pravatar.cc/300?img=59"
+              fallback="AS"
+            />
+            <Avatar size="lg" rounded="full" type="text" text="AS" />
+            <Avatar size="lg" rounded="full" type="text" text="AS" />
+          </AvatarGroup>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;