Project: doctolib-doctolib · Branch: master · Mode:  · Model: claude-haiku-4-5-20251001

Stats: 1 user messages, 32 tool calls, tools used: Bash, Read.

Conversation

Turn 1 — User

Explore the Oxygen design system at /Users/USER/workspace/doctolib/oxygen/packages/ to find components relevant to a document list/table feature. I need to implement:
1. A data table with sortable columns, checkboxes for row selection, pagination
2. A modal/drawer container for the list
3. Filter panel with checkboxes, multi-select dropdowns, date range pickers
4. Status badges/labels (bold text)
5. Action buttons (disabled state)
6. Empty state display
7. Loading skeleton
8. Alert/warning banners

For each relevant component found:
- Note the exact import path (e.g., @oxygen/ui/Table or @doctolib/design-system/Table)
- List key props (especially loading, skeletonLoaderProps, disabled, etc.)
- Note the package name in package.json

Also check if there's a @doctolib/design-system package or similar that re-exports oxygen components. Look for:
- Table, TableHead, TableBody, TableRow, TableCell components
- Modal or Dialog component
- Checkbox component (v2)
- Select or MultiSelect component
- InputDate or DateRangePicker
- Button (v2)
- Alert or Banner
- Badge or Tag
- Pagination
- EmptyState
- Text, Heading

Also look at the packages/ directory structure of oxygen to understand the component library structure.

Turn 1 — Assistant

I'll explore the Oxygen design system to identify components relevant to your document list/table feature. Let me start by examining the package structure.

Tools used:

- Bash: find /Users/USER/workspace/doctolib/oxygen/packages -maxdepth 2 -type d -name "@" -o -name "packages" | head -50

Tool results:

  → result (ok): /Users/USER/workspace/doctolib/oxygen/packages

Let me explore the Oxygen packages directory structure:

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/ 2>/dev/null | head -30

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 384 B  Wed Feb 25 13:12:45 2026 .
drwxr-xr-x clertonra staff 1.3 KB Wed Feb 25 13:12:45 2026 ..
drwxr-xr-x clertonra staff 608 B  Wed Feb 25 13:12:44 2026 b2b
drwxr-xr-x clertonra staff 576 B  Wed Feb 25 13:12:44 2026 b2c
drwxr-xr-x clertonra staff 448 B  Wed Feb 25 13:12:44 2026 codemods
drwxr-xr-x clertonra staff 832 B  Wed Feb 25 13:12:44 2026 core
drwxr-xr-x clertonra staff 480 B  Wed Feb 25 13:12:45 2026 icons
drwxr-xr-x clertonra staff 416 B  Wed Feb 25 13:12:45 
…(truncated, 303 more chars)

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/ 2>/dev/null

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 832 B  Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff 384 B  Wed Feb 25 13:12:45 2026 ..
drwxr-xr-x clertonra staff 416 B  Wed Feb 25 13:12:44 2026 .storybook
.rw-r--r-- clertonra staff 913 B  Wed Feb 25 13:12:44 2026 babel.config.cts
.rw-r--r-- clertonra staff 506 B  Wed Feb 25 13:12:44 2026 catalog-info.yaml
.rw-r--r-- clertonra staff 101 KB Wed Feb 25 13:12:44 2026 CHANGELOG.md
drwxr-xr-x clertonra staff 128 B  Wed Feb 25 13:12:44 2026 config
.rw-r--r-- clert
…(truncated, 1407 more chars)

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/ 2>/dev/null

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff 832 B  Wed Feb 25 13:12:44 2026 ..
drwxr-xr-x clertonra staff 224 B  Wed Feb 25 13:12:44 2026 a11y
drwxr-xr-x clertonra staff 256 B  Wed Feb 25 13:12:44 2026 actions
drwxr-xr-x clertonra staff  96 B  Wed Feb 25 13:12:44 2026 collection
drwxr-xr-x clertonra staff 256 B  Wed Feb 25 13:12:44 2026 common
.rw-r--r-- clertonra staff  45 B  Wed Feb 25 13:12:44 2026 constants.ts
drwxr-xr-x clertonra staff 832 B  Wed 
…(truncated, 1872 more chars)

