@scripso-homepad/ui 0.4.9 → 0.4.10

package/src/web/components/Toaster.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+
+import { WebLayoutCanvas } from '../layout/story-helpers';
+import { toast } from '../toast';
+
+import { Toaster } from './Toaster';
+
+const toastCopy = {
+  title: 'Title',
+  description: 'Description',
+};
+
+const meta = {
+  title: 'Web Components/Toaster',
+  component: Toaster,
+  parameters: {
+    layout: 'fullscreen',
+    webLayout: true,
+  },
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ToastTriggerPanel() {
+  return (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-3 rounded-2xl border border-storm-gray-50 bg-white p-6 shadow-sm">
+        <h2 className="font-sans text-lg font-bold text-slate-blue">Toast preview</h2>
+        <p className="font-sans text-sm text-storm-gray-400">
+          Click a button to show a toast in the bottom-right corner.
+        </p>
+        <div className="flex flex-col gap-2">
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.success(toastCopy.title, { description: toastCopy.description })}
+          >
+            Success
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.error(toastCopy.title, { description: toastCopy.description })}
+          >
+            Error
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.warning(toastCopy.title, { description: toastCopy.description })}
+          >
+            Warning
+          </button>
+          <button
+            type="button"
+            className="rounded-xl border border-storm-gray-50 px-4 py-2 text-left text-sm font-medium text-slate-blue transition-colors hover:bg-storm-gray-0"
+            onClick={() => toast.info(toastCopy.title, { description: toastCopy.description })}
+          >
+            Info
+          </button>
+        </div>
+      </div>
+      <Toaster />
+    </WebLayoutCanvas>
+  );
+}
+
+function AllTypesStory() {
+  useEffect(() => {
+    toast.success(toastCopy.title, { description: toastCopy.description });
+    toast.error(toastCopy.title, { description: toastCopy.description });
+    toast.warning(toastCopy.title, { description: toastCopy.description });
+    toast.info(toastCopy.title, { description: toastCopy.description });
+  }, []);
+
+  return (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100">
+      <Toaster />
+    </WebLayoutCanvas>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <ToastTriggerPanel />,
+};
+
+export const AllTypes: Story = {
+  render: () => <AllTypesStory />,
+};
+
+export const TitleOnly: Story = {
+  render: () => (
+    <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
+      <button
+        type="button"
+        className="rounded-xl border border-storm-gray-50 bg-white px-4 py-2 text-sm font-medium text-slate-blue"
+        onClick={() => toast.success('Request approved.')}
+      >
+        Show title-only toast
+      </button>
+      <Toaster />
+    </WebLayoutCanvas>
+  ),
+};

package/src/web/components/Toaster.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import { Toaster as SonnerToaster, type ToasterProps } from 'sonner';
+
+import {
+  ToastCloseIcon,
+  ToastErrorIcon,
+  ToastInfoIcon,
+  ToastSuccessIcon,
+  ToastWarningIcon,
+} from '../icons/ToastIcons';
+
+import 'sonner/dist/styles.css';
+import './sonner-toast.css';
+
+function ToastIconBadge({
+  tone,
+  children,
+}: {
+  tone: 'success' | 'error' | 'warning' | 'info' | 'default';
+  children: ReactNode;
+}) {
+  return (
+    <div className={`homepad-toast__icon-badge homepad-toast__icon-badge--${tone}`}>
+      {children}
+    </div>
+  );
+}
+
+const homepadToastIcons = {
+  success: (
+    <ToastIconBadge tone="success">
+      <ToastSuccessIcon />
+    </ToastIconBadge>
+  ),
+  error: (
+    <ToastIconBadge tone="error">
+      <ToastErrorIcon />
+    </ToastIconBadge>
+  ),
+  warning: (
+    <ToastIconBadge tone="warning">
+      <ToastWarningIcon />
+    </ToastIconBadge>
+  ),
+  info: (
+    <ToastIconBadge tone="info">
+      <ToastInfoIcon />
+    </ToastIconBadge>
+  ),
+  close: <ToastCloseIcon />,
+};
+
+export type HomepadToasterProps = Omit<ToasterProps, 'richColors'>;
+
+export function Toaster({
+  className,
+  position = 'bottom-right',
+  theme = 'light',
+  closeButton = true,
+  gap = 12,
+  offset = 20,
+  toastOptions,
+  icons,
+  ...props
+}: HomepadToasterProps) {
+  return (
+    <SonnerToaster
+      className={['homepad-toaster', className].filter(Boolean).join(' ')}
+      theme={theme}
+      position={position}
+      closeButton={closeButton}
+      gap={gap}
+      offset={offset}
+      mobileOffset={8}
+      icons={{ ...homepadToastIcons, ...icons }}
+      toastOptions={{
+        duration: 4000,
+        classNames: {
+          toast: 'homepad-toast',
+          title: 'homepad-toast__title',
+          description: 'homepad-toast__description',
+          content: 'homepad-toast__content',
+          icon: 'homepad-toast__icon',
+          closeButton: 'homepad-toast__close',
+          ...toastOptions?.classNames,
+        },
+        ...toastOptions,
+      }}
+      {...props}
+    />
+  );
+}

package/src/web/components/ToasterProvider.tsx

@@ -0,0 +1,6 @@
+import { Toaster } from './Toaster';
+
+/** Global toast outlet styled to match the HomePad design system. */
+export function ToasterProvider() {
+  return <Toaster />;
+}

package/src/web/components/drawer-scroll.css

@@ -0,0 +1,41 @@
+.drawer-scroll-area {
+  scrollbar-color: var(--color-storm-gray-200, #d5d9dd) transparent;
+  scrollbar-width: thin;
+}
+
+.drawer-scroll-area::-webkit-scrollbar {
+  width: 8px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.drawer-scroll-area::-webkit-scrollbar-button,
+.drawer-scroll-area::-webkit-scrollbar-button:single-button,
+.drawer-scroll-area::-webkit-scrollbar-button:double-button,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:increment,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:start:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:vertical:end:increment,
+.drawer-scroll-area::-webkit-scrollbar-button:start:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:end:increment,
+.drawer-scroll-area::-webkit-scrollbar-button:decrement,
+.drawer-scroll-area::-webkit-scrollbar-button:increment {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.drawer-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.drawer-scroll-area::-webkit-scrollbar-thumb {
+  background-color: var(--color-storm-gray-200, #d5d9dd);
+  border-radius: 9999px;
+}
+
+@media (max-width: 767px) {
+  .drawer-scroll-area::-webkit-scrollbar {
+    width: 4px;
+  }
+}

package/src/web/components/sonner-toast.css

@@ -0,0 +1,141 @@
+.homepad-toaster {
+  --width: 409px;
+  --gap: 12px;
+  --border-radius: 20px;
+  font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true'] {
+  align-items: center;
+  gap: 16px;
+  width: 409px;
+  min-height: 72px;
+  height: auto;
+  padding: 12px 44px 12px 12px;
+  background: #fff;
+  border: 1px solid var(--color-storm-gray-50, #eceef0);
+  border-radius: 20px;
+  box-shadow: 0 0 20px 0 #0000000d;
+  color: var(--color-slate-blue, #182e3c);
+  overflow: visible;
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true'][data-front='true'] {
+  height: auto !important;
+}
+
+.homepad-toaster
+  [data-sonner-toast][data-styled='true'][data-mounted='true'][data-expanded='true'] {
+  height: auto !important;
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true'] [data-icon] {
+  width: auto;
+  height: auto;
+  margin: 0;
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true'] [data-content] {
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+  align-self: center;
+  overflow: visible;
+}
+
+.homepad-toaster .homepad-toast__title {
+  font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  letter-spacing: 0;
+  color: var(--color-slate-blue, #182e3c);
+}
+
+.homepad-toaster .homepad-toast__description {
+  font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0;
+  color: var(--color-slate-blue, #182e3c);
+}
+
+.homepad-toaster .homepad-toast__icon-badge {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
+
+.homepad-toaster .homepad-toast__icon-badge svg {
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.homepad-toaster .homepad-toast__icon-badge--success {
+  background: var(--color-emerald-green-0, #f0fbf5);
+}
+
+.homepad-toaster .homepad-toast__icon-badge--error {
+  background: var(--color-ruby-red-0, #fff5f6);
+}
+
+.homepad-toaster .homepad-toast__icon-badge--warning {
+  background: #f2a8001a;
+}
+
+.homepad-toaster .homepad-toast__icon-badge--info,
+.homepad-toaster .homepad-toast__icon-badge--default {
+  background: #0f52c71a;
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true'] [data-close-button] {
+  top: 50%;
+  right: 12px;
+  left: auto;
+  width: 20px;
+  height: 20px;
+  transform: translateY(-50%);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
+  background: transparent;
+  border-color: transparent;
+  cursor: pointer;
+}
+
+.homepad-toaster [data-sonner-toast][data-styled='true'] [data-close-button] svg {
+  width: 20px;
+  height: 20px;
+}
+
+@media (max-width: 767px) {
+  .homepad-toaster {
+    --width: calc(100vw - 16px);
+  }
+
+  .homepad-toaster[data-sonner-toaster] {
+    right: var(--mobile-offset-right, 8px);
+    left: var(--mobile-offset-left, 8px);
+    width: calc(100vw - 16px);
+    max-width: calc(100vw - 16px);
+  }
+
+  .homepad-toaster [data-sonner-toast][data-styled='true'] {
+    right: 0;
+    left: 0;
+    width: 100%;
+  }
+}

package/src/web/icons/TimelineCheckIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+
+export function TimelineCheckIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M13.3346 4L6.0013 11.3333L2.66797 8"
+        stroke="#279D54"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/ToastIcons.tsx

@@ -0,0 +1,119 @@
+import type { SVGProps } from 'react';
+
+function ToastCloseIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M15 5L5 15M5 5L15 15"
+        stroke="#B5BCC1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ToastSuccessIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M20 6L9 17L4 12"
+        stroke="#279D54"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ToastErrorIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M18 6L6 18M6 6L18 18"
+        stroke="#AE0011"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ToastWarningIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M12.0001 9.00022V13.0002M12.0001 17.0002H12.0101M21.7301 18.0002L13.7301 4.00022C13.5556 3.69243 13.3027 3.43641 12.997 3.25829C12.6913 3.08017 12.3438 2.98633 11.9901 2.98633C11.6363 2.98633 11.2888 3.08017 10.9831 3.25829C10.6774 3.43641 10.4245 3.69243 10.2501 4.00022L2.25005 18.0002C2.07373 18.3056 1.98128 18.6521 1.98206 19.0047C1.98284 19.3573 2.07683 19.7035 2.2545 20.008C2.43217 20.3126 2.6872 20.5648 2.99375 20.7391C3.30029 20.9133 3.64746 21.0034 4.00005 21.0002H20.0001C20.351 20.9999 20.6956 20.9072 20.9993 20.7315C21.3031 20.5558 21.5553 20.3033 21.7306 19.9993C21.9059 19.6954 21.9981 19.3506 21.998 18.9997C21.9979 18.6488 21.9055 18.3041 21.7301 18.0002Z"
+        stroke="#F2A800"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ToastInfoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="#0F52C7"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export {
+  ToastCloseIcon,
+  ToastErrorIcon,
+  ToastInfoIcon,
+  ToastSuccessIcon,
+  ToastWarningIcon,
+};

package/src/web/index.ts

@@ -99,6 +99,26 @@ export type { TableIconTextProps } from './components/TableIconText';
 export { Modal } from './components/Modal';
 export type { ModalFooterAlign, ModalFooterLayout, ModalProps } from './components/Modal';
 
+export { Drawer } from './components/Drawer';
+export type { DrawerProps } from './components/Drawer';
+
+export { HistoryTimeline } from './components/HistoryTimeline';
+export type { HistoryTimelineItem, HistoryTimelineProps } from './components/HistoryTimeline';
+
+export { Toaster } from './components/Toaster';
+export type { HomepadToasterProps } from './components/Toaster';
+
+export { ToasterProvider } from './components/ToasterProvider';
+
+export { toast } from './toast';
+
+export {
+  runMutationWithToast,
+  type MutationToastMessages,
+  type MutationToastResult,
+  type RunMutationWithToastOptions,
+} from './mutation-toast';
+
 export { ConfirmModal } from './components/ConfirmModal';
 export type { ConfirmModalProps } from './components/ConfirmModal';
 

package/src/web/mutation-toast.ts

@@ -0,0 +1,33 @@
+import { toast } from './toast';
+
+export type MutationToastMessages = {
+  success: string;
+  error: string;
+};
+
+export type MutationToastResult = {
+  success: boolean;
+  errorMessage?: string;
+};
+
+export type RunMutationWithToastOptions = {
+  getErrorMessage?: (error: unknown) => string;
+};
+
+export async function runMutationWithToast(
+  action: () => Promise<unknown>,
+  messages: MutationToastMessages,
+  options?: RunMutationWithToastOptions,
+): Promise<MutationToastResult> {
+  try {
+    await action();
+    toast.success(messages.success);
+
+    return { success: true };
+  } catch (error) {
+    const errorMessage = options?.getErrorMessage?.(error) ?? messages.error;
+    toast.error(errorMessage);
+
+    return { success: false, errorMessage };
+  }
+}

package/src/web/toast.ts

@@ -0,0 +1 @@
+export { toast } from 'sonner';