add more components

Author: mykalmax

web/common/src/components/ModelName/ModelName.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ModelName } from './ModelName'
+
+const meta: Meta<typeof ModelName> = {
+  title: 'Components/ModelName',
+  component: ModelName,
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text' },
+    hideCatalog: { control: 'boolean' },
+    hideSchema: { control: 'boolean' },
+    hideIcon: { control: 'boolean' },
+    showTooltip: { control: 'boolean' },
+    className: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ModelName>
+
+export const Default: Story = {
+  args: {
+    name: 'catalog.schema.model',
+  },
+}
+
+export const WithoutCatalog: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    hideCatalog: true,
+  },
+}
+
+export const WithoutSchema: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    hideSchema: true,
+  },
+}
+
+export const WithoutIcon: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    hideIcon: true,
+  },
+}
+
+export const WithTooltip: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    hideCatalog: true,
+    hideSchema: true,
+    showTooltip: true,
+  },
+}
+
+export const WithoutTooltip: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    showTooltip: false,
+  },
+}
+
+export const CustomClassName: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    className: 'text-xl font-bold',
+  },
+}
+
+export const LongName: Story = {
+  args: {
+    name: 'veryveryverylongcatalogname.veryveryverylongschamename.veryveryverylongmodelnameveryveryverylongmodelname',
+  },
+}
+
+export const Grayscale: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    grayscale: true,
+  },
+}
+
+export const Link: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    link: 'https://www.google.com',
+    grayscale: true,
+    showCopy: true,
+  },
+}

web/common/src/components/ModelName/ModelName.test.tsx

@@ -0,0 +1,72 @@
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import { ModelName } from './ModelName'
+
+describe('ModelName', () => {
+  it('renders full model name with catalog, schema, and model', () => {
+    render(<ModelName name="cat.sch.model" />)
+    expect(screen.getByText('cat')).toBeInTheDocument()
+    expect(screen.getByText('sch')).toBeInTheDocument()
+    expect(screen.getByText('model')).toBeInTheDocument()
+  })
+
+  it('hides catalog when hideCatalog is true', () => {
+    render(
+      <ModelName
+        name="cat.sch.model"
+        hideCatalog
+      />,
+    )
+    expect(screen.queryByText('cat')).not.toBeInTheDocument()
+    expect(screen.getByText('sch')).toBeInTheDocument()
+    expect(screen.getByText('model')).toBeInTheDocument()
+  })
+
+  it('hides schema when hideSchema is true', () => {
+    render(
+      <ModelName
+        name="cat.sch.model"
+        hideSchema
+      />,
+    )
+    expect(screen.getByText('cat')).toBeInTheDocument()
+    expect(screen.queryByText('sch')).not.toBeInTheDocument()
+    expect(screen.getByText('model')).toBeInTheDocument()
+  })
+
+  it('hides icon when hideIcon is true', () => {
+    const { container } = render(
+      <ModelName
+        name="cat.sch.model"
+        hideIcon
+      />,
+    )
+    // Should not render the Box icon SVG
+    expect(container.querySelector('svg')).toBeNull()
+  })
+
+  it('shows tooltip when showTooltip is true and catalog or schema is hidden', async () => {
+    render(
+      <ModelName
+        name="cat.sch.model"
+        hideCatalog
+        showTooltip
+      />,
+    )
+    // Tooltip trigger is present (icon)
+    const modelName = screen.getByTestId('model-name')
+    expect(modelName).toBeInTheDocument()
+    await userEvent.hover(modelName)
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toBeInTheDocument()
+    within(tooltip).getByText('cat.sch.model')
+  })
+
+  it('throws error if name is empty', () => {
+    // Suppress error output for this test
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<ModelName name="" />)).toThrow()
+    spy.mockRestore()
+  })
+})

web/common/src/components/ModelName/ModelName.tsx