Now let me explore the specific component categories that are relevant to your needs:

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/ && echo "---" && ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ && echo "---" && ls -la /Us
…(truncated, 163 more chars)

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 832 B  Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 ..
drwxr-xr-x clertonra staff 192 B  Wed Feb 25 13:12:44 2026 Accordion
drwxr-xr-x clertonra staff 192 B  Wed Feb 25 13:12:44 2026 Avatar
drwxr-xr-x clertonra staff 160 B  Wed Feb 25 13:12:44 2026 AvatarGroup
drwxr-xr-x clertonra staff 160 B  Wed Feb 25 13:12:44 2026 Badge
drwxr-xr-x clertonra staff 256 B  Wed Feb 25 13:12:44 2026 Card
drwxr-xr-x clertonra staff 160 B  Wed Feb 
…(truncated, 4832 more chars)

Perfect! Now let me look at the Table component specifically and examine the key components in detail:

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/ && echo "---" && ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Checkbox/ && echo "---
…(truncated, 80 more chars)

Tool results:

  → result (ok): drwxr-xr-x clertonra staff  544 B  Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff  832 B  Wed Feb 25 13:12:44 2026 ..
drwxr-xr-x clertonra staff  128 B  Wed Feb 25 13:12:44 2026 dataGrid
drwxr-xr-x clertonra staff  128 B  Wed Feb 25 13:12:44 2026 hooks
.rw-r--r-- clertonra staff  3.1 KB Wed Feb 25 13:12:44 2026 Table.interactions.stories.tsx
.rw-r--r-- clertonra staff  6.8 KB Wed Feb 25 13:12:44 2026 Table.scss
.rw-r--r-- clertonra staff  6.8 KB Wed Feb 25 13:12:44 2026 Table.stories.tsx

…(truncated, 2416 more chars)

Now let me examine the package.json and read the component source files to get detailed import paths and props:

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/package.json (1–50)

