@memori.ai/ui 1.0.0-alpha

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,274 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '../Button/Button'
+import Select from '../Select/Select'
+import ChevronLeft from '../../icons/ChevronLeft'
+import ChevronRight from '../../icons/ChevronRight'
+
+import './Table.css'
+
+const meta = {
+  title: 'UI/Table',
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<HTMLTableElement>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <table className="memori--table memori--table--compact">
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+          <th>Header 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+          <td>Cell 3</td>
+        </tr>
+        <tr>
+          <td>Cell 4</td>
+          <td>Cell 5</td>
+          <td>Cell 6</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}
+
+export const Compact: Story = {
+  render: () => (
+    <table className="memori--table memori--table--compact">
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+          <th>Header 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+          <td>Cell 3</td>
+        </tr>
+        <tr>
+          <td>Cell 4</td>
+          <td>Cell 5</td>
+          <td>Cell 6</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}
+
+export const Responsive: Story = {
+  render: () => (
+    <div className="memori--responsive-table-wrapper">
+      <table className="memori--table memori--table--compact">
+        <thead>
+          <tr>
+            <th>Header 1</th>
+            <th>Header 2</th>
+            <th>Header 3</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Cell 1</td>
+            <td>Cell 2</td>
+            <td>Cell 3</td>
+          </tr>
+          <tr>
+            <td>Cell 4</td>
+            <td>Cell 5</td>
+            <td>Cell 6</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+}
+
+export const WithFooter: Story = {
+  render: () => (
+    <table className="memori--table memori--table--compact">
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+          <th>Header 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+          <td>Cell 3</td>
+        </tr>
+        <tr>
+          <td>Cell 4</td>
+          <td>Cell 5</td>
+          <td>Cell 6</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td>Footer 1</td>
+          <td>Footer 2</td>
+          <td>Footer 3</td>
+        </tr>
+      </tfoot>
+    </table>
+  ),
+}
+
+export const WithColumnsAlignment: Story = {
+  render: () => (
+    <table className="memori--table memori--table--compact">
+      <thead>
+        <tr>
+          <th>Column aligned left by default</th>
+          <th className="memori--table--column-centered">
+            Column aligned center
+          </th>
+          <th className="memori--table--column-right">Column aligned right</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+          <td>Cell 3</td>
+        </tr>
+        <tr>
+          <td>Cell 4</td>
+          <td>Cell 5</td>
+          <td>Cell 6</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}
+
+export const WithDateColumn: Story = {
+  render: () => (
+    <table className="memori--table memori--table--compact">
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+          <th>Header 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+          <td>Cell 3</td>
+        </tr>
+        <tr>
+          <td className="memori--table--date">2025-01-01</td>
+          <td className="memori--table--date">2025-01-02</td>
+          <td className="memori--table--date">2025-01-03</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+}
+
+export const WithColumnHiddenOnMobile: Story = {
+  render: () => (
+    <div className="memori--responsive-table-wrapper">
+      <table className="memori--table memori--table--compact">
+        <thead>
+          <tr>
+            <th>Header 1</th>
+            <th className="mobile-hidden">Header 2</th>
+            <th>Header 3</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Cell 1</td>
+            <td className="mobile-hidden">Cell 2</td>
+            <td>Cell 3</td>
+          </tr>
+          <tr>
+            <td>Cell 4</td>
+            <td className="mobile-hidden">Cell 5</td>
+            <td>Cell 6</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+}
+
+export const WithPagination: Story = {
+  render: () => (
+    <div>
+      <nav className="memori--table--pagination">
+        <div className="memori--table--pagination--pages">
+          <Button
+            shape="circle"
+            disabled
+            padded={false}
+            title="Previous page"
+            icon={<ChevronLeft />}
+          />
+          <div className="memori--table--pagination--pages">1/6</div>
+          <Button
+            shape="circle"
+            padded={false}
+            title="Next page"
+            icon={<ChevronRight />}
+          />
+        </div>
+        <Select
+          options={[
+            { label: `25 / page`, value: 25 },
+            { label: `50 / page`, value: 50 },
+            { label: `100 / page`, value: 100 },
+          ]}
+          value={25}
+          displayValue={`25 / page`}
+          onChange={value => {
+            console.log(value)
+          }}
+        />
+      </nav>
+      <div className="memori--responsive-table-wrapper">
+        <table className="memori--table memori--table--compact">
+          <thead>
+            <tr>
+              <th>Header 1</th>
+              <th>Header 2</th>
+              <th>Header 3</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Cell 1</td>
+              <td>Cell 2</td>
+              <td>Cell 3</td>
+            </tr>
+            <tr>
+              <td>Cell 4</td>
+              <td>Cell 5</td>
+              <td>Cell 6</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  ),
+}

package/src/components/Tooltip/Tooltip.css

@@ -0,0 +1,160 @@
+.memori-tooltip {
+    position: relative;
+    z-index: 1000;
+    display: inline-block;
+}
+
+.memori-tooltip--content {
+    position: absolute;
+    z-index: 1000;
+    top: 50%;
+    left: 100%;
+    display: none;
+    width: auto;
+    min-width: 200px;
+    padding: 10px;
+    border-radius: 10px;
+    margin-left: 15px;
+    background: rgb(0 0 0 / 80%);
+    color: #fff;
+    font-size: 0.85em;
+    opacity: 0;
+    text-align: center;
+    transform: none;
+    transition: 0.3s 0.1s all ease;
+}
+
+.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
+    right: 100%;
+    left: initial;
+    margin: initial;
+    margin-right: 15px;
+}
+
+.memori-tooltip .memori-tooltip--content::before {
+    position: absolute;
+    top: 50%;
+    left: -15px;
+    display: none;
+    border: 10px solid rgb(0 0 0 / 80%);
+    border-color: transparent rgb(0 0 0 / 80%) transparent transparent;
+    margin-left: -5px;
+    content: '';
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: 0.3s;
+}
+
+.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content::before {
+    right: -15px;
+    left: auto;
+    border-color: transparent transparent transparent rgb(0 0 0 / 80%);
+    margin-right: -5px;
+    margin-left: 0;
+}
+
+.memori-tooltip.memori-tooltip--align-topRight .memori-tooltip--content::before {
+    top: 100%;
+    right: auto;
+    left: 10px;
+    border-color: rgb(0 0 0 / 80%) transparent transparent;
+    margin-top: 10px;
+    margin-left: 5px;
+}
+
+.memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content::before {
+    top: 100%;
+    right: 10px;
+    left: auto;
+    border-color: rgb(0 0 0 / 80%) transparent transparent;
+    margin-top: 10px;
+    margin-left: 5px;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomLeft .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-bottomRight .memori-tooltip--content {
+    top: 100%;
+    right: initial;
+    left: 50%;
+    margin: initial;
+    margin-top: 15px;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomLeft .memori-tooltip--content::before {
+    z-index: 1001;
+    top: -15px;
+    bottom: initial;
+    left: 66%;
+    border-color: transparent transparent rgb(0 0 0 / 80%);
+    margin-top: 0;
+    margin-bottom: initial;
+    margin-left: 5px;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomRight .memori-tooltip--content::before {
+    z-index: 1001;
+    top: -15px;
+    right: 10px;
+    bottom: initial;
+    left: auto;
+    border-color: transparent transparent rgb(0 0 0 / 80%);
+    margin-top: -5px;
+    margin-right: 5px;
+    margin-bottom: initial;
+}
+
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content::before {
+    display: block;
+    opacity: 1;
+}
+
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
+.memori-tooltip:not(.memori-tooltip--disabled, .memori-tooltip--visible):hover .memori-tooltip--content {
+    transform: translateY(-50%);
+}
+
+.memori-tooltip:not(.memori-tooltip--visible, .memori-tooltip--disabled):hover .memori-tooltip--content,
+.memori-tooltip:not(.memori-tooltip--visible, .memori-tooltip--disabled):hover .memori-tooltip--content::before {
+    display: block;
+    opacity: 1;
+}
+
+.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled, .memori-tooltip--visible):hover
+    .memori-tooltip--content {
+    transform: translateY(-150%) translateX(-33%);
+}
+
+.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled, .memori-tooltip--visible):hover
+    .memori-tooltip--content {
+    transform: translateY(-150%) translateX(33%);
+}
+
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content a,
+.memori-tooltip:not(.memori-tooltip--disabled, .memori-tooltip--visible):hover .memori-tooltip--content a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.memori-tooltip.memori-tooltip--disabled {
+    cursor: not-allowed;
+}
+
+.memori-tooltip.memori-tooltip--align-bottomLeft:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-bottomLeft:not(.memori-tooltip--disabled, .memori-tooltip--visible):hover
+    .memori-tooltip--content {
+    transform: translateX(-73%);
+}
+
+.memori-tooltip.memori-tooltip--align-bottomRight:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-bottomRight:not(.memori-tooltip--disabled, .memori-tooltip--visible):hover
+    .memori-tooltip--content {
+    transform: translateX(33%);
+}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Tooltip from './Tooltip'
+import './Tooltip.css'
+
+const meta = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: args => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-start',
+        paddingTop: '10rem',
+      }}
+    >
+      <Tooltip {...args} />
+    </div>
+  ),
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    content: 'Here is some tooltip content',
+    children: <span>Hover me</span>,
+  },
+}
+
+export const WithJSXContent: Story = {
+  args: {
+    content: (
+      <p>
+        Here we have some JSX, useful for{' '}
+        <a
+          href="https://memori.ai"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          links
+        </a>
+        , for example.
+      </p>
+    ),
+    children: <span>Hover me</span>,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    content: 'Here is some tooltip content but I am disabled',
+    children: <span>Hover me</span>,
+    disabled: true,
+  },
+}
+
+export const VisibleControlled: Story = {
+  args: {
+    content:
+      'Here is some tooltip content displayed by default as I am controlled',
+    children: <span>Hover me</span>,
+    visible: true,
+  },
+}
+
+export const AlignLeft: Story = {
+  args: {
+    content: 'Here is some tooltip content',
+    children: <span>Hover me</span>,
+    align: 'left',
+    visible: true,
+  },
+  render: args => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        paddingTop: '10rem',
+      }}
+    >
+      <Tooltip {...args} />
+    </div>
+  ),
+}
+
+export const AlignRight: Story = {
+  args: {
+    content: 'Here is some tooltip content',
+    children: <span>Hover me</span>,
+    align: 'right',
+    visible: true,
+  },
+}
+
+export const AlignTopLeft: Story = {
+  args: {
+    content: 'Here is some tooltip content',
+    children: <span>Hover me</span>,
+    align: 'topLeft',
+    visible: true,
+  },
+  render: args => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        paddingTop: '10rem',
+      }}
+    >
+      <Tooltip {...args} />
+    </div>
+  ),
+}
+
+export const AlignTopRight: Story = {
+  args: {
+    content: 'Here is some tooltip content',
+    children: <span>Hover me</span>,
+    align: 'topRight',
+    visible: true,
+  },
+}

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import Tooltip from './Tooltip'
+
+it('renders Tooltip unchanged', () => {
+  const { container } = render(
+    <Tooltip content="Here is some tooltip content">Hover me</Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip with jsx content unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content={
+        <p>
+          Here we have some JSX, useful for
+          <a
+            href="https://memori.ai"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            links
+          </a>
+          , for example.
+        </p>
+      }
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip disabled unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content but I am disabled"
+      disabled
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip visible unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip aligned left unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="left"
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip aligned top left unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="topLeft"
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip aligned right unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="right"
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Tooltip aligned top right unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+      align="topRight"
+    >
+      Hover me
+    </Tooltip>,
+  )
+  expect(container).toMatchSnapshot()
+})