@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/toaster.tsx

@@ -1,153 +1,153 @@
-import { IconBox, OneOfColorSchemesWithVariants } from '@citric/core'
-import { CheckCircleFill, ExclamationCircleFill, ExclamationTriangleFill, InfoCircleFill } from '@citric/icons'
-import { Dictionary, translate } from '@stack-spot/portal-translate'
-import { toast } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import { ToasterAction, ToasterContent } from './components/Toaster'
-
-type ToastType = 'error' | 'success' | 'warning' | 'info'
-
-interface BaseOptions {
-  /**
-   * An identifier for the toaster, if not provided, `Math.random()` will be used.
-   * 
-   * The id can be used to programmatically control the toaster.
-   */
-  id?: number | string,
-  /**
-   * The message to show.
-   * Can be either a string or a React element.
-   */
-  message: React.ReactNode,
-  /**
-   * Level/severity of this message.
-   * @default 'info'
-   */
-  type?: ToastType,
-  /**
-   * Seconds until auto-close or false to not auto-close.
-   * @default 3s for success toast and 10s for the others
-   */
-  autoClose?: number | false,
-  /**
-   * If true, `message` must be a React Element and none of the default toaster UI is rendered (title, icon and close button).
-   * @default false
-   */
-  custom?: boolean,
-  /**
-   * Whether or not to close the toaster when the user clicks it.
-   * @default false
-   */
-  closeOnClick?: boolean,
-}
-
-export interface DefaultToasterOptions extends BaseOptions {
-  /**
-   * The title of the toaster.
-   */
-  title?: string,
-  /**
-   * A function to call when the user clicks the toaster. By default, it closes the toaster.
-   */
-  onClick?: () => void,
-  /**
-   * A set of buttons (or links/anchors) to show after the message.
-   */
-  actions?: ToasterAction[],
-  custom?: false,
-}
-
-export interface CustomToasterOptions extends BaseOptions {
-  /**
-   * The whole content to render inside the toaster.
-   */
-  message: React.ReactElement,
-  custom: true,
-  /**
-   * A close button to render on the top right corner of the toaster. If not provided, a close button won't be rendered.
-   */
-  closeButton?: React.ReactElement,
-}
-
-export type ToasterOptions = DefaultToasterOptions | CustomToasterOptions | React.ReactNode
-
-const toasterConfig: Record<ToastType, { element: React.ReactElement, color: string, duration: number }> = {
-  error: {
-    element: <ExclamationCircleFill />,
-    color: 'danger',
-    duration: 10,
-  },
-  success: {
-    element: <CheckCircleFill />,
-    color: 'success',
-    duration: 3,
-  },
-  warning: {
-    element: <ExclamationTriangleFill />,
-    color: 'warning',
-    duration: 10,
-  },
-  info: {
-    element: <InfoCircleFill />,
-    color: 'inverse',
-    duration: 10,
-  },
-}
-
-export function showToaster(defaultToasterConfig: DefaultToasterOptions): number | string
-export function showToaster(customToasterConfig: CustomToasterOptions): number | string
-export function showToaster(message: React.ReactNode): number | string
-export function showToaster(options: ToasterOptions): number | string {
-  const isToasterConfig = options && typeof options === 'object' && 'message' in options
-  const { type = 'info', autoClose, ...opts }: DefaultToasterOptions | CustomToasterOptions = isToasterConfig
-    ? options
-    : { message: options }
-  const config = toasterConfig[type]
-  const id = opts.id ?? Math.random()
-  const closeTime = autoClose ? autoClose : config.duration
-  const bg = `var(--${config.color}-500)`
-  const bgDark = `var(--${config.color}-600)`
-  const fg = `var(--${config.color}-contrastText)`
-  
-  toast(
-    opts.custom
-      ? opts.message
-      : <ToasterContent {...opts} id={id} title={opts.title ?? translate(dictionary)[type]} />,
-    {
-      toastId: id,
-      type,
-      autoClose: autoClose === false ? false : closeTime * 1000,
-      className: 'main-toaster',
-      style: { backgroundColor: bg, color: fg },
-      progressStyle: { background: bgDark },
-      bodyClassName: 'toast-body',
-      icon: opts.custom ? false : () => (
-        <IconBox colorIcon={`${config.color}.contrastText` as OneOfColorSchemesWithVariants} size="xs">
-          {config.element}
-        </IconBox>
-      ),
-      closeOnClick: opts.closeOnClick ?? false,
-      closeButton: opts.custom ? (opts.closeButton ?? false) : undefined,
-    },
-  )
-  return id
-}
-
-export function closeReactToaster(id: number | string) {
-  toast.dismiss(id)
-}
-
-const dictionary = {
-  en: {
-    success: 'Success',
-    error: 'Error',
-    info: 'Info',
-    warning: 'Warning',
-  },
-  pt: {
-    success: 'Sucesso',
-    error: 'Erro',
-    info: 'Info',
-    warning: 'Atenção',
-  },
-} satisfies Dictionary
+import { IconBox, OneOfColorSchemesWithVariants } from '@citric/core'
+import { CheckCircleFill, ExclamationCircleFill, ExclamationTriangleFill, InfoCircleFill } from '@citric/icons'
+import { Dictionary, translate } from '@stack-spot/portal-translate'
+import { toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { ToasterAction, ToasterContent } from './components/Toaster'
+
+type ToastType = 'error' | 'success' | 'warning' | 'info'
+
+interface BaseOptions {
+  /**
+   * An identifier for the toaster, if not provided, `Math.random()` will be used.
+   * 
+   * The id can be used to programmatically control the toaster.
+   */
+  id?: number | string,
+  /**
+   * The message to show.
+   * Can be either a string or a React element.
+   */
+  message: React.ReactNode,
+  /**
+   * Level/severity of this message.
+   * @default 'info'
+   */
+  type?: ToastType,
+  /**
+   * Seconds until auto-close or false to not auto-close.
+   * @default 3s for success toast and 10s for the others
+   */
+  autoClose?: number | false,
+  /**
+   * If true, `message` must be a React Element and none of the default toaster UI is rendered (title, icon and close button).
+   * @default false
+   */
+  custom?: boolean,
+  /**
+   * Whether or not to close the toaster when the user clicks it.
+   * @default false
+   */
+  closeOnClick?: boolean,
+}
+
+export interface DefaultToasterOptions extends BaseOptions {
+  /**
+   * The title of the toaster.
+   */
+  title?: string,
+  /**
+   * A function to call when the user clicks the toaster. By default, it closes the toaster.
+   */
+  onClick?: () => void,
+  /**
+   * A set of buttons (or links/anchors) to show after the message.
+   */
+  actions?: ToasterAction[],
+  custom?: false,
+}
+
+export interface CustomToasterOptions extends BaseOptions {
+  /**
+   * The whole content to render inside the toaster.
+   */
+  message: React.ReactElement,
+  custom: true,
+  /**
+   * A close button to render on the top right corner of the toaster. If not provided, a close button won't be rendered.
+   */
+  closeButton?: React.ReactElement,
+}
+
+export type ToasterOptions = DefaultToasterOptions | CustomToasterOptions | React.ReactNode
+
+const toasterConfig: Record<ToastType, { element: React.ReactElement, color: string, duration: number }> = {
+  error: {
+    element: <ExclamationCircleFill />,
+    color: 'danger',
+    duration: 10,
+  },
+  success: {
+    element: <CheckCircleFill />,
+    color: 'success',
+    duration: 3,
+  },
+  warning: {
+    element: <ExclamationTriangleFill />,
+    color: 'warning',
+    duration: 10,
+  },
+  info: {
+    element: <InfoCircleFill />,
+    color: 'inverse',
+    duration: 10,
+  },
+}
+
+export function showToaster(defaultToasterConfig: DefaultToasterOptions): number | string
+export function showToaster(customToasterConfig: CustomToasterOptions): number | string
+export function showToaster(message: React.ReactNode): number | string
+export function showToaster(options: ToasterOptions): number | string {
+  const isToasterConfig = options && typeof options === 'object' && 'message' in options
+  const { type = 'info', autoClose, ...opts }: DefaultToasterOptions | CustomToasterOptions = isToasterConfig
+    ? options
+    : { message: options }
+  const config = toasterConfig[type]
+  const id = opts.id ?? Math.random()
+  const closeTime = autoClose ? autoClose : config.duration
+  const bg = `var(--${config.color}-500)`
+  const bgDark = `var(--${config.color}-600)`
+  const fg = `var(--${config.color}-contrastText)`
+  
+  toast(
+    opts.custom
+      ? opts.message
+      : <ToasterContent {...opts} id={id} title={opts.title ?? translate(dictionary)[type]} />,
+    {
+      toastId: id,
+      type,
+      autoClose: autoClose === false ? false : closeTime * 1000,
+      className: 'main-toaster',
+      style: { backgroundColor: bg, color: fg },
+      progressStyle: { background: bgDark },
+      bodyClassName: 'toast-body',
+      icon: opts.custom ? false : () => (
+        <IconBox colorIcon={`${config.color}.contrastText` as OneOfColorSchemesWithVariants} size="xs">
+          {config.element}
+        </IconBox>
+      ),
+      closeOnClick: opts.closeOnClick ?? false,
+      closeButton: opts.custom ? (opts.closeButton ?? false) : undefined,
+    },
+  )
+  return id
+}
+
+export function closeReactToaster(id: number | string) {
+  toast.dismiss(id)
+}
+
+const dictionary = {
+  en: {
+    success: 'Success',
+    error: 'Error',
+    info: 'Info',
+    warning: 'Warning',
+  },
+  pt: {
+    success: 'Sucesso',
+    error: 'Erro',
+    info: 'Info',
+    warning: 'Atenção',
+  },
+} satisfies Dictionary

package/src/utils.ts

@@ -1,29 +1,29 @@
-import { valueOf } from '@stack-spot/portal-theme'
-import { getLayoutElements } from './elements'
-
-/**
- * Gets the value for a css variable of the layout.
- * 
- * Supposing the actual name of the variable is name-of-variable, the value passed to the first parameter (varname) may be: name-of-variable
- * or --name-of-variable or var(--name-of-variable). All these formats work.
- * 
- * @param varname the name of css variable.
- * @returns the value of `varname`.
- */
-export function valueOfLayoutVar(varname: string): string {
-  const layout = document.getElementById('layout')
-  if (!layout) return ''
-  return valueOf(varname, layout)
-}
-
-/**
- * Accessibility: makes the screen reader announce some text out loud.
- * 
- * @param text the message for the screen reader to read.
- */
-export function announce(text: string) {
-  const { accessibilityAnnouncer } = getLayoutElements()
-  if (!accessibilityAnnouncer) return
-  accessibilityAnnouncer.textContent = text
-  setTimeout(() => accessibilityAnnouncer.textContent = '', 1000)
-}
+import { valueOf } from '@stack-spot/portal-theme'
+import { getLayoutElements } from './elements'
+
+/**
+ * Gets the value for a css variable of the layout.
+ * 
+ * Supposing the actual name of the variable is name-of-variable, the value passed to the first parameter (varname) may be: name-of-variable
+ * or --name-of-variable or var(--name-of-variable). All these formats work.
+ * 
+ * @param varname the name of css variable.
+ * @returns the value of `varname`.
+ */
+export function valueOfLayoutVar(varname: string): string {
+  const layout = document.getElementById('layout')
+  if (!layout) return ''
+  return valueOf(varname, layout)
+}
+
+/**
+ * Accessibility: makes the screen reader announce some text out loud.
+ * 
+ * @param text the message for the screen reader to read.
+ */
+export function announce(text: string) {
+  const { accessibilityAnnouncer } = getLayoutElements()
+  if (!accessibilityAnnouncer) return
+  accessibilityAnnouncer.textContent = text
+  setTimeout(() => accessibilityAnnouncer.textContent = '', 1000)
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-  "extends": "../../tsconfig",
-  "compilerOptions": {
-    "module": "ESNext",
-    "outDir": "dist"
-  },
-  "include": ["src"]
-}
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}