LeafyGreen UI Kit

The MessageActions component manages a multi-step interaction for user feedback:

1. Rating Only: If the user clicks a thumbs up or thumbs down (and onRatingChange is provided), onRatingChange is called with the selected rating. No feedback form appears.
2. Rating + Feedback: If onSubmitFeedback is also provided, clicking a rating button triggers the appearance of a feedback form containing a textarea.
   • The user can optionally enter text.
   • Upon clicking submit, onSubmitFeedback is called with the rating and the optional feedback string.
   • The component displays a success message (defined by submittedMessage) or an error message (defined by errorMessage) based on the outcome.

Internal State Management:

• Message rating: 'unselected' | 'disliked' | 'liked'
• Form state: 'unset' | 'submitting' | 'submitted' | 'error'
• The form state is reset when the feedback form is closed or a new rating is selected.

The ProgressBar component supports two primary modes of operation:

1. Indeterminate: Shows an infinite looping animation. Use this when the duration or total work is unknown (e.g., a generic loading state). Set the isIndeterminate prop to true.
2. Determinate: Shows measurable progress toward a known maximum using value and maxValue. Determinate bars can be used in two ways via the role prop:
   • progressbar (Default): A dynamic bar that fills as a task progresses toward completion (e.g., a file upload).
   • meter: A snapshot of a current value, often used for status or health indications (e.g., disk space used).

Note: isIndeterminate is only available for info and success variants.

// Indeterminate example
<ProgressBar isIndeterminate label="Loading..." />

// Determinate progressbar example
<ProgressBar value={50} maxValue={100} role="progressbar" />

// Determinate meter example
<ProgressBar value={90} maxValue={100} role="meter" />

The useLeafygreenTable hook is the recommended way to implement advanced table features. It wraps TanStack's react-table and react-virtual to provide styled support for features like virtualized scrolling, nested rows, and expandable rows.

When using this hook, you pass the returned table instance to the Table component and use the hook's methods (like getHeaderGroups() and getRowModel()) to render the UI components.

import {
  Table,
  TableHead,
  HeaderRow,
  TableBody,
  Row,
  Cell,
} from '@leafygreen-ui/table';

const tableContainerRef = React.useRef<HTMLDivElement>(null);
const data = React.useState(() => makeData(false, 10_000))[0];

const columns = React.useMemo<Array<ColumnDef<Person>>>(()
  () => [
    { accessorKey: 'id', header: 'ID', size: 60 },
    { accessorKey: 'firstName', header: 'First Name', cell: info => info.getValue() },
  ],
  [],
);

const table = useLeafygreenTable<Person>({
  containerRef: tableContainerRef,
  data,
  columns,
});

const { rows } = table.getRowModel();

<Table
  {...args}
  table={table}
  ref={tableContainerRef}
>
  <TableHead>
    {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
      <HeaderRow key={headerGroup.id}>
        {headerGroup.headers.map(header => (
          <HeaderCell key={header.id} header={header}>
            {flexRender(header.column.columnDef.header, header.getContext())}
          </HeaderCell>
        ))}
      </HeaderRow>
    ))}
  </TableHead>
  <TableBody>
    {rows.map((row: LeafyGreenTableRow<Person>) => (
      <Row key={row.id}>
        {row.getVisibleCells().map((cell: LeafyGreenTableCell<Person>) => (
          <Cell key={cell.id}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </Cell>
        ))}
      </Row>
    ))}
  </TableBody>
</Table>

The useRenderData hook is used by iframe-based UI components to receive data from an MCP client via postMessage.

Lifecycle:

1. On Mount: The hook automatically sends a ui-lifecycle-iframe-ready message to the parent window.
2. Listening: It listens for ui-lifecycle-iframe-render-data messages containing the payload.
3. Dark Mode: It provides a computed darkMode boolean that prioritizes the darkMode field from the received render data, falling back to the browser's prefers-color-scheme if the field is unavailable.

Use this hook when your component needs to react to data provided by the host environment.

import { useRenderData } from '@lg-mcp/hooks';

interface DatabaseData {
  databases: Array<{ name: string; size: number }>;
}

function MyComponent() {
  const { data, darkMode, isLoading, error } = useRenderData<DatabaseData>();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div style={{ background: darkMode ? '#1a1a1a' : '#ffffff' }}>
      {data?.databases.length} databases found
    </div>
  );
}

The Wizard component manages the internal state of a multi-step workflow and renders only the currently activeStep.

Basic Usage

Each step is defined using Wizard.Step. You can include a Wizard.Footer within each step to provide navigation controls like primary, back, or cancel buttons.

<Wizard>
  <Wizard.Step>
    <div>Step 1 contents</div>
    <Wizard.Footer
      primaryButtonProps={{
        children: 'Continue',
        variant: 'primary'
      }}
    />
  </Wizard.Step>

  <Wizard.Step requiresAcknowledgement>
    <div>Step 2 contents</div>
    <Wizard.Footer
      primaryButtonProps={{
        children: 'Delete',
        variant: 'danger'
      }}
    />
  </Wizard.Step>
</Wizard>

Controlled Mode

You can control the wizard externally by providing activeStep and an onStepChange callback.

Warning: When controlling the index externally, ensure the activeStep index is valid. If the zero-indexed value is negative or exceeds the number of available steps (e.g., passing activeStep={2} to a Wizard with only 2 steps), nothing will render.

<Wizard
  activeStep={0}
  onStepChange={() => {
    /* do something */
  }}
/>