@memori.ai/ui 1.0.0-alpha

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

@@ -0,0 +1,321 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Card hoverable unchanged 1`] = `
+<div>
+  <div
+    class="memori-card memori-card--hoverable"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <h3
+          class="memori-card--title"
+        >
+          lorem-ipsum
+        </h3>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card loading unchanged 1`] = `
+<div>
+  <div
+    class="memori-card memori-card--loading"
+  >
+    <div
+      class="memori-spin memori-spin--spinning"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <h3
+          class="memori-card--title"
+        >
+          Card title
+        </h3>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card with children unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        >
+          <p>
+            Ciao
+          </p>
+        </div>
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card with cover unchanged 1`] = `
+<div>
+  <div
+    class="memori-card memori-card--with-cover"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--cover"
+      >
+        <img
+          alt=""
+          src="#"
+        />
+      </div>
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card with custom CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-card lorem-ipsum"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card with description unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <p
+          class="memori-card--description"
+        >
+          Card description
+        </p>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;
+
+exports[`renders Card with title unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <h3
+          class="memori-card--title"
+        >
+          Card title
+        </h3>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <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>
+</div>
+`;

package/src/components/Card/index.tsx

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

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,114 @@
+.memori-checkbox {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: baseline;
+    padding: 0;
+    margin: 0;
+    color: rgb(0 0 0 / 88%);
+    cursor: pointer;
+    font-family: var(--memori-font-family);
+    font-size: 14px;
+    line-height: unset;
+    list-style: none;
+}
+
+.memori-checkbox--input-wrapper {
+    position: relative;
+    top: 0.2em;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.memori-checkbox--inner {
+    position: relative;
+    top: 0;
+    display: block;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 1px solid #d9d9d9;
+    border-color: rgb(217 217 217);
+    border-radius: 4px;
+    background-color: #fff;
+    border-collapse: separate;
+    direction: ltr;
+    inset-inline-start: 0;
+    transition: all 0.3s;
+}
+
+.memori-checkbox:not(.memori-checkbox--indeterminate) .memori-checkbox--inner::after {
+    position: absolute;
+    top: 50%;
+    display: table;
+    width: 5.7143px;
+    height: 9.1429px;
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-inline-start: 0;
+    content: '';
+    inset-inline-start: 21.5%;
+    opacity: 0;
+    transform: rotate(45deg) scale(0) translate(-50%, -50%);
+    transition:
+        all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
+        opacity 0.1s;
+}
+
+.memori-checkbox--input {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+}
+
+.memori-checkbox--text {
+    padding-inline: 8px;
+}
+
+.memori-checkbox--disabled,
+.memori-checkbox--disabled .memori-checkbox--input-wrapper,
+.memori-checkbox--disabled .memori-checkbox--input {
+    cursor: not-allowed;
+}
+
+.memori-checkbox--disabled .memori-checkbox--inner {
+    border-color: #d9d9d9;
+    background: rgb(0 0 0 / 4%);
+}
+
+.memori-checkbox.memori-checkbox--disabled .memori-checkbox--inner::after {
+    border-color: rgb(0 0 0 / 25%);
+}
+
+.memori-checkbox--disabled .memori-checkbox--text {
+    color: rgb(0 0 0 / 25%);
+}
+
+.memori-checkbox--input.memori-checkbox--indeterminate + .memori-checkbox--inner,
+.memori-checkbox--input:checked:not(:disabled) + .memori-checkbox--inner {
+    z-index: 2;
+    border-color: var(--memori-primary);
+    background-color: var(--memori-primary);
+}
+
+.memori-checkbox--input:checked + .memori-checkbox--inner::after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+
+.memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--inner::after,
+.memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--input:checked + .memori-checkbox--inner::after {
+    position: absolute;
+    top: calc(50% - 1px);
+    left: 2px;
+    width: 10px;
+    border-bottom: 2px solid #fff;
+    content: '';
+    transform: none;
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Checkbox from './Checkbox'
+
+const meta = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Check me',
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    label: 'Uncheck me',
+    checked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Do not check me',
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Do not uncheck me',
+    checked: true,
+    disabled: true,
+  },
+}
+
+export const Indeterminate: Story = {
+  args: {
+    label: 'Indeterminate',
+    checked: true,
+    indeterminate: true,
+  },
+}
+
+export const DisabledIndeterminate: Story = {
+  args: {
+    label: 'Indeterminate',
+    checked: false,
+    indeterminate: true,
+    disabled: true,
+  },
+}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import Checkbox from './Checkbox'
+
+it('renders Checkbox unchanged', () => {
+  const { container } = render(<Checkbox label="Check me" />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Checkbox checked unchanged', () => {
+  const { container } = render(
+    <Checkbox
+      label="Check me"
+      checked
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Checkbox disabled unchanged', () => {
+  const { container } = render(
+    <Checkbox
+      label="Check me"
+      disabled
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Checkbox checked and disabled unchanged', () => {
+  const { container } = render(
+    <Checkbox
+      label="Check me"
+      checked
+      disabled
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Checkbox indeterminate unchanged', () => {
+  const { container } = render(
+    <Checkbox
+      label="Check me"
+      indeterminate
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+import { useEffect, useRef } from 'react'
+import cx from 'classnames'
+
+import './Checkbox.css'
+
+export interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  label?: string
+  checked?: boolean
+  disabled?: boolean
+  indeterminate?: boolean
+  name?: string
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const Checkbox: FC<Props> = ({
+  label,
+  className,
+  disabled = false,
+  indeterminate = false,
+  checked,
+  onChange,
+  name,
+  ...props
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate
+    }
+  }, [indeterminate])
+
+  return (
+    <label
+      className={cx('memori-checkbox', className, {
+        'memori-checkbox--disabled': disabled,
+        'memori-checkbox--indeterminate': indeterminate,
+      })}
+    >
+      <span className="memori-checkbox--input-wrapper">
+        <input
+          ref={inputRef}
+          type="checkbox"
+          {...props}
+          name={name}
+          disabled={disabled}
+          checked={checked || indeterminate}
+          className="memori-checkbox--input"
+          onChange={onChange}
+        />
+        <span className="memori-checkbox--inner" />
+      </span>
+      {!!label?.length && (
+        <span className="memori-checkbox--text">{label}</span>
+      )}
+    </label>
+  )
+}
+
+export default Checkbox