@memori.ai/ui 1.0.0-alpha

package/src/components/Details/Details.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import './Details.css'
+
+const meta = {
+  title: 'UI/Details',
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<HTMLDetailsElement>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <details className="memori--details">
+      <summary>Details</summary>
+      <p>Details content</p>
+    </details>
+  ),
+}
+
+export const Open: Story = {
+  render: () => (
+    <details
+      className="memori--details"
+      open
+    >
+      <summary>Details</summary>
+      <p>Details content</p>
+    </details>
+  ),
+}
+
+export const WithChildren: Story = {
+  render: () => (
+    <details className="memori--details">
+      <summary>Details</summary>
+      <p>Details content 1</p>
+      <p>Details content 2</p>
+    </details>
+  ),
+}
+
+export const WithComplexHTMLContent: Story = {
+  render: () => (
+    <details className="memori--details">
+      <summary>Details</summary>
+      <p>Details content</p>
+      <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ul>
+      <p>Details content</p>
+      <figure>
+        <img
+          src="https://www.aisuru.com/images/aisuru/og-image.png"
+          alt="Placeholder"
+        />
+        <figcaption>Placeholder image</figcaption>
+      </figure>
+    </details>
+  ),
+}

package/src/components/Drawer/Drawer.css

@@ -0,0 +1,210 @@
+.memori-drawer {
+    position: relative;
+    z-index: 1001;
+}
+
+.memori-drawer--backdrop {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 30%);
+}
+
+.memori-drawer--container {
+    position: fixed;
+    z-index: 1001;
+    inset: 0;
+    overflow-y: auto;
+}
+
+.memori-drawer--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-drawer--panel {
+    position: relative;
+    display: flex;
+    width: var(--memori-drawer--width, 100%);
+    max-width: 80vw;
+    height: 100%;
+    min-height: 100vh;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: 1rem 1.5rem 1.5rem;
+    margin-right: 0;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: var(--memori-font-family);
+}
+
+@media (width >= 768px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width-md, 80%);
+        max-width: none;
+        padding-top: 1.5rem;
+        padding-right: 2rem;
+        padding-left: 2rem;
+    }
+}
+
+@media (width >= 1024px) {
+    .memori-drawer--panel {
+        width: var(--memori-drawer--width-lg, 60%);
+    }
+}
+
+.memori-drawer--panel.memori-drawer--with-footer {
+    padding-bottom: 0;
+}
+
+.memori-drawer--panel .memori-spin {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.memori-drawer--panel > .memori-spin {
+    margin-top: -1.75rem;
+}
+
+.memori-drawer--panel p {
+    margin: 0 0 1em;
+}
+
+h2.memori-drawer--title {
+    margin: 0 0 1rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.memori-drawer--panel-left {
+    margin-right: auto;
+    margin-left: 0;
+}
+
+.memori-drawer--close {
+    position: sticky;
+    z-index: 70;
+    top: 0;
+    left: 0;
+    padding: 0.5rem;
+    margin-top: -1.5rem;
+    margin-left: -5.5rem;
+}
+
+@media (width <= 767px) {
+    .memori-drawer--close {
+        left: 0.5rem;
+    }
+}
+
+.memori-drawer--close button {
+    border-color: #fff;
+    color: #fff;
+}
+
+@media (width <= 767px) {
+    .memori-drawer--close button {
+        color: #000;
+    }
+}
+
+.memori-drawer--panel-left .memori-drawer--close {
+    right: -3.5rem;
+    left: auto;
+}
+
+@media (width <= 767px) {
+    .memori-drawer--panel-left .memori-drawer--close {
+        right: 0.5rem;
+        left: auto;
+    }
+}
+
+.memori-drawer--footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-top: 1px solid rgb(0 0 0 / 25%);
+    margin-top: auto;
+    background-color: #fff;
+}
+
+.memori-drawer--footer-left-action {
+    margin-right: auto;
+}
+
+.memori-drawer--footer-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.memori-drawer--footer button + button {
+    margin-left: 0.5em;
+}
+
+.memori-drawer--content {
+    flex: 1;
+    padding-top: 12px;
+    overflow-y: auto;
+}
+
+.memori-drawer--content--scrollable {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* Transition classes */
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.duration-400 {
+    transition-duration: 400ms;
+}
+
+.duration-500 {
+    transition-duration: 500ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.max-w-0 {
+    max-width: 0;
+}
+
+.max-w-80 {
+    max-width: 80%;
+}

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,275 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Drawer, { type Props } from './Drawer'
+import Button from '../Button/Button'
+
+import I18nWrapper from '../../i18n/I18nWrapper'
+
+const meta = {
+  title: 'UI/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    placement: {
+      control: {
+        type: 'select',
+        options: ['left', 'right'],
+      },
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+    },
+    animated: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closable: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: (args: Props) => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false)
+
+    return (
+      <I18nWrapper>
+        <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+        <Drawer
+          {...args}
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          {content}
+        </Drawer>
+      </I18nWrapper>
+    )
+  },
+} satisfies Meta<typeof Drawer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const content = (
+  <>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
+    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
+    <ul>
+      <li>Quisque in ultrices lectus.</li>
+      <li>Quisque in ultrices lectus.</li>
+      <li>Quisque in ultrices lectus.</li>
+    </ul>
+    <p>Nulla at urna diam.</p>
+    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
+    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
+  </>
+)
+
+// Create a proper footer object for the Drawer component
+const simpleFooterObject = {
+  onSubmit: () => console.log('Submit clicked'),
+  loading: false,
+}
+
+// Basic examples
+export const Default: Story = {
+  args: {
+    open: false,
+  },
+}
+
+export const Open: Story = {
+  args: {
+    open: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    loading: true,
+  },
+}
+
+export const WithSimpleFooter: Story = {
+  args: {
+    open: true,
+    title: 'Drawer Title',
+    description: 'Drawer Description',
+    footer: {
+      onSubmit: () => console.log('Submit'),
+      loading: false,
+    },
+  },
+}
+
+export const PlacementLeft: Story = {
+  args: {
+    open: true,
+    placement: 'left',
+    title: 'Left Drawer',
+  },
+}
+
+export const CustomWidth: Story = {
+  args: {
+    open: true,
+    title: 'Custom Width Drawer',
+    width: '50%',
+  },
+}
+
+export const NonAnimated: Story = {
+  args: {
+    open: true,
+    title: 'Non-Animated Drawer',
+    animated: false,
+  },
+}
+
+export const NonClosable: Story = {
+  args: {
+    open: true,
+    title: 'Non-Closable Drawer',
+    closable: false,
+  },
+}
+
+export const WithDataDetection: Story = {
+  args: {
+    open: true,
+    title: 'Data Change Detection',
+    description: 'This drawer demonstrates the data change detection feature',
+  },
+  render: (args: Props) => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false)
+    // Use static data for the story - don't try to update it which might cause issues
+    const staticData = { id: 1, name: 'John Doe' }
+
+    return (
+      <I18nWrapper>
+        <Button onClick={() => setIsOpen(true)}>Open Data Drawer</Button>
+        <Drawer
+          {...args}
+          open={isOpen}
+          data={staticData}
+          onClose={() => setIsOpen(false)}
+        >
+          <p>This drawer has data associated with it.</p>
+          <p>
+            When you close it, the component will check for unsaved changes.
+          </p>
+          <p>(For this demo, no actual changes are tracked)</p>
+        </Drawer>
+      </I18nWrapper>
+    )
+  },
+}
+
+// Improved ConfirmationDialog template with better state management
+export const WithConfirmationDialog: Story = {
+  args: {
+    open: true,
+    title: 'Unsaved Changes Demo',
+    description:
+      'This drawer shows the confirmation dialog when closing with unsaved changes',
+  },
+  render: (args: Props) => {
+    const [isOpen, setIsOpen] = useState<boolean>(!!args.open || true)
+    const [data, setData] = useState({ id: 1, name: 'John Doe' })
+
+    return (
+      <I18nWrapper>
+        <Button onClick={() => setIsOpen(true)}>
+          Open Confirmation Dialog
+        </Button>
+        <Drawer
+          {...args}
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+          data={data}
+          title="Confirmation Example"
+          confirmDialogTitle="Confirmation Example"
+          confirmDialogMessage="Are you sure you want to close this drawer?"
+          footer={{
+            onSubmit: () => {
+              console.log('Submitted with data:', data)
+              setIsOpen(false)
+            },
+          }}
+        >
+          <h3>Sample Form Content</h3>
+          <p>Current data: {JSON.stringify(data)}</p>
+          <Button onClick={() => setData({ id: 1, name: 'Jane Smith' })}>
+            Modify Data
+          </Button>
+        </Drawer>
+      </I18nWrapper>
+    )
+  },
+}
+
+// Fixed Template with lots of content and proper footer
+export const WithLongContent: Story = {
+  args: {
+    open: true,
+    title: 'Long Content Drawer',
+    description: 'This drawer has a lot of content',
+    footer: simpleFooterObject, // Use the properly structured footer object
+  },
+  render: (args: Props) => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false)
+
+    return (
+      <I18nWrapper>
+        <Button onClick={() => setIsOpen(true)}>
+          Open Long Content Drawer
+        </Button>
+        <Drawer
+          {...args}
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          {content}
+          {content}
+          {content}
+          {content}
+        </Drawer>
+      </I18nWrapper>
+    )
+  },
+}

