[Feature] SYST-583: Add our own Toast component

[alimnfl]

Description:
This pull request introduces a Toast component, allowing users to display notifications without relying on a third-party library. It provides a built-in, theme-aware solution with a simple and consistent API.

API

import { Toast } from "@systatum/coneto/toast";

Toast.alert({
  variant: "success",
  title: "Optional title",
  content: "Required content",
  actions: [],
  icon: {
    image: <CustomIcon />,
    position: "left-center",
  },
  closable: true,
  disappearAfterMs: 700,
  styles: {
    titleStyle: {},
    contentStyle: {},
    actionsStyle: {},
    containerStyle: {},
    iconStyle: {},
  },
  maxWidth: undefined,
  width: undefined,
  position: "top-right",
  detailSlot: <></>,
});

Behavior

• Support variants: primary, success, warning, danger, and neutral.
• Use appropriate default icons for supported variants.
• If variant is neutral or unsupported, do not render a default icon.
• If a custom icon is provided, it takes precedence over the variant icon.
• Provide convenience methods:
  • Toast.primary()
  • Toast.success()
  • Toast.warning()
  • Toast.danger()
  • Toast.neutral()
• Use fade-in and fade-out animations when showing and dismissing a toast.
• When detailSlot is provided, render a Show more toggle that expands/collapses the content and updates the chevron accordingly.
• Expanding the detail section disables automatic dismissal.
• When closable is enabled:
  • Render a close button in the top-right corner.
  • Only show the close button on hover.

Icon Positions

Support:

• left-center (default)
• left-top
• right-center
• right-top
• center-center

Stories

• Default
• With actions
• With detail slot
• Loading toast using a custom LoadingSpinner and center-center icon position
• Positions

Source:
[Feature] SYST-583: Add our own Toast component

Tick what you have done:
[x] I have double checked the functionality with the ticket in linear, or any other relevant discussion avenue
[x] I have created/updated any relevant test code
[x] I have tested it myself

[linear]

SYST-583

[github-actions]

Coneto Storybook preview deployed to: https://dev.files.systatum.com/coneto/ff152a2c

[github-actions]

Coneto Storybook preview deployed to: https://dev.files.systatum.com/coneto/ff152a2c

[adamnoto]

just a bit request

[adamnoto]

this doesn't need to be a function right? we can just simply declare TOAST_POSITION_STYLE Record and call it immediately, so no need a function call

[alimnfl]

done

[adamnoto]

scheduleRemoval

[alimnfl]

done

[github-actions]

Coneto Storybook preview deployed to: https://dev.files.systatum.com/coneto/ff152a2c

[adamnoto]