open-index/open-npm huggingface dataset:
npm package: @lg-charts/chart-card
Description: lg-charts ChartCard
Latest version: 1.1.5

# Charts ChartCard

Expandable card component for visually wrapping multiple charts.

## Installation

### PNPM

```shell
pnpm add @lg-charts/legend
```

### Yarn

```shell
yarn add @lg-charts/legend
```

### NPM

```shell
npm install @lg-charts/legend
```

## Example

```js
import { ChartCard } from '@lg-charts/chart-card';
import { Chart } from '@lg-charts/core';

<ChartCard title="My Group of Charts">
  <Chart />
  <Chart />
<ChartCard>;
```

## Properties

| Name                               | Description                                                                                                                                           | Type                                                    | Default |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `title`                            | The title to display in the chart header.                                                                                                             | `React.ReactNode`                                       |         |
| `defaultOpen` _(optional)_         | Defines the default state of the card.                                                                                                                | `boolean`                                               | `true`  |
| `isOpen` _(optional)_              | Forces the card state.                                                                                                                                | `boolean`                                               |         |
| `onToggleButtonClick` _(optional)_ | Callback fired when a user clicks the open/close toggle button.                                                                                       | `(event: MouseEventHandler<HTMLButtonElement>) => void` |         |
| `headerContent` _(optional)_       | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode`                                       |         |
npm package: @lg-charts/colors
Description: lg-charts colors
Latest version: 1.0.7

# Charts Legend

![npm (scoped)](https://img.shields.io/npm/v/@lg-charts/colors.svg)

## Installation

### PNPM

```shell
pnpm add @lg-charts/colors
```

### Yarn

```shell
yarn add @lg-charts/colors
```

### NPM

```shell
npm install @lg-charts/colors
```

This package contains a selection of colors to be used internally for `@lg-charts`.
npm package: @lg-charts/drag-provider
Description: lg-charts DragProvider Component
Latest version: 1.0.11

# DragProvider

Provides drag and drop functionality for chart components.

`DragProvider` creates a draggable context around charts components. Any child `Chart` or `ChartCard` with a `dragId` prop, will automatically become draggable
and droppable within that context.

`DragProvider` contexts are also nestable, providing better control of where a child component can be dropped.

![npm (scoped)](https://img.shields.io/npm/v/@lg-charts/drag-provider.svg)

## Installation

### PNPM

```shell
pnpm add @lg-charts/drag-provider
```

### NPM

```shell
npm install @lg-charts/drag-provider
```

### Yarn

```shell
yarn add @lg-charts/drag-provider
```

## Basic Chart Example

```ts
function ChartPage() {
  // Chart state and dragEnd handlers configured here

  return (
    <DragProvider onDragEnd={handleChartCardDrag}>
      {/** Controls drag events for cards */}
      <ChartCard dragId="chart-card-1">
        <DragProvider onDragEnd={handleChartDrag}>
          {/** Controls drag events for charts inside chart-card-1 */}
          <Chart dragId="chart-1" />
          <Chart dragId="chart-2" />
        </DragProvider>
      </ChartCard>
      <ChartCard dragId="chart-card-2">
        <DragProvider onDragEnd={handleChartDrag}>
          {/** Controls drag events for charts inside chart-card-2 */}
          <Chart dragId="chart-3" />
          <Chart dragId="chart-4" />
        </DragProvider>
      </ChartCard>
    </DragProvider>
  }
}
```

## Props

| Name                       | Description                                      | Type                                         | Default     |
| -------------------------- | ------------------------------------------------ | -------------------------------------------- | ----------- |
| `onDragStart` (_optional_) | Callback that will fire on the `dragstart` event | `({ active: string }) => void`               | `undefined` |
| `onDragEnd` (_optional_)   | Callback that will fire on the `dragend` event   | `({ active: string; over: string }) => void` | `undefined` |

### Callback Arguments

- `active` - `dragId` of the drag component being dragged.
- `over` - `dragId` of the drag component the active component is over on `dragend`.
npm package: @lg-charts/legend
Description: lg-charts Legend
Latest version: 1.1.2

# Charts Legend

![npm (scoped)](https://img.shields.io/npm/v/@lg-charts/legend.svg)

## Installation

### PNPM

```shell
pnpm add @lg-charts/legend
```

### Yarn

```shell
yarn add @lg-charts/legend
```

### NPM

```shell
npm install @lg-charts/legend
```

## Example

To use the `Legend`, ensure your `Legend` instance and corresponding chart components are wrapped in a `SeriesProvider` instance.

```tsx
import { Chart, ChartCard } from '@lg-charts/core';
import { Legend } from '@lg-charts/legend';
import { SeriesProvider } from '@lg-charts/series-provider';

