@memori.ai/ui 1.0.0-alpha

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

@@ -0,0 +1,131 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Checkbox checked and disabled unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox memori-checkbox--disabled"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        checked=""
+        class="memori-checkbox--input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox checked unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        checked=""
+        class="memori-checkbox--input"
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox disabled unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox memori-checkbox--disabled"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        class="memori-checkbox--input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox indeterminate unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox memori-checkbox--indeterminate"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        checked=""
+        class="memori-checkbox--input"
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        class="memori-checkbox--input"
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;

package/src/components/Checkbox/index.tsx

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

package/src/components/ConfirmDialog/ConfirmDialog.css

@@ -0,0 +1,44 @@
+/* Confirmation dialog styles */
+.memori-confirm-dialog--backdrop {
+    position: fixed;
+    z-index: 100;
+    background-color: rgb(0 0 0 / 50%);
+    inset: 0;
+}
+
+.memori-confirm-dialog--container {
+    position: fixed;
+    z-index: 101;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    inset: 0;
+}
+
+.memori-confirm-dialog--panel {
+    width: 100%;
+    max-width: 28rem;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background-color: white;
+    box-shadow:
+        0 20px 25px -5px rgb(0 0 0 / 10%),
+        0 10px 10px -5px rgb(0 0 0 / 4%);
+}
+
+.memori-confirm-dialog--title {
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.memori-confirm-dialog--message {
+    margin-bottom: 1.5rem;
+}
+
+.memori-confirm-dialog--actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}

package/src/components/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -0,0 +1,235 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import ConfirmDialog, { type Props } from './ConfirmDialog'
+import Button from '../Button/Button'
+
+const meta = {
+  title: 'UI/ConfirmDialog',
+  component: ConfirmDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    message: {
+      control: {
+        type: 'text',
+      },
+    },
+    confirmText: {
+      control: {
+        type: 'text',
+      },
+    },
+    cancelText: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof ConfirmDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Confirm Action',
+    message: 'Are you sure you want to proceed with this action?',
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+  },
+}
+
+export const Open: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Confirm Action',
+    message: 'Are you sure you want to proceed with this action?',
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+  },
+}
+
+export const WithCustomTitle: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Delete Item',
+    message: 'Are you sure you want to proceed with this action?',
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+  },
+}
+
+export const WithCustomMessage: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Confirm Action',
+    message:
+      'This action cannot be undone. All associated data will be permanently deleted from the system.',
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+  },
+}
+
+export const WithCustomButtonText: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Delete Item',
+    message:
+      'Are you sure you want to delete this item? This action cannot be undone.',
+    confirmText: 'Yes, Delete',
+    cancelText: 'No, Keep It',
+  },
+}
+
+const DeleteTemplate = (args: Props) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [isDeleted, setIsDeleted] = React.useState(false)
+
+  const handleConfirm = () => {
+    setIsDeleted(true)
+    setIsOpen(false)
+    console.log('Item deleted!')
+  }
+
+  return (
+    <>
+      {isDeleted ? (
+        <div
+          style={{
+            padding: '12px',
+            background: '#f8d7da',
+            color: '#721c24',
+            borderRadius: '4px',
+            marginBottom: '20px',
+          }}
+        >
+          Item has been deleted successfully!
+        </div>
+      ) : (
+        <Button onClick={() => setIsOpen(true)}>Delete Item</Button>
+      )}
+
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </>
+  )
+}
+
+export const DeleteConfirmation: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Delete Item',
+    message:
+      'Are you sure you want to delete this item? This action cannot be undone.',
+    confirmText: 'Delete',
+    cancelText: 'Cancel',
+  },
+  render: args => <DeleteTemplate {...args} />,
+}
+
+const SaveTemplate = (args: Props) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [navigatedAway, setNavigatedAway] = React.useState(false)
+
+  const handleTryNavigate = () => {
+    setIsOpen(true)
+  }
+
+  const handleConfirm = () => {
+    setNavigatedAway(true)
+    setIsOpen(false)
+    console.log('Navigated without saving!')
+  }
+
+  return (
+    <>
+      {navigatedAway ? (
+        <div
+          style={{
+            padding: '12px',
+            background: '#d4edda',
+            color: '#155724',
+            borderRadius: '4px',
+            marginBottom: '20px',
+          }}
+        >
+          Navigated away without saving changes.
+        </div>
+      ) : (
+        <div>
+          <div
+            style={{
+              padding: '20px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              marginBottom: '20px',
+            }}
+          >
+            <h3>Unsaved Form</h3>
+            <p>This is a form with unsaved changes.</p>
+            <input
+              type="text"
+              placeholder="Your name"
+              style={{ padding: '8px', marginBottom: '10px', width: '100%' }}
+            />
+            <textarea
+              placeholder="Your message"
+              style={{ padding: '8px', width: '100%', height: '100px' }}
+            />
+          </div>
+          <Button onClick={handleTryNavigate}>Navigate Away</Button>
+        </div>
+      )}
+
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </>
+  )
+}
+
+export const UnsavedChanges: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+    title: 'Unsaved Changes',
+    message:
+      'You have unsaved changes. Are you sure you want to leave without saving?',
+    confirmText: 'Leave',
+    cancelText: 'Stay',
+  },
+  render: args => <SaveTemplate {...args} />,
+}

