@memori.ai/ui 1.0.0-alpha

package/src/components/Modal/Modal.css

@@ -0,0 +1,95 @@
+.memori-modal {
+    position: relative;
+    z-index: 1000;
+}
+
+.memori-modal--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 30%);
+}
+
+.memori-modal--container {
+    position: fixed;
+    z-index: 50;
+    inset: 0;
+    overflow-y: auto;
+}
+
+.memori-modal--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-modal--panel {
+    position: relative;
+    max-width: var(--memori-modal--width, 100%);
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: var(--memori-font-family);
+}
+
+@media (width >= 768px) {
+    .memori-modal--panel {
+        max-width: var(--memori-modal--width-md, 80%);
+        padding: 2rem 3rem;
+    }
+}
+
+.memori-modal--footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+}
+
+.memori-modal--footer button + button {
+    margin-left: 0.5em;
+}
+
+.memori-modal--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.scale-95 {
+    transform: scale(0.95);
+}
+
+.scale-100 {
+    transform: scale(1);
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,184 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Modal, { type Props } from './Modal'
+import Button from '../Button/Button'
+
+const meta = {
+  title: 'UI/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: (args: Props) => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false)
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Click me</Button>
+        <Modal
+          {...args}
+          open={isOpen}
+          onClose={args.closable ? () => setIsOpen(false) : () => {}}
+          footer={args.footer}
+        >
+          {content}
+        </Modal>
+      </>
+    )
+  },
+} satisfies Meta<typeof Modal>
+
+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>
+  </>
+)
+
+const footer = (
+  <>
+    <Button primary>OK</Button>
+    <Button>Cancel</Button>
+  </>
+)
+
+const footerNonClosableModal = <Button primary>OK</Button>
+
+export const Default: Story = {
+  args: {
+    open: false,
+    closable: true,
+    onClose: () => {},
+  },
+}
+
+export const Open: Story = {
+  args: {
+    open: true,
+    closable: true,
+    onClose: () => {},
+  },
+}
+
+export const WithTitle: Story = {
+  args: {
+    open: true,
+    closable: true,
+    onClose: () => {},
+    title: 'Modal Title',
+  },
+}
+
+export const WithTitleAndDescription: Story = {
+  args: {
+    open: true,
+    closable: true,
+    onClose: () => {},
+    title: 'Modal Title',
+    description: 'Modal Description',
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    open: true,
+    closable: true,
+    onClose: () => {},
+    title: 'Modal Title',
+    description: 'Modal Description',
+    loading: true,
+  },
+}
+
+export const WithFooter: Story = {
+  args: {
+    open: true,
+    closable: true,
+    onClose: () => {},
+    title: 'Modal Title',
+    description: 'Modal Description',
+    footer,
+  },
+}
+
+export const NonClosable: Story = {
+  args: {
+    open: true,
+    closable: false,
+    onClose: () => {},
+    title: 'Modal Title',
+    description: 'Modal Description',
+    footer: footerNonClosableModal,
+  },
+}
+
+export const WithALotOfContent: Story = {
+  args: {
+    open: true,
+    closable: true,
+    onClose: () => {},
+    title: 'Modal Title',
+    description: 'Modal Description',
+    footer,
+  },
+  render: (args: Props) => {
+    const [isOpen, setIsOpen] = React.useState(!!args.open || false)
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Click me</Button>
+        <Modal
+          {...args}
+          open={isOpen}
+          onClose={args.closable ? () => setIsOpen(false) : () => {}}
+          footer={args.footer}
+        >
+          {content}
+          {content}
+          {content}
+          {content}
+          {content}
+        </Modal>
+      </>
+    )
+  },
+}

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import { expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import Modal from './Modal'
+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>
+  </>
+)
+
+const footer = (
+  <>
+    <Button primary>Ok</Button>
+    <Button>Cancel</Button>
+  </>
+)
+
+it('renders Modal unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={false}
+      onClose={vi.fn()}
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal open unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal with title unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+      title="Lorem ipsum"
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal with description unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+      description="Lorem ipsum dolor sit amet"
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal loading unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+      loading
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal with footer unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+      footer={footer}
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal non closable unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+      closable={false}
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Modal with custom widths unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={vi.fn()}
+      width="100%"
+      widthMd="90%"
+    >
+      {content}
+    </Modal>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,124 @@
+import type { FC, JSX } from 'react'
+import React from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import Spin from '../Spin/Spin'
+import Button from '../Button/Button'
+import Close from '../../icons/Close'
+import { useTranslation } from 'react-i18next'
+import cx from 'classnames'
+
+import './Modal.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
+  footer?: JSX.Element | React.ReactNode
+  loading?: boolean
+  closable?: boolean
+  width?: string
+  widthMd?: string
+}
+
+const Modal: FC<Props> = ({
+  open = false,
+  onClose,
+  className,
+  title,
+  description,
+  children,
+  footer,
+  loading = false,
+  closable = true,
+  width = '100%',
+  widthMd = '100%',
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Transition
+      appear
+      show={open}
+      as={React.Fragment}
+    >
+      <Dialog
+        open={open}
+        onClose={onClose}
+        className={cx('memori-modal', className)}
+      >
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="memori-modal--backdrop" />
+        </Transition.Child>
+        <div className="memori-modal--container">
+          <div className="memori-modal--container-scrollable">
+            <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-modal--panel">
+                <style
+                  dangerouslySetInnerHTML={{
+                    __html: `
+                    .memori-modal--panel {
+                      --memori-modal--width: ${width};
+                      --memori-modal--width-md: ${widthMd};
+                    }
+                  `,
+                  }}
+                />
+                {closable && (
+                  <div className="memori-modal--close">
+                    <Button
+                      ghost
+                      padded
+                      shape="circle"
+                      icon={<Close />}
+                      title={t('close') || 'Close'}
+                      onClick={() => onClose(false)}
+                    />
+                  </div>
+                )}
+                <Spin spinning={loading}>
+                  {title && (
+                    <Dialog.Title className="memori-modal--title">
+                      {title}
+                    </Dialog.Title>
+                  )}
+                  {description && (
+                    <Dialog.Description className="memori-modal--description">
+                      {description}
+                    </Dialog.Description>
+                  )}
+
+                  {children}
+
+                  {footer && (
+                    <div className="memori-modal--footer">{footer}</div>
+                  )}
+                </Spin>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}
+
+export default Modal

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

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Modal loading unchanged 1`] = `<div />`;
+
+exports[`renders Modal non closable unchanged 1`] = `<div />`;
+
+exports[`renders Modal open unchanged 1`] = `<div />`;
+
+exports[`renders Modal unchanged 1`] = `<div />`;
+
+exports[`renders Modal with custom widths unchanged 1`] = `<div />`;
+
+exports[`renders Modal with description unchanged 1`] = `<div />`;
+
+exports[`renders Modal with footer unchanged 1`] = `<div />`;
+
+exports[`renders Modal with title unchanged 1`] = `<div />`;

package/src/components/Modal/index.tsx

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

package/src/components/Select/Select.css

@@ -0,0 +1,134 @@
+.memori-select {
+    max-width: 240px;
+    min-height: 38px;
+}
+
+.memori-select--button {
+    position: relative;
+    width: 100%;
+    max-width: 240px;
+    min-height: 38px;
+    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    background: transparent;
+    box-shadow:
+        rgb(0 0 0 / 0%) 0 0 0 0,
+        rgb(0 0 0 / 0%) 0 0 0 0,
+        rgb(0 0 0 / 10%) 0 4px 6px -1px,
+        rgb(0 0 0 / 10%) 0 2px 4px -2px;
+    color: var(--memori-text-color, #333);
+    cursor: pointer;
+    font-family: var(--memori-font-family);
+    font-size: 16px;
+    text-align: left;
+}
+
+.memori-select--button:focus {
+    border-color: #cbd5e0;
+    box-shadow: 0 0 0 3px rgb(66 153 225 / 50%);
+}
+
+.memori-select--button:focus-visible {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 3px rgb(66 153 225 / 50%);
+}
+
+.memori-select--button:hover {
+    border-color: #e2e8f0;
+}
+
+.memori-select--button:active {
+    border-color: #e2e8f0;
+}
+
+.memori-select--button:disabled {
+    border-color: #e2e8f0;
+    background-color: #f7fafc;
+    color: #a0aec0;
+    cursor: not-allowed;
+}
+
+@media (width >= 640px) {
+    .memori-select--button {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
+}
+
+.memori-select--label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+}
+
+.memori-select--value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-select--value.memori-select--value-placeholder {
+    color: #a0aec0;
+}
+
+.memori-select--icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding-right: 0.5rem;
+    pointer-events: none;
+}
+
+.memori-select--icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: rgb(156 163 175/100%);
+}
+
+ul.memori-select--options {
+    position: absolute;
+    z-index: 1;
+    overflow: auto;
+    width: 100%;
+    max-width: min(18rem, 30%);
+    max-height: 15rem;
+    padding: 0.25rem 0;
+    border-radius: 0.375rem;
+    margin: 0.25rem 0 0;
+    background: #fff;
+    box-shadow:
+        rgb(255 255 255) 0 0 0 0,
+        rgb(0 0 0 / 5%) 0 0 0 1px,
+        rgb(0 0 0 / 10%) 0 10px 15px -3px,
+        rgb(0 0 0 / 10%) 0 4px 6px -4px;
+    list-style: none;
+}
+
+@media (width >= 640px) {
+    .memori-select--options {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
+}
+
+li.memori-select--option {
+    position: relative;
+    padding: 0.5rem 1rem;
+    color: rgb(17 24 39/100%);
+    cursor: pointer;
+    user-select: none;
+}
+
+li.memori-select--option:hover,
+li.memori-select--option:focus {
+    background-color: #f7fafc;
+}
+
+li.memori-select--option:focus {
+    outline: 2px solid #63b3ed;
+    outline-offset: 2px;
+}