@rovula/ui 0.0.26 → 0.0.27

package/src/components/Switch/Switch.tsx

@@ -11,9 +11,10 @@ const Switch = React.forwardRef<
 >(({ 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]",
+      "group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+      "data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]",
+      "hover:data-[state=checked]:bg-secondary-active/[0.48] hover:data-[state=unchecked]:bg-tertiary-active/[0.48]",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:bg-state-disable-solid/[0.32] data-[disabled]:pointer-events-none ",
       className
     )}
     {...props}
@@ -21,8 +22,10 @@ const Switch = React.forwardRef<
   >
     <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"
+        " block size-4 rounded-full bg-secondary-active shadow-lg transition-transform",
+        "data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active",
+        "group-hover:ring group-hover:data-[state=checked]:ring-secondary-hover-bg group-hover:data-[state=unchecked]:ring-tertiary-hover-bg",
+        "group-disabled:bg-state-disable-solid"
       )}
     />
   </SwitchPrimitives.Root>

package/src/components/Text/Text.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/utils/cn";
 import React, { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 
-export type TextProps<T extends React.ElementType> = {
+export type TextProps = {
   variant?:
     | "h1"
     | "h2"
@@ -39,15 +39,10 @@ export type TextProps<T extends React.ElementType> = {
     | "error";
   children?: React.ReactNode;
   className?: string;
-  tag?: T;
+  tag?: React.ElementType;
   style?: React.CSSProperties;
   id?: string;
-} & React.ComponentProps<T>;
-
-type TextComponent<T extends React.ElementType> =
-  React.ForwardRefExoticComponent<
-    TextProps<T> & React.RefAttributes<HTMLElement>
-  >;
+};
 
 const textVariants = cva(["text-foreground"], {
   variants: {
@@ -66,36 +61,34 @@ const textVariants = cva(["text-foreground"], {
 // montserrat: ["Montserrat", "sans-serif"],
 // poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
-const Text = <T extends React.ElementType = "p">(
-  {
-    variant = "body1",
-    tag: Tag = "p",
-    children,
-    className = "",
-    color,
-    style,
-    ...props
-  }: TextProps<T>,
-  ref: React.Ref<any>
-) => {
-  return (
-    <Tag
-      ref={ref}
-      className={cn(
-        `typography-${variant}`,
-        textVariants({ color }),
-        className
-      )}
-      style={style}
-      {...props}
-    >
-      {children}
-    </Tag>
-  );
-};
-
-const ForwardedText = forwardRef(Text) as TextComponent<any>;
-
-ForwardedText.displayName = "Text";
+const Text = forwardRef<React.ElementRef<React.ElementType>, TextProps>(
+  (
+    {
+      variant = "body1",
+      tag: Tag = "p",
+      children,
+      className = "",
+      color,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Tag
+        ref={ref}
+        className={cn(
+          `typography-${variant}`,
+          textVariants({ color }),
+          className
+        )}
+        style={style}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
 
-export default ForwardedText;
+export default Text;

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Markdown } from "@storybook/blocks";
+import { Toast, ToastAction } from "./Toast";
+import { Toaster } from "./Toaster";
+import { useToast } from "./useToast";
+import Button from "../Button/Button";
+
+const meta = {
+  title: "Components/Toast",
+  component: Toast,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex  max-h-screen w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+
+export const Simple = {
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "success", "info", "warning", "error"],
+    },
+    contentMode: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+    },
+    position: {
+      control: "select",
+      options: [
+        "top-center",
+        "top-left",
+        "top-right",
+        "bottom-center",
+        "bottom-left",
+        "bottom-right",
+      ],
+    },
+  },
+  args: {
+    variant: "default",
+    contentMode: "horizontal",
+    position: "top-center",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    const { toast } = useToast({
+      position: props.position,
+    });
+
+    useEffect(() => {
+      toast({
+        variant: props.variant,
+        title: "Success",
+        description: "This is an Info alert — check it out!",
+        contentMode: props.contentMode,
+      });
+    }, [props.variant, props.contentMode]);
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Toaster />
+        <Button
+          onClick={() => {
+            toast({
+              title: "Scheduled: Catch up",
+              description: "Friday, February 10, 2023 at 5:57 PM",
+            });
+          }}
+        >
+          Show Toast
+        </Button>
+      </div>
+    );
+  },
+} satisfies StoryObj<{
+  variant:
+    | "default"
+    | "success"
+    | "info"
+    | "warning"
+    | "error"
+    | null
+    | undefined;
+  contentMode: "horizontal" | "vertical";
+  position?:
+    | "top-center"
+    | "top-left"
+    | "top-right"
+    | "bottom-center"
+    | "bottom-left"
+    | "bottom-right"
+    | undefined;
+}>;
+
+export const WithAction = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    const { toast } = useToast();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Toaster />
+        <Button
+          onClick={() => {
+            toast({
+              title: "Uh oh! Something went wrong.",
+              description: "There was a problem with your request.",
+              action: (
+                <ToastAction
+                  altText="Try again"
+                  onClick={() => alert("My action")}
+                >
+                  Try again
+                </ToastAction>
+              ),
+            });
+          }}
+        >
+          Show Toast
+        </Button>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Toast/Toast.styles.tsx

@@ -0,0 +1,73 @@
+import { cva } from "class-variance-authority";
+
+export const toastVariants = cva(
+  [
+    "group pointer-events-auto relative flex w-full",
+    "rounded-md shadow-lg px-4 py-3 gap-1",
+    "transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+    "bg-base-popup text-base-popup-foreground",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border",
+        success: "border border-success-stroke",
+        info: "border border-info-stroke",
+        warning: "border border-warning-stroke",
+        error: "border border-error-stroke",
+      },
+    },
+    defaultVariants: {
+      variant: "success",
+    },
+  }
+);
+
+export const toastViewportVariants = cva(
+  ["fixed z-[100] flex w-full md:w-auto flex-col-reverse px-4"],
+  {
+    variants: {
+      position: {
+        "top-center": "top-[40px] left-0 right-0 justify-self-center",
+        "top-left": "top-[40px] left-0 md:left-[40px]",
+        "top-right": "top-[40px] right-0 md:right-[40px]",
+        "bottom-center": "bottom-[40px] left-0 right-0 justify-self-center",
+        "bottom-left": "bottom-[40px] left-0 md:left-[40px]",
+        "bottom-right": "bottom-[40px] right-0 md:right-[40px]",
+      },
+    },
+    defaultVariants: {
+      position: "top-center",
+    },
+  }
+);
+
+export const toastIconVariants = cva(
+  ["flex items-center justify-center mr-2 rounded-full size-7"],
+  {
+    variants: {
+      variant: {
+        default: "",
+        success: "bg-success-transparent-8 text-success",
+        info: "bg-info-transparent-8 text-info",
+        warning: "bg-warning-transparent-8 text-warning",
+        error: "bg-error-transparent-8 text-error",
+      },
+    },
+    defaultVariants: {
+      variant: "success",
+    },
+  }
+);
+
+export const toastContentVariants = cva(["flex flex-1"], {
+  variants: {
+    contentMode: {
+      horizontal: "items-center flex-row gap-2",
+      vertical: "flex-col gap-[2px]",
+    },
+  },
+  defaultVariants: {
+    contentMode: "vertical",
+  },
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+import { toastVariants, toastViewportVariants } from "./Toast.styles";
+import ActionButton from "../ActionButton/ActionButton";
+import Button from "../Button/Button";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> &
+    VariantProps<typeof toastViewportVariants>
+>(({ className, position, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(toastViewportVariants({ position }), className)}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, children, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn("", className)}
+    {...props}
+    asChild
+  >
+    <Button variant="outline" size="sm">
+      {children}
+    </Button>
+  </ToastPrimitives.Action>
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn("-mr-2 self-center text-input-default-text", className)}
+    toast-close=""
+    {...props}
+    asChild
+  >
+    <ActionButton variant="icon" size="sm">
+      <Icon type="heroicons" name="xmark" />
+    </ActionButton>
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("typography-subtitile6", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("typography-subtitile5 text-text-grey-dark", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/src/components/Toast/Toaster.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "./Toast";
+import { useToast } from "./useToast";
+import Icon from "../Icon/Icon";
+import { toastContentVariants, toastIconVariants } from "./Toast.styles";
+
+export function Toaster() {
+  const { toasts, position } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({
+        id,
+        title,
+        description,
+        action,
+        contentMode,
+        ...props
+      }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className={toastIconVariants({ variant: props.variant })}>
+              <Icon type="heroicons" name="check-circle" className="size-6" />
+            </div>
+            <div className={toastContentVariants({ contentMode })}>
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            <div className="self-center ml-[var(--spacing-spacing-xl)]">
+              {action}
+            </div>
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport position={position} />
+    </ToastProvider>
+  );
+}