@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

package/demo/view-error-toast-index-stories.abbda66b.iframe.bundle.js

@@ -0,0 +1,377 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[1800],{"./lib/view/error-toast/index.stories.tsx"(W,u,o){o.r(u),o.d(u,{BasicError:()=>E,ToastDifferentTypes:()=>x,__namedExportsOrder:()=>F,default:()=>M});var B=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),w=o.n(B),g=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),e=o.n(g),_=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/slicedToArray.js"),R=o.n(_),T=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),r=o("./node_modules/.pnpm/@elliemae+ds-toast@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-toast/dist/esm/constants.js"),b=o("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),d=o("./lib/data/useAppDispatch.ts"),y=o("./lib/data/error/index.ts"),S=o("./lib/view/error-toast/index.tsx"),m=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),k=["messageText","type"],f,h,A=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Meta } from '@storybook/react';\\nimport { useEffect, useState } from 'react';\\nimport { ToastType } from '@elliemae/ds-toast';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useAppDispatch } from '../../data/react.js';\\nimport { error } from '../../index.js';\\nimport { ErrorToast } from './index.js';\\n\\nexport default {\\n  title: 'Components/ErrorToast',\\n  Component: ErrorToast,\\n} as Meta;\\n\\nconst Renderer = ({ Comp }: { Comp: React.ComponentType }) => {\\n  const [show, setShow] = useState(false);\\n  useEffect(() => {\\n    setShow(true);\\n  }, []);\\n  return show ? <Comp /> : null;\\n};\\n\\nconst Basic = () => {\\n  const dispatch = useAppDispatch();\\n  useEffect(() => {\\n    dispatch(error.set({ description: 'This is Error Toast' }));\\n  }, [dispatch]);\\n  return null;\\n};\\n\\nexport const BasicError = () => <Renderer Comp={Basic} />;\\n\\ninterface ShowToastProps {\\n  messageText?: string;\\n  type: (typeof ToastType)[keyof typeof ToastType];\\n}\\n// Action wrappers for readability\\nconst showToast = ({\\n  messageText = 'Toast Message',\\n  type = ToastType.DEFAULT,\\n  ...props\\n}: ShowToastProps) =>\\n  error.set({\\n    type,\\n    messageText,\\n    messageTitle: type,\\n    containerId: 'app-toast',\\n    ...props,\\n  });\\nconst successToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.SUCCESS });\\nconst infoToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.INFO });\\nconst warningToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.WARNING });\\nconst errorToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.ERROR });\\n\\nconst ToastButton = ({\\n  labelText,\\n  onClick,\\n}: {\\n  labelText: string;\\n  onClick: () => void;\\n}) => (\\n  <DSButtonV2 buttonType=\\"text\\" onClick={onClick}>\\n    {labelText}\\n  </DSButtonV2>\\n);\\n\\ntype ToastActionFn = ({\\n  description,\\n}: {\\n  description: string;\\n}) => ReturnType<typeof showToast>;\\n\\nconst ToastMultipleTypes = () => {\\n  const dispatch = useAppDispatch();\\n  const openToast = (toastAction: ToastActionFn) => () =>\\n    dispatch(toastAction({ description: 'This is Error Toast' }));\\n  return (\\n    <>\\n      <ToastButton labelText=\\"Success\\" onClick={openToast(successToast)} />\\n      <ToastButton labelText=\\"Info\\" onClick={openToast(infoToast)} />\\n      <ToastButton labelText=\\"Warning\\" onClick={openToast(warningToast)} />\\n      <ToastButton labelText=\\"Error\\" onClick={openToast(errorToast)} />\\n    </>\\n  );\\n};\\n\\nexport const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"BasicError":{"startLoc":{"col":26,"line":30},"endLoc":{"col":57,"line":30},"startBody":{"col":26,"line":30},"endBody":{"col":57,"line":30}},"ToastDifferentTypes":{"startLoc":{"col":35,"line":90},"endLoc":{"col":79,"line":90},"startBody":{"col":35,"line":90},"endBody":{"col":79,"line":90}}};
+    
+import { Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { ToastType } from '@elliemae/ds-toast';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useAppDispatch } from '../../data/react.js';
+import { error } from '../../index.js';
+import { ErrorToast } from './index.js';
+
+export default {parameters: {"storySource":{"source":"import { Meta } from '@storybook/react';\\nimport { useEffect, useState } from 'react';\\nimport { ToastType } from '@elliemae/ds-toast';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useAppDispatch } from '../../data/react.js';\\nimport { error } from '../../index.js';\\nimport { ErrorToast } from './index.js';\\n\\nexport default {\\n  title: 'Components/ErrorToast',\\n  Component: ErrorToast,\\n} as Meta;\\n\\nconst Renderer = ({ Comp }: { Comp: React.ComponentType }) => {\\n  const [show, setShow] = useState(false);\\n  useEffect(() => {\\n    setShow(true);\\n  }, []);\\n  return show ? <Comp /> : null;\\n};\\n\\nconst Basic = () => {\\n  const dispatch = useAppDispatch();\\n  useEffect(() => {\\n    dispatch(error.set({ description: 'This is Error Toast' }));\\n  }, [dispatch]);\\n  return null;\\n};\\n\\nexport const BasicError = () => <Renderer Comp={Basic} />;\\n\\ninterface ShowToastProps {\\n  messageText?: string;\\n  type: (typeof ToastType)[keyof typeof ToastType];\\n}\\n// Action wrappers for readability\\nconst showToast = ({\\n  messageText = 'Toast Message',\\n  type = ToastType.DEFAULT,\\n  ...props\\n}: ShowToastProps) =>\\n  error.set({\\n    type,\\n    messageText,\\n    messageTitle: type,\\n    containerId: 'app-toast',\\n    ...props,\\n  });\\nconst successToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.SUCCESS });\\nconst infoToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.INFO });\\nconst warningToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.WARNING });\\nconst errorToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.ERROR });\\n\\nconst ToastButton = ({\\n  labelText,\\n  onClick,\\n}: {\\n  labelText: string;\\n  onClick: () => void;\\n}) => (\\n  <DSButtonV2 buttonType=\\"text\\" onClick={onClick}>\\n    {labelText}\\n  </DSButtonV2>\\n);\\n\\ntype ToastActionFn = ({\\n  description,\\n}: {\\n  description: string;\\n}) => ReturnType<typeof showToast>;\\n\\nconst ToastMultipleTypes = () => {\\n  const dispatch = useAppDispatch();\\n  const openToast = (toastAction: ToastActionFn) => () =>\\n    dispatch(toastAction({ description: 'This is Error Toast' }));\\n  return (\\n    <>\\n      <ToastButton labelText=\\"Success\\" onClick={openToast(successToast)} />\\n      <ToastButton labelText=\\"Info\\" onClick={openToast(infoToast)} />\\n      <ToastButton labelText=\\"Warning\\" onClick={openToast(warningToast)} />\\n      <ToastButton labelText=\\"Error\\" onClick={openToast(errorToast)} />\\n    </>\\n  );\\n};\\n\\nexport const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;\\n","locationsMap":{"basic-error":{"startLoc":{"col":26,"line":30},"endLoc":{"col":57,"line":30},"startBody":{"col":26,"line":30},"endBody":{"col":57,"line":30}},"toast-different-types":{"startLoc":{"col":35,"line":90},"endLoc":{"col":79,"line":90},"startBody":{"col":35,"line":90},"endBody":{"col":79,"line":90}}}},},
+  title: 'Components/ErrorToast',
+  Component: ErrorToast,
+} as Meta;
+
+const Renderer = ({ Comp }: { Comp: React.ComponentType }) => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    setShow(true);
+  }, []);
+  return show ? <Comp /> : null;
+};
+
+const Basic = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(error.set({ description: 'This is Error Toast' }));
+  }, [dispatch]);
+  return null;
+};
+
+export const BasicError = () => <Renderer Comp={Basic} />;;
+
+interface ShowToastProps {
+  messageText?: string;
+  type: (typeof ToastType)[keyof typeof ToastType];
+}
+// Action wrappers for readability
+const showToast = ({
+  messageText = 'Toast Message',
+  type = ToastType.DEFAULT,
+  ...props
+}: ShowToastProps) =>
+  error.set({
+    type,
+    messageText,
+    messageTitle: type,
+    containerId: 'app-toast',
+    ...props,
+  });
+const successToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.SUCCESS });
+const infoToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.INFO });
+const warningToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.WARNING });
+const errorToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.ERROR });
+
+const ToastButton = ({
+  labelText,
+  onClick,
+}: {
+  labelText: string;
+  onClick: () => void;
+}) => (
+  <DSButtonV2 buttonType="text" onClick={onClick}>
+    {labelText}
+  </DSButtonV2>
+);
+
+type ToastActionFn = ({
+  description,
+}: {
+  description: string;
+}) => ReturnType<typeof showToast>;
+
+const ToastMultipleTypes = () => {
+  const dispatch = useAppDispatch();
+  const openToast = (toastAction: ToastActionFn) => () =>
+    dispatch(toastAction({ description: 'This is Error Toast' }));
+  return (
+    <>
+      <ToastButton labelText="Success" onClick={openToast(successToast)} />
+      <ToastButton labelText="Info" onClick={openToast(infoToast)} />
+      <ToastButton labelText="Warning" onClick={openToast(warningToast)} />
+      <ToastButton labelText="Error" onClick={openToast(errorToast)} />
+    </>
+  );
+};
+
+export const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;
+`,D={BasicError:{startLoc:{col:26,line:38},endLoc:{col:57,line:38},startBody:{col:26,line:38},endBody:{col:57,line:38}},ToastDifferentTypes:{startLoc:{col:35,line:98},endLoc:{col:79,line:98},startBody:{col:35,line:98},endBody:{col:79,line:98}}},A=`import { Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { ToastType } from '@elliemae/ds-toast';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useAppDispatch } from '../../data/react.js';
+import { error } from '../../index.js';
+import { ErrorToast } from './index.js';
+
+export default {
+  title: 'Components/ErrorToast',
+  Component: ErrorToast,
+} as Meta;
+
+const Renderer = ({ Comp }: { Comp: React.ComponentType }) => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    setShow(true);
+  }, []);
+  return show ? <Comp /> : null;
+};
+
+const Basic = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(error.set({ description: 'This is Error Toast' }));
+  }, [dispatch]);
+  return null;
+};
+
+export const BasicError = () => <Renderer Comp={Basic} />;
+
+interface ShowToastProps {
+  messageText?: string;
+  type: (typeof ToastType)[keyof typeof ToastType];
+}
+// Action wrappers for readability
+const showToast = ({
+  messageText = 'Toast Message',
+  type = ToastType.DEFAULT,
+  ...props
+}: ShowToastProps) =>
+  error.set({
+    type,
+    messageText,
+    messageTitle: type,
+    containerId: 'app-toast',
+    ...props,
+  });
+const successToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.SUCCESS });
+const infoToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.INFO });
+const warningToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.WARNING });
+const errorToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.ERROR });
+
+const ToastButton = ({
+  labelText,
+  onClick,
+}: {
+  labelText: string;
+  onClick: () => void;
+}) => (
+  <DSButtonV2 buttonType="text" onClick={onClick}>
+    {labelText}
+  </DSButtonV2>
+);
+
+type ToastActionFn = ({
+  description,
+}: {
+  description: string;
+}) => ReturnType<typeof showToast>;
+
+const ToastMultipleTypes = () => {
+  const dispatch = useAppDispatch();
+  const openToast = (toastAction: ToastActionFn) => () =>
+    dispatch(toastAction({ description: 'This is Error Toast' }));
+  return (
+    <>
+      <ToastButton labelText="Success" onClick={openToast(successToast)} />
+      <ToastButton labelText="Info" onClick={openToast(infoToast)} />
+      <ToastButton labelText="Warning" onClick={openToast(warningToast)} />
+      <ToastButton labelText="Error" onClick={openToast(errorToast)} />
+    </>
+  );
+};
+
+export const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;
+`,D={BasicError:{startLoc:{col:26,line:30},endLoc:{col:57,line:30},startBody:{col:26,line:30},endBody:{col:57,line:30}},ToastDifferentTypes:{startLoc:{col:35,line:90},endLoc:{col:79,line:90},startBody:{col:35,line:90},endBody:{col:79,line:90}}};const M={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Meta } from '@storybook/react';\\nimport { useEffect, useState } from 'react';\\nimport { ToastType } from '@elliemae/ds-toast';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useAppDispatch } from '../../data/react.js';\\nimport { error } from '../../index.js';\\nimport { ErrorToast } from './index.js';\\n\\nexport default {\\n  title: 'Components/ErrorToast',\\n  Component: ErrorToast,\\n} as Meta;\\n\\nconst Renderer = ({ Comp }: { Comp: React.ComponentType }) => {\\n  const [show, setShow] = useState(false);\\n  useEffect(() => {\\n    setShow(true);\\n  }, []);\\n  return show ? <Comp /> : null;\\n};\\n\\nconst Basic = () => {\\n  const dispatch = useAppDispatch();\\n  useEffect(() => {\\n    dispatch(error.set({ description: 'This is Error Toast' }));\\n  }, [dispatch]);\\n  return null;\\n};\\n\\nexport const BasicError = () => <Renderer Comp={Basic} />;\\n\\ninterface ShowToastProps {\\n  messageText?: string;\\n  type: (typeof ToastType)[keyof typeof ToastType];\\n}\\n// Action wrappers for readability\\nconst showToast = ({\\n  messageText = 'Toast Message',\\n  type = ToastType.DEFAULT,\\n  ...props\\n}: ShowToastProps) =>\\n  error.set({\\n    type,\\n    messageText,\\n    messageTitle: type,\\n    containerId: 'app-toast',\\n    ...props,\\n  });\\nconst successToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.SUCCESS });\\nconst infoToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.INFO });\\nconst warningToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.WARNING });\\nconst errorToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.ERROR });\\n\\nconst ToastButton = ({\\n  labelText,\\n  onClick,\\n}: {\\n  labelText: string;\\n  onClick: () => void;\\n}) => (\\n  <DSButtonV2 buttonType=\\"text\\" onClick={onClick}>\\n    {labelText}\\n  </DSButtonV2>\\n);\\n\\ntype ToastActionFn = ({\\n  description,\\n}: {\\n  description: string;\\n}) => ReturnType<typeof showToast>;\\n\\nconst ToastMultipleTypes = () => {\\n  const dispatch = useAppDispatch();\\n  const openToast = (toastAction: ToastActionFn) => () =>\\n    dispatch(toastAction({ description: 'This is Error Toast' }));\\n  return (\\n    <>\\n      <ToastButton labelText=\\"Success\\" onClick={openToast(successToast)} />\\n      <ToastButton labelText=\\"Info\\" onClick={openToast(infoToast)} />\\n      <ToastButton labelText=\\"Warning\\" onClick={openToast(warningToast)} />\\n      <ToastButton labelText=\\"Error\\" onClick={openToast(errorToast)} />\\n    </>\\n  );\\n};\\n\\nexport const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"BasicError":{"startLoc":{"col":26,"line":30},"endLoc":{"col":57,"line":30},"startBody":{"col":26,"line":30},"endBody":{"col":57,"line":30}},"ToastDifferentTypes":{"startLoc":{"col":35,"line":90},"endLoc":{"col":79,"line":90},"startBody":{"col":35,"line":90},"endBody":{"col":79,"line":90}}};
+    
+import { Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { ToastType } from '@elliemae/ds-toast';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useAppDispatch } from '../../data/react.js';
+import { error } from '../../index.js';
+import { ErrorToast } from './index.js';
+
+export default {parameters: {"storySource":{"source":"import { Meta } from '@storybook/react';\\nimport { useEffect, useState } from 'react';\\nimport { ToastType } from '@elliemae/ds-toast';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useAppDispatch } from '../../data/react.js';\\nimport { error } from '../../index.js';\\nimport { ErrorToast } from './index.js';\\n\\nexport default {\\n  title: 'Components/ErrorToast',\\n  Component: ErrorToast,\\n} as Meta;\\n\\nconst Renderer = ({ Comp }: { Comp: React.ComponentType }) => {\\n  const [show, setShow] = useState(false);\\n  useEffect(() => {\\n    setShow(true);\\n  }, []);\\n  return show ? <Comp /> : null;\\n};\\n\\nconst Basic = () => {\\n  const dispatch = useAppDispatch();\\n  useEffect(() => {\\n    dispatch(error.set({ description: 'This is Error Toast' }));\\n  }, [dispatch]);\\n  return null;\\n};\\n\\nexport const BasicError = () => <Renderer Comp={Basic} />;\\n\\ninterface ShowToastProps {\\n  messageText?: string;\\n  type: (typeof ToastType)[keyof typeof ToastType];\\n}\\n// Action wrappers for readability\\nconst showToast = ({\\n  messageText = 'Toast Message',\\n  type = ToastType.DEFAULT,\\n  ...props\\n}: ShowToastProps) =>\\n  error.set({\\n    type,\\n    messageText,\\n    messageTitle: type,\\n    containerId: 'app-toast',\\n    ...props,\\n  });\\nconst successToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.SUCCESS });\\nconst infoToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.INFO });\\nconst warningToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.WARNING });\\nconst errorToast = (props: Record<string, unknown>) =>\\n  showToast({ ...props, type: ToastType.ERROR });\\n\\nconst ToastButton = ({\\n  labelText,\\n  onClick,\\n}: {\\n  labelText: string;\\n  onClick: () => void;\\n}) => (\\n  <DSButtonV2 buttonType=\\"text\\" onClick={onClick}>\\n    {labelText}\\n  </DSButtonV2>\\n);\\n\\ntype ToastActionFn = ({\\n  description,\\n}: {\\n  description: string;\\n}) => ReturnType<typeof showToast>;\\n\\nconst ToastMultipleTypes = () => {\\n  const dispatch = useAppDispatch();\\n  const openToast = (toastAction: ToastActionFn) => () =>\\n    dispatch(toastAction({ description: 'This is Error Toast' }));\\n  return (\\n    <>\\n      <ToastButton labelText=\\"Success\\" onClick={openToast(successToast)} />\\n      <ToastButton labelText=\\"Info\\" onClick={openToast(infoToast)} />\\n      <ToastButton labelText=\\"Warning\\" onClick={openToast(warningToast)} />\\n      <ToastButton labelText=\\"Error\\" onClick={openToast(errorToast)} />\\n    </>\\n  );\\n};\\n\\nexport const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;\\n","locationsMap":{"basic-error":{"startLoc":{"col":26,"line":30},"endLoc":{"col":57,"line":30},"startBody":{"col":26,"line":30},"endBody":{"col":57,"line":30}},"toast-different-types":{"startLoc":{"col":35,"line":90},"endLoc":{"col":79,"line":90},"startBody":{"col":35,"line":90},"endBody":{"col":79,"line":90}}}},},
+  title: 'Components/ErrorToast',
+  Component: ErrorToast,
+} as Meta;
+
+const Renderer = ({ Comp }: { Comp: React.ComponentType }) => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    setShow(true);
+  }, []);
+  return show ? <Comp /> : null;
+};
+
+const Basic = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(error.set({ description: 'This is Error Toast' }));
+  }, [dispatch]);
+  return null;
+};
+
+export const BasicError = () => <Renderer Comp={Basic} />;;
+
+interface ShowToastProps {
+  messageText?: string;
+  type: (typeof ToastType)[keyof typeof ToastType];
+}
+// Action wrappers for readability
+const showToast = ({
+  messageText = 'Toast Message',
+  type = ToastType.DEFAULT,
+  ...props
+}: ShowToastProps) =>
+  error.set({
+    type,
+    messageText,
+    messageTitle: type,
+    containerId: 'app-toast',
+    ...props,
+  });
+const successToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.SUCCESS });
+const infoToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.INFO });
+const warningToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.WARNING });
+const errorToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.ERROR });
+
+const ToastButton = ({
+  labelText,
+  onClick,
+}: {
+  labelText: string;
+  onClick: () => void;
+}) => (
+  <DSButtonV2 buttonType="text" onClick={onClick}>
+    {labelText}
+  </DSButtonV2>
+);
+
+type ToastActionFn = ({
+  description,
+}: {
+  description: string;
+}) => ReturnType<typeof showToast>;
+
+const ToastMultipleTypes = () => {
+  const dispatch = useAppDispatch();
+  const openToast = (toastAction: ToastActionFn) => () =>
+    dispatch(toastAction({ description: 'This is Error Toast' }));
+  return (
+    <>
+      <ToastButton labelText="Success" onClick={openToast(successToast)} />
+      <ToastButton labelText="Info" onClick={openToast(infoToast)} />
+      <ToastButton labelText="Warning" onClick={openToast(warningToast)} />
+      <ToastButton labelText="Error" onClick={openToast(errorToast)} />
+    </>
+  );
+};
+
+export const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;
+`,locationsMap:{"basic-error":{startLoc:{col:26,line:38},endLoc:{col:57,line:38},startBody:{col:26,line:38},endBody:{col:57,line:38}},"toast-different-types":{startLoc:{col:35,line:98},endLoc:{col:79,line:98},startBody:{col:35,line:98},endBody:{col:79,line:98}}}},storySource:{source:`import { Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { ToastType } from '@elliemae/ds-toast';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useAppDispatch } from '../../data/react.js';
+import { error } from '../../index.js';
+import { ErrorToast } from './index.js';
+
+export default {
+  title: 'Components/ErrorToast',
+  Component: ErrorToast,
+} as Meta;
+
+const Renderer = ({ Comp }: { Comp: React.ComponentType }) => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    setShow(true);
+  }, []);
+  return show ? <Comp /> : null;
+};
+
+const Basic = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(error.set({ description: 'This is Error Toast' }));
+  }, [dispatch]);
+  return null;
+};
+
+export const BasicError = () => <Renderer Comp={Basic} />;
+
+interface ShowToastProps {
+  messageText?: string;
+  type: (typeof ToastType)[keyof typeof ToastType];
+}
+// Action wrappers for readability
+const showToast = ({
+  messageText = 'Toast Message',
+  type = ToastType.DEFAULT,
+  ...props
+}: ShowToastProps) =>
+  error.set({
+    type,
+    messageText,
+    messageTitle: type,
+    containerId: 'app-toast',
+    ...props,
+  });
+const successToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.SUCCESS });
+const infoToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.INFO });
+const warningToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.WARNING });
+const errorToast = (props: Record<string, unknown>) =>
+  showToast({ ...props, type: ToastType.ERROR });
+
+const ToastButton = ({
+  labelText,
+  onClick,
+}: {
+  labelText: string;
+  onClick: () => void;
+}) => (
+  <DSButtonV2 buttonType="text" onClick={onClick}>
+    {labelText}
+  </DSButtonV2>
+);
+
+type ToastActionFn = ({
+  description,
+}: {
+  description: string;
+}) => ReturnType<typeof showToast>;
+
+const ToastMultipleTypes = () => {
+  const dispatch = useAppDispatch();
+  const openToast = (toastAction: ToastActionFn) => () =>
+    dispatch(toastAction({ description: 'This is Error Toast' }));
+  return (
+    <>
+      <ToastButton labelText="Success" onClick={openToast(successToast)} />
+      <ToastButton labelText="Info" onClick={openToast(infoToast)} />
+      <ToastButton labelText="Warning" onClick={openToast(warningToast)} />
+      <ToastButton labelText="Error" onClick={openToast(errorToast)} />
+    </>
+  );
+};
+
+export const ToastDifferentTypes = () => <Renderer Comp={ToastMultipleTypes} />;
+`,locationsMap:{"basic-error":{startLoc:{col:26,line:30},endLoc:{col:57,line:30},startBody:{col:26,line:30},endBody:{col:57,line:30}},"toast-different-types":{startLoc:{col:35,line:90},endLoc:{col:79,line:90},startBody:{col:35,line:90},endBody:{col:79,line:90}}}}},title:"Components/ErrorToast",Component:S.Q};var C=function(n){var t=n.Comp,s=(0,T.useState)(!1),p=R()(s,2),c=p[0],l=p[1];return(0,T.useEffect)(function(){l(!0)},[]),c?e()(t,{}):null},v=function(){var n=(0,d.j)();return(0,T.useEffect)(function(){n(y.o.set({description:"This is Error Toast"}))},[n]),null},E=function(){return f||(f=e()(C,{Comp:v}))};E.displayName="BasicError";var i=function(n){var t=n.messageText,s=t===void 0?"Toast Message":t,p=n.type,c=p===void 0?r.Ck.DEFAULT:p,l=w()(n,k);return y.o.set(Object.assign({type:c,messageText:s,messageTitle:c,containerId:"app-toast"},l))},O=function(n){return i(Object.assign({},n,{type:r.Ck.SUCCESS}))},L=function(n){return i(Object.assign({},n,{type:r.Ck.INFO}))},I=function(n){return i(Object.assign({},n,{type:r.Ck.WARNING}))},P=function(n){return i(Object.assign({},n,{type:r.Ck.ERROR}))},a=function(n){var t=n.labelText,s=n.onClick;return e()(b.e,{buttonType:"text",onClick:s},void 0,t)};a.displayName="ToastButton";var j=function(){var n=(0,d.j)(),t=function(s){return function(){return n(s({description:"This is Error Toast"}))}};return(0,m.jsxs)(m.Fragment,{children:[e()(a,{labelText:"Success",onClick:t(O)}),e()(a,{labelText:"Info",onClick:t(L)}),e()(a,{labelText:"Warning",onClick:t(I)}),e()(a,{labelText:"Error",onClick:t(P)})]})},x=function(){return h||(h=e()(C,{Comp:j}))};x.displayName="ToastDifferentTypes";var F=["BasicError","ToastDifferentTypes"]}}]);