const App = () => {
  const lineData = getLineData(); // use a fetch endpoint or pass down line data
  const series = lineData.map(({name}) => name);

  return (
    <SeriesProvider series={series}>
      <Legend series={series}>
      <Chart>
        {lineData.map(({ data, name }) => (
          <Line key={name} data={data} name={name} />
        ))}
      </Chart>
    </SeriesProvider>
  );
};
```

## Properties

### Legend

| Prop                               | Type                                | Description                                                                                          | Default |
| ---------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------- | ------- |
| `series`                           | `Array<string>`                     | An array of series names representing the data series to be displayed in the legend.                 |         |
| `seriesNameFormatter` _(optional)_ | `(name: string) => React.ReactNode` | A function that formats the series name. The function is called with the series name as an argument. |         |
| `showSelectAll` _(optional)_       | `boolean`                           | Determines whether or not to show the select all checkbox.                                           | `true`  |
npm package: @lg-charts/series-provider
Description: lg-charts SeriesProvider Component
Latest version: 1.0.6

# Charts Series Provider

The `Series Provider` package is a part of the LeafyGreen UI library. It provides context and utilities for managing series data in chart components.

## Installation

### PNPM

```shell
pnpm add @lg-charts/series-provider
```

### Yarn

```shell
yarn add @lg-charts/series-provider
```

### NPM

```shell
npm install @lg-charts/series-provider
```

## Example

To use the `SeriesContext`, wrap your chart components with the `SeriesProvider` component. This will provide the necessary context for managing series data.

```tsx
import { ChartCard } from '@lg-charts/chart-card';
import { Chart } from '@lg-charts/core';
import { Legend } from '@lg-charts/legend';
import { SeriesProvider } from '@lg-charts/series-provider';

const App = () => {
  const lineData = getLineData();
  const series = lineData.map(({ name }) => name);

  return (
    <SeriesProvider series={series}>
      <Legend series={series}>
      <Chart>
        {lineData.map(({ data, name }) => (
          <Line key={name} data={data} name={name} />
        ))}
      </Chart>
    </SeriesProvider>
  );
};
```

## Props

| Name           | Description                                                                                                                                                | Type            | Default |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------- |
| `customColors` | An optional object mapping each theme to an array of custom colors for the series. If not provided, default colors based on the current theme will be used | `Array<string>` |         |
| `series`       | An array of series names representing the data series to be displayed in the descendant charts components                                                  | `Array<string>` |         |

## `useSeriesContext`

The `useSeriesContext` hook provides access to the series data within the `SeriesProvider` context.

### Example

```tsx
import { useSeriesContext } from '@leafygreen-ui/series-provider';

const ChartComponent = () => {
  const {
    getColor,
    getSeriesIndex,
    isChecked,
    isSelectAllChecked,
    isSelectAllIndeterminate,
    toggleSeries,
    toggleSelectAll,
  } = useSeriesContext();

  // Use the series context data
};
```
npm package: @lg-chat/avatar
Description: lg-chat Avatar
Latest version: 8.0.1
Deprecated: This package is deprecated. Instead, use @leafygreen-ui/avatar

# Avatar

🚨 **DEPRECATION NOTICE:** This package is deprecated and will no longer receive updates.  
Please use `Avatar` from `@leafygreen-ui/avatar` instead.

## Installation

### PNPM

```shell
pnpm add @lg-chat/avatar
```

### Yarn

```shell
yarn add @lg-chat/avatar
```

### NPM

```shell
npm install @lg-chat/avatar
```

## Example

```ts
import { Avatar } from '@lg-chat/avatar';