package/src/components/Drawer/Drawer.test.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import { expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import Drawer from './Drawer'
+import Button from '../Button/Button'
+
+const content = (
+  <>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
+    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
+    <ul>
+      <li>Quisque in ultrices lectus.</li>
+      <li>Quisque in ultrices lectus.</li>
+      <li>Quisque in ultrices lectus.</li>
+    </ul>
+    <p>Nulla at urna diam.</p>
+  </>
+)
+
+it('renders Drawer unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={false}
+      onClose={vi.fn()}
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer open unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer with title unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      title="Lorem ipsum"
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer with description unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      description="Lorem ipsum dolor sit amet"
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer loading unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      loading
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer with footer unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      footer={{
+        leftAction: <Button>Cancel</Button>,
+        onSubmit: vi.fn(),
+        loading: false,
+      }}
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer non closable unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      closable={false}
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer side left unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      placement="left"
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer with custom widths unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      width="100%"
+      widthMd="90%"
+      widthLg="80%"
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Drawer with footer unchanged', () => {
+  const { container } = render(
+    <Drawer
+      open={true}
+      onClose={vi.fn()}
+      footer={{
+        leftActionClassName: 'custom-left-action-class',
+        leftAction: <Button>Cancel</Button>,
+        onSubmit: vi.fn(),
+        loading: false,
+      }}
+    >
+      {content}
+    </Drawer>,
+  )
+  expect(container).toMatchSnapshot()
+})