@memori.ai/ui 1.0.0-alpha

package/src/components/ButtonBase/ButtonBase.stories.tsx

@@ -0,0 +1,194 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ButtonBase } from './ButtonBase'
+import { fn } from 'storybook/test'
+
+const meta = {
+  title: 'UI/ButtonBase',
+  component: ButtonBase,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary', 'outline'],
+      description: 'Button variant style',
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'md', 'lg'],
+      description: 'Button size',
+    },
+    fullWidth: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether the button should take full width',
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether the button is disabled',
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'Button content',
+    },
+    onClick: {
+      description: 'Click handler',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    onClick: fn(),
+  },
+} satisfies Meta<typeof ButtonBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Primary variant is the default button style with solid background.
+ */
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+  },
+}
+
+/**
+ * Secondary variant uses the secondary color palette.
+ */
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+  },
+}
+
+/**
+ * Outline variant has a transparent background with a border.
+ */
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline',
+  },
+}
+
+/**
+ * Small size button.
+ */
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    variant: 'primary',
+    size: 'sm',
+  },
+}
+
+/**
+ * Medium size button (default).
+ */
+export const Medium: Story = {
+  args: {
+    children: 'Medium Button',
+    variant: 'primary',
+    size: 'md',
+  },
+}
+
+/**
+ * Large size button.
+ */
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    variant: 'primary',
+    size: 'lg',
+  },
+}
+
+/**
+ * Full width button that spans the entire container.
+ */
+export const FullWidth: Story = {
+  args: {
+    children: 'Full Width Button',
+    variant: 'primary',
+    fullWidth: true,
+  },
+}
+
+/**
+ * Disabled button state.
+ */
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    variant: 'primary',
+    disabled: true,
+  },
+}
+
+/**
+ * Disabled outline button.
+ */
+export const DisabledOutline: Story = {
+  args: {
+    children: 'Disabled Outline',
+    variant: 'outline',
+    disabled: true,
+  },
+}
+
+/**
+ * All variants displayed together for comparison.
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+      <ButtonBase variant="primary">Primary</ButtonBase>
+      <ButtonBase variant="secondary">Secondary</ButtonBase>
+      <ButtonBase variant="outline">Outline</ButtonBase>
+    </div>
+  ),
+}
+
+/**
+ * All sizes displayed together for comparison.
+ */
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <ButtonBase
+        variant="primary"
+        size="sm"
+      >
+        Small
+      </ButtonBase>
+      <ButtonBase
+        variant="primary"
+        size="md"
+      >
+        Medium
+      </ButtonBase>
+      <ButtonBase
+        variant="primary"
+        size="lg"
+      >
+        Large
+      </ButtonBase>
+    </div>
+  ),
+}

package/src/components/ButtonBase/ButtonBase.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Button as BaseButton } from '@base-ui/react/button'
+import type { ButtonProps as BaseButtonProps } from '@base-ui/react/button'
+import cx from 'classnames'
+import styles from './styles.module.css'
+
+export interface ButtonProps extends Omit<BaseButtonProps, 'className'> {
+  /**
+   * Button variant
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'outline'
+  /**
+   * Button size
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg'
+  /**
+   * Whether the button should take full width
+   */
+  fullWidth?: boolean
+  /**
+   * Additional CSS class name
+   */
+  className?: string
+  /**
+   * Button content
+   */
+  children?: React.ReactNode
+}
+
+export const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      fullWidth = false,
+      className,
+      children,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const variantClass =
+      variant === 'primary'
+        ? styles['button--primary']
+        : variant === 'secondary'
+          ? styles['button--secondary']
+          : styles['button--outline']
+
+    const sizeClass =
+      size === 'sm'
+        ? styles['button--sm']
+        : size === 'lg'
+          ? styles['button--lg']
+          : styles['button--md']
+
+    const fullWidthClass = fullWidth ? styles['button--full-width'] : undefined
+    const disabledClass = disabled ? styles['button--disabled'] : undefined
+
+    return (
+      <BaseButton
+        ref={ref}
+        disabled={disabled}
+        className={cx(
+          styles.button,
+          variantClass,
+          sizeClass,
+          fullWidthClass,
+          disabledClass,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </BaseButton>
+    )
+  },
+)
+
+ButtonBase.displayName = 'ButtonBase'
+
+export default ButtonBase

