@infonomic/uikit 1.5.0 → 2.1.0

package/src/components/input/text-area.tsx

@@ -0,0 +1,81 @@
+import cx from 'classnames'
+import type * as React from 'react'
+
+import type { Intent, Variant } from './@types/input.js'
+import { ErrorText } from './error-text.js'
+import { HelpText } from './help-text.js'
+import inputStyles from './input.module.css'
+import { Label } from './label.js'
+import styles from './text-area.module.css'
+
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  className?: string
+  ref?: React.RefCallback<HTMLTextAreaElement | null> | React.RefObject<HTMLTextAreaElement | null>
+}
+
+export const TextArea = function TextArea({
+  ref,
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  className,
+  ...rest
+}: TextAreaProps): React.JSX.Element {
+  return (
+    <fieldset className={cx('text-area-wrapper', inputStyles.inputWrapper)}>
+      <Label id={id} htmlFor={id} required={required} label={label} />
+      <textarea
+        ref={ref}
+        id={id}
+        name={name}
+        required={required}
+        rows={rows}
+        autoComplete={autoComplete}
+        placeholder={placeHolder}
+        aria-labelledby={`label-for-${id}`}
+        aria-invalid={error}
+        aria-required={required}
+        aria-errormessage={errorText}
+        aria-describedby={error ? `error-for-${id}` : undefined}
+        className={cx(
+          'text-area',
+          variant,
+          intent,
+          inputStyles.input,
+          inputStyles[variant],
+          inputStyles[intent],
+          styles['text-area'],
+          { [inputStyles.error]: error },
+          className
+        )}
+        {...rest}
+      />
+      {error ? (
+        <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+      ) : (
+        helpText?.length > 0 && <HelpText text={helpText} />
+      )}
+    </fieldset>
+  )
+}

package/src/components/input/utils.ts

@@ -0,0 +1,21 @@
+import type { ZodType, z } from 'zod'
+
+type FormattedErrors = z.inferFormattedError<ZodType<any, any, any>>
+
+export function hasErrors(name: string, clientErrors: any, serverErrors: any): boolean {
+  return Boolean(serverErrors?.[name as keyof typeof serverErrors] ?? clientErrors[name])
+}
+
+export function getErrorText(
+  name: string,
+  clientErrors: any,
+  serverErrors: any
+): string | undefined {
+  const message = clientErrors[name]?.message
+  if (message != null) return message
+  const error =
+    serverErrors != null
+      ? (serverErrors[name as keyof typeof serverErrors] as FormattedErrors)
+      : undefined
+  if (error?._errors != null) return error._errors.join(' ')
+}

