@memori.ai/ui 1.0.0-alpha

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Select from './Select'
+
+const meta = {
+  title: 'UI/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof Select>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onChange: console.log,
+    label: 'Select me',
+    options: [
+      { value: '1', label: '1' },
+      { value: '2', label: '2' },
+      { value: '3', label: '3' },
+    ],
+  },
+}
+
+export const Placeholder: Story = {
+  args: {
+    onChange: console.log,
+    label: 'Select me',
+    placeholder: 'Select me',
+    options: [
+      { value: '1', label: '1' },
+      { value: '2', label: '2' },
+      { value: '3', label: '3' },
+    ],
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    onChange: console.log,
+    label: 'Select me',
+    value: '2',
+    options: [
+      { value: '1', label: '1' },
+      { value: '2', label: '2' },
+      { value: '3', label: '3' },
+    ],
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    onChange: console.log,
+    label: `You can't select me`,
+    options: [
+      { value: '1', label: '1' },
+      { value: '2', label: '2' },
+      { value: '3', label: '3' },
+    ],
+    value: 2,
+    disabled: true,
+  },
+}

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import Select from './Select'
+
+it('renders Select unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      onChange={vi.fn()}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Select with placeholder unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      placeholder="Select me"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      onChange={vi.fn()}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Select with value unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      value="2"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      onChange={vi.fn()}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Select with custom value display unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      value="2"
+      displayValue="Two"
+      options={[
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+      ]}
+      onChange={vi.fn()}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Select disabled unchanged', () => {
+  const { container } = render(
+    <Select
+      label="Select me"
+      value="2"
+      options={[
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+      ]}
+      disabled
+      onChange={vi.fn()}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Select/Select.tsx

@@ -0,0 +1,84 @@
+import React, { Fragment } from 'react'
+import cx from 'classnames'
+import { Listbox, Transition } from '@headlessui/react'
+import SelectIcon from '../../icons/SelectIcon'
+
+import './Select.css'
+
+export interface Props<T = any> {
+  className?: string
+  value?: T
+  name?: string
+  displayValue?: string
+  onChange: (value: T) => void
+  options: { value: T; label: any }[]
+  disabled?: boolean
+  label?: string
+  placeholder?: string
+}
+
+const Select = ({
+  className,
+  value,
+  name,
+  displayValue,
+  options,
+  onChange,
+  disabled = false,
+  label,
+  placeholder,
+}: Props) => {
+  return (
+    <div className={cx('memori-select', className)}>
+      <Listbox
+        value={value}
+        onChange={value => {
+          onChange(value)
+        }}
+        disabled={disabled}
+        name={name}
+      >
+        {label && (
+          <Listbox.Label className="memori-select--label">
+            {label}:
+          </Listbox.Label>
+        )}
+        <Listbox.Button
+          aria-label={label}
+          className="memori-select--button"
+        >
+          <span
+            className={cx('memori-select--value', {
+              'memori-select--value-placeholder': !value,
+            })}
+          >
+            {value ? displayValue || value : placeholder}
+          </span>
+          <span className="memori-select--icon">
+            <SelectIcon />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="memori-select--options">
+            {options.map(opt => (
+              <Listbox.Option
+                key={opt.value}
+                value={opt.value}
+                className="memori-select--option"
+              >
+                {opt.label}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </Listbox>
+    </div>
+  )
+}
+
+export default Select

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

@@ -0,0 +1,261 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Select disabled unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      for="headlessui-listbox-button-_r_j_"
+      id="headlessui-label-_r_i_"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Select me"
+      aria-labelledby="headlessui-label-_r_i_ headlessui-listbox-button-_r_j_"
+      class="memori-select--button"
+      data-disabled=""
+      data-headlessui-state="disabled"
+      disabled=""
+      id="headlessui-listbox-button-_r_j_"
+      type="button"
+    >
+      <span
+        class="memori-select--value"
+      >
+        2
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      for="headlessui-listbox-button-_r_3_"
+      id="headlessui-label-_r_2_"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Select me"
+      aria-labelledby="headlessui-label-_r_2_ headlessui-listbox-button-_r_3_"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-_r_3_"
+      type="button"
+    >
+      <span
+        class="memori-select--value memori-select--value-placeholder"
+      />
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select with custom value display unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      for="headlessui-listbox-button-_r_f_"
+      id="headlessui-label-_r_e_"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Select me"
+      aria-labelledby="headlessui-label-_r_e_ headlessui-listbox-button-_r_f_"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-_r_f_"
+      type="button"
+    >
+      <span
+        class="memori-select--value"
+      >
+        Two
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select with placeholder unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      for="headlessui-listbox-button-_r_7_"
+      id="headlessui-label-_r_6_"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Select me"
+      aria-labelledby="headlessui-label-_r_6_ headlessui-listbox-button-_r_7_"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-_r_7_"
+      type="button"
+    >
+      <span
+        class="memori-select--value memori-select--value-placeholder"
+      >
+        Select me
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select with value unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      for="headlessui-listbox-button-_r_b_"
+      id="headlessui-label-_r_a_"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Select me"
+      aria-labelledby="headlessui-label-_r_a_ headlessui-listbox-button-_r_b_"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-_r_b_"
+      type="button"
+    >
+      <span
+        class="memori-select--value"
+      >
+        2
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;

package/src/components/Select/index.tsx

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

package/src/components/Slider/Slider.css

@@ -0,0 +1,194 @@
+.memori--slider-container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    padding: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    touch-action: none;
+    user-select: none;
+}
+
+.memori--slider-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.memori--slider-header {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    /* max-height: 10px; */
+}
+
+.memori--slider-label {
+    max-width: 70%;
+    font-size: 1.2rem;
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+.memori--slider-value {
+    min-width: 40px;
+    max-width: 30%;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: right;
+}
+
+.memori--slider-track-container {
+    position: relative;
+    display: flex;
+    height: 96px;
+    max-height: 96px;
+    align-items: center;
+    margin-top: 8px;
+    cursor: pointer;
+    touch-action: none;
+}
+
+.memori--slider-track {
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    height: 16px;
+    max-height: 16px;
+    border-radius: 8px;
+    background-color: #e5e5e5;
+}
+
+.memori--slider-track-fill {
+    position: absolute;
+    width: var(--percentage);
+    height: 100%;
+    border-radius: 8px;
+    background-color: var(--memori-primary, #2563eb);
+    transition: width 0.15s ease;
+}
+
+.memori--slider-marks {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 8px;
+    padding-top: 24px;
+    pointer-events: none;
+}
+
+.memori--slider-mark {
+    display: flex;
+    min-width: 40px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.memori--slider-mark-line {
+    width: 3px;
+    height: 8px;
+    max-height: 8px;
+    margin-bottom: 8px;
+    background-color: #9ca3af;
+}
+
+.memori--slider-mark-value {
+    color: #666;
+    font-size: 1rem;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.memori--slider-thumb {
+    position: absolute;
+    z-index: 1;
+    left: var(--percentage);
+    width: 40px;
+    max-width: 40px;
+    height: 40px;
+    max-height: 40px;
+    border: 4px solid var(--memori-primary, #2563eb);
+    border-radius: 50%;
+    background-color: white;
+    box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
+    touch-action: none;
+    transform: translateX(-50%);
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+.memori--slider-thumb:hover,
+.memori--slider-thumb:active {
+    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
+    transform: translateX(-50%) scale(1.1);
+}
+
+/* Portrait/Totem specific styles */
+@media screen and (aspect-ratio <= 3/4) {
+    .memori--slider-container {
+        padding: 16px;
+    }
+
+    .memori--slider-header {
+        margin-bottom: 16px;
+    }
+
+    .memori--slider-label {
+        font-size: 1.3rem;
+    }
+
+    .memori--slider-value {
+        min-width: 50px;
+        font-size: 1.1rem;
+    }
+
+    .memori--slider-track-container {
+        height: 80px;
+        margin-top: 8px;
+    }
+
+    .memori--slider-track {
+        height: 16px;
+        border-radius: 10px;
+    }
+
+    .memori--slider-thumb {
+        width: 48px;
+        height: 48px;
+        border-width: 4px;
+    }
+
+    .memori--slider-mark-value {
+        margin-top: 4px;
+        font-size: 1.1rem;
+    }
+}
+
+/* Very tall displays */
+@media screen and (height >= 1200px) {
+    .memori--slider-container {
+        padding: 24px 20px;
+    }
+
+    .memori--slider-header {
+        margin-bottom: 24px;
+    }
+
+    .memori--slider-label {
+        font-size: 1.4rem;
+    }
+
+    .memori--slider-track-container {
+        height: 96px;
+        margin-top: 12px;
+    }
+
+    .memori--slider-thumb {
+        width: 56px;
+        height: 56px;
+        border-width: 5px;
+    }
+}