package/src/components/ButtonBase/index.tsx

@@ -0,0 +1,3 @@
+export { ButtonBase } from './ButtonBase'
+export type { ButtonProps } from './ButtonBase'
+export { ButtonBase as default } from './ButtonBase'

package/src/components/ButtonBase/styles.module.css

@@ -0,0 +1,135 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: var(--border-radius-md);
+    cursor: pointer;
+    font-family: var(--typography-font-family-base);
+    font-weight: var(--typography-font-weight-medium);
+    line-height: var(--typography-line-height-normal);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.button:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
+}
+
+/* ============================================
+   VARIANTS
+   ============================================ */
+
+/* Primary Variant */
+.button--primary {
+    border-color: var(--color-primary-500);
+    background-color: var(--color-primary-500);
+    color: var(--color-neutral-white);
+}
+
+.button--primary:hover:not(:disabled) {
+    border-color: var(--color-primary-600);
+    background-color: var(--color-primary-600);
+}
+
+.button--primary:active:not(:disabled) {
+    border-color: var(--color-primary-700);
+    background-color: var(--color-primary-700);
+}
+
+/* Secondary Variant */
+.button--secondary {
+    border-color: var(--color-secondary-500);
+    background-color: var(--color-secondary-500);
+    color: var(--color-neutral-white);
+}
+
+.button--secondary:hover:not(:disabled) {
+    border-color: var(--color-secondary-600);
+    background-color: var(--color-secondary-600);
+}
+
+.button--secondary:active:not(:disabled) {
+    border-color: var(--color-secondary-700);
+    background-color: var(--color-secondary-700);
+}
+
+/* Outline Variant */
+.button--outline {
+    border-color: var(--color-primary-500);
+    background-color: transparent;
+    color: var(--color-primary-500);
+}
+
+/* Outline variant disabled state */
+.button--outline.button--disabled,
+.button--outline:disabled {
+    border-color: var(--color-neutral-400);
+    background-color: transparent;
+    color: var(--color-neutral-500);
+}
+
+.button--outline:hover:not(:disabled) {
+    background-color: var(--color-primary-500);
+    color: var(--color-neutral-white);
+}
+
+.button--outline:active:not(:disabled) {
+    border-color: var(--color-primary-600);
+    background-color: var(--color-primary-600);
+    color: var(--color-neutral-white);
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.button--sm {
+    min-height: 32px;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--typography-font-size-sm);
+}
+
+.button--md {
+    min-height: 40px;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--typography-font-size-base);
+}
+
+.button--lg {
+    min-height: 48px;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--typography-font-size-lg);
+}
+
+/* ============================================
+   STATES
+   ============================================ */
+
+.button--full-width {
+    width: 100%;
+}
+
+.button--disabled,
+.button:disabled {
+    border-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.button--disabled:hover,
+.button:disabled:hover {
+    border-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+}
+
+.button--outline.button--disabled:hover,
+.button--outline:disabled:hover {
+    border-color: var(--color-neutral-400);
+    background-color: transparent;
+    color: var(--color-neutral-500);
+}

package/src/components/Card/Card.css

@@ -0,0 +1,67 @@
+.memori-card {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    border-radius: 10px;
+    margin: 0 0 1rem;
+    background-color: #fff;
+    box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 10%);
+}
+
+.memori-card--hoverable {
+    transition: box-shadow 0.3s;
+}
+
+.memori-card--hoverable:hover {
+    box-shadow:
+        0 0.2rem 0 rgb(0 0 0 / 10%),
+        0 0.5rem 1rem 0 rgb(0 0 0 / 20%);
+}
+
+.memori-card--hoverable:focus,
+.memori-card--hoverable:focus-within {
+    outline-color: var(--memori-primary);
+}
+
+.memori-card--cover {
+    display: flex;
+    overflow: hidden;
+    height: 200px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px 10px 0 0;
+    background-color: #eee;
+}
+
+.memori-card--cover img {
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.memori-card--content {
+    z-index: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 1.5rem 1rem;
+}
+
+.memori-card--title {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.memori-card--description {
+    margin: 0;
+    color: #999;
+    font-size: 0.875rem;
+    font-weight: 400;
+}
+
+.memori-card--pointer {
+    cursor: pointer;
+}

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Card from './Card'
+import Button from '../Button/Button'
+
+const meta = {
+  title: 'UI/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof Card>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Card title',
+    loading: false,
+  },
+}
+
+export const WithTitleAndDescription: Story = {
+  args: {
+    title: 'Card title',
+    description: 'Card description',
+    loading: false,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    title: 'Card title',
+    description: 'Card description',
+    loading: true,
+  },
+}
+
+export const WithCover: Story = {
+  args: {
+    title: 'Card title',
+    description: 'Card description',
+    cover: (
+      <img
+        src="https://picsum.photos/200/300"
+        alt="cover"
+      />
+    ),
+    loading: false,
+  },
+}
+
+export const WithChildren: Story = {
+  args: {
+    title: 'Card title',
+    description: 'Card description',
+    children: (
+      <div>
+        <p>Some text</p>
+        <Button primary>Show more</Button>
+      </div>
+    ),
+    loading: false,
+  },
+}
+
+export const Hoverable: Story = {
+  args: {
+    title: 'Card title',
+    description: 'Card description',
+    loading: false,
+    hoverable: true,
+  },
+}

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

@@ -0,0 +1,67 @@
+import React from 'react'
+import { it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import Card from './Card'
+
+it('renders Card unchanged', () => {
+  const { container } = render(<Card />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card with title unchanged', () => {
+  const { container } = render(<Card title="Card title" />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card with description unchanged', () => {
+  const { container } = render(<Card description="Card description" />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card with cover unchanged', () => {
+  const { container } = render(
+    <Card
+      cover={
+        <img
+          src="#"
+          alt=""
+        />
+      }
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card with children unchanged', () => {
+  const { container } = render(
+    <Card>
+      <p>Ciao</p>
+    </Card>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card loading unchanged', () => {
+  const { container } = render(
+    <Card
+      title="Card title"
+      loading
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card with custom CSS class unchanged', () => {
+  const { container } = render(<Card className="lorem-ipsum" />)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Card hoverable unchanged', () => {
+  const { container } = render(
+    <Card
+      title="lorem-ipsum"
+      hoverable
+    />,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Card/Card.tsx

@@ -0,0 +1,58 @@
+import type { FC, JSX } from 'react'
+import React from 'react'
+import cx from 'classnames'
+import Spin from '../Spin/Spin'
+
+import './Card.css'
+
+export interface Props {
+  children?: React.ReactNode
+  loading?: boolean
+  className?: string
+  title?: string
+  description?: string
+  cover?: JSX.Element | React.ReactNode | string
+  hoverable?: boolean
+  onClick?: () => void
+}
+
+const Card: FC<Props> = ({
+  loading = false,
+  className,
+  title,
+  description,
+  cover,
+  hoverable = false,
+  children,
+  onClick,
+}) => (
+  <div
+    onClick={onClick}
+    onKeyDown={e => {
+      if ((e.key === 'Enter' || e.key === 'Space') && onClick) {
+        onClick()
+      }
+    }}
+    role={onClick ? 'button' : undefined}
+    tabIndex={onClick ? 0 : undefined}
+    className={cx('memori-card', className, {
+      'memori-card--loading': loading,
+      'memori-card--with-cover': cover,
+      'memori-card--hoverable': hoverable,
+      'memori-card--pointer': !!onClick,
+    })}
+  >
+    <Spin spinning={loading}>
+      {cover && <div className="memori-card--cover">{cover}</div>}
+      <div className="memori-card--content">
+        {title && <h3 className="memori-card--title">{title}</h3>}
+        {description && (
+          <p className="memori-card--description">{description}</p>
+        )}
+        <div className="memori-card--children">{children}</div>
+      </div>
+    </Spin>
+  </div>
+)
+
+export default Card