@@ -0,0 +1,206 @@
+import { Box, Check, Copy } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { ClipboardCopy } from '@/components/ClipboardCopy/ClipboardCopy'
+import { cn } from '@/utils'
+import { EnumSize } from '@/types/enums'
+import { isNilOrEmptyString, truncate } from '@/utils'
+import Tooltip from '@/components/Tooltip/Tooltip'
+
+const MODEL_NAME_TOOLTIP_SIDE_OFFSET = 6
+const MODEL_NAME_ICON_SIZE = 16
+
+export function ModelName({
+  name,
+  hideCatalog = false,
+  hideSchema = false,
+  hideIcon = false,
+  showTooltip = false,
+  showCopy = false,
+  truncateMaxChars = 25,
+  truncateLimitBefore = 5,
+  truncateLimitAfter = 7,
+  grayscale = false,
+  link,
+  className,
+}: {
+  name: string
+  hideCatalog?: boolean
+  hideSchema?: boolean
+  hideIcon?: boolean
+  showTooltip?: boolean
+  showCopy?: boolean
+  truncateMaxChars?: number
+  truncateLimitBefore?: number
+  truncateLimitAfter?: number
+  grayscale?: boolean
+  link?: string
+  className?: string
+}) {
+  if (isNilOrEmptyString(name))
+    throw new Error('Model name should not be empty')
+
+  const truncateMaxCharsModel = truncateMaxChars * 2
+
+  const { catalog, schema, model, withTooltip } = useMemo(() => {
+    const [model, schema, catalog] = name.split('.').reverse()
+
+    return {
+      catalog: hideCatalog ? undefined : catalog,
+      schema: hideSchema ? undefined : schema,
+      model,
+      withTooltip:
+        ((hideCatalog && catalog) ||
+          (hideSchema && schema) ||
+          [catalog, schema].some(v => v && v.length > truncateMaxChars) ||
+          model.length > truncateMaxCharsModel) &&
+        showTooltip,
+    }
+  }, [
+    name,
+    hideCatalog,
+    hideSchema,
+    truncateMaxCharsModel,
+    showTooltip,
+    truncateMaxChars,
+  ])
+
+  function renderTooltip() {
+    return (
+      <Tooltip
+        trigger={renderName()}
+        sideOffset={MODEL_NAME_TOOLTIP_SIDE_OFFSET}
+        side="top"
+        className="text-xs px-2 py-1 rounded-sm font-semibold"
+      >
+        {name}
+      </Tooltip>
+    )
+  }
+
+  function renderIcon() {
+    return (
+      <Box
+        size={MODEL_NAME_ICON_SIZE}
+        className={cn(
+          'mr-1 flex-shrink-0',
+          grayscale
+            ? 'text-model-name-grayscale-model'
+            : 'text-model-name-model',
+          link && '-mt-[4px]',
+        )}
+      />
+    )
+  }
+
+  console.assert(model, 'Model name should not be empty')
+
+  function renderName() {
+    return (
+      <span
+        data-testid="model-name"
+        className="overflow-hidden"
+      >
+        {catalog && (
+          <>
+            <span
+              className={cn(
+                grayscale
+                  ? 'text-model-name-grayscale-catalog'
+                  : 'text-model-name-catalog',
+              )}
+            >
+              {_truncate(catalog)}
+            </span>
+            .
+          </>
+        )}
+        {schema && (
+          <>
+            <span
+              className={cn(
+                grayscale
+                  ? 'text-model-name-grayscale-schema'
+                  : 'text-model-name-schema',
+              )}
+            >
+              {_truncate(schema)}
+            </span>
+            .
+          </>
+        )}
+        <span
+          className={cn(
+            grayscale
+              ? 'text-model-name-grayscale-model'
+              : 'text-model-name-model',
+          )}
+        >
+          {truncate(model, truncateMaxCharsModel, 15)}
+        </span>
+      </span>
+    )
+  }
+
+  function renderNameWithTooltip() {
+    return withTooltip ? renderTooltip() : renderName()
+  }
+
+  function _truncate(name: string, maxChars: number = truncateMaxChars) {
+    return truncate(
+      name,
+      maxChars,
+      truncateLimitBefore,
+      '...',
+      truncateLimitAfter,
+    )
+  }
+
+  return (
+    <span
+      data-component="ModelName"
+      className={cn(
+        'inline-flex items-center whitespace-nowrap overflow-hidden font-semibold',
+        className,
+      )}
+    >
+      {!hideIcon && renderIcon()}
+      {link ? (
+        <a
+          href={link}
+          className={cn(
+            'flex cursor-pointer border-b -mt-0.5 text-inherit',
+            grayscale
+              ? 'border-model-name-grayscale-link hover:border-model-name-grayscale-link-hover'
+              : 'border-model-name-link hover:border-model-name-link-hover',
+          )}
+        >
+          {renderNameWithTooltip()}
+        </a>
+      ) : (
+        renderNameWithTooltip()
+      )}
+      {showCopy && (
+        <ClipboardCopy
+          size={EnumSize.XXS}
+          text={name}
+          className="ml-2 w-6 hover:text-model-name-copy-icon-hover active:text-model-name-copy-icon-hover"
+        >
+          {copied =>
+            copied ? (
+              <Check
+                size={MODEL_NAME_ICON_SIZE}
+                className="text-model-name-copy-icon"
+              />
+            ) : (
+              <Copy
+                size={MODEL_NAME_ICON_SIZE}
+                className="text-model-name-copy-icon"
+              />
+            )
+          }
+        </ClipboardCopy>
+      )}
+    </span>
+  )
+}