### PieChart Basic Example - React

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/piechart#IPieChartStyles

A basic example demonstrating the usage of the PieChart component. Ensure you have the necessary Fluent UI charting libraries installed.

```jsx
import React from 'react';
import { PieChart } from '@fluentui/react-charting';

const data = [
  { data: 20, label: 'Series A', color: '#0078d4' },
  { data: 50, label: 'Series B', color: '#107c10' },
  { data: 30, label: 'Series C', color: '#ffb900' },
];

const PieChartBasic = () => (
  <PieChart 
    data={data}
    height={200}
    width={200}
    chartTitle="Basic Pie Chart"
  />
);

export default PieChartBasic;
```

--------------------------------

### Default Callout Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/callout

Demonstrates the default usage of the Callout component. No specific setup is required beyond importing the component.

```javascript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Callout } from '@fluentui/react';

const App = () => {
  const [showCallout, setShowCallout] = React.useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={() => setShowCallout(!showCallout)} style={{ padding: '10px' }}>
        Show callout
      </button>
      {showCallout && (
        <Callout target="button" onDismiss={() => setShowCallout(false)}>
          <div>
            <h4>Callout title</h4>
            <p>This is the content of the callout.</p>
          </div>
        </Callout>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Basic SpinButton Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton

Demonstrates the basic usage of the SpinButton component. No special setup is required beyond importing the component.

```jsx
import { SpinButton } from "@fluentui/react";

<SpinButton
  defaultValue={12}
  label="Basic SpinButton:"
  min={0}
  max={100}
  step={1}
  incrementString="Increases the value by 1"
  decrementString="Decreases the value by 1"
/>;
```

--------------------------------

### Default Callout Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/callout#usage

Demonstrates the default usage of the Callout component. No specific setup is required beyond importing the component.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Callout } from '@fluentui/react';

const App = () => {
  const [showCallout, setShowCallout] = React.useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={() => setShowCallout(!showCallout)}>Show callout</button>
      {showCallout && (
        <Callout target="button">
          <div>
            <h4>Callout title</h4>
            <p>This is the content of the callout.</p>
          </div>
        </Callout>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### TeachingBubble with Multi-steps Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble#ITeachingBubble

Illustrates how to use TeachingBubbles in sequence to guide users through complex interactions. Use 'x of y' text for progress indication.

```jsx
import * as React from 'react';
import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
import { Button } from '@fluentui/react/lib/Button';