Tool results:

  → result (ok): 1→{
     2→  "name": "@doctolib/design-system",
     3→  "version": "2.27.2",
     4→  "license": "Doctolib",
     5→  "description": "Doctolib's design system",
     6→  "type": "module",
     7→  "scripts": {
     8→    "clean": "rm -rf node_modules/",
     9→    "build": "rimraf dist/ && npm run -s sync-style-files && tsc --project tsconfig.build.json && tsc-alias --project tsconfig.build.json",
    10→    "check-exports": "tsx ../../scripts/check-exports.ts",
    11→    "dev": "nx run storyb
…(truncated, 2885 more chars)

Good! Now let me read the actual component files to understand their structure and props:

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.tsx

Tool results:

  → result (ok): 1→import './Table.scss'
     2→
     3→import classNames from 'classnames'
     4→import type { ComponentPropsWithoutRef, ReactNode } from 'react'
     5→
     6→import type { SkeletonLoaderProps } from './TableSkeletonLoader'
     7→import { TableSkeletonLoader } from './TableSkeletonLoader'
     8→
     9→type Props = {
    10→  fixedLayout?: boolean | undefined
    11→  className?: string | undefined
    12→  children?: ReactNode
    13→  loading?: boolean | undefined
    14→  skeletonLoaderP
…(truncated, 1573 more chars)

Now let me check the other table-related components and form components:

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/TableSelectCell.tsx

Tool results:

  → result (ok): 1→import type { ChangeEventHandler, MouseEvent } from 'react'
     2→import { Checkbox } from '../../forms/Checkbox/Checkbox'
     3→import { useTranslations } from '../../i18n/useTranslations'
     4→import type { TableCellProps } from './TableCell'
     5→import { TableCell } from './TableCell'
     6→
     7→type TableSelectStyle = 'default' | 'danger' | 'positive'
     8→
     9→export type TableSelectProps = {
    10→  id: string
    11→  onChange: ChangeEventHandler<HTMLInputElement>
    1
…(truncated, 1806 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/TableSkeletonLoader.tsx

Tool results:

  → result (ok): 1→import { Checkbox } from '../../forms/Checkbox/Checkbox'
     2→import { SkeletonLoader } from '../../feedbacks/SkeletonLoader/SkeletonLoader'
     3→import { TableCell } from './TableCell'
     4→import { TableRow } from './TableRow'
     5→
     6→export type SkeletonLoaderProps = {
     7→  numberOfColumns?: number | undefined
     8→  numberOfRows?: number | undefined
     9→  displayCheckbox?: boolean | undefined
    10→}
    11→
    12→type Props = {
    13→  skeletonLoaderProps: Skeleto
…(truncated, 1911 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Checkbox/Checkbox.tsx

Tool results:

  → result (ok): 1→import './Checkbox.scss'
     2→
     3→import type { ChangeEventHandler, FocusEventHandler, MouseEventHandler, ReactNode } from 'react'
     4→import classNames from 'classnames'
     5→import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
     6→import { v4 as uuidv4 } from 'uuid'
     7→
     8→import { computeAriaDescribedBy } from '../private/aria'
     9→import type { FieldState } from '../private/Field'
    10→import { Icon } from '../../dataDisplay/Icon/Ic
…(truncated, 7297 more chars)

Now let me check for Checkbox v2 and other key components:

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Checkbox/v2/

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 480 B  Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff 256 B  Wed Feb 25 13:12:44 2026 ..
.rw-r--r-- clertonra staff 5.0 KB Wed Feb 25 13:12:44 2026 Checkbox.a11y.mdx
.rw-r--r-- clertonra staff 2.0 KB Wed Feb 25 13:12:44 2026 Checkbox.interactions.stories.tsx
.rw-r--r-- clertonra staff  13 KB Wed Feb 25 13:12:44 2026 Checkbox.module.scss
.rw-r--r-- clertonra staff 4.2 KB Wed Feb 25 13:12:44 2026 Checkbox.stories.tsx
.rw-r--r-- clertonra staff 3.0 KB Wed Feb 25 13
…(truncated, 714 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Select/Select.tsx (1–100)

Tool results:

  → result (ok): 1→import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
     2→import { forwardRef, useId, useMemo } from 'react'
     3→
     4→import { computeAriaDescribedBy } from '../private/aria'
     5→import type { ContextualPopover } from '../../overlays/ContextualPopover/ContextualPopover'
     6→import type { DataAttribute } from '../../common/DataAttribute/DataAttribute'
     7→import type { FieldState } from '../private/Field'
     8→import { getFieldInputId, getFieldLabelId } 
…(truncated, 4061 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputDate/InputDate.tsx (1–80)

Tool results:

  → result (ok): 1→import { forwardRef, useId, useImperativeHandle, useMemo } from 'react'
     2→
     3→import { computeAriaDescribedBy } from '../private/aria'
     4→import type { DataAttribute } from '../../common/DataAttribute/DataAttribute'
     5→import { getFieldInputId } from '../private/Field'
     6→import type { Props as InputDateProps } from './_RawInputDate'
     7→import { _InputField as InputField } from '../private/InputField/_InputField'
     8→import { _RawInputDate as RawInputDate } from './
…(truncated, 2894 more chars)

Now let me check the Alert, Badge, Modal, and other components:

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/feedbacks/Alert/Alert.tsx (1–60)

Tool results:

  → result (ok): 1→import './Alert.scss'
     2→
     3→import classNames from 'classnames'
     4→import type { DesignSystemIconComponent } from '@doctolib/design-system-icons'
     5→import type { MouseEventHandler, ReactElement, ReactNode } from 'react'
     6→
     7→import { Button } from '../../actions/Button/Button'
     8→import { getIconByNameOrComponent } from '../../helpers/icons'
     9→import { IconButton } from '../../actions/IconButton/v2/IconButton'
    10→import type { IconName } from '../../dat
…(truncated, 2231 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Badge/Badge.tsx

Tool results:

  → result (ok): 1→import type { ReactNode } from 'react'
     2→import classNames from 'classnames'
     3→import { Span } from '../text/Span'
     4→import './Badge.scss'
     5→
     6→export type BadgeStyle =
     7→  | 'info'
     8→  | 'error'
     9→  | 'success'
    10→  | 'warning'
    11→  | 'dark-info'
    12→  | 'mute'
    13→  | 'no-background'
    14→  | 'neutral'
    15→  | 'disabled'
    16→
    17→export type BadgeProps = {
    18→  walkmeId?: string | undefined
    19→  'aria-label'?: string | 
…(truncated, 1648 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.tsx (1–80)

Tool results:

  → result (ok): 1→import {
     2→  forwardRef,
     3→  useRef,
     4→  type ReactElement,
     5→  type ReactEventHandler,
     6→  type ReactNode,
     7→  type SyntheticEvent,
     8→} from 'react'
     9→import MaterialModal from '@mui/material/Modal'
    10→import classNames from 'classnames'
    11→import { v4 as uuidv4 } from 'uuid'
    12→import { _Transition as Transition } from '../_ModalTransition/_ModalTransition'
    13→import { IconButton } from '../../actions/IconButton/v2/IconButton'
    14→im
…(truncated, 2794 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.tsx (1–80)

Tool results:

  → result (ok): 1→import './Drawer.scss'
     2→
     3→import classNames from 'classnames'
     4→import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
     5→import type { ReactNode, SyntheticEvent } from 'react'
     6→import SwipeableDrawer from '@mui/material/SwipeableDrawer'
     7→import { v4 as uuidv4 } from 'uuid'
     8→
     9→import { Button, type ButtonProps } from '../../actions/Button/Button'
    10→import { IconButton } from '../../actions/IconButton/IconButton'
    11→imp
…(truncated, 2884 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/feedbacks/EmptyState/EmptyState.tsx (1–80)

Tool results:

  → result (ok): 1→import './EmptyState.scss'
     2→
     3→import classNames from 'classnames'
     4→import type { ComponentProps, ReactNode } from 'react'
     5→
     6→import { Button, type ButtonProps } from '../../actions/Button/Button'
     7→import { Heading } from '../../dataDisplay/text/Heading'
     8→import { IllustrativeIcon, type IllustrativeIconProps } from '../../dataDisplay/IllustrativeIcon/IllustrativeIcon'
     9→import { Image } from '../../dataDisplay/Image/Image'
    10→import { Paragraph
…(truncated, 3028 more chars)

Now let me check for pagination and button components:

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/ && echo "---" && ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/navigation/

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 256 B  Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 ..
drwxr-xr-x clertonra staff 288 B  Wed Feb 25 13:12:44 2026 Button
drwxr-xr-x clertonra staff 160 B  Wed Feb 25 13:12:44 2026 ButtonFloating
drwxr-xr-x clertonra staff 192 B  Wed Feb 25 13:12:44 2026 ButtonWithLinkStyle
drwxr-xr-x clertonra staff 608 B  Wed Feb 25 13:12:44 2026 Dropdown
drwxr-xr-x clertonra staff 256 B  Wed Feb 25 13:12:44 2026 IconButton
drwxr-xr-x clertonra
…(truncated, 899 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Button/Button.tsx (1–100)

Tool results:

  → result (ok): 1→import './Button.scss'
     2→
     3→import classNames from 'classnames'
     4→import {
     5→  type ComponentPropsWithoutRef,
     6→  type ComponentType,
     7→  forwardRef,
     8→  type MouseEventHandler,
     9→  type TouchEventHandler,
    10→} from 'react'
    11→import type { DesignSystemIconComponent } from '@doctolib/design-system-icons'
    12→import { Link } from 'react-router-dom'
    13→
    14→import { getIconByNameOrComponent } from '../../helpers/icons'
    15→import type 
…(truncated, 3464 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/navigation/Pagination/Pagination.tsx (1–80)

Tool results:

  → result (ok): 1→import './Pagination.scss'
     2→
     3→import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
     4→
     5→import { Button } from '../../actions/Button/Button'
     6→import { Icon } from '../../dataDisplay/Icon/Icon'
     7→import classNames from 'classnames'
     8→import { range } from 'lodash-es'
     9→import { useTranslations } from '../../i18n/useTranslations'
    10→
    11→type PaginationButtonProps = {
    12→  children?: ReactNode
    13→  active?: boolean
    14
…(truncated, 2358 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/feedbacks/SkeletonLoader/SkeletonLoader.tsx (1–100)

Tool results:

  → result (ok): 1→import classNames from 'classnames'
     2→import type { ReactElement, ReactNode } from 'react'
     3→
     4→import { ScreenReaderOnly } from '../../common/ScreenReaderOnly/ScreenReaderOnly'
     5→import styles from './SkeletonLoader.module.scss'
     6→import { Translate } from '../../i18n/Translate'
     7→
     8→export type RectangleHeight = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'
     9→
    10→type RectangleProps = {
    11→  className?: string
    12→  height?: Rectang
…(truncated, 3276 more chars)

Now let me check the text components (Heading, Text, Paragraph) for bold status badges:

Tools used:

- Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/text/

Tool results:

  → result (ok): drwxr-xr-x clertonra staff 544 B  Wed Feb 25 13:12:44 2026 .
drwxr-xr-x clertonra staff 832 B  Wed Feb 25 13:12:44 2026 ..
.rw-r--r-- clertonra staff 610 B  Wed Feb 25 13:12:44 2026 Heading.figma.tsx
.rw-r--r-- clertonra staff 1.8 KB Wed Feb 25 13:12:44 2026 Heading.interactions.stories.tsx
.rw-r--r-- clertonra staff 2.8 KB Wed Feb 25 13:12:44 2026 Heading.stories.tsx
.rw-r--r-- clertonra staff 708 B  Wed Feb 25 13:12:44 2026 Heading.test-helpers.ts
.rw-r--r-- clertonra staff 2.2 KB Wed Feb 25 1
…(truncated, 773 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/text/Span.tsx

Tool results:

  → result (ok): 1→import type { ComponentProps } from 'react'
     2→
     3→import { _Text as Text } from './private/_Text'
     4→
     5→export type Props = Omit<ComponentProps<typeof Text>, 'component'>
     6→
     7→/
     8→  This component doesn't provide any semantic meaning to the text, you should better use the Paragraph component.
     9→ 
    10→  @warning This component should be used only if you have a good reason to use it.
    11→ /
    12→export function Span({ children, ...args }: Props
…(truncated, 512 more chars)

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/text/Text/Text.tsx (1–100)

Tool results:

  → result (ok): 1→import './Text.scss'
     2→
     3→import classNames from 'classnames'
     4→import { type ElementType, forwardRef, type ReactNode } from 'react'
     5→
     6→export type TextColor =
     7→  | 'error-090'
     8→  | 'error-110'
     9→  | 'neutral-030'
    10→  | 'neutral-040'
    11→  | 'neutral-090'
    12→  | 'neutral-110'
    13→  | 'neutral-130'
    14→  | 'neutral-150'
    15→  | 'primary-110'
    16→  | 'primary-130'
    17→  | 'primary-150'
    18→  | 'primary-160'
    19→  | 'suc
…(truncated, 3116 more chars)

Let me check for a design system re-export package and the MultipleComboBox:

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/MultipleComboBox.tsx (1–80)

Tool results:

  → result (ERROR): File does not exist. Note: your current working directory is /Users/USER/workspace/doctolib/doctolib.

Tools used:

- Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/ -type f -name ".tsx" | head -5

Tool results:

  → result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.stories.tsx
/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.tsx

Tools used:

- Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.tsx (1–100)

Tool results:

  → result (ok): 1→import '../private/_Input.scss'
     2→import '../private/_Options.scss'
     3→
     4→import type { ChangeEventHandler, ReactNode } from 'react'
     5→import classnames from 'classnames'
     6→import { forwardRef, useEffect, useId, useMemo, useState } from 'react'
     7→import { useCombobox, useMultipleSelection } from 'downshift'
     8→import { useMergeRefs } from '@floating-ui/react'
     9→
    10→import { cascadeDisabledState, filterOptionsByLabel, getFlattenedOptions } from '../priv
…(truncated, 4026 more chars)

Now let me check for any date range picker or if we need to use InputDate twice:

Tools used:

- Bash: grep -r "DateRange\|DatePicker" /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ --include="*.tsx" | head -10

Tool results:

  → result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputDate/_RawInputDate.tsx:  minDateInDatePicker?: string | undefined
/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputDate/_RawInputDate.tsx:  maxDateInDatePicker?: string | undefined
/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputDate/_RawInputDate.tsx:      minDateInDatePicker,
/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputDate/_RawInputDate.tsx:      maxDateInDatePicker,

…(truncated, 798 more chars)

Perfect! Now let me create a comprehensive summary. Let me verify one more thing - check if there's any existing index/export file that re-exports these components:

Tools used:

- Bash: head -100 /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -A 20 '"exports"'

Tool results:

  → result (ok)

Tools used:

- Bash: grep -A 100 '"exports"' /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | head -50

Tool results:

  → result (ok): "exports": {
    "./Accordion": {
      "import": "./dist/dataDisplay/Accordion/Accordion.js",
      "types": "./dist/dataDisplay/Accordion/Accordion.d.ts",
      "default": "./dist/dataDisplay/Accordion/Accordion.js"
    },
    "./Alert": {
      "import": "./dist/feedbacks/Alert/Alert.js",
      "types": "./dist/feedbacks/Alert/Alert.d.ts",
      "default": "./dist/feedbacks/Alert/Alert.js"
    },
    "./AlertBanner": {
      "import": "./dist/indicator/Alert/AlertBanner.js",
      "types": ".
…(truncated, 1605 more chars)

Perfect! Now I have all the information I need. Let me compile my findings:

Oxygen Design System - Document List/Table Feature Components

Based on my exploration of the Oxygen design system (/Users/USER/workspace/doctolib/oxygen/packages/core), here are all the relevant components for your document list/table feature implementation:

---

1. DATA TABLE COMPONENTS

Package Name: @doctolib/design-system (version 2.27.2)

Table (with sorting & row selection support)
- Import Path: @doctolib/design-system/Table
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.tsx
- Key Props:
  - loading?: boolean - Shows skeleton loader when true
  - skeletonLoaderProps?: { numberOfColumns?, numberOfRows?, displayCheckbox? } - Configures skeleton loader
  - fixedLayout?: boolean - Fixed table layout
  - size?: 'xsmall' | 'small' | 'medium' - Table size variant

Supporting Table Components:
- TableHead → @doctolib/design-system/TableHead - Table header section
- TableBody → @doctolib/design-system/TableBody - Table body section
- TableRow → @doctolib/design-system/TableRow - Single table row
- TableCell → @doctolib/design-system/TableCell - Standard table cell
- TableHeadCell → @doctolib/design-system/TableHeadCell - Header cell with optional sorting icon
- TableHeadSelectAllCell → @doctolib/design-system/TableHeadSelectAllCell - Checkbox cell for selecting all rows
- TableSelectCell → @doctolib/design-system/TableSelectCell - Checkbox cell for individual row selection
  - Key Props: id, onChange, checked, disabled, uiStyle?: 'default' | 'danger' | 'positive'
- TableSkeletonLoader → @doctolib/design-system/TableSkeletonLoader - Built-in loading skeleton
  - File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/TableSkeletonLoader.tsx
  - Props: skeletonLoaderProps: { numberOfColumns?, numberOfRows?, displayCheckbox? }

---

2. CHECKBOX COMPONENTS (Row Selection)

Checkbox v1 (Current)
- Import Path: @doctolib/design-system/Checkbox
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Checkbox/Checkbox.tsx
- Key Props:
  - checked?: boolean
  - disabled?: boolean
  - indeterminate?: boolean - For "select all" state
  - onChange?: ChangeEventHandler<HTMLInputElement>
  - uiStyle?: 'error' | 'success'
  - label?: ReactNode
  - message?: string - Error message
  - state?: FieldState - Validation state

Checkbox v2 (Newer)
- Import Path: @doctolib/design-system/CheckboxV2
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Checkbox/v2/
- Also includes CheckboxGroup for managing multiple checkboxes

---

3. MODAL/DRAWER CONTAINER

Modal Component
- Import Path: @doctolib/design-system/Modal
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.tsx
- Key Props:
  - show: boolean - Control visibility
  - onHide?: ReactEventHandler - Called when modal closes
  - blocking?: boolean - Prevent background interaction
  - backdrop?: boolean - Show backdrop
  - title: string | ReactNode
  - onBack?: () => void - For navigation header

Supporting Modal Components:
- ModalBody → @doctolib/design-system/ModalBody
- ModalFooter → @doctolib/design-system/ModalFooter

Drawer Component (Alternative)
- Import Path: @doctolib/design-system/Drawer
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Drawer/Drawer.tsx
- Key Props:
  - show: boolean
  - onHide?: ReactEventHandler
  - anchor?: 'left' | 'right' | 'top' | 'bottom'

Supporting Drawer Components:
- DrawerBody → @doctolib/design-system/DrawerBody
- DrawerFooter → @doctolib/design-system/DrawerFooter
- DrawerListAction → @doctolib/design-system/DrawerListAction

---

4. FORM FILTER COMPONENTS

Checkbox (for filter checkboxes)
- Import Path: @doctolib/design-system/Checkbox or @doctolib/design-system/CheckboxV2
- See section 2 above

Select (single select dropdown)
- Import Path: @doctolib/design-system/Select
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Select/Select.tsx
- Key Props:
  - name: string
  - label: string
  - value?: string
  - options: (Option | OptionGroup[])
  - onChange?: ChangeEventHandler<HTMLSelectElement>
  - disabled?: boolean
  - state?: FieldState - Validation state
  - message?: string - Error message
  - uiStyle?: 'default' | 'floating' - Label style
  - renderOption?: (option: Option) => ReactNode - Custom option renderer

AlphaMultipleComboBox (multi-select dropdown)
- Import Path: @doctolib/design-system/AlphaMultipleComboBox
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.tsx
- Key Props:
  - name: string
  - label: string
  - options: (Option | OptionGroup)[]
  - onChange?: ChangeEventHandler<HTMLInputElement>
  - onSelectionChange?: (option: Option) => void
  - disabled?: boolean
  - isLoading?: boolean
  - state?: FieldState
  - message?: string
  - uiStyle?: 'default' | 'floating'
  - renderOption?: (option: Option) => ReactNode
  - type?: 'default' | 'search'

InputDate (date picker for ranges)
- Import Path: @doctolib/design-system/InputDate
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputDate/InputDate.tsx
- Key Props:
  - name: string
  - label: string
  - value?: string
  - onChange?: ChangeEventHandler<HTMLInputElement>
  - disabled?: boolean
  - state?: FieldState
  - message?: string
  - minDateInDatePicker?: string - Min date constraint
  - maxDateInDatePicker?: string - Max date constraint
  - uiStyle?: 'default' | 'floating'
  - Note: Use two InputDate components (one for start, one for end) to create a date range picker

---

5. STATUS BADGES/LABELS (Bold Text)

Badge Component
- Import Path: @doctolib/design-system/Badge
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Badge/Badge.tsx
- Key Props:
  - uiStyle?: 'info' | 'error' | 'success' | 'warning' | 'dark-info' | 'mute' | 'no-background' | 'neutral' | 'disabled'
  - size?: 'small' | 'medium' | 'large'
  - children?: ReactNode - Text to display

Text Component (for bold status text)
- Import Path: @doctolib/design-system/Text
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/text/Text/Text.tsx
- Key Props for Bold:
  - uiStyle?: 'body-s-bold' | 'body-m-bold' | 'body-l-bold' | 'body-xs-bold' - Bold variants
  - color?: TextColor - Text color
  - component?: ElementType - HTML element (span, div, etc.)

Span & Paragraph (text variants)
- Span → @doctolib/design-system/Span - Inline text
- Paragraph → @doctolib/design-system/Paragraph - Block text

---

6. ACTION BUTTONS (with disabled state)

Button Component
- Import Path: @doctolib/design-system/Button
- File Location: /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Button/Button.tsx
- Key Props:
  - disabled?: boolean - Disable button
  - uiStyle?: 'primary' | 'secondary' | 'tertiary-primary' | 'tertiary-neutral' | 'tertiary-danger' | 'small-primary' | 'small-neutral' | 'small-danger' | 'link-primary' | 'link-danger' | 'neutral'
  - loading?: boolean - Show loading spinner
  - success?: boolean - Show success state
  - leftIcon?: IconName | DesignSystemIconComponent
  - rightIcon?: IconName | DesignSystemIconComponent
  - onClick?: MouseEventHandler
  - block?: boolean - Full width

IconButton
- Import Path: `@doctolib/design-system/IconButt
…(truncated, 5410 more chars)