@rovula/ui 0.0.21 → 0.0.22

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,450 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Icon from "./Icon";
+
+const meta = {
+  title: "Components/Icon",
+  component: Icon,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full h-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    variant: "outline",
+    name: "home",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Icon name="home" {...props} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const PreviewHeroIcon = {
+  args: {
+    // variant: "outline",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    const heroIcons = [
+      "arrow-left",
+      "arrow-small-left",
+      "academic-cap",
+      "adjustments-horizontal",
+      "adjustments-vertical",
+      "archive-box-arrow-down",
+      "archive-box",
+      "archive-box-xmark",
+      "arrow-down-circle",
+      "arrow-down",
+      "arrow-down-left",
+      "arrow-down-on-square",
+      "arrow-down-on-square-stack",
+      "arrow-down-right",
+      "arrow-down-tray",
+      "arrow-left-circle",
+      "arrow-left-end-on-rectangle",
+      "arrow-left",
+      "arrow-left-on-rectangle",
+      "arrow-left-start-on-rectangle",
+      "arrow-long-down",
+      "arrow-long-left",
+      "arrow-long-right",
+      "arrow-long-up",
+      "arrow-path",
+      "arrow-path-rounded-square",
+      "arrow-right-circle",
+      "arrow-right-end-on-rectangle",
+      "arrow-right",
+      "arrow-right-on-rectangle",
+      "arrow-right-start-on-rectangle",
+      "arrow-small-down",
+      "arrow-small-left",
+      "arrow-small-right",
+      "arrow-small-up",
+      "arrow-top-right-on-square",
+      "arrow-trending-down",
+      "arrow-trending-up",
+      "arrow-up-circle",
+      "arrow-up",
+      "arrow-up-left",
+      "arrow-up-on-square",
+      "arrow-up-on-square-stack",
+      "arrow-up-right",
+      "arrow-up-tray",
+      "arrow-uturn-down",
+      "arrow-uturn-left",
+      "arrow-uturn-right",
+      "arrow-uturn-up",
+      "arrows-pointing-in",
+      "arrows-pointing-out",
+      "arrows-right-left",
+      "arrows-up-down",
+      "at-symbol",
+      "backspace",
+      "backward",
+      "banknotes",
+      "bars2",
+      "bars3-bottom-left",
+      "bars3-bottom-right",
+      "bars3-center-left",
+      "bars3",
+      "bars4",
+      "bars-arrow-down",
+      "bars-arrow-up",
+      "battery0",
+      "battery100",
+      "battery50",
+      "beaker",
+      "bell-alert",
+      "bell",
+      "bell-slash",
+      "bell-snooze",
+      "bolt",
+      "bolt-slash",
+      "book-open",
+      "bookmark",
+      "bookmark-slash",
+      "bookmark-square",
+      "briefcase",
+      "bug-ant",
+      "building-library",
+      "building-office2",
+      "building-office",
+      "building-storefront",
+      "cake",
+      "calculator",
+      "calendar-days",
+      "calendar",
+      "camera",
+      "chart-bar",
+      "chart-bar-square",
+      "chart-pie",
+      "chat-bubble-bottom-center",
+      "chat-bubble-bottom-center-text",
+      "chat-bubble-left-ellipsis",
+      "chat-bubble-left",
+      "chat-bubble-left-right",
+      "chat-bubble-oval-left-ellipsis",
+      "chat-bubble-oval-left",
+      "check-badge",
+      "check-circle",
+      "check",
+      "chevron-double-down",
+      "chevron-double-left",
+      "chevron-double-right",
+      "chevron-double-up",
+      "chevron-down",
+      "chevron-left",
+      "chevron-right",
+      "chevron-up-down",
+      "chevron-up",
+      "circle-stack",
+      "clipboard-document-check",
+      "clipboard-document",
+      "clipboard-document-list",
+      "clipboard",
+      "clock",
+      "cloud-arrow-down",
+      "cloud-arrow-up",
+      "cloud",
+      "code-bracket",
+      "code-bracket-square",
+      "cog6-tooth",
+      "cog8-tooth",
+      "cog",
+      "command-line",
+      "computer-desktop",
+      "cpu-chip",
+      "credit-card",
+      "cube",
+      "cube-transparent",
+      "currency-bangladeshi",
+      "currency-dollar",
+      "currency-euro",
+      "currency-pound",
+      "currency-rupee",
+      "currency-yen",
+      "cursor-arrow-rays",
+      "cursor-arrow-ripple",
+      "device-phone-mobile",
+      "device-tablet",
+      "document-arrow-down",
+      "document-arrow-up",
+      "document-chart-bar",
+      "document-check",
+      "document-duplicate",
+      "document",
+      "document-magnifying-glass",
+      "document-minus",
+      "document-plus",
+      "document-text",
+      "ellipsis-horizontal-circle",
+      "ellipsis-horizontal",
+      "ellipsis-vertical",
+      "envelope",
+      "envelope-open",
+      "exclamation-circle",
+      "exclamation-triangle",
+      "eye-dropper",
+      "eye",
+      "eye-slash",
+      "face-frown",
+      "face-smile",
+      "film",
+      "finger-print",
+      "fire",
+      "flag",
+      "folder-arrow-down",
+      "folder",
+      "folder-minus",
+      "folder-open",
+      "folder-plus",
+      "forward",
+      "funnel",
+      "gif",
+      "gift",
+      "gift-top",
+      "globe-alt",
+      "globe-americas",
+      "globe-asia-australia",
+      "globe-europe-africa",
+      "hand-raised",
+      "hand-thumb-down",
+      "hand-thumb-up",
+      "hashtag",
+      "heart",
+      "home",
+      "home-modern",
+      "identification",
+      "inbox-arrow-down",
+      "inbox",
+      "inbox-stack",
+      "information-circle",
+      "key",
+      "language",
+      "lifebuoy",
+      "light-bulb",
+      "link",
+      "list-bullet",
+      "lock-closed",
+      "lock-open",
+      "magnifying-glass-circle",
+      "magnifying-glass",
+      "magnifying-glass-minus",
+      "magnifying-glass-plus",
+      "map",
+      "map-pin",
+      "megaphone",
+      "microphone",
+      "minus-circle",
+      "minus",
+      "minus-small",
+      "moon",
+      "musical-note",
+      "newspaper",
+      "no-symbol",
+      "paint-brush",
+      "paper-airplane",
+      "paper-clip",
+      "pause-circle",
+      "pause",
+      "pencil",
+      "pencil-square",
+      "phone-arrow-down-left",
+      "phone-arrow-up-right",
+      "phone",
+      "phone-xmark",
+      "photo",
+      "play-circle",
+      "play",
+      "play-pause",
+      "plus-circle",
+      "plus",
+      "plus-small",
+      "power",
+      "presentation-chart-bar",
+      "presentation-chart-line",
+      "printer",
+      "puzzle-piece",
+      "qr-code",
+      "question-mark-circle",
+      "queue-list",
+      "radio",
+      "receipt-percent",
+      "receipt-refund",
+      "rectangle-group",
+      "rectangle-stack",
+      "rocket-launch",
+      "rss",
+      "scale",
+      "scissors",
+      "server",
+      "server-stack",
+      "share",
+      "shield-check",
+      "shield-exclamation",
+      "shopping-bag",
+      "shopping-cart",
+      "signal",
+      "signal-slash",
+      "sparkles",
+      "speaker-wave",
+      "speaker-xmark",
+      "square2-stack",
+      "square3-stack3-dicon",
+      "squares2-x2",
+      "squares-plus",
+      "star",
+      "stop-circle",
+      "stop",
+      "sun",
+      "swatch",
+      "table-cells",
+      "tag",
+      "ticket",
+      "trash",
+      "trophy",
+      "truck",
+      "tv",
+      "user-circle",
+      "user-group",
+      "user",
+      "user-minus",
+      "user-plus",
+      "users",
+      "variable",
+      "video-camera",
+      "video-camera-slash",
+      "view-columns",
+      "viewfinder-circle",
+      "wallet",
+      "wifi",
+      "window",
+      "wrench",
+      "wrench-screwdriver",
+      "xcircle",
+      "xmark",
+    ];
+
+    return (
+      <div className="grid grid-cols-1 gap-4 w-full h-full">
+        <div className="flex flex-col justify-start gap-4 w-full h-full">
+          <h4>Hero icons</h4>
+          {heroIcons.map((iconName) => (
+            <div key={iconName} className="flex flex-row gap-6 items-center">
+              <Icon {...props} name={iconName} variant="solid" size="sm" />
+              <Icon {...props} name={iconName} variant="outline" size="sm" />
+              <Icon {...props} name={iconName} variant="outline" size="md" />
+              <Icon {...props} name={iconName} variant="solid" size="md" />
+              <Icon {...props} name={iconName} variant="outline" size="lg" />
+              <Icon {...props} name={iconName} variant="solid" size="lg" />
+              <p className="ml-4">{iconName}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const PreviewMaterialIcon = {
+  args: {
+    // variant: "outline",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    const materialIcon = [
+      "chevron-down",
+      "save",
+      "data-table",
+      "table-chart",
+      "interests",
+      "collapse-content",
+      "expand-content",
+      "expand-circle-right",
+      "expand-circle-down",
+      "expand-circle-up",
+      "content-copy",
+      "content-paste",
+    ];
+
+    return (
+      <div className="grid grid-cols-1 gap-4 w-full h-full">
+        <div className="flex flex-col justify-start gap-4 w-full h-full">
+          <h4>Material icons</h4>
+          {materialIcon.map((iconName) => (
+            <div key={iconName} className="flex flex-row gap-6 items-center">
+              <Icon
+                {...props}
+                type="material"
+                name={iconName}
+                variant="solid"
+                size="sm"
+              />
+              <Icon
+                {...props}
+                type="material"
+                name={iconName}
+                variant="outline"
+                size="sm"
+              />
+              <Icon
+                {...props}
+                type="material"
+                name={iconName}
+                variant="outline"
+                size="md"
+              />
+              <Icon
+                {...props}
+                type="material"
+                name={iconName}
+                variant="solid"
+                size="md"
+              />
+              <Icon
+                {...props}
+                type="material"
+                name={iconName}
+                variant="outline"
+                size="lg"
+              />
+              <Icon
+                {...props}
+                type="material"
+                name={iconName}
+                variant="solid"
+                size="lg"
+              />
+              <p className="ml-4">{iconName}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Icon/Icon.styles.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+
+export const iconVariants = cva(["text-inherit"], {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      error: "text-error",
+      inherit: "text-inherit",
+    },
+    size: {
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8",
+      inherit: "",
+    },
+  },
+  defaultVariants: {
+    size: "inherit",
+    color: "inherit",
+  },
+});

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { getIcon } from "@/icons";
+import { cn } from "@/utils/cn";
+import React from "react";
+import { iconVariants } from "./Icon.styles";
+
+export type IconProps = {
+  name: string;
+  type?: "heroicons" | "material" | "custom";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "tertiary"
+    | "info"
+    | "warning"
+    | "error"
+    | "inherit";
+  variant?: "solid" | "outline";
+  size?: "sm" | "md" | "lg" | "inherit";
+  className?: string;
+} & React.SVGProps<SVGSVGElement>;
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  type = "heroicons",
+  color = "inherit",
+  variant = "solid",
+  size = "md",
+  className,
+  ...props
+}) => {
+  const [IconComponent, setIconComponent] = React.useState<React.ComponentType<
+    React.SVGProps<SVGSVGElement>
+  > | null>(null);
+
+  React.useEffect(() => {
+    const loadIcon = async () => {
+      const icon = getIcon(type, name, variant);
+      if (icon) {
+        setIconComponent(() => icon);
+      } else {
+        console.warn(`Icon "${name}" from "${type}" not found.`);
+      }
+    };
+
+    loadIcon();
+  }, [name, type, variant]);
+
+  if (!IconComponent)
+    return (
+      <svg
+        className={cn(iconVariants({ color, size }), className)}
+        {...props}
+      />
+    );
+
+  return (
+    <IconComponent
+      className={cn(iconVariants({ color, size }), className)}
+      {...props}
+    />
+  );
+};
+
+export default Icon;

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./Slider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    name: "test",
+    minStepsBetweenThumbs: 1,
+    // orientation: "horizontal", // "horizontal" | "vertical" | undefined,
+    disabled: false,
+    inverted: false,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Slider defaultValue={[50]} max={100} step={1} {...props} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/utils/cn";
+import ActionButton from "../ActionButton/ActionButton";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-grey-50">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    {/* <SliderPrimitive.Thumb className="block cursor-pointer h-5 w-5 rounded-full border-[3px] border-primary bg-background ring-offset-background ring-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> */}
+    <SliderPrimitive.Thumb className="block cursor-pointer h-5 w-5 rounded-full border-[3px] border-primary bg-background ring-0 outline-none disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export type SliderProps = React.ComponentProps<typeof Slider>;
+
+export { Slider };

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    name: "test",
+    minStepsBetweenThumbs: 1,
+    disabled: false,
+    inverted: false,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Switch {...props} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/utils/cn";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block size-4 rounded-full bg-secondary-active shadow-lg ring-0",
+        "transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };