@rovula/ui 0.0.45 → 0.0.47

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import { Markdown } from "@storybook/blocks";
 import { Toast, ToastAction } from "./Toast";
 import { Toaster } from "./Toaster";
@@ -142,3 +143,52 @@ export const WithAction = {
     );
   },
 } satisfies StoryObj;
+
+export const Custom = {
+  args: {
+    onClose: action("Close Naja (*0_0*) "),
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+
+    const { toast } = useToast();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Toaster
+          viewportClassName="bg-red-100 -mt-[30px]"
+          titleClassName="text-red-500"
+          descriptionClassName="text-grey2-500"
+          contentClassName="bg-pink-100"
+          iconWrapperClassName="border-info border-2"
+          actionWrapperClassName="bg-green-500"
+          duration={3000} // default timeout
+        />
+        <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>
+              ),
+              duration: 1000,
+              onClose: props.onClose,
+            });
+          }}
+        >
+          Show Toast
+        </Button>
+      </div>
+    );
+  },
+} satisfies StoryObj<{
+  onClose?: () => void;
+}>;

package/src/components/Toast/Toaster.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Toast,
   ToastClose,
@@ -13,6 +13,7 @@ import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
 import { cn } from "@/utils/cn";
+import { ToastProviderProps } from "@radix-ui/react-toast";
 
 type ToasterProps = {
   viewportClassName?: string;
@@ -30,11 +31,12 @@ export function Toaster({
   contentClassName,
   iconWrapperClassName,
   actionWrapperClassName,
-}: ToasterProps) {
+  ...toastProviderProps
+}: ToasterProps & ToastProviderProps) {
   const { toasts, position } = useToast();
 
   return (
-    <ToastProvider>
+    <ToastProvider {...toastProviderProps}>
       {toasts.map(function ({
         id,
         title,

package/src/components/Toast/useToast.ts

@@ -13,6 +13,7 @@ type ToasterToast = ToastProps & {
   description?: React.ReactNode;
   action?: ToastActionElement;
   contentMode?: "vertical" | "horizontal";
+  onClose?: () => void;
 };
 
 type ToasterPosition =
@@ -81,7 +82,7 @@ const addToRemoveQueue = (toastId: string) => {
       type: "REMOVE_TOAST",
       toastId: toastId,
     });
-  }, TOAST_REMOVE_DELAY); // TODO
+  }, TOAST_REMOVE_DELAY);
 
   toastTimeouts.set(toastId, timeout);
 };
@@ -176,7 +177,10 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss();
+        if (!open) {
+          dismiss();
+          props?.onClose?.();
+        }
       },
     },
   });

package/src/theme/global.css

@@ -1,6 +1,7 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
+@import "./themes/SKL/baseline.css";
 
 @tailwind base;
 @tailwind components;

package/src/theme/themes/SKL/baseline.css

@@ -0,0 +1,12 @@
+@import url(palette.css);
+@import url(state.css);
+@import url(color.css);
+@import url(transparent.css);
+@import url(variables.css);
+@import url(typography.css);
+@import url(components/button.css);
+@import url(components/action-button.css);
+@import url(components/loading.css);
+@import url(components/navbar.css);
+@import url(components/dropdown-menu.css);
+@import url(components/switch.css);

package/src/theme/themes/SKL/color.css

@@ -0,0 +1,78 @@
+
+:root[data-theme="SKL"] {
+  /* Base from design */
+  --input-color-default-text: #9e9e9e;
+  --input-color-default-stroke: #cfcfcf;
+  --input-color-filled-text: #4f4f4f;
+  --input-color-active-stroke: #9e9e9e;
+  --input-color-disable-text: #919eab;
+  --input-color-disable-stroke: #e7ebed;
+  --input-color-disable-bg: #f2f5f5;
+  --input-color-label-bg: #ffffff;/* #2d2e30; */
+  --input-color-error: #ed2f15;
+
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
+
+  --text-black: #000000;
+  --text-dark: #18283a;
+  --text-medium: #4b5b6d;
+  --text-light: #8e98a4;
+  --text-grey-dark: #4f4f4f;
+  --text-grey-medium: #7e7e7e;
+  --text-grey-light: #9e9e9e;
+  --text-white: #ffffff;
+
+  --base-color-bg: #f5f5f5;
+  --base-color-bg2: #f5f5f5;
+  --base-color-bg3: #d8d8d8;
+  --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
+  --base-color-popup: #ffffff;
+  --base-color-popup-hightlight: #343638;
+  --base-color-popup-curtain: rgba(0 0 0 / 0.6);
+  --common-white: #ffffff;
+  --common-black: #000000;
+
+  /* ------- Addon base ---------- */
+  --background: var(--base-color-bg);
+  --foreground: var(--common-black);
+
+  --primary: var(--primary-ramps-primary-100);
+  --secondary: var(--secondary-ramps-secondary-100);
+  --tertiary: var(--tertiary-ramps-tertiary-100);
+  --info: var(--info-info-100);
+  --success: var(--success-success-100);
+  --warning: var(--warning-warning-100);
+  --error: var(--error-error-100);
+  --grey: var(--grey-grey-100);
+  --grey2: var(--grey2-grey2-100);
+
+  --primary-foreground: var(--state-color-primary-text-solid);
+  --secondary-foreground:  var(--state-color-secondary-text-solid);
+  --tertiary-foreground: var(--state-color-tertiary-text-solid);
+  --info-foreground: var(--state-color-info-text-solid);
+  --success-foreground:  var(--state-color-success-text-solid);
+  --warning-foreground:  var(--state-color-warning-text-solid);
+  --error-foreground:  var(--state-color-error-text-solid);
+  --grey-foreground: var(--common-black);
+  --grey2-foreground: var(--common-black);
+
+  --surface: var(--base-color-bg);
+  --surface-foreground: var(--common-black);
+
+  --primary-foreground: var(--common-white);
+  --secondary-foreground: var(--common-white);
+  
+  --base-color-popup-foreground: var(--text-dark);
+}

package/src/theme/themes/SKL/components/action-button.css

@@ -0,0 +1,127 @@
+:root[data-theme="SKL"] {
+  /* --------------------------------------------------------------------------------- */
+  /* Action Button Component Tokens                                                    */
+  /* --------------------------------------------------------------------------------- */
+  /* Naming Convention: --[component]-[mode]-[state]-[property]                        */
+  /* Mone:   [solid, outline, icon]                                                    */
+  /* States: [default, hover, pressed, active, active-pressed active-hover disabled]   */
+  /* --------------------------------------------------------------------------------- */
+
+  /* ------------------------------------------------------------------ */
+  /* Solid Mode Tokens                                                  */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
+
+  /* Hover State */
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
+
+  /* Pressed State */
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
+
+  /* Active State */
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
+
+  /* Active Hover State */
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
+
+  /* Active Pressed State */
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
+
+  /* Disabled State */
+  --action-button-solid-disabled-bg: var(--state-color-disable-solid);
+  --action-button-solid-disabled-border: var(--state-color-disable-solid);
+  --action-button-solid-disabled-text: var(--state-color-disable-outline);
+
+
+  /* ------------------------------------------------------------------ */
+  /* Outline Mode Tokens                                                */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --action-button-outline-default-bg: transparent;
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
+
+  /* Hover State */
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
+
+  /* Pressed State */
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
+
+  /* Active State */
+  --action-button-outline-active-bg: transparent;
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
+
+  /* Active Hover State */
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
+
+  /* Disabled State */
+  --action-button-outline-disabled-bg: transparent;
+  --action-button-outline-disabled-border: var(--state-color-disable-outline);
+  --action-button-outline-disabled-text: var(--state-color-disable-outline);
+
+  /* ------------------------------------------------------------------ */
+  /* Icon Mode Tokens                                                  */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --action-button-icon-default-bg: transparent;
+  --action-button-icon-default-border: transparent;
+  --action-button-icon-default-text: var(--function-default-outline-icon);
+
+  /* Hover State */
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-border: transparent;
+  --action-button-icon-hover-text: var(--function-default-hover);
+
+  /* Pressed State */
+  --action-button-icon-pressed-bg: transparent;
+  --action-button-icon-pressed-border: transparent;
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
+
+  /* Active State */
+  --action-button-icon-active-bg: transparent;
+  --action-button-icon-active-border: transparent;
+  --action-button-icon-active-text: var(--function-active-solid);
+
+  /* Active Hover State */
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-border: transparent;
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-bg: transparent;
+  --action-button-icon-active-pressed-border: transparent;
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
+
+  /* Disabled State */
+  --action-button-icon-disabled-bg: transparent;
+  --action-button-icon-disabled-border: transparent;
+  --action-button-icon-disabled-text: var(--state-color-disable-outline);
+}