package/src/components/notifications/@types/alert.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { ReactNode } from 'react'
+
+// generic types
+import type { Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for Button and IconButton component.
+ */
+
+// typescript types
+export type Intent = 'primary' | t

package/src/components/notifications/@types/toast.ts

@@ -0,0 +1,12 @@
+// generic types
+import type { Icons as i, Position as p, Intent as t } from '../../@types/shared.js'
+
+/**
+ * This file contains the types and prop-types for Toast component.
+ */
+
+// typescript types
+export type Intent = 'primary' | t
+export type Position = 'top-right' | p
+export type IconType = 'success' | i
+export type OnOpenChange = (open: boolean) => void

package/src/components/notifications/alert.module.css

@@ -0,0 +1,114 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .alert {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    gap: var(--gap-2);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    font-family: inherit;
+    font-weight: normal;
+    transition: all 0.3s ease-in-out;
+    border: 1px solid var(--alert-border);
+    background-color: var(--alert-background);
+    margin-bottom: 1rem;
+  }
+
+  .alert-with-title {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .close svg {
+    fill: white
+  }
+
+  .fade {
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+  }
+
+  .header {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    margin-bottom: var(--spacing-2);
+    gap: var(--gap-2);
+  }
+
+  .title {
+    display: flex;
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 1;
+    padding-top: 1px;
+  }
+
+  .content {
+    padding-top: 1px;
+    font-size: var(--font-size-sm);
+  }
+
+  .content:first-child {
+    margin-top: 0;
+  }
+
+  /* Intents */
+  .primary {
+    --alert-border: var(--primary-300);
+    --alert-background: oklch(from var(--primary-500) l c h / 0.1);
+  }
+
+  .secondary {
+    --alert-border: var(--secondary-300);
+    --alert-background: oklch(from var(--secondary-500) l c h / 0.1);
+  }
+
+  .noeffect {
+    --alert-border: var(--gray-300);
+    --alert-background: oklch(from var(--gray-500) l c h / 0.1);
+  }
+
+  .success {
+    --alert-border: var(--green-300);
+    --alert-background: oklch(from var(--green-500) l c h / 0.1);
+  }
+
+  .info {
+    --alert-border: var(--blue-300);
+    --alert-background: oklch(from var(--blue-500) l c h / 0.1);
+  }
+
+  .warning {
+    --alert-border: var(--yellow-300);
+    --alert-background: oklch(from var(--yellow-500) l c h / 0.1);
+  }
+
+  .danger {
+    --alert-border: var(--red-300);
+    --alert-background: oklch(from var(--red-500) l c h / 0.1);
+  }
+}

package/src/components/notifications/alert.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta } from '@storybook/react-vite'
+import type React from 'react'
+
+import { type Intent, intent } from '../@types/shared.js'
+
+import { Alert as AlertComponent } from './alert.js'
+
+export const Alerts = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      {intent.map((intent: Intent) => {
+        if (intent !== 'noeffect') {
+          return (
+            <div style={{ marginBottom: '1rem' }} key={intent}>
+              <AlertComponent intent={intent}>
+                This is a {intent} alert - with some additional text here.
+              </AlertComponent>
+            </div>
+          )
+        }
+        return null
+      })}
+      <AlertComponent intent="info" title="This is a title">
+        This is an info alert with a title and with some additional text here.
+      </AlertComponent>
+    </div>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components',
+  component: Alerts,
+}
+
+export default meta

