@memori.ai/ui 1.0.0-alpha

package/src/components/Spin/Spin.css

@@ -0,0 +1,31 @@
+.memori-spin {
+    position: relative;
+}
+
+.memori-spin--spinner {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background: rgb(255 255 255 / 80%);
+}
+
+.memori-spin--spinning .memori-spin--spinner {
+    display: flex;
+}
+
+.memori-spin--spinner svg {
+    width: 30%;
+    max-width: 5rem;
+    height: 30%;
+    max-height: 5rem;
+}
+
+.memori-spin--primary svg {
+    fill: var(--memori-primary);
+}

package/src/components/Spin/Spin.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Spin from './Spin'
+
+const meta = {
+  title: 'UI/Spin',
+  component: Spin,
+  tags: ['autodocs'],
+  argTypes: {
+    spinning: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    primary: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: args => (
+    <Spin {...args}>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
+      <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>
+    </Spin>
+  ),
+} satisfies Meta<typeof Spin>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    spinning: false,
+  },
+}
+
+export const Spinning: Story = {
+  args: {
+    spinning: true,
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    spinning: true,
+    primary: true,
+  },
+}

package/src/components/Spin/Spin.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import Spin from './Spin'
+
+const content = (
+  <>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
+    <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>
+  </>
+)
+
+describe('Spin', () => {
+  it('renders Spin unchanged', () => {
+    const { container } = render(<Spin>{content}</Spin>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Spin spinning unchanged', () => {
+    const { container } = render(<Spin spinning>{content}</Spin>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Spin with custom className unchanged', () => {
+    const { container } = render(<Spin className="lorem-ipsum">{content}</Spin>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders Spin spinning primary unchanged', () => {
+    const { container } = render(
+      <Spin
+        spinning
+        primary
+      >
+        {content}
+      </Spin>,
+    )
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/components/Spin/Spin.tsx

@@ -0,0 +1,34 @@
+import type { FC, JSX } from 'react'
+import React from 'react'
+import cx from 'classnames'
+import Loading from '../../icons/Loading'
+
+import './Spin.css'
+
+export interface Props {
+  spinning?: boolean
+  className?: string
+  primary?: boolean
+  children?: JSX.Element | React.ReactNode
+}
+
+const Spin: FC<Props> = ({
+  spinning = false,
+  primary = false,
+  className,
+  children,
+}: Props) => (
+  <div
+    className={cx('memori-spin', className, {
+      'memori-spin--spinning': spinning,
+      'memori-spin--primary': primary,
+    })}
+  >
+    {children}
+    <div className="memori-spin--spinner">
+      <Loading loading />
+    </div>
+  </div>
+)
+
+export default Spin

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

@@ -0,0 +1,193 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Spin > renders Spin spinning primary unchanged 1`] = `
+<div>
+  <div
+    class="memori-spin memori-spin--spinning memori-spin--primary"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </p>
+    <h2>
+      Suspendisse a sodales nulla, sed semper nisi.
+    </h2>
+    <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>
+    <div
+      class="memori-spin--spinner"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Spin > renders Spin spinning unchanged 1`] = `
+<div>
+  <div
+    class="memori-spin memori-spin--spinning"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </p>
+    <h2>
+      Suspendisse a sodales nulla, sed semper nisi.
+    </h2>
+    <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>
+    <div
+      class="memori-spin--spinner"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Spin > renders Spin unchanged 1`] = `
+<div>
+  <div
+    class="memori-spin"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </p>
+    <h2>
+      Suspendisse a sodales nulla, sed semper nisi.
+    </h2>
+    <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>
+    <div
+      class="memori-spin--spinner"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Spin > renders Spin with custom className unchanged 1`] = `
+<div>
+  <div
+    class="memori-spin lorem-ipsum"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </p>
+    <h2>
+      Suspendisse a sodales nulla, sed semper nisi.
+    </h2>
+    <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>
+    <div
+      class="memori-spin--spinner"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Spin/index.tsx

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

package/src/components/Table/Table.css

@@ -0,0 +1,130 @@
+table.memori--table {
+    --memori-table-spacing: 1rem;
+    --memori-table-border-color: rgb(237 240 243);
+    --memori-table-bg-color: rgb(246 248 249);
+
+    margin: 1rem 0;
+    font-size: 1rem;
+}
+
+table.memori--table.memori--table--compact {
+    --memori-table-spacing: 0.5rem;
+
+    font-size: 0.875rem;
+}
+
+@media (width <= 767px) {
+    table.memori--table {
+        --memori-table-spacing: 0.5rem;
+
+        font-size: 0.875rem;
+    }
+
+    table.memori--table.memori--table--compact {
+        font-size: 0.75rem;
+    }
+}
+
+:where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-indent: 0;
+}
+
+.memori--responsive-table-wrapper {
+    width: 100%;
+    max-width: 800px;
+    overflow-x: auto;
+}
+
+.memori--responsive-table-wrapper > br {
+    display: none;
+}
+
+table.memori--table th,
+table.memori--table td {
+    padding: calc(var(--memori-table-spacing) / 2) var(--memori-table-spacing);
+    border-bottom: 1px solid var(--memori-table-border-color);
+    text-align: left;
+    text-align: start;
+}
+
+table.memori--table thead th {
+    padding: var(--memori-table-spacing) var(--memori-table-spacing);
+    background-color: var(--memori-table-bg-color);
+}
+
+table.memori--table tfoot th,
+table.memori--table tfoot td {
+    border-top: 1px solid var(--memori-table-border-color);
+    border-bottom: 0;
+}
+
+table.memori--table[role='grid'] tbody tr:nth-child(odd) {
+    background-color: var(--memori-table-bg-color);
+}
+
+.memori--table--pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+}
+
+.memori--table--pagination--pages {
+    display: flex;
+    align-items: center;
+    margin-right: 1rem;
+}
+
+.memori--table--pagination--pages--current {
+    padding: 0 0.5rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.memori--table--pagination--pages button.memori-button.memori-button--circle {
+    padding: 0.25rem;
+}
+
+.memori--table--pagination--pages button.memori-button[disabled] {
+    opacity: 0.3;
+}
+
+.memori--table--pagination ul.memori-select--options {
+    right: 0;
+}
+
+@media (width <= 600px) {
+    .memori--table--pagination--pages {
+        margin-right: auto;
+    }
+
+    .memori--table--pagination--pages--current {
+        padding: 0 0.25rem;
+    }
+
+    .memori--table--pagination .memori-select button.memori-select--button {
+        padding: 0.25rem 2rem 0.25rem 0.5rem;
+        font-size: 0.875rem;
+    }
+
+    .memori--table--pagination .memori-select ul.memori-select--options {
+        min-width: fit-content;
+    }
+}
+
+table.memori--table th.memori--table--column-centered,
+table.memori--table td.memori--table--column-centered {
+    text-align: center;
+}
+
+table.memori--table th.memori--table--column-right,
+table.memori--table td.memori--table--column-right {
+    text-align: right;
+    text-align: end;
+}
+
+.memori--table--date {
+    white-space: nowrap;
+}