export const TeachingBubbleWithMultiStepsExample: React.FunctionComponent<{}>
  = () => {
  const [firstCallout, setFirstCallout] = React.useState(false);
  const [secondCallout, setSecondCallout] = React.useState(false);
  const [thirdCallout, setThirdCallout] = React.useState(false);

  const onRenderCalloutContent = (step: number) => {
    switch (step) {
      case 1:
        return (
          <div>
            <TeachingBubble
              target="#teachBubble8"
              isDefaultVisible={firstCallout}
              onDismiss={() => setFirstCallout(false)}
              headline="Step 1 of 3"
              primaryButtonProps={{
                text: 'Next',
                onClick: () => {
                  setFirstCallout(false);
                  setSecondCallout(true);
                },
              }}
            >
              This is the first step in a multi-step teaching bubble sequence. 
            </TeachingBubble>
          </div>
        );
      case 2:
        return (
          <div>
            <TeachingBubble
              target="#teachBubble9"
              isDefaultVisible={secondCallout}
              onDismiss={() => setSecondCallout(false)}
              headline="Step 2 of 3"
              primaryButtonProps={{
                text: 'Next',
                onClick: () => {
                  setSecondCallout(false);
                  setThirdCallout(true);
                },
              }}
            >
              This is the second step in a multi-step teaching bubble sequence. 
            </TeachingBubble>
          </div>
        );
      case 3:
        return (
          <div>
            <TeachingBubble
              target="#teachBubble10"
              isDefaultVisible={thirdCallout}
              onDismiss={() => setThirdCallout(false)}
              headline="Step 3 of 3"
              primaryButtonProps={{
                text: 'Got it',
                onClick: () => {
                  setThirdCallout(false);
                },
              }}
            >
              This is the final step in a multi-step teaching bubble sequence. 
            </TeachingBubble>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <Button 
        id="teachBubble8"
        onClick={() => setFirstCallout(true)}
        secondaryText="Provides a hint about the feature"
      >
        Start tutorial
      </Button>
      {onRenderCalloutContent(1)}
      {onRenderCalloutContent(2)}
      {onRenderCalloutContent(3)}
    </div>
  );
};
```

--------------------------------

### Default SearchBox Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox

A basic implementation of the SearchBox component. No specific setup is required beyond importing the component.

```jsx
import * as React from 'react';
import { SearchBox } from '@fluentui/react';

export const DefaultSearchBoxExample: React.FunctionComponent<{}> = () => {
  return <SearchBox placeholder="Search the site..." />; 
};
```

--------------------------------

### Basic ContextualMenu Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#overview

Demonstrates attaching a ContextualMenu directly to arbitrary elements. This example uses ContextualMenu through Fluent UI Button components in subsequent examples.

```jsx
import { ContextualMenu } from "@fluentui/react";

// ... other imports and component setup

const menuProps = {
  items: [
    { key: 'newItem', text: 'New' },
    { key: 'edit', text: 'Edit' },
    { key: 'delete', text: 'Delete' },
  ],
};

<button onClick={showMenu} ref={menuButtonRef}>Click for ContextualMenu</button>
{
  showMenu && (
    <ContextualMenu
      items={menuProps.items}
      target={menuButtonRef.current}
      onDismiss={hideMenu}
    />
  )
}
```

--------------------------------

### Basic PieChart Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/piechart#feedback

A simple implementation of the PieChart component. Ensure you have the `@fluentui/react-charting` library installed.

```jsx
import * as React from 'react';
import { PieChart, IPieChartProps } from '@fluentui/react-charting';

export const PieChartBasic: React.FunctionComponent<IPieChartProps> = (
  {
    data,
    height,
    width,
    colors,
    culture,
    strokeWidth,
    styles,
    theme,
    chartTitle,
    className,
  }: IPieChartProps
) => {
  return (
    <PieChart
      data={data}
      height={height}
      width={width}
      colors={colors}
      culture={culture}
      strokeWidth={strokeWidth}
      styles={styles}
      theme={theme}
      chartTitle={chartTitle}
      className={className}
    />
  );
};

```

--------------------------------

### Basic Legends Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/legends#implementation

Demonstrates the basic rendering of legend items. Ensure the `@fluentui/react-charting` library is installed.

```jsx
import * as React from 'react';
import { Legend } from '@fluentui/react-charting';

export const BasicLegends = () => {
  const data = [
    { legend: 'Legend 1', color: 'blue' },
    { legend: 'Legend 2', color: 'red' },
    { legend: 'Legend 3', color: 'green' },
    { legend: 'Legend 4', color: 'purple' },
  ];
  return <Legend legends={data} />; 
};
```

--------------------------------

### Overlay Component - Usage Examples

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/overlay#implementation

Provides examples of how to implement the Overlay component with light and dark themes.

```APIDOC
## Overlay Component - Usage Examples

### Description
Demonstrates how to use the Overlay component in both light and dark themes.

### Light Theme Usage
```
// Example for showing the overlay with a light theme
// (Specific code not provided in source, conceptual example)
<Overlay isDarkThemed={false} />
```

### Dark Theme Usage

```
// Example for showing the overlay with a dark theme
// (Specific code not provided in source, conceptual example)
<Overlay isDarkThemed={true} />
```
```

--------------------------------

### Default Callout React Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/callout#feedback

Demonstrates the basic usage of the Callout component. Ensure proper setup and imports for React components.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Callout } from '@fluentui/react';

const App = () => {
  const [showCallout, setShowCallout] = React.useState(false);

  const toggleCallout = () => {
    setShowCallout(!showCallout);
  };

  return (
    <div>
      <button onClick={toggleCallout}>Show callout</button>
      {showCallout && (
        <Callout target="button">
          <div>
            <h4>Callout title</h4>
            <p>This is the content of the callout.</p>
          </div>
        </Callout>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### GroupedList basic example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist#IGroupFooterStyleProps

A basic example demonstrating the usage of the GroupedList component with default settings.

```jsx
<GroupedList items={items} />
```

--------------------------------

### Modal React Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/modal#implementation

Demonstrates the basic usage of the Modal component in Fluent UI React. Ensure proper setup and imports for the Modal and related components.

```jsx
import { Modal } from "@fluentui/react";
import * as React from "react";

export const ModalBasicExample = () => {
  const [showModal, setShowModal] = React.useState(false);

  const openModal = React.useCallback(() => setShowModal(true), []);
  const closeModal = React.useCallback(() => setShowModal(false), []);

  return (
    <>
      <Button onClick={openModal} variant="primary">Open Modal</Button>
      <Modal title="Basic modal title" isOpen={showModal} onClose={closeModal}>
        <Text>This is the content of the basic modal.</Text>
      </Modal>
    </>
  );
};
```

--------------------------------

### Render Custom Item Columns with Sorting in DetailsList

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/customitemcolumns#feedback

This example shows how to configure and render custom columns within a DetailsList component, including the necessary setup for sorting. Ensure you have the Fluent UI React library installed.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DetailsList,
  DetailsListLayoutMode,
  Selection,
  IColumn,
  IDetailsListProps,
} from '@fluentui/react';

interface IDetailsListItem {
  key: string;
  name: string;
  color: string;
  shape: string;
  location: string;
  width: number;
  height: number;
}

const items: IDetailsListItem[] = [
  { key: 'a', name: 'item-0 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'square', width: 179, height: 179 },
  { key: 'b', name: 'item-1 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'circle', width: 232, height: 232 },
  { key: 'c', name: 'item-2 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'triangle', width: 237, height: 237 },
  { key: 'd', name: 'item-3 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'circle', width: 214, height: 214 },
  { key: 'e', name: 'item-4 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'triangle', width: 200, height: 200 },
  { key: 'f', name: 'item-5 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'square', width: 243, height: 243 },
  { key: 'g', name: 'item-6 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'triangle', width: 246, height: 246 },
  { key: 'h', name: 'item-7 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'circle', width: 178, height: 178 },
  { key: 'i', name: 'item-8 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'square', width: 191, height: 191 },
  { key: 'j', name: 'item-9 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'square', width: 170, height: 170 },
  { key: 'k', name: 'item-10 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'circle', width: 152, height: 152 },
  { key: 'l', name: 'item-11 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'circle', width: 213, height: 213 },
  { key: 'm', name: 'item-12 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'square', width: 189, height: 189 },
  { key: 'n', name: 'item-13 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'square', width: 219, height: 219 },
  { key: 'o', name: 'item-14 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'triangle', width: 217, height: 217 },
  { key: 'p', name: 'item-15 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'square', width: 217, height: 217 },
  { key: 'q', name: 'item-16 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'triangle', width: 181, height: 181 },
  { key: 'r', name: 'item-17 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'square', width: 193, height: 193 },
  { key: 's', name: 'item-18 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'square', width: 235, height: 235 },
  { key: 't', name: 'item-19 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'square', width: 187, height: 187 },
  { key: 'u', name: 'item-20 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'triangle', width: 239, height: 239 },
  { key: 'v', name: 'item-21 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'triangle', width: 155, height: 155 },
  { key: 'w', name: 'item-22 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'square', width: 179, height: 179 },
  { key: 'x', name: 'item-23 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'square', width: 165, height: 165 },
  { key: 'y', name: 'item-24 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'circle', width: 186, height: 186 },
  { key: 'z', name: 'item-25 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'triangle', width: 168, height: 168 },
  { key: 'aa', name: 'item-26 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'circle', width: 206, height: 206 },
  { key: 'bb', name: 'item-27 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'circle', width: 200, height: 200 },
  { key: 'cc', name: 'item-28 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'circle', width: 229, height: 229 },
  { key: 'dd', name: 'item-29 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'triangle', width: 152, height: 152 },
  { key: 'ee', name: 'item-30 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'triangle', width: 199, height: 199 },
  { key: 'ff', name: 'item-31 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'triangle', width: 190, height: 190 },
  { key: 'gg', name: 'item-32 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'square', width: 242, height: 242 },
  { key: 'hh', name: 'item-33 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'triangle', width: 234, height: 234 },
  { key: 'ii', name: 'item-34 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'blue', location: 'triangle', width: 165, height: 165 },
  { key: 'jj', name: 'item-35 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'circle', width: 228, height: 228 },
  { key: 'kk', name: 'item-36 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'square', width: 235, height: 235 },
  { key: 'll', name: 'item-37 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'green', location: 'square', width: 151, height: 151 },
  { key: 'mm', name: 'item-38 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'red', location: 'triangle', width: 177, height: 177 },
  { key: 'nn', name: 'item-39 Lorem ipsum dolor sit', color: 'Lorem ipsum dolor sit amet,', shape: 'yellow', location: 'triangle', width: 215, height: 215 },
];

const columns: IColumn[] = [
  { key: 'column1', name: 'key', fieldName: 'key', minWidth: 100, maxWidth: 200, isResizable: true },
  { key: 'column2', name: 'name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
  { key: 'column3', name: 'color', fieldName: 'color', minWidth: 100, maxWidth: 200, isResizable: true },
  { key: 'column4', name: 'shape', fieldName: 'shape', minWidth: 100, maxWidth: 200, isResizable: true },
  { key: 'column5', name: 'location', fieldName: 'location', minWidth: 100, maxWidth: 200, isResizable: true },
  { key: 'column6', name: 'width', fieldName: 'width', minWidth: 100, maxWidth: 200, isResizable: true },
  { key: 'column7', name: 'height', fieldName: 'height', minWidth: 100, maxWidth: 200, isResizable: true },
];

export const DetailsListCustomItemColumnsExample: React.FunctionComponent = () => {
  const selection = new Selection({
    onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() }),
  });

  const _getSelectionDetails = (): string => {
    const selectionCount = selection.getSelectedCount();
    switch (selectionCount) {
      case 0:
        return 'No items selected';
      case 1:
        return '1 item selected: ' + (selection.getSelection()[0] as any).name;
      default:
        return `${selectionCount} items selected`;
    }
  };

  return (
    <DetailsList
      items={items}
      columns={columns}
      setKey="set1"
      layoutMode={DetailsListLayoutMode.justified}
      isHeaderVisible={true}
      selection={selection}
      selectionPreservedOnEmptyClick={true}
      enterDragDropEditingOnKeyboardAccess={true}
      ariaLabelForSelectionColumn="Toggle selection"
      ariaLabelForSelectAllCheckbox="Toggle selection for all items"
    />
  );
};

```

--------------------------------

### Basic Nav with Sample Links

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/nav#best-practices

Demonstrates a basic implementation of the Nav component with sample links. Ensure Fluent UI React is installed and imported.

```jsx
import { Nav } from '@fluentui/react';

const navStyles = {
  root: {
    width: '200px',
    height: '400px',
    boxSizing: 'border-box',
    overflowY: 'auto',
    padding: '10px',
  },
};

const links = [
  { key: 'key1', name: 'File 1', url: 'http://example.com', icon: 'File' },
  { key: 'key2', name: 'Folder 1', url: 'http://example.com', icon: 'Folder' },
];

<Nav styles={navStyles} groups={[{ links: links }]} />
```

--------------------------------

### Keytips Usage Examples

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/keytips#IKeytipLayerProps

Demonstrates how to implement Keytips with various Fluent UI React components.

```APIDOC
## Usage

### Keytips on Buttons
When multiple Keytips start with the same character, typing that character will filter the visible keytips.

ButtonCompound ButtonWith a KeytipButton with Menu
Split Button
I do not have a keytip
The 'offset' prop can be used to position the keytip a set distance from the top-left corner of the element.
Button keytip offset 10x10
When a Keytip's corresponding component is disabled, the keytip still appears but cannot be triggered.
Enabled
Enabled Button

### Keytips in a CommandBar

### Keytips in an OverflowWell
Keytips in an overflow will have a special behavior. When a keytip goes into the overflow button menu, it will also register a 'persisted' keytip that can be accessed from the top level as a shortcut. A shortcut to a normal button item will trigger that button. A shortcut to a menu button item will open the overflow button menu and then open that item's menu as well. In this example triggering 'T' and 'Y' will show off this functionality (see console messages).
When an item is moved out of the overflow well, it behaves as a normal keytip.
Move overflow items

### Keytips in Pivots
For Pivots, keytips will first show for each of the pivots. After selecting a pivot, the Keytips for its content are shown.
Pivot 1 Pivot 2 Pivot 3
Spin Button
  * 
  * Go to Bing

### Dynamically updating keytips
There is another special case where controls on the page will change other controls down the chain in the keytip sequence. Take the case below; clicking Button 1 and Button 2 will update the text of Button3. Triggering the keytip for Button 1 or Button 2 will then also change the keytip sequence of Button 3, because it can be both a child of Button 1 or Button 2. For this to work fully, Button 1 and Button 2 should have `hasDynamicChildren: true` in their keytip props
Button 1Button 2
Button 3, active button is: Button 1
```

--------------------------------

### Overlay Usage Examples

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/overlay#overview

Demonstrates the implementation of light and dark themed overlays.

```React
Show the overlay
```

```React
Show the overlay
```

--------------------------------

### VerticalBarChart Responsive Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/verticalbarchart#implementation

Demonstrates a responsive VerticalBarChart that adjusts its layout based on container size. This example shows a basic setup for a responsive chart.

```typescript
import { VerticalBarChart, } from '@fluentui/react-charting';
import * as React from 'react';

const ResponsiveVerticalBarChart = () => {
  const data = [
    {
      root: {
        key: 'series1',
        color: '#0078d4',
      },
      data: [
        { x: 'Apples', y: 10 },
        { x: 'Bananas', y: 18 },
        { x: 'Oranges', y: 8 },
        { x: 'Grapes', y: 15 },
      ],
    },
  ];

  return <VerticalBarChart data={data} enableReflow={true} />; 
};

export default ResponsiveVerticalBarChart;
```

--------------------------------

### Basic Horizontal Stack - Alignments - Start

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/stack#IStackTokens

Example of a start-aligned item in a horizontal stack.

```html
Start-aligned item
```

--------------------------------

### Basic ContextualMenu Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#feedback

Demonstrates attaching a ContextualMenu directly to arbitrary elements. This is a foundational example for understanding ContextualMenu integration.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ContextualMenu,
  IContextualMenuItem,
} from '@fluentui/react';

const App = () => {
  const [showMenu, setShowMenu] = React.useState(false);
  const menuButtonRef = React.useRef(null);

  const menuItems: IContextualMenuItem[] = [
    {
      key: 'newItem',
      text: 'New',
      iconProps: {
        iconName: 'Add',
        styles: { root: { color: 'green' } },
      },
    },
    {
      key: 'edit',
      text: 'Edit',
      iconProps: {
        iconName: 'Edit',
      },
    },
    {
      key: 'delete',
      text: 'Delete',
      iconProps: {
        iconName: 'Delete',
      },
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <span
        ref={menuButtonRef}
        onClick={() => setShowMenu(!showMenu)}
        style={{ cursor: 'pointer', border: '1px solid #ccc', padding: '5px' }}
      >
        Click for ContextualMenu
      </span>
      <ContextualMenu
        items={menuItems}
        hidden={!showMenu}
        target={menuButtonRef.current}
        onItemClick={() => setShowMenu(false)}
        onDismiss={() => setShowMenu(false)}
      />
    </div>
  );
};

export default App;

```

--------------------------------

### Basic ContextualMenu Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuItem

Demonstrates attaching a ContextualMenu directly to arbitrary elements. This is a foundational example for understanding ContextualMenu integration.

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ContextualMenu,
  IContextualMenuItem,
} from '@fluentui/react';

const App = () => {
  const menuProps = {
    items: [
      { key: 'newItem', content: 'New' },
      { key: 'open', content: 'Open' },
      { key: 'save', content: 'Save' },
    ] as IContextualMenuItem[],
    directionalHintFixed: true,
  };

  return (
    <ContextualMenu
      items={menuProps.items}
      hidden={false}
      directionalHintFixed={menuProps.directionalHintFixed}
    />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### OverflowSet Reversed Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/overflowset#usage

Positions the overflow button at the start of the set using the overflowSide prop.

```typescript
import * as React from 'react';
import { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';
import { Link } from '@fluentui/react/lib/Link';
import { IconButton } from '@fluentui/react/lib/Button';

const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
  return (
    <Link role="menuitem" onClick={item.onClick} style={{ padding: 10, display: 'block' }}>
      {item.name}
    </Link>
  );
};

const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element => {
  return (
    <IconButton
      role="menuitem"
      title="More items"
      styles={{ root: { padding: 10 } }}
      menuIconProps={{ iconName: 'More' }}
      menuProps={{ items: overflowItems! }}
    />
  );
};

export const OverflowSetReversedExample = () => {
  return (
    <OverflowSet
      overflowSide="start"
      items={[
        { key: 'item1', name: 'Link 1', onClick: () => alert('Link 1 clicked') },
        { key: 'item2', name: 'Link 2', onClick: () => alert('Link 2 clicked') },
        { key: 'item3', name: 'Link 3', onClick: () => alert('Link 3 clicked') },
      ]}
      onRenderOverflowButton={onRenderOverflowButton}
      onRenderItem={onRenderItem}
    />
  );
};
```

--------------------------------

### TeachingBubble Basic Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble#ITeachingBubbleStyles

Demonstrates the basic usage of the TeachingBubble component. Ensure necessary imports are included.

```jsx
import * as React from 'react';
import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
import { CompoundButton } from '@fluentui/react/lib/Button';
import { useBoolean } from '@fluentui/react-hooks';

export const TeachingBubbleBasic = () => {
  const [visible, { setTrue, setFalse }] = useBoolean(false);

  return (
    <div>
      <CompoundButton secondaryText="Creates an awesome message" onClick={setTrue}>
        Awesome Button
      </CompoundButton>
      <TeachingBubble
        target={"#targetElement'"}
        headline="Discover what's new"
        onDismiss={setFalse}
        ப்படுத்தும்={visible}
        hasCloseButton={true}
        closeButtonAriaLabel="Close"
      >
        This is the body of the teaching bubble. It can contain more information about the feature you are highlighting.
      </TeachingBubble>
    </div>
  );
};
```

--------------------------------

### OverflowSet Reversed Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/overflowset#implementation

Uses the overflowSide prop to place the overflow button at the start of the set.

```typescript
import * as React from 'react';
import { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';
import { Link } from '@fluentui/react/lib/Link';
import { IconButton } from '@fluentui/react/lib/Button';

const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
  return (
    <Link onClick={item.onClick} styles={{ root: { marginRight: 10 } }}>
      {item.name}
    </Link>
  );
};

const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element => {
  return (
    <IconButton
      title="More items"
      menuIconProps={{ iconName: 'More' }}
      menuProps={{ items: overflowItems! }}
    />
  );
};

export const OverflowSetReversedExample = () => {
  return (
    <OverflowSet
      overflowSide="start"
      items={[
        { key: 'item1', name: 'Link 1', onClick: () => alert('Link 1 clicked') },
        { key: 'item2', name: 'Link 2', onClick: () => alert('Link 2 clicked') },
        { key: 'item3', name: 'Link 3', onClick: () => alert('Link 3 clicked') },
      ]}
      overflowItems={[
        { key: 'item4', name: 'Link 4', onClick: () => alert('Link 4 clicked') },
        { key: 'item5', name: 'Link 5', onClick: () => alert('Link 5 clicked') },
      ]}
      onRenderOverflowButton={onRenderOverflowButton}
      onRenderItem={onRenderItem}
    />
  );
};
```

--------------------------------

### DetailsList - Large Grouped V2 React Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/largegroupedv2#usage

This example demonstrates the 'Large Grouped V2' variant of the DetailsList component. It requires appropriate Fluent UI React setup and data structure for groups and items.

```jsx
import * as React from 'react';
import {
  DetailsList,
  DetailsListLayoutMode,
  Selection,
  IColumn,
} from '@fluentui/react';

interface IRawItem {
  name: string;
  value: number;
}

interface IGroup {
  key: string;
  name: string;
  startIndex: number;
  count: number;
}

const items: IRawItem[] = [
  { name: 'Item 0', value: 0 },
  { name: 'Item 1', value: 1 },
  { name: 'Item 2', value: 2 },
  { name: 'Item 3', value: 3 },
  { name: 'Item 4', value: 4 },
  { name: 'Item 5', value: 5 },
  { name: 'Item 6', value: 6 },
  { name: 'Item 7', value: 7 },
  { name: 'Item 8', value: 8 },
  { name: 'Item 9', value: 9 },
  { name: 'Item 10', value: 10 },
  { name: 'Item 11', value: 11 },
  { name: 'Item 12', value: 12 },
  { name: 'Item 13', value: 13 },
  { name: 'Item 14', value: 14 },
  { name: 'Item 15', value: 15 },
  { name: 'Item 16', value: 16 },
  { name: 'Item 17', value: 17 },
  { name: 'Item 18', value: 18 },
  { name: 'Item 19', value: 19 },
  { name: 'Item 20', value: 20 },
  { name: 'Item 21', value: 21 },
  { name: 'Item 22', value: 22 },
  { name: 'Item 23', value: 23 },
  { name: 'Item 24', value: 24 },
  { name: 'Item 25', value: 25 },
  { name: 'Item 26', value: 26 },
  { name: 'Item 27', value: 27 },
  { name: 'Item 28', value: 28 },
  { name: 'Item 29', value: 29 },
  { name: 'Item 30', value: 30 },
  { name: 'Item 31', value: 31 },
  { name: 'Item 32', value: 32 },
  { name: 'Item 33', value: 33 },
  { name: 'Item 34', value: 34 },
  { name: 'Item 35', value: 35 },
  { name: 'Item 36', value: 36 },
  { name: 'Item 37', value: 37 },
  { name: 'Item 38', value: 38 },
  { name: 'Item 39', value: 39 },
  { name: 'Item 40', value: 40 },
  { name: 'Item 41', value: 41 },
  { name: 'Item 42', value: 42 },
  { name: 'Item 43', value: 43 },
  { name: 'Item 44', value: 44 },
  { name: 'Item 45', value: 45 },
  { name: 'Item 46', value: 46 },
  { name: 'Item 47', value: 47 },
  { name: 'Item 48', value: 48 },
  { name: 'Item 49', value: 49 },
  { name: 'Item 50', value: 50 },
  { name: 'Item 51', value: 51 },
  { name: 'Item 52', value: 52 },
  { name: 'Item 53', value: 53 },
  { name: 'Item 54', value: 54 },
  { name: 'Item 55', value: 55 },
  { name: 'Item 56', value: 56 },
  { name: 'Item 57', value: 57 },
  { name: 'Item 58', value: 58 },
  { name: 'Item 59', value: 59 },
];

const groups: IGroup[] = [
  {
    key: 'group0',
    name: '0(100)',
    startIndex: 0,
    count: 60,
  },
];

const columns: IColumn[] = [
  {
    key: 'column1',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
  },
  {
    key: 'column2',
    name: 'Value',
    fieldName: 'value',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
  },
];

export const DetailsListLargeGroupedV2: React.FunctionComponent = () => {
  const selection = new Selection({
    onSelectionChanged: () => this.setState({ selectionDetails: this.getSelectionDetails() }),
  });

  return (
    <DetailsList
      items={items}
      groups={groups}
      columns={columns}
      setKey="set1"
      layoutMode={DetailsListLayoutMode.justified}
      isPagingEnabled={true}
      selection={selection}
      selectionPreservedOnDidMount={true}
      enterDragDropEditingOnKeyboardAccess={true}
      ariaLabelForSelectionColumn="Toggle selection"
      ariaLabelForSelectAllCheckbox="Toggle selection for all items"
      ariaLabelForPaginatedHeader="Items"
      ariaLabelForGroupHeader="Items"
    />
  );
};
```

--------------------------------

### PieChart Basic Example - React

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/piechart#fluent-ui-v9

A basic implementation of the PieChart component. Ensure the `@fluentui/react-charting` library is installed and imported.

```jsx
import React from 'react';
import { PieChart } from '@fluentui/react-charting';

const data = [
  { data: 20, label: 'Category A' },
  { data: 50, label: 'Category B' },
  { data: 30, label: 'Category C' },
];

const PieChartBasic = () => (
  <PieChart
    data={data}
    height={200}
    width={200}
    chartTitle="Basic Pie Chart"
  />
);

export default PieChartBasic;
```

--------------------------------

### Keytip Layer Configuration Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/keytips#usage

This example shows the structure for registering keytips and defining their properties, including sequences and dynamic child behavior.

```typescript
Alt Windows, 1a1b2a2b0001jmlkqwerabcb, 1a, 2a, 1a, 3b, 2c, 1gg1gg2gg1, gg3
```

--------------------------------

### HorizontalBarChartWithAxis Basic Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/horizontalbarchart/withaxis#fluent-ui-v9

Demonstrates a basic horizontal bar chart with an axis. Ensure the `@fluentui/react-charting` library is installed.

```jsx
import { HorizontalBarChart } from "@fluentui/react-charting";
import * as React from "react";

const data = [
  {
    name: "Oranges",
    value: 10,
    color: "#f09243"
  },
  {
    name: "Dogs",
    value: 20,
    color: "#777777"
  },
  {
    name: "Apples",
    value: 30,
    color: "#a2d8f0"
  },
  {
    name: "Bananas",
    value: 40,
    color: "#fff056"
  }
];

export const HorizontalBarChartWithAxisBasic = () => (
  <HorizontalBarChart
    chartTitle="Fruit and Dogs"
    data={data}
    height={300}
    width={500}
  />
);
```

--------------------------------

### Show TeachingBubble Basic Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble#feedback

Demonstrates the basic usage of the TeachingBubble component. Ensure the component is imported and rendered within your application.

```jsx
Show TeachingBubble
```

--------------------------------

### OverflowSet Reversed Example - Fluent UI React

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/overflowset

Demonstrates the reversed layout for the OverflowSet, placing the overflow button at the start.

```jsx
__
Link 3
Link 2
Link 1
```

--------------------------------

### PieChart Basic Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/piechart#best-practices

A basic implementation of the PieChart component. Ensure you have the necessary Fluent UI charting libraries installed.

```jsx
import React from 'react';
import { PieChart, IDataPoint } from '@fluentui/react-charting';

const data: IDataPoint[] = [
  { data: 21, color: '#0078d4', legend: 'Category A' },
  { data: 15, color: '#107c10', legend: 'Category B' },
  { data: 30, color: '#d1343c', legend: 'Category C' },
  { data: 34, color: '#ffb900', legend: 'Category D' },
];

const BasicPieChart: React.FC = () => (
  <PieChart
    data={data}
    height={200}
    width={200}
    chartTitle="Basic Pie Chart"
  />
);

export default BasicPieChart;
```

--------------------------------

### TeachingBubble Basic Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble#ITeachingBubble

Demonstrates the basic usage of the TeachingBubble component. Ensure the component is imported and rendered within your application.

```jsx
import * as React from 'react';
import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
import { Button } from '@fluentui/react/lib/Button';

export const TeachingBubbleBasicExample: React.FunctionComponent<{}>
  = () => {
  const [firstCallout, setFirstCallout] = React.useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <Button 
        id="teachBubble1" 
        onClick={() => setFirstCallout(true)} 
        secondaryText="Provides a hint about the feature"
      >
        Teach me about this feature
      </Button>

      <TeachingBubble
        target="#teachBubble1"
        isDefaultVisible={firstCallout}
        onDismiss={() => setFirstCallout(false)}
        headline="Discover what’s new in this version!"
      >
        This is a basic teaching bubble. It is used to draw attention to a new or important feature. 
      </TeachingBubble>
    </div>
  );
};
```

--------------------------------

### TeachingBubble Basic Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble#ITeachingBubbleStyleProps

Demonstrates the basic usage of the TeachingBubble component. Ensure the component is imported and rendered within your application.

```jsx
import * as React from 'react';
import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
import { CompoundButton } from '@fluentui/react/lib/Button';
import { Stack } from '@fluentui/react';

export const TeachingBubbleBasic: React.FunctionComponent = () => {
  const [visible, setVisible] = React.useState(true);

  return (
    <Stack tokens={{ childrenGap: 20 }}>
      <CompoundButton secondaryText="This is secondary text" onClick={() => setVisible(true)} checked={visible} >
        Teaching Bubble
      </CompoundButton>
      <TeachingBubble
        target="#targetElement1"
        headline="This is the headline"
        onDismiss={() => setVisible(false)}
        primaryButton={
          <CompoundButton secondaryText="This is secondary text" onClick={() => setVisible(false)}>
            Got it
          </CompoundButton>
        }
        hasCloseButton={true}
        closeButtonAriaLabel="Close"
        visible={visible}
      >
        This is the body content of the teaching bubble.
      </TeachingBubble>
    </Stack>
  );
};
```

--------------------------------

### Show TeachingBubble with Multi-steps Example

Source: https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble#feedback

Demonstrates a TeachingBubble designed for multi-step interactions. Use 'x of y' text to indicate progress in sequenced teaching bubbles.

```jsx
Show TeachingBubble with multi-steps
```