@startupjs-ui/toast 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/toast
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **toast:** refactor toast, ToastProvider, Toast components ([f56f8be](https://github.com/startupjs/startupjs-ui/commit/f56f8be5c63dfb7c44855b7c35758be9a5c49387))

package/README.helpers.js

@@ -0,0 +1,76 @@
+import { Fragment } from 'react'
+import { pug } from 'startupjs'
+import Button from '@startupjs-ui/button'
+import Br from '@startupjs-ui/br'
+import Div from '@startupjs-ui/div'
+import Toast from './ToastView'
+import { toast } from './index'
+
+const BASE_TOAST_PROPS = {
+  show: true,
+  topPosition: 0,
+  height: 72,
+  type: 'info',
+  title: 'Info',
+  text: 'Note archived',
+  actionLabel: 'View',
+  onAction: () => {}
+}
+
+export function ToastProviderSandbox () {
+  function onPressInfo () {
+    toast({ text: 'Note archived' })
+  }
+
+  function onPressSuccess () {
+    toast({ type: 'success', title: 'Success', text: 'Profile saved' })
+  }
+
+  function onPressAlert () {
+    toast({ type: 'error', title: 'Error', text: 'Something went wrong', alert: true })
+  }
+
+  return pug`
+    Fragment
+      Button(onPress=onPressInfo) Show info toast
+      Br
+      Button(onPress=onPressSuccess) Show success toast
+      Br
+      Button(onPress=onPressAlert) Show alert toast
+  `
+}
+
+export function ToastFunctionSandbox ({
+  alert,
+  icon,
+  text,
+  type,
+  title,
+  actionLabel
+}) {
+  function onPress () {
+    toast({
+      alert,
+      icon,
+      text,
+      type,
+      title,
+      actionLabel
+    })
+  }
+
+  return pug`
+    Fragment
+      Button(onPress=onPress) Show toast
+  `
+}
+
+export function ToastComponentSandbox (props) {
+  const onLayout = () => {}
+  const mergedProps = { ...BASE_TOAST_PROPS, ...props }
+
+  return pug`
+    Div(style={ position: 'relative', minHeight: 120 })
+      Toast(...mergedProps onLayout=onLayout)
+  `
+}

package/README.mdx

@@ -0,0 +1,79 @@
+import { pug } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import Button from '@startupjs-ui/button'
+import { toast } from './index'
+import { _PropsJsonSchema as ToastOptionsPropsJsonSchema } from './toast'
+import { _PropsJsonSchema as ToastPropsJsonSchema } from './ToastView'
+import { _PropsJsonSchema as ToastProviderPropsJsonSchema } from './ToastProvider'
+import {
+  ToastProviderSandbox,
+  ToastFunctionSandbox,
+  ToastComponentSandbox
+} from './README.helpers'
+import './index.mdx.cssx.styl'
+
+# Toast
+
+Toast provides brief non-blocking notifications that inform users of a process that an app has performed or will perform.
+
+```js
+import { ToastProvider, toast } from 'startupjs-ui'
+```
+
+## Installation
+
+Render `ToastProvider` once inside `Portal.Provider` before your page context (for example, `Stack`).
+
+```jsx
+import { Portal, ToastProvider, DialogsProvider } from 'startupjs-ui'
+import { Stack } from 'expo-router'
+
+export default function RootLayout () {
+  return (
+    <>
+      <Portal.Provider>
+        <ToastProvider />
+        <Stack />
+      </Portal.Provider>
+      <DialogsProvider />
+    </>
+  )
+}
+```
+
+## Simple example
+
+```jsx example
+function onPress () {
+  toast({ text: 'Note archived' })
+}
+
+return pug`
+  Button(onPress=onPress) Show toast
+`
+```
+
+## Sandbox
+
+### toast
+
+<Sandbox
+  Component={ToastFunctionSandbox}
+  props={{ title: 'Info', text: 'Note archived', type: 'info' }}
+  propsJsonSchema={ToastOptionsPropsJsonSchema}
+/>
+
+### ToastProvider
+
+<Sandbox
+  Component={ToastProviderSandbox}
+  propsJsonSchema={ToastProviderPropsJsonSchema}
+/>
+
+### Toast (internal component, usually you won't want to use it directly)
+
+<Sandbox
+  Component={ToastComponentSandbox}
+  props={{ title: 'Info', text: 'Note archived', type: 'info' }}
+  propsJsonSchema={ToastPropsJsonSchema}
+/>

package/ToastProvider.tsx

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import Portal from '@startupjs-ui/portal'
+import { $toasts } from './helpers'
+import Toast, { type ToastProps } from './ToastView'
+
+export const _PropsJsonSchema = {/* ToastProviderProps */}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ToastProviderProps {}
+
+function ToastProvider (): ReactNode {
+  const toasts = $toasts.get() as ToastProps[] | undefined
+
+  if (!toasts?.length) return null
+
+  return pug`
+    Portal
+      each toast in toasts
+        Toast(...toast key=toast.key)
+  `
+}
+
+export default observer(ToastProvider) as any

package/ToastView.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import { Animated } from 'react-native'
+import { pug, observer } from 'startupjs'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import Icon, { type IconProps } from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import { themed } from '@startupjs-ui/core'
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle'
+import './index.cssx.styl'
+
+const DURATION_OPEN = 300
+const DURATION_CLOSE = 150
+
+const ICONS = {
+  info: faInfoCircle,
+  error: faExclamationCircle,
+  warning: faExclamationTriangle,
+  success: faCheckCircle
+}
+
+const TITLES = {
+  info: 'Info',
+  error: 'Error',
+  warning: 'Warning',
+  success: 'Success'
+}
+
+export const _PropsJsonSchema = {/* ToastProps */}
+
+export interface ToastProps {
+  /** Visual style variant @default 'info' */
+  type?: 'info' | 'error' | 'warning' | 'success'
+  /** Y offset used to stack multiple toasts */
+  topPosition: number
+  /** Current toast height for stacking calculations */
+  height?: number
+  /** Controls whether the toast is visible */
+  show: boolean
+  /** Custom icon shown next to the title */
+  icon?: IconProps['icon']
+  /** Body text displayed under the title */
+  text?: string
+  /** Title text displayed in the header */
+  title?: string
+  /** Action button label displayed below the text @default 'View' */
+  actionLabel?: string
+  /** Action button press handler */
+  onAction?: () => void
+  /** Called after the toast is closed and removed */
+  onClose?: () => void
+  /** Layout callback used to measure toast height */
+  onLayout: (layout: { height: number }) => void
+}
+
+function Toast ({
+  type = 'info',
+  topPosition,
+  height,
+  show,
+  icon,
+  text,
+  title,
+  actionLabel = 'View',
+  onAction,
+  onClose,
+  onLayout
+}: ToastProps): ReactNode {
+  const [showAnimation] = useState(() => new Animated.Value(0))
+  const [topAnimation] = useState(() => new Animated.Value(topPosition))
+
+  const onShow = useCallback(() => {
+    Animated
+      .timing(showAnimation, { toValue: 1, duration: DURATION_OPEN, useNativeDriver: false })
+      .start()
+  }, [showAnimation])
+
+  const onHide = useCallback(() => {
+    Animated
+      .timing(showAnimation, { toValue: 0, duration: DURATION_CLOSE, useNativeDriver: false })
+      .start(onClose)
+  }, [onClose, showAnimation])
+
+  useEffect(() => {
+    Animated
+      .timing(topAnimation, { toValue: topPosition, duration: DURATION_OPEN, useNativeDriver: false })
+      .start()
+  }, [topPosition, topAnimation])
+
+  useEffect(() => {
+    if (show && height) onShow()
+    if (!show) onHide()
+  }, [height, onHide, onShow, show])
+
+  return pug`
+    Animated.View.root(
+      style={
+        opacity: showAnimation,
+        right: showAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-48, 0]
+        }),
+        top: topAnimation
+      }
+      onLayout=e=> onLayout(e.nativeEvent.layout)
+    )
+      Div.toast(styleName=[type])
+        Div.header(vAlign='center' row)
+          Div(vAlign='center' row)
+            Icon.icon(
+              icon=icon ? icon : ICONS[type]
+              styleName=[type]
+            )
+            Span.title(styleName=[type])
+              = title ? title : TITLES[type]
+          Div(onPress=onHide)
+            Icon(icon=faTimes)
+
+        if text
+          Span.text= text
+
+        if onAction
+          Div.actions(row)
+            Button(
+              size='s'
+              onPress=() => {
+                onAction()
+                onHide()
+              }
+            )= actionLabel
+  `
+}
+
+export default observer(themed('Toast', Toast))

package/helpers.ts

@@ -0,0 +1,3 @@
+import { $ } from 'startupjs'
+
+export const $toasts = $()

package/index.cssx.styl

@@ -0,0 +1,68 @@
+.root
+  position absolute
+  width 100%
+
+  +from($UI.media.mobile)
+    max-width 40u
+    min-width 30u
+    padding-right 2u
+    padding-top 2u
+
+.toast
+  padding 2u
+  justify-content center
+  border-radius .5u
+  background-color var(--color-bg-main-strong)
+  border-top-width 4px
+  border-top-style solid
+  shadow(2)
+
+  &.info
+    border-top-color var(--color-border-primary)
+
+  &.error
+    border-top-color var(--color-border-error)
+
+  &.warning
+    border-top-color var(--color-border-warning)
+
+  &.success
+    border-top-color var(--color-border-success)
+
+.header
+  justify-content space-between
+
+.text
+  margin-top 1u
+
+.title
+  margin-left 1u
+
+  &.info
+    color var(--color-text-primary)
+
+  &.error
+    color var(--color-text-error)
+
+  &.warning
+    color var(--color-text-warning)
+
+  &.success
+    color var(--color-text-success)
+
+.icon
+  &.info
+    color var(--color-text-primary)
+
+  &.error
+    color var(--color-text-error)
+
+  &.warning
+    color var(--color-text-warning)
+
+  &.success
+    color var(--color-text-success)
+
+.actions
+  margin-top 1u
+  justify-content flex-end

package/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+export { default as Toast, type ToastProps } from './ToastView';
+export { default as ToastProvider, type ToastProviderProps } from './ToastProvider';
+export { default as toast, type ToastOptions } from './toast';

package/index.mdx.cssx.styl

@@ -0,0 +1,2 @@
+.table
+  background-color white

package/index.tsx

@@ -0,0 +1,3 @@
+export { default as Toast, type ToastProps } from './ToastView'
+export { default as ToastProvider, type ToastProviderProps } from './ToastProvider'
+export { default as toast, type ToastOptions } from './toast'

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@startupjs-ui/toast",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/portal": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/toast.ts

@@ -0,0 +1,127 @@
+import { $ } from 'startupjs'
+import { $toasts } from './helpers'
+import { type ToastProps } from './ToastView'
+
+const MAX_SHOW_LENGTH = 3
+
+export const _PropsJsonSchema = {/* ToastOptions */}
+
+export interface ToastOptions {
+  /** Prevents auto-close after 5 seconds */
+  alert?: boolean
+  /** Custom icon shown next to the title */
+  icon?: ToastProps['icon']
+  /** Body text displayed under the title */
+  text?: string
+  /** Visual style variant @default 'info' */
+  type?: ToastProps['type']
+  /** Title text displayed in the header */
+  title?: string
+  /** Action button label displayed below the text @default 'View' */
+  actionLabel?: string
+  /** Action button press handler */
+  onAction?: () => void
+  /** Called after the toast is closed and removed */
+  onClose?: () => void
+}
+
+type ToastStackItem = ToastProps & {
+  key: string
+  alert?: boolean
+}
+
+// NOTE
+// Is this the best way to update position of toasts?
+// Is there a better way to do this?
+// We want to remove unnecessary props from toast
+// component that are added by these calculations.
+const updateMatrixPositions = () => {
+  const toasts = $toasts.get() as ToastStackItem[]
+
+  const updateToasts = toasts.map((toast, index) => {
+    const prevToast = toasts[index - 1]
+
+    if (prevToast) {
+      const prevHeight = prevToast.height ?? 0
+      toast.topPosition = prevToast.topPosition + prevHeight
+    } else {
+      toast.topPosition = 0
+    }
+
+    return toast
+  })
+
+  $toasts.set(updateToasts)
+}
+
+export default function toast ({
+  alert,
+  icon,
+  text,
+  type,
+  title,
+  actionLabel,
+  onAction,
+  onClose
+}: ToastOptions): void {
+  const toastId = $.id() as string
+
+  if ($toasts.get()?.length === MAX_SHOW_LENGTH) {
+    $toasts[MAX_SHOW_LENGTH - 1].show.set(false)
+  }
+
+  if (!alert) {
+    setTimeout(() => {
+      const index = getValidIndex()
+      if (index !== -1) $toasts[index].show.set(false)
+    }, 5000)
+  }
+
+  function onRemove () {
+    const index = getValidIndex()
+    if (index === -1) return
+
+    $toasts[index].del()
+    updateMatrixPositions()
+    onClose && onClose()
+  }
+
+  // toastId ensures that the correct index is found at the current moment
+  function getValidIndex () {
+    const toasts = $toasts.get() as ToastStackItem[]
+    return toasts.findIndex(toast => toast.key === toastId)
+  }
+
+  // NOTE
+  // Think about using context instead of model
+  // We can provide registerToast function in context
+  // Which will be better? model or context?
+  function onLayout (layout: { height: number }) {
+    $toasts[getValidIndex()].height.set(layout.height)
+    updateMatrixPositions()
+  }
+
+  const newToast: ToastStackItem = {
+    key: toastId,
+    show: true,
+    topPosition: 0,
+    alert,
+    icon,
+    type,
+    text,
+    title,
+    actionLabel,
+    onAction,
+    onClose: onRemove,
+    onLayout
+  }
+
+  // TODO: The current implementation modifies the toast data directly, which violates the immutability principle of the model.
+  // This works only because the data is local, but it's a hacky solution.
+  // We should implement an .unshift() method on the Signal to handle this correctly in the future.
+  // For now, this serves as a quick fix, but we need to address this properly to ensure data immutability.
+
+  const toasts = $toasts.get() || []
+  toasts.unshift(newToast)
+  $toasts.set(toasts)
+}