@memori.ai/ui 1.0.0-alpha

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,173 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Button from './Button'
+import Eye from '../../icons/Eye'
+
+import { fn } from 'storybook/test'
+
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    htmlType: {
+      control: {
+        type: 'select',
+        options: ['button', 'submit', 'reset'],
+      },
+    },
+    primary: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    outlined: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    ghost: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    padded: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    block: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    danger: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    onClick: fn(),
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Click me',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    children: 'Click me',
+    primary: true,
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    children: 'Click me',
+    outlined: true,
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    children: 'Click me',
+    ghost: true,
+  },
+}
+
+export const PrimaryOutlined: Story = {
+  args: {
+    children: 'Click me',
+    primary: true,
+    outlined: true,
+  },
+}
+
+export const Square: Story = {
+  args: {
+    children: 'Click me',
+    shape: 'square',
+  },
+}
+
+export const Padded: Story = {
+  args: {
+    children: 'Click me',
+    padded: true,
+  },
+}
+
+export const Block: Story = {
+  args: {
+    children: 'Click me',
+    block: true,
+  },
+}
+
+export const Circle: Story = {
+  args: {
+    children: 'Click me',
+    shape: 'circle',
+    icon: <Eye />,
+    padded: false,
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    children: 'Click me',
+    icon: <Eye />,
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    children: 'Click me',
+    danger: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    children: 'Click me',
+    loading: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Click me',
+    disabled: true,
+  },
+}

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import Button from './Button'
+import Loading from '../../icons/Loading'
+
+it('renders empty Button unchanged', () => {
+  const { container } = render(<Button />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button unchanged', () => {
+  const { container } = render(<Button>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button primary unchanged', () => {
+  const { container } = render(<Button primary>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button outlined unchanged', () => {
+  const { container } = render(<Button outlined>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button padded unchanged', () => {
+  const { container } = render(<Button padded>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button block unchanged', () => {
+  const { container } = render(<Button block>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button with icon unchanged', () => {
+  const { container } = render(<Button icon={<Loading />}>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button with icon only unchanged', () => {
+  const { container } = render(<Button icon={<Loading />} />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button danger unchanged', () => {
+  const { container } = render(<Button danger>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button loading unchanged', () => {
+  const { container } = render(<Button loading>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button disabled unchanged', () => {
+  const { container } = render(<Button disabled>Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button with title unchanged', () => {
+  const { container } = render(<Button title="Button title">Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button square unchanged', () => {
+  const { container } = render(<Button shape="square">Click me</Button>)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Button circle unchanged', () => {
+  const { container } = render(
+    <Button
+      shape="circle"
+      icon={<Loading />}
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Button/Button.tsx

@@ -0,0 +1,104 @@
+import type { FC } from 'react'
+import React from 'react'
+import cx from 'classnames'
+import Loading from '../../icons/Loading'
+
+import './Button.css'
+
+export interface Props {
+  children?: React.ReactNode
+  primary?: boolean
+  outlined?: boolean
+  ghost?: boolean
+  padded?: boolean
+  block?: boolean
+  icon?: React.ReactNode
+  shape?: 'square' | 'rounded' | 'circle'
+  danger?: boolean
+  loading?: boolean
+  disabled?: boolean
+  className?: string
+  title?: string
+  id?: string
+  isActive?: boolean
+  htmlType?: 'button' | 'submit' | 'reset'
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onMouseUp?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onMouseLeave?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void
+  onTouchStart?: (
+    event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent,
+  ) => void
+  onTouchEnd?: (
+    event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent,
+  ) => void
+}
+
+const Button: FC<Props> = ({
+  primary = false,
+  outlined = false,
+  ghost = false,
+  padded = true,
+  shape = 'rounded',
+  danger = false,
+  loading = false,
+  disabled = false,
+  block = false,
+  icon,
+  className,
+  title,
+  id,
+  htmlType,
+  onClick,
+  onMouseDown,
+  onMouseUp,
+  onMouseLeave,
+  onTouchStart,
+  onTouchEnd,
+  children,
+  isActive,
+}) => (
+  <button
+    id={id}
+    type={htmlType}
+    onClick={onClick}
+    onMouseDown={onMouseDown}
+    onMouseUp={onMouseUp}
+    onMouseLeave={onMouseLeave}
+    onTouchStart={onTouchStart}
+    onTouchEnd={onTouchEnd}
+    title={title}
+    disabled={loading || disabled}
+    className={cx(
+      'memori-button',
+      {
+        'memori-button--primary': primary,
+        'memori-button--outlined': outlined,
+        'memori-button--ghost': ghost,
+        'memori-button--square': shape === 'square',
+        'memori-button--rounded': shape === 'rounded',
+        'memori-button--circle': shape === 'circle',
+        'memori-button--padded': padded,
+        'memori-button--block': block,
+        'memori-button--with-icon': (icon || loading) && children,
+        'memori-button--icon-only': (icon || loading) && !children,
+        'memori-button--danger': danger,
+        'memori-button--loading': loading,
+        'memori-button--active': isActive,
+      },
+      className,
+    )}
+  >
+    {icon && !loading && <span className="memori-button--icon">{icon}</span>}
+    {loading && (
+      <span className="memori-button--icon loading-icon">
+        <Loading loading />
+      </span>
+    )}
+    {children}
+  </button>
+)
+
+export default Button

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

@@ -0,0 +1,204 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Button block unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--block"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button circle unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--circle memori-button--padded memori-button--icon-only"
+  >
+    <span
+      class="memori-button--icon"
+    >
+      <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>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders Button danger unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--danger"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button disabled unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+    disabled=""
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button loading unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon memori-button--loading"
+    disabled=""
+  >
+    <span
+      class="memori-button--icon loading-icon"
+    >
+      <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>
+    </span>
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button outlined unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button padded unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button primary unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button square unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--square memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button with icon only unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only"
+  >
+    <span
+      class="memori-button--icon"
+    >
+      <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>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders Button with icon unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon"
+  >
+    <span
+      class="memori-button--icon"
+    >
+      <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>
+    </span>
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button with title unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+    title="Button title"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders empty Button unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+  />
+</div>
+`;

package/src/components/Button/index.tsx

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