package/src/components/notifications/alert.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import cx from 'classnames'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { CloseIcon } from '../../icons/close-icon'
+import { DangerIcon } from '../../icons/danger-icon'
+import { InfoIcon } from '../../icons/info-icon'
+import { SuccessIcon } from '../../icons/success-icon'
+import { WarningIcon } from '../../icons/warning-icon'
+import { Button } from '../button/button.js'
+
+import type { Intent } from './@types/alert.js'
+
+import styles from './alert.module.css'
+
+export interface AlertProps {
+  intent?: Intent
+  icon?: boolean
+  close?: boolean
+  className?: string
+  title?: string
+  children: React.ReactNode
+}
+
+const alertIcons = {
+  primary: WarningIcon,
+  secondary: InfoIcon,
+  success: SuccessIcon,
+  info: InfoIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+}
+
+export const Alert = function Alert({
+  ref,
+  intent = 'success',
+  icon = true,
+  close = true,
+  title,
+  className,
+  children,
+  ...rest
+}: AlertProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}): React.JSX.Element | null {
+  const [show, setShow] = useState(true)
+  const [fade, setFade] = useState(false)
+
+  const Icon = alertIcons[intent as keyof typeof alertIcons]
+
+  const handleOnClose = (): void => {
+    setFade(true)
+    setTimeout(() => setShow(false), 400) // Match the CSS transition duration
+  }
+
+  useEffect(() => {
+    if (!show) {
+      // Perform any cleanup if necessary
+    }
+  }, [show])
+
+  if (show === false) return null
+
+  return (
+    <div
+      ref={ref}
+      className={cx('alert', intent, styles.alert, styles[intent], className, {
+        [styles.fade]: fade,
+      })}
+      {...rest}
+    >
+      {title != null ? (
+        <div className={cx('alert-with-title', styles['alert-with-title'])}>
+          <div className={cx(styles.header)}>
+            {icon && <Icon className={styles.icon} />}
+            <div className={cx(styles.title)}>
+              <span>{title}</span>
+            </div>
+            {close === true && (
+              <Button
+                intent={intent}
+                variant="filled"
+                aria-label="Close"
+                className={cx(styles.close)}
+                type="button"
+                onClick={handleOnClose}
+                {...rest}
+              >
+                <CloseIcon height="12px" width="12px" />
+              </Button>
+            )}
+          </div>
+          <div className={cx(styles.content)}>{children}</div>
+        </div>
+      ) : (
+        <>
+          {icon && <Icon className={styles.icon} />}
+          <div className={styles.content}>{children}</div>
+          {close === true && (
+            <Button
+              intent={intent}
+              variant="filled"
+              aria-label="Close"
+              className={styles.close}
+              type="button"
+              onClick={handleOnClose}
+              {...rest}
+            >
+              <CloseIcon height="12px" width="12px" />
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export * from './alert.js'
+export * from './toast.js'

package/src/components/notifications/toast.module.css

@@ -0,0 +1,237 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  /* Positions are relative to the toast viewport which is set 
+   globally in components/toast.css  */
+
+  .root {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+    padding-top: 12px;
+    padding-bottom: 16px;
+    background: var(--gray-25);
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .root:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .root[data-state="open"] {
+    animation: slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .root[data-state="closed"] {
+    animation: hide 100ms ease-in;
+  }
+
+  .root[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  .root[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  .root.top-right[data-swipe="end"],
+  .root.bottom-right[data-swipe="end"] {
+    animation: swipeOutToRight 100ms ease-out;
+  }
+
+  .root.top-left[data-swipe="end"],
+  .root.bottom-left[data-swipe="end"] {
+    animation: swipeOutToLeft 100ms ease-out;
+  }
+
+  .header {
+    display: flex;
+    padding: 0 16px 0 12px;
+    align-items: start;
+    gap: var(--gap-2);
+    justify-content: space-between;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .close svg {
+    fill: white;
+  }
+
+
+  .title {
+    display: flex;
+    padding: 0 12px 0 8px;
+    align-items: start;
+    gap: var(--gap-2);
+    margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  .description {
+    margin: 0;
+    padding: 0 8px 0 12px;
+    font-size: var(--font-size-sm);
+    line-height: 1.3;
+  }
+
+  .action {
+    display: flex;
+    justify-content: end;
+    padding: 0 12px 0 12px;
+  }
+
+  /* Positions are relative to the toast viewport which is set 
+   globally in components/toast.css  */
+
+  .top-left {
+    top: 88px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .top-right {
+    top: 88px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .bottom-left {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .bottom-right {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  @media (min-width: 768px) {
+
+    .root.top-right[data-state="open"],
+    .root.bottom-right[data-state="open"] {
+      animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .root.top-left[data-state="open"],
+    .root.bottom-left[data-state="open"] {
+      animation: slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .bottom-right {
+      bottom: 16px;
+      right: 16px;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .bottom-left {
+      bottom: 16px;
+      left: 16px;
+      right: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-left {
+      top: 88px;
+      left: 16px;
+      right: auto;
+      bottom: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-right {
+      top: 88px;
+      right: 16px;
+      bottom: auto;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+  }
+
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideInFromLeft {
+    from {
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideInFromBottom {
+    from {
+      transform: translateY(calc(100% + var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes swipeOutToRight {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+
+    to {
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+  }
+
+  @keyframes swipeOutToLeft {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+
+    to {
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+  }
+
+  @keyframes hide {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}

package/src/components/notifications/toast.stories.tsx

@@ -0,0 +1,42 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+import type { Meta } from '@storybook/react-vite'
+import React from 'react'
+
+import { Button } from '../button/button.js'
+
+import { Toast as ToastComponent } from './toast.js'
+
+export const Toast = (): React.JSX.Element => {
+  const [toast, setToast] = React.useState(false)
+
+  const handleOpenToastClick = (): void => {
+    setToast(!toast)
+  }
+
+  return (
+    <div className="mb-6 max-w-[600px]">
+      <Button onClick={handleOpenToastClick}>Open Toast</Button>
+      <ToastComponent
+        title="Note"
+        iconType="success"
+        intent="success"
+        position="bottom-right"
+        message="This is a test Toast modal that should appear when the button is clicked."
+        open={toast}
+        onOpenChange={setToast}
+      />
+    </div>
+  )
+}
+
+const meta: Meta<typeof Toast> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Toast',
+  component: ToastComponent,
+}
+
+export default meta