@memori.ai/ui 1.0.0-alpha

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Alert from './Alert'
+import Button from '../Button/Button'
+
+const meta = {
+  title: 'UI/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['success', 'warning', 'error', 'info'],
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closable: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: args => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Show Alert</Button>
+        <Alert
+          {...args}
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+        />
+      </>
+    )
+  },
+} satisfies Meta<typeof Alert>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: false,
+    type: 'info',
+    title: 'Information',
+    description: 'This is an informative alert message.',
+    onClose: () => {},
+  },
+}
+
+export const Success: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'success',
+    title: 'Success!',
+    description: 'Operation completed successfully.',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'warning',
+    title: 'Warning',
+    description: 'Please review this important warning message.',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'error',
+    title: 'Error',
+    description: 'An error occurred while processing your request.',
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'info',
+    title: 'Update Available',
+    description: 'A new version is available.',
+    action: <Button primary>Update Now</Button>,
+  },
+}
+
+export const NonClosable: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'warning',
+    title: 'Important Notice',
+    description: 'This message cannot be dismissed.',
+    closable: false,
+  },
+}
+
+export const CustomWidth: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'info',
+    title: 'Custom Width',
+    description: 'This alert has a custom width.',
+    width: '500px',
+  },
+}
+
+export const WithoutDescription: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'success',
+    title: 'Operation Successful',
+  },
+}
+
+export const AutoDismiss: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    type: 'success',
+    title: 'Auto Dismiss',
+    description: 'This alert will dismiss automatically after 3 seconds.',
+    duration: 3000,
+  },
+}

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import Alert from './Alert'
+
+beforeEach(() => {
+  // Mock setTimeout/clearTimeout
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('Alert Component', () => {
+  it('renders Alert unchanged', () => {
+    const { container } = render(
+      <Alert
+        open={false}
+        onClose={vi.fn()}
+        title="Test Alert"
+      />,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Alert open unchanged', () => {
+    const { container } = render(
+      <Alert
+        open={true}
+        onClose={vi.fn()}
+        title="Test Alert"
+      />,
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn()
+    const { container } = render(
+      <Alert
+        open={true}
+        closable={true}
+        onClose={onClose}
+        title="Test Alert"
+      />,
+    )
+
+    const closeButton = container.querySelector(
+      '[title="close"]',
+    ) as HTMLElement
+    fireEvent.click(closeButton)
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('auto-dismisses after duration', () => {
+    const onClose = vi.fn()
+    render(
+      <Alert
+        open={true}
+        onClose={onClose}
+        title="Test Alert"
+        duration={3000}
+      />,
+    )
+
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('renders with custom width', () => {
+    const { container } = render(
+      <Alert
+        open={true}
+        onClose={vi.fn()}
+        title="Test Alert"
+        width="500px"
+      />,
+    )
+
+    const style = window.getComputedStyle(container.firstChild as Element)
+    expect(style.getPropertyValue('--memori-alert--width')).toBe('500px')
+  })
+
+  it('renders with action button', () => {
+    const actionClick = vi.fn()
+    render(
+      <Alert
+        open={true}
+        onClose={vi.fn()}
+        title="Test Alert"
+        action={<button onClick={actionClick}>Action</button>}
+      />,
+    )
+
+    const actionButton = screen.getByText('Action')
+    fireEvent.click(actionButton)
+    expect(actionClick).toHaveBeenCalled()
+  })
+
+  it('cleans up timer on unmount', () => {
+    const onClose = vi.fn()
+    const { unmount } = render(
+      <Alert
+        open={true}
+        onClose={onClose}
+        title="Test Alert"
+        duration={3000}
+      />,
+    )
+
+    unmount()
+    act(() => {
+      setTimeout(() => {
+        expect(onClose).not.toHaveBeenCalled()
+      }, 3000)
+    })
+  })
+})

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,124 @@
+import type { FC, JSX } from 'react'
+import React from 'react'
+import { Transition } from '@headlessui/react'
+import cx from 'classnames'
+import Close from '../../icons/Close'
+import Button from '../Button/Button'
+import { useTranslation } from 'react-i18next'
+
+export type AlertType = 'success' | 'warning' | 'error' | 'info'
+
+import './Alert.css'
+
+export interface Props {
+  open?: boolean
+  onClose: (value: boolean) => void
+  className?: string
+  title?: string | JSX.Element | React.ReactNode
+  description?: string | JSX.Element | React.ReactNode
+  children?: JSX.Element | React.ReactNode
+  type?: AlertType
+  icon?: JSX.Element | React.ReactNode
+  closable?: boolean
+  duration?: number | null
+  action?: JSX.Element | React.ReactNode
+  width?: string
+}
+
+const Alert: FC<Props> = ({
+  open = false,
+  onClose,
+  className,
+  title,
+  description,
+  children,
+  type = 'info',
+  icon,
+  closable = true,
+  duration = null,
+  action,
+  width = '400px',
+}: Props) => {
+  const { t } = useTranslation()
+
+  // Auto-close functionality
+  React.useEffect(() => {
+    if (duration && open) {
+      const timer = setTimeout(() => {
+        onClose(false)
+      }, duration)
+      return () => clearTimeout(timer)
+    }
+  }, [duration, open, onClose])
+
+  const getTypeStyles = (type: AlertType) => {
+    switch (type) {
+      case 'success':
+        return 'memori-alert--success'
+      case 'warning':
+        return 'memori-alert--warning'
+      case 'error':
+        return 'memori-alert--error'
+      default:
+        return 'memori-alert--info'
+    }
+  }
+
+  return (
+    <Transition
+      show={open}
+      as={React.Fragment}
+      appear
+    >
+      <div className={cx('memori-alert', getTypeStyles(type), className)}>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              .memori-alert {
+                --memori-alert--width: ${width};
+              }
+            `,
+          }}
+        />
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4"
+          enterTo="opacity-100 translate-y-0"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-4"
+        >
+          <div className="memori-alert--container">
+            {icon && <div className="memori-alert--icon">{icon}</div>}
+
+            <div className="memori-alert--content">
+              {title && <div className="memori-alert--title">{title}</div>}
+              {description && (
+                <div className="memori-alert--description">{description}</div>
+              )}
+              {children}
+            </div>
+
+            <div className="memori-alert--actions">
+              {action && <div className="memori-alert--action">{action}</div>}
+              {closable && (
+                <Button
+                  ghost
+                  padded
+                  shape="circle"
+                  icon={<Close />}
+                  title={t('close') || 'Close alert'}
+                  onClick={() => onClose(false)}
+                  className="memori-alert--close"
+                />
+              )}
+            </div>
+          </div>
+        </Transition.Child>
+      </div>
+    </Transition>
+  )
+}
+
+export default Alert

package/src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Alert Component > renders Alert open unchanged 1`] = `
+<div>
+  <div
+    class="memori-alert memori-alert--info"
+    data-closed=""
+    data-enter=""
+    data-transition=""
+    style=""
+  >
+    <style>
+      
+              .memori-alert {
+                --memori-alert--width: 400px;
+              }
+            
+    </style>
+    <div
+      class="memori-alert--container ease-out duration-300 opacity-0 translate-y-4"
+      data-closed=""
+      data-enter=""
+      data-transition=""
+      style=""
+    >
+      <div
+        class="memori-alert--content"
+      >
+        <div
+          class="memori-alert--title"
+        >
+          Test Alert
+        </div>
+      </div>
+      <div
+        class="memori-alert--actions"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-alert--close"
+          title="close"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                fill="currentColor"
+                stroke="none"
+                stroke-width="0"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert Component > renders Alert unchanged 1`] = `<div />`;

package/src/components/Alert/index.tsx

@@ -0,0 +1,2 @@
+import Alert from './Alert'
+export { Alert }

package/src/components/Button/Button.css

@@ -0,0 +1,173 @@
+.memori-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 15px;
+    border: 1px solid var(--memori-button-border-color, #d9d9d9);
+    border-radius: var(--memori-button-radius, 5px);
+    background: var(--memori-button-bg, #fff);
+    box-shadow: var(--memori-button-box-shadow);
+    color: var(--memori-button-text, #333);
+    font-family: var(--memori-font-family);
+    font-size: 14px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.memori-button--active {
+    background: var(--memori-primary);
+    color: var(--memori-primary-text);
+}
+
+.memori-button:hover {
+    box-shadow:
+        0 2px 0 rgb(0 0 0 / 2%),
+        0 4px 8px rgb(0 0 0 / 4%);
+    color: #333;
+    cursor: pointer;
+}
+
+.memori-button:hover,
+.memori-button:focus {
+    border-color: var(--memori-primary);
+    color: var(--memori-primary);
+}
+
+.memori-button:focus {
+    outline-color: var(--memori-primary);
+}
+
+.memori-button:active {
+    box-shadow: inset var(--memori-button-box-shadow);
+}
+
+.memori-button--padded {
+    padding: var(--memori-button-padding);
+}
+
+.memori-button--block {
+    display: block;
+    width: 100%;
+}
+
+.memori-button--primary {
+    background: var(--memori-primary);
+    color: var(--memori-primary-text);
+}
+
+.memori-button--primary:hover,
+.memori-button--primary:focus {
+    color: var(--memori-primary-text);
+}
+
+.memori-button--primary:active {
+    transform: scale(0.95);
+}
+
+.memori-button--outlined {
+    border-color: var(--memori-primary);
+    background: none;
+    color: var(--memori-primary);
+}
+
+.memori-button--outlined:hover,
+.memori-button--outlined:focus {
+    border-color: var(--memori-primary);
+    background-color: var(--memori-primary);
+    color: var(--memori-primary-text);
+}
+
+.memori-button--outlined:active {
+    transform: scale(0.95);
+}
+
+.memori-button--ghost {
+    border: 1px solid transparent;
+    background: none;
+    box-shadow: none;
+}
+
+.memori-button--ghost:hover,
+.memori-button--ghost:focus {
+    border-color: transparent;
+    background: rgb(0 0 0 / 4%);
+    box-shadow:
+        0 2px 0 rgb(0 0 0 / 2%),
+        0 4px 8px rgb(0 0 0 / 4%);
+    color: inherit;
+}
+
+.memori-button--ghost:focus {
+    border: 1px solid var(--memori-primary);
+}
+
+.memori-button--square {
+    border-radius: 0;
+}
+
+.memori-button--rounded {
+    border-radius: var(--memori-button-radius);
+}
+
+.memori-button--danger {
+    border-color: var(--memori-error-color);
+    background: rgb(0 0 0 / 2%);
+    color: var(--memori-error-color);
+}
+
+.memori-button--danger:hover,
+.memori-button--danger:focus {
+    border-color: var(--memori-error-color);
+    background-color: var(--memori-error-color);
+    color: #fff;
+}
+
+.memori-button--danger.memori-button--ghost {
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+    color: var(--memori-error-color);
+}
+
+.memori-button--danger.memori-button--ghost:hover,
+.memori-button--danger.memori-button--ghost:focus {
+    border-color: var(--memori-error-color);
+    background: rgb(0 0 0 / 2%);
+    box-shadow:
+        0 2px 0 rgb(0 0 0 / 2%),
+        0 4px 8px rgb(0 0 0 / 4%);
+    color: var(--memori-error-color);
+}
+
+.memori-button--circle {
+    padding: 0.75em;
+    border-radius: 50%;
+    aspect-ratio: 1/1;
+}
+
+.memori-button--icon {
+    display: inline-flex;
+    color: currentcolor;
+}
+
+.memori-button--icon svg {
+    width: 1.25em;
+    height: 1.25em;
+    fill: currentcolor;
+    font-size: 1em;
+    line-height: 1;
+}
+
+.memori-button--icon svg[fill='none'] {
+    fill: none;
+}
+
+.memori-button--with-icon .memori-button--icon {
+    margin-right: 0.5em;
+}
+
+.memori-button[disabled] {
+    background: var(--memori-button-disabled-bg, #ccc);
+    color: var(--memori-button-disabled-color, #000);
+    cursor: not-allowed;
+    opacity: 0.5;
+}