return <Avatar darkMode variant={Variant.Mongo} />;
```

## Properties

| Prop           | Type                         | Description                                                                                                                    | Default     |
| -------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| `darkMode`     | `boolean`                    | Determines if the component will render in dark mode                                                                           | `false`     |
| `name`         | `string`                     | The name of the user who is represented by the avatar. The rendered text will be the initials of the text passed to this prop. |             |
| `size`         | `"small", "default"`         | Determines the size of the avatar                                                                                              | `"default"` |
| `sizeOverride` | `number`                     | If provided, overrides the size prop to a customizable number (in px)                                                          |             |
| `variant`      | `"mongo", "user", "default"` | Determines the Avatar component's variant                                                                                      | `"default"` |
| `...`          | `HTMLElementProps<'div'>`    | Props spread on the root element                                                                                               |             |

## Behavior

- When `variant = "user"` and a value is not passed to the `name` prop, an Avatar with the Person icon will be rendered as a fallback.
- The `size` prop is given default values responsinve to the chat container size. The chat container size is determined by the width of the first child in `LeafyGreenChatContext`. If a `size` prop value is provided, however, it will override the default values.
npm package: @lg-chat/chat-disclaimer
Description: LeafyGreen UI Kit Chat Disclaimer
Latest version: 5.0.1
Deprecated: Use @lg-chat/input-bar v10.1+ instead.

# Chat Disclaimer

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/chat-disclaimer.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/chat-disclaimer/live-example/)

## Installation

### PNPM

```shell
pnpm add @lg-chat/chat-disclaimer
```

### Yarn

```shell
yarn add @lg-chat/chat-disclaimer
```

### NPM

```shell
npm install @lg-chat/chat-disclaimer
```

### Properties

#### DisclaimerText

| Prop          | Type                      | Description                  | Default |
| ------------- | ------------------------- | ---------------------------- | ------- |
| `title`       | `string`                  | Heading text                 |         |
| `description` | `string`                  | Subtext for fine print       |         |
| `...`         | `HTMLElementProps<'div'>` | Props spread on root element |         |
npm package: @lg-chat/chat-window
Description: lg-chat Chat Window
Latest version: 6.0.2

# Chat Window

## Installation

### PNPM

```shell
pnpm add @lg-chat/chat-window
```

### Yarn

```shell
yarn add @lg-chat/chat-window
```

### NPM

```shell
npm install @lg-chat/chat-window
```

## Example

```tsx
import { ChatWindow } from '@lg-chat/chat-window';
import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider';
import { Message } from '@lg-chat/message';
import { MessageFeed } from '@lg-chat/message-feed';
import { InputBar } from '@lg-chat/input-bar';