package/src/components/ConfirmDialog/ConfirmDialog.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import { expect, it, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ConfirmDialog from './ConfirmDialog'
+
+it('renders ConfirmDialog unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={false}
+      onClose={vi.fn()}
+      onConfirm={vi.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders ConfirmDialog open unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={vi.fn()}
+      onConfirm={vi.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders ConfirmDialog with custom title unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={vi.fn()}
+      onConfirm={vi.fn()}
+      title="Custom Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders ConfirmDialog with custom message unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={vi.fn()}
+      onConfirm={vi.fn()}
+      title="Test Title"
+      message="Custom confirmation message for testing purposes"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders ConfirmDialog with custom button text unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={vi.fn()}
+      onConfirm={vi.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Yes, proceed"
+      cancelText="No, go back"
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('calls onClose when cancel button is clicked', () => {
+  const onCloseMock = vi.fn()
+  render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={onCloseMock}
+      onConfirm={vi.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />,
+  )
+
+  // Get all Cancel buttons and click the last one (most recently rendered)
+  const cancelButtons = screen.getAllByText('Cancel')
+  const lastCancelButton = cancelButtons[cancelButtons.length - 1]
+  if (lastCancelButton) {
+    fireEvent.click(lastCancelButton)
+    expect(onCloseMock).toHaveBeenCalledTimes(1)
+  } else {
+    throw new Error('Cancel button not found')
+  }
+})
+
+it('calls onConfirm when confirm button is clicked', () => {
+  const onConfirmMock = vi.fn()
+  render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={vi.fn()}
+      onConfirm={onConfirmMock}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />,
+  )
+
+  // Get all Confirm buttons and click the last one (most recently rendered)
+  const confirmButtons = screen.getAllByText('Confirm')
+  const lastConfirmButton = confirmButtons[confirmButtons.length - 1]
+  if (lastConfirmButton) {
+    fireEvent.click(lastConfirmButton)
+    expect(onConfirmMock).toHaveBeenCalledTimes(1)
+  } else {
+    throw new Error('Confirm button not found')
+  }
+})

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import Button from '../Button/Button'
+
+import './ConfirmDialog.css'
+
+export interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+}
+
+// Custom confirm dialog component
+const ConfirmDialog: React.FC<Props> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText,
+  cancelText,
+}) => {
+  return (
+    <Transition
+      appear
+      show={isOpen}
+      as={React.Fragment}
+    >
+      <Dialog
+        as="div"
+        className="memori-confirm-dialog"
+        onClose={onClose}
+      >
+        <div className="memori-confirm-dialog--backdrop" />
+        <div className="memori-confirm-dialog--container">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="memori-confirm-dialog--panel">
+              <Dialog.Title className="memori-confirm-dialog--title">
+                {title}
+              </Dialog.Title>
+              <Dialog.Description className="memori-confirm-dialog--message">
+                {message}
+              </Dialog.Description>
+              <div className="memori-confirm-dialog--actions">
+                <Button onClick={onClose}>{cancelText}</Button>
+                <Button
+                  primary
+                  onClick={onConfirm}
+                >
+                  {confirmText}
+                </Button>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}
+
+export default ConfirmDialog

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders ConfirmDialog open unchanged 1`] = `<div />`;
+
+exports[`renders ConfirmDialog unchanged 1`] = `<div />`;
+
+exports[`renders ConfirmDialog with custom button text unchanged 1`] = `<div />`;
+
+exports[`renders ConfirmDialog with custom message unchanged 1`] = `<div />`;
+
+exports[`renders ConfirmDialog with custom title unchanged 1`] = `<div />`;

package/src/components/ConfirmDialog/index.tsx

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

package/src/components/Details/Details.css

@@ -0,0 +1,66 @@
+details.memori--details {
+    display: block;
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+details.memori--details + details.memori--details {
+    margin-top: 0;
+}
+
+details.memori--details summary {
+    cursor: pointer;
+    font-size: 1.15rem;
+    line-height: 1;
+    list-style-type: none;
+    transition: color 0.2s ease-in-out;
+}
+
+details.memori--details summary::-webkit-details-marker {
+    display: none;
+}
+
+details.memori--details summary::marker {
+    display: none;
+}
+
+details.memori--details summary::-moz-list-bullet {
+    list-style-type: none;
+}
+
+details.memori--details summary::after {
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-position: right center;
+    background-repeat: no-repeat;
+    background-size: 1rem auto;
+    content: '';
+    float: right;
+    margin-inline-start: 1.5rem;
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease-in-out;
+}
+
+details.memori--details summary:focus {
+    outline: none;
+}
+
+details.memori--details summary:focus-visible {
+    color: var(--memori-primary);
+    outline: 1px solid var(--memori-primary);
+    outline-offset: 1.5rem;
+}
+
+details.memori--details[open] > summary {
+    margin-bottom: 1rem;
+}
+
+details.memori--details[open] > summary:not(:focus) {
+    color: var(--memori-primary);
+}
+
+details.memori--details[open] > summary::after {
+    transform: rotate(0deg);
+}