const Example = props => {
  const [messages, setMessages] = useState<Array<any>>(baseMessages);

  const handleMessageSend = (messageBody: string) => {
    const newMessage = {
      messageBody,
    };
    setMessages(messages => [...messages, newMessage]);
  };

  return (
    <LeafyGreenChatProvider>
      <ChatWindow title="LG Chat Demo" badgeText="Beta" {...props}>
        <MessageFeed>
          {messages.map(messageFields => (
            <Message key={messageFields.id} {...messageFields} />
          ))}
        </MessageFeed>
        <InputBar onMessageSend={handleMessageSend} />
      </ChatWindow>
    </LeafyGreenChatProvider>
  );
};
```

## Properties

| Prop       | Type                      | Description                                            | Default |
| ---------- | ------------------------- | ------------------------------------------------------ | ------- |
| `darkMode` | `boolean`                 | Determines if the component should render in dark mode | `false` |
| `...`      | `HTMLElementProps<'div'>` | Props spread on root element                           |         |
npm package: @lg-chat/fixed-chat-window
Description: LeafyGreen UI Kit Fixed Chat Window
Latest version: 5.0.1
Deprecated: This package is deprecated.

# Fixed Chat Window

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/fixed-chat-window.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/fixed-chat-window/live-example/)

## Installation

### PNPM

```shell
pnpm add @lg-chat/fixed-chat-window
```

### Yarn

```shell
yarn add @lg-chat/fixed-chat-window
```

### NPM

```shell
npm install @lg-chat/fixed-chat-window
```
npm package: @lg-chat/leafygreen-chat-provider
Description: lg-chat LeafyGreen Chat Context
Latest version: 6.0.0

# LeafyGreen Chat Provider

## Installation

### PNPM

```shell
pnpm add @lg-chat/leafygreen-chat-provider
```

### Yarn

```shell
yarn add @lg-chat/leafygreen-chat-provider
```

### NPM

```shell
npm install @lg-chat/leafygreen-chat-provider
```

## Overview

`LeafyGreenChatProvider` provides context to LG Chat components, including the assistant name that will be displayed in messages.

## Examples

### LeafyGreenChatProvider

```tsx
import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider';

function App() {
  return (
    <LeafyGreenChatProvider assistantName="MongoDB Assistant">
      {/* chat components */}
    </LeafyGreenChatProvider>
  );
}
```

### With Custom Assistant Name

```tsx
import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider';

function App() {
  return (
    <LeafyGreenChatProvider assistantName="MongoDB Assistant">
      {/* chat components */}
    </LeafyGreenChatProvider>
  );
}
```

## Properties

| Prop                         | Type        | Description                                                                         | Default               |
| ---------------------------- | ----------- | ----------------------------------------------------------------------------------- | --------------------- |
| `assistantName` _(optional)_ | `string`    | The name of the AI assistant that will be displayed when AI sends messages to users | `'MongoDB Assistant'` |
| `children`                   | `ReactNode` | The chat components to be wrapped by the provider                                   |                       |
npm package: @lg-chat/lg-markdown
Description: lg-chat LGMarkdown
Latest version: 5.0.3

# Lg Markdown

## Installation

### PNPM

```shell
pnpm add @lg-chat/lg-markdown
```

### Yarn

```shell
yarn add @lg-chat/lg-markdown
```

### NPM

```shell
npm install @lg-chat/lg-markdown
```

## Example

**Output HTML**

## Properties

| Prop         | Type                 | Description                                                                               | Default |
| ------------ | -------------------- | ----------------------------------------------------------------------------------------- | ------- |
| `children`   | `string`             | Content rendered by the component                                                         |         |
| `components` | `object`             | Override what React component will render the associated markdown tag, (e.g. {a: Anchor}) |         |
| `darkMode`   | `boolean`            | Determines if the component should be rendered in dark mode                               | `false` |
| `...`        | `ReactMarkdownProps` | Other props from [react-markdown](https://github.com/remarkjs/react-markdown)             | `false` |
npm package: @lg-chat/message-rating
Description: lg-chat Message Rating
Latest version: 7.1.2

# Message Rating

## Installation

### PNPM

```shell
pnpm add @lg-chat/message-rating
```

### Yarn

```shell
yarn add @lg-chat/message-rating
```

### NPM

```shell
npm install @lg-chat/message-rating
```

## Example

```tsx
import { useState, ChangeEvent } from 'react';
import {
  MessageRating,
  type MessageRatingProps,
  MessageRatingValue,
} from '@lg-chat/message-rating';

const Example = () => {
  const [value, setValue] = useState<MessageRatingProps['value']>(
    MessageRatingValue.Unselected,
  );

  const handleRatingChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value as MessageRatingProps['value']);
  };

  return <MessageRating value={value} onChange={handleRatingChange} />;
};
```

## Properties

| Prop             | Type                                         | Description                                                                    | Default |
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------ | ------- |
| `darkMode`       | `boolean`                                    | Determines if the component is rendered in dark mode                           | `false` |
| `hideThumbsDown` | `boolean`                                    | Hides the thumbs down button                                                   | `false` |
| `hideThumbsUp`   | `boolean`                                    | Hides the thumbs up button                                                     | `false` |
| `onChange`       | `React.ChangeEventHandler<HTMLInputElement>` | Event handler called when the value of the underlying radio inputs are changed |         |
| `value`          | `'liked' \| 'disliked' \| 'unselected'`      | Determines the currently selected value of the radio buttons                   |         |
| `...`            | `HTMLElementProps<'div'>`                    | Props spread on root element                                                   |         |
npm package: @lg-chat/rich-links
Description: lg-chat Rich Links
Latest version: 4.0.8

# Rich Links

![npm (scoped)](https://img.shields.io/npm/v/@lg-chat/rich-links.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/rich-links/live-example/)

## Installation

### PNPM

```shell
pnpm add @lg-chat/rich-links
```

### Yarn

```shell
yarn add @lg-chat/rich-links
```

### NPM

```shell
npm install @lg-chat/rich-links
```

## Properties

### Base Properties

All `RichLink` components support the following props:

| Prop             | Type                                                           | Description                                                              | Default  |
| ---------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------ | -------- |
| `children`       | `string`                                                       | The text that shows on the rich link                                     |          |
| `variant`        | `Variant`                                                      | Render as a built-in Rich Link [Variant](#Variants)                      |          |
| `badgeGlyph`     | `GlyphName`                                                    | A [@leafygreen-ui/icon](../../packages/icon/) glyph to show in the badge |          |
| `badgeLabel`     | `string \| React.ReactNode`                                    | A string or component to show in the badge                               |          |
| `badgeColor`     | `"green" \| "gray" \| "blue" \| "purple" \| "red" \| "yellow"` | The background color of the badge                                        | `"gray"` |
| `...anchorProps` | `HTMLAnchorElement?`                                           | Additional props to spread on the anchor element                         |          |

### Variants

You can choose from a set of pre-defined variants for a specific use case. For
example, the "Docs" variant has a specific color and badge text to ensure
consistency across all documentation links.

To use a variant, specify it in the `variant` prop.

```tsx
<RichLink href="https://www.example.com" variant="Website">
  Example Link
</RichLink>
```

The following variants are supported:

- `"Blog"`
- `"Code"`
- `"Book"`
- `"Docs"`
- `"Learn"`
- `"Video"`
- `"Website"`

### Custom Badge

If an existing variant does not meet your use case, you can define a custom
badge instead. To use a custom badge, omit the `variant` prop and instead
define the badge props:

```tsx
<RichLink
  href="https://www.example.com"
  badgeGlyph="ArrowRight"
  badgeLabel="My Link"
  badgeColor="blue"
>
  Example Link
</RichLink>
```
npm package: @lg-chat/title-bar
Description: lg-chat Title Bar
Latest version: 5.0.2

# Title Bar

## Installation

### PNPM

```shell
pnpm add @lg-chat/title-bar
```

### Yarn

```shell
yarn add @lg-chat/title-bar
```

### NPM

```shell
npm install @lg-chat/title-bar
```

## Example

```tsx
import { TitleBar } from '@lg-chat/title-bar';

return <TitleBar title="LeafyGreen Chat" badgeText="Beta" />;
```

## Properties

| Prop                     | Type                      | Description                                                    | Default |
| ------------------------ | ------------------------- | -------------------------------------------------------------- | ------- |
| `badgeText` _(optional)_ | `string`                  | Badge text rendered to indicate 'Beta' or 'Experimental' flags |         |
| `title`                  | `string`                  | Title text                                                     |         |
| `...`                    | `HTMLElementProps<'div'>` | Props spread on root element                                   |         |