### Project Setup and Run Commands

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-docsite-components/src/demo/demo.md

Instructions for cloning a project, installing dependencies, and starting the development server using either npm or yarn.

```shell
git clone https://github.com/microsoft/create-react-app-uifabric.git my-app
cd my-app

# with npm (default)
npm install
npm start

# with yarn (optional)
yarn
yarn start

```

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

### Download and Install Vite.js Example

Source: https://github.com/microsoft/fluentui/blob/master/starter-templates/src/react-components-vite/README.md

Use these commands to download the starter template and install its dependencies.

```bash
npx degit microsoft/fluentui/starter-templates/src/react-components-vite
cd react-components-vite
npm install
npm run dev
```

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

### Peer Dependencies Installation Example

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/dependency-versions.md

Illustrates the command required for a consumer to manually install all dependencies if Fluent UI were to use peerDependencies, which is generally discouraged due to the burden on the customer.

```bash
$ yarn add @fluentui/react-COMPONENT DEPENDENCY1 DEPENDENCY2 ... DEPENDENCY999
```

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

### Start Storybook for @fluentui/react

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-examples/README.md

Use this command to start Storybook for the @fluentui/react package. The same command structure applies to other packages with examples in this folder.

```bash
yarn workspace @fluentui/react start
```

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

### Setup Test Environment

Source: https://github.com/microsoft/fluentui/blob/master/scripts/projects-test/README.md

Import and use functions to set up a test environment. Ensure necessary packages are installed.

```typescript
/* @filename <project-root>/scripts/project-test.setup.ts */

import { packProjectPackages, prepareTempDirs } from '@fluentui/scripts-projects-test';

//

setupTest();

function setupTest() {
  // add your logic here
}
```

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

### Install @fluentui/react-motion

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-motion/library/README.md

Install the library using npm or yarn.

```bash
npm install @fluentui/react-motion
# or
yarn add @fluentui/react-motion
```

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

### Install @fluentui/babel-preset-global-context

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/babel-preset-global-context/README.md

Install the Babel preset as a development dependency.

```bash
yarn add --dev @fluentui/babel-preset-global-context
# or
npm install --dev @fluentui/babel-preset-global-context
```

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

### Install @fluentui/react-portal-compat-context

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-portal-compat-context/README.md

Install the package using yarn.

```sh
yarn add @fluentui/react-portal-compat-context
```

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

### Individual Component File Example

Source: https://github.com/microsoft/fluentui/blob/master/tools/storybook-llms-extractor/README.md

Each component has its own detailed documentation file, including props and examples.

```markdown
# Components/Button

A button triggers an action or event.

## Props

| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `appearance` | `"primary" | "secondary"` | No | `"secondary"` | Button appearance |

## Examples

### Primary Button
```tsx
<Button appearance="primary">Click me</Button>
```

```

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

### Install Motion Components Preview

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-motion-components-preview/library/README.md

Install the @fluentui/react-motion-components-preview package using npm or yarn.

```bash
npm install @fluentui/react-motion-components-preview
# or
yarn add @fluentui/react-motion-components-preview
```

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

### ESLint Configuration Example

Source: https://github.com/microsoft/fluentui/blob/master/packages/eslint-plugin/README.md

Example of how to extend ESLint configuration with Fluent UI plugins.

```json
{
  "extends": ["plugin:@fluentui/<name>"]
}
```

```json
{
  "extends": ["plugin:@fluentui/eslint-plugin/<name>"]
}
```

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

### Install and Clean Dependencies

Source: https://github.com/microsoft/fluentui/blob/master/docs/workflows/contributing.md

Use these commands to set up your development environment by installing dependencies and cleaning build artifacts.

```bash
yarn
# Install dependencies

yarn clean
# Clean build artifacts
```

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

### Install @fluentui/react-portal-compat

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-portal-compat/README.md

Install the package using yarn.

```sh
yarn add @fluentui/react-portal-compat
```

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

### Run Custom Nx Console CLI Alternative

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/command-cheat-sheet.md

Use `yarn start` as a custom CLI alternative to guide you through monorepo operations.

```shell
yarn start # our custom nx-console CLI alternative to guide you through monorepo
```

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

### Install @fluentui/style-utilities

Source: https://github.com/microsoft/fluentui/blob/master/packages/style-utilities/README.md

Install this package as a dependency if your project does not use @fluentui/react.

```bash
npm install --save @fluentui/style-utilities
```

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

### Basic Label Example in React

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-monaco-editor/src/transpiler/examples/function.txt

Demonstrates how to render a basic Label component using Fluent UI React. Ensure Fluent UI libraries are installed and imported.

```javascript
import * as React from 'react';
import { Label } from '@fluentui/react/lib/Label';

export const LabelBasicExample = () => {
  return (
    <div>
      <Label>I'm a Label</Label>
    </div>
  );
};
```

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

### Basic Label Example

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-monaco-editor/src/transpiler/examples/functionTranspiled.txt

A simple example showing how to render a basic Label component with text content. Ensure the Fluent UI React library is installed and imported.

```typescript
import * as React from 'react';
import { Label } from '@fluentui/react/lib/Label';
export var LabelBasicExample = function () {
    return (React.createElement("div", null,
        React.createElement(Label, null, "I'm a Label")));
};
```

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

### Install keyboard-key

Source: https://github.com/microsoft/fluentui/blob/master/packages/keyboard-key/README.md

Install the package using yarn or npm.

```bash
yarn add keyboard-key

# or

npm install keyboard-key
```

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

### Install Dependencies

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/common-dev-snags.md

Run this command to install or update project dependencies.

```bash
yarn
```

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

### Install Addon

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-storybook-addon-export-to-sandbox/README.md

Install the addon using yarn.

```sh
yarn add @fluentui/react-storybook-addon-export-to-sandbox
```

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

### Install Dependencies and Link Packages

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/dev-workflow.md

Run this command in the root of the repository to install all necessary dependencies and link packages.

```bash
cd fluentui
yarn
```

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

### Install Fluent UI Web Components with NPM

Source: https://github.com/microsoft/fluentui/blob/master/packages/web-components/README.md

Install the beta version of Fluent UI Web Components using NPM.

```sh
npm i @fluentui/web-components@beta
```

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

### Install Fluent UI Web Components with Yarn

Source: https://github.com/microsoft/fluentui/blob/master/packages/web-components/README.md

Install the beta version of Fluent UI Web Components using Yarn.

```sh
yarn add @fluentui/web-components@beta
```

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

### Install @fluentui/global-context Shim

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/babel-preset-global-context/README.md

Install the shims for createContext that the Babel preset will use to replace original React.createContext calls.

```bash
yarn add @fluentui/global-context
# or
npm install @fluentui/global-context
```

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

### Install ESLint Plugin

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/eslint-plugin-react-components/README.md

Install the plugin using npm, yarn, or pnpm.

```bash
npm install --save-dev @fluentui/eslint-plugin-react-components
```

```bash
yarn add --dev @fluentui/eslint-plugin-react-components
```

```bash
pnpm add --save-dev @fluentui/eslint-plugin-react-components
```

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

### Install Fluent UI Headless Components with npm

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9-headless/src/GettingStarted.mdx

Install the Fluent UI Headless components preview package using npm. This package is tree-shakable.

```bash
npm install @fluentui/react-headless-components-preview
```

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

### Install Fluent UI Web Components with pnpm

Source: https://github.com/microsoft/fluentui/blob/master/packages/web-components/README.md

Install the beta version of Fluent UI Web Components using pnpm.

```sh
pnpm add @fluentui/web-components@beta
```

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

### Install @fluentui/react-charting

Source: https://github.com/microsoft/fluentui/blob/master/packages/charts/react-charting/README.md

Install the charting library using npm. This command adds the package to your project dependencies.

```bash
npm install @fluentui/react-charting
```

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

### Install Fluent UI and Vite Dependencies

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/Concepts/SSR/Remix.mdx

Install the core Fluent UI packages and required Vite plugins for your project.

```bash
# Install Fluent UI core packages
npm i @fluentui/react-components @fluentui/react-icons

# Install required Vite plugins
npm i vite-plugin-cjs-interop @griffel/vite-plugin -D
```

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

### Install Fluent UI Headless Components with Yarn

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9-headless/src/GettingStarted.mdx

Install the Fluent UI Headless components preview package using Yarn. This package is tree-shakable.

```bash
yarn add @fluentui/react-headless-components-preview
```

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

### Install Fluent UI

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/Concepts/QuickStart.mdx

Install the Fluent UI React components library as a dependency in your project using yarn.

```sh
yarn add @fluentui/react-components
```

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

### Install Fluent UI Headless Components with pnpm

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9-headless/src/GettingStarted.mdx

Install the Fluent UI Headless components preview package using pnpm. This package is tree-shakable.

```bash
pnpm add @fluentui/react-headless-components-preview
```

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

### Example Card Usage

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-card/library/README.md

Demonstrates a complete example of a React Card component with a header, preview, and footer, including buttons for reply and share actions.

```jsx
import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
import { Button, Body1, Caption1 } from '@fluentui/react-components';
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';

const App = () => (
  <>
    <Card>
      <CardHeader
        image={
          <img
            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
            alt="Face of a person"
          />
        }
        header={
          <Body1>
            <b>Elvia Atkins</b> mentioned you
          </Body1>
        }
        description={<Caption1>5h ago · About us - Overview</Caption1>}
      />
      <CardPreview
        logo={
          <img
            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/docx.png"
            alt="Microsoft Word logo"
          />
        }
      >
        <img
          src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
          alt="Preview of a Word document"
        />
      </CardPreview>
      <CardFooter>
        <Button icon={<ArrowReply16Regular />}>Reply</Button>
        <Button icon={<Share16Regular />}>Share</Button>
      </CardFooter>
    </Card>
  </>
);

```

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

### Install Fluent UI Web Components and Tokens

Source: https://github.com/microsoft/fluentui/blob/master/packages/web-components/src/_docs/developer/quick-start.mdx

Install the Fluent UI web components and Fluent tokens packages as dependencies for your application.

```sh
npm install @fluentui/web-components @fluentui/tokens
```

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

### Install React Text and Provider Separately

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-text/library/README.md

Install only the @fluentui/react-text package and the @fluentui/react-provider package if you only need text components and the provider.

```sh
npm install @fluentui/react-text
npm install @fluentui/react-provider
```

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

### Install Webpack Utilities

Source: https://github.com/microsoft/fluentui/blob/master/packages/webpack-utilities/README.md

Install the Fluent UI React Webpack utilities as a development dependency using npm or yarn.

```bash
npm i -D @fluentui/webpack-utilities
```

```bash
yarn add -D @fluentui/webpack-utilities
```

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

### Get Start Date of Week

Source: https://github.com/microsoft/fluentui/blob/master/packages/date-time-utilities/etc/date-time-utilities.api.md

Calculates the start date of the week for a given date, based on the specified first day of the week.

```typescript
getStartDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date;
```

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

### Start Legacy Demo App for @fluentui/react

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-examples/README.md

Initiate the legacy demo application for @fluentui/react. This command is also applicable to @fluentui/react-charting and @fluentui/react-experiments.

```bash
yarn workspace @fluentui/react start:legacy
```

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

### Get Year Start

Source: https://github.com/microsoft/fluentui/blob/master/packages/date-time-utilities/etc/date-time-utilities.api.md

Calculates the first day of the year for a given date.

```typescript
getYearStart(date: Date): Date;
```

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

### Build React Package

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/dev-workflow.md

Example of building the 'react' package using the nx command.

```bash
yarn nx run react:build
```

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

### Get Month Start

Source: https://github.com/microsoft/fluentui/blob/master/packages/date-time-utilities/etc/date-time-utilities.api.md

Calculates the first day of the month for a given date.

```typescript
getMonthStart(date: Date): Date;
```

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

### Install Fluent UI v9

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.mdx

Install the latest Fluent UI React v9 package using npm to begin your migration.

```bash
npm install @fluentui/react-components
```

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

### Project Naming Conventions Example

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/shared/repo-organization.md

Demonstrates how project names will mirror their folder structure to prevent naming conflicts.

```bash
- `/react-components/apps/docsite` -> `react-components-docsite`
- `/react-components/apps/ssr-tests` -> `react-components-ssr-tests`
```

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

### Exact Version Dependency Example

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/dependency-versions.md

Illustrates how using an exact version for a dependency in one package can lead to a different version being installed by another package manager, potentially causing duplicate installations.

```json
{
  "name": "@fluentui/react-COMPONENT",
  "dependencies": {
    "lodash": "4.17.20"
  }
}
```

```json
{
  "name": "eslint",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}
```

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

### Prepare Initial Release Command

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md

Use this command to prepare a component for an unstable preview release. Replace MYCOMPONENT with the actual package name.

```bash
yarn nx generate prepare-initial-release --project @fluentui/react-MYCOMPONENT-preview --phase=preview
```

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

### Get Class Names for Tree Styles

Source: https://github.com/microsoft/fluentui/blob/master/packages/charts/react-charting/src/components/TreeChart/TreeChart.md

Initializes the getClassNames function for applying tree-specific styles. This is typically used in the component's setup.

```typescript
const getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();
```

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

### Basic Griffel Conformance Setup

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-conformance-griffel/README.md

Use this snippet to integrate Griffel-specific conformance tests into your component testing suite. Ensure `@fluentui/react-conformance` is installed to avoid type issues.

```typescript
import { isConformant } from '@fluentui/react-conformance';
import griffelTests from '@fluentui/react-conformance-griffel';

isConformant({
  Component,
  extraTests: griffelTests,
});
```

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

### Basic Cypress Component Test Example

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/e2e-testing-with-cypress.md

Demonstrates a basic structure for a Cypress component test, including mounting a React component and interacting with elements. Use this as a starting point for writing your own tests.

```tsx
import * as React from 'react';
import { mount } from '@cypress/react';
import { Sample } from './Sample';

describe('Sample', () => {
  it('opens the menu', () => {
    // Assume Sample contains a button "Open menu" which opens a menu
    mount(<Sample />);
    // Wait for the component to render (.contains() will retry until a matching element is found)
    // and click the button
    cy.contains('Open menu').click();
    // Verify that the menu opened (will retry until it succeeds or times out)
    cy.contains('Good option').should('exist');
  });
});
```

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

### Getting Started with React Context Selector

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-context-selector/README.md

Demonstrates creating a context, providing values, and consuming specific parts of the context using `useContextSelector`. Context updates are propagated only when the selector function's result changes, using 'Object.is()' for comparison.

```tsx
import * as React from 'react';
import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';

interface CounterContextValue {
  count1: number;
  count2: number;
  incrementCount1: () => void;
  incrementCount2: () => void;
}

// 💡 The same syntax as native React context API
//    https://reactjs.org/docs/context.html#reactcreatecontext
const CounterContext = createContext<CounterContextValue>({} as CounterContextValue);

const CounterProvider = CounterContext.Provider;

// not necessary but can be a good layer to mock for unit testing
const useCounterContext = <T,>(selector: ContextSelector<CounterContextValue, T>) =>
  useContextSelector(CounterContext, selector);

const Counter1 = () => {
  // 💡 Context updates will be propagated only when result of a selector function will change
  //    "Object.is()" is used for internal comparisons
  const count1 = useCounterContext(context => context.count1);
  const increment = useCounterContext(context => context.incrementCount1);

  return <button onClick={increment}>Counter 1: {count1}</button>;
};

const Counter2 = () => {
  const count2 = useCounterContext(context => context.count2);
  const increment = useCounterContext(context => context.incrementCount2);

  return <button onClick={increment}>Counter 2: {count2}</button>;
};

export default function App() {
  const [state, setState] = React.useState({ count1: 0, count2: 0 });

  const incrementCount1 = React.useCallback(() => setState(s => ({ ...s, count1: s.count1 + 1 })), [setState]);
  const incrementCount2 = React.useCallback(() => setState(s => ({ ...s, count2: s.count2 + 1 })), [setState]);

  return (
    <div className="App">
      <CounterProvider
        value={{
          count1: state.count1,
          count2: state.count2,
          incrementCount1,
          incrementCount2,
        }}
      >
        <Counter1 />
        <Counter2 />
      </CounterProvider>
    </div>
  );
}
```

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

### BreadcrumbButton Example

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-breadcrumb/library/docs/Spec.md

A simple example of a BreadcrumbButton with a link.

```jsx
<BreadcrumbButton href="#">Item</BreadcrumbButton>
```

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

### Install @fluentui/react-context-selector with NPM

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-context-selector/README.md

Use this command to add the package to your project using npm.

```bash
npm install --save @fluentui/react-context-selector
```

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

### Install storybook-llms-extractor

Source: https://github.com/microsoft/fluentui/blob/master/tools/storybook-llms-extractor/README.md

Install the package using npm or yarn.

```bash
npm install @fluentui/storybook-llms-extractor
# or
yarn add @fluentui/storybook-llms-extractor
```

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

### Prepare Initial Release for Preview

Source: https://github.com/microsoft/fluentui/blob/master/tools/workspace-plugin/src/generators/prepare-initial-release/README.md

Use this command to initiate the first release preparation for a package in the preview phase. It automates the necessary steps before publishing to npm.

```bash
nx prepare-initial-release --phase=preview
```

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

### Prepare Initial Release for Compat

Source: https://github.com/microsoft/fluentui/blob/master/tools/workspace-plugin/src/generators/prepare-initial-release/README.md

Use this command to initiate the first release preparation for a compat package. This automates the steps for releasing compat packages to npm.

```bash
nx prepare-initial-release --phase=compat
```

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

### Project Structure Overview

Source: https://github.com/microsoft/fluentui/blob/master/starter-templates/README.md

This is a representation of the project's directory structure, showing the location of starter templates and configuration files.

```bash
starter-templates/
├── project.json
├── package.json
├── README.md
└── src/
    └── react-components-vite/
        ├── README.md
        └── ...
```

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

### Gestalt Link Example DOM

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Link component rendered using Gestalt.

```html
<a class="Wk9 xQ4 WMU iyn ljY kVc" href="https://pinterest.com">click here</a>
```

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

### Start Development Server

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/dev-workflow.md

Launch the documentation site or Storybook for v9 components using Yarn. Hot module reloading is typically enabled for automatic refreshes on file saves.

```bash
yarn start

@fluentui/public-docsite // starts the public v8 documentation site.
@fluentui/public-docsite-v9 // starts the v9 documentation storybook site.
```

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

### Northstar Carousel Example

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-carousel/library/docs/Migration.md

Example of how the react-northstar Carousel was implemented using data props.

```jsx
<Carousel
  navigation={{
    items: carouselItems.map((item, index) => ({
      key: item.id,
    })),
  }}
  items={carouselItems}
/>
```

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

### Prepare Initial Release for Stable Phase

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md

Use this script to move a component package to the stable phase. Replace 'your-component' with the actual package name.

```bash
yarn nx generate prepare-initial-release --project @fluentui/react-your-component-preview --phase=stable
```

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

### ToggleButton Examples

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/library/README.md

Provides examples of ToggleButton in its default, checked (true/false), and defaultChecked states.

```jsx
<ToggleButton>Toggle volume</ToggleButton>
```

```jsx
<ToggleButton defaultChecked={true}>Toggle volume</ToggleButton>
```

```jsx
<ToggleButton checked={true}>Toggle volume</ToggleButton>
```

```jsx
<ToggleButton checked={false}>Toggle volume</ToggleButton>
```

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

### Prepare Initial Release - Stable Phase

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/new-release-process-v9-packages.md

Command to prepare a package for the stable release phase. Use this after the preview phase is complete. Replace 'react-one-preview' with your project name.

```sh
yarn nx g @fluentui/workspace-plugin:prepare-initial-release --project react-one-preview --phase=stable
```

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

### Prepare Initial Release - Preview Phase

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/new-release-process-v9-packages.md

Command to prepare a package for the preview release phase. Ensure you replace 'react-one-preview' with your actual project name.

```sh
yarn nx g @fluentui/workspace-plugin:prepare-initial-release --project react-one-preview --phase=preview
```

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

### Generate Initial Release for Preview Phase

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/release-cycle.md

Use the Nx generator `@fluentui/workspace-plugin:prepare-initial-release` with the `--phase=preview` flag to prepare a package for the preview release.

```sh
yarn nx g @fluentui/workspace-plugin:prepare-initial-release --project @fluentui/react-one-preview --phase=preview
```

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

### FastDNA Link (Hypertext) Example DOM

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Link component rendered using FastDNA.

```html
<a href="https://www.bing.com" class="c012">Hypertext</a>
```

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

### Run Development Commands

Source: https://github.com/microsoft/fluentui/blob/master/docs/workflows/contributing.md

Commands for starting the development server, building projects, running Storybook, tests, linting, and type checking.

```bash
yarn start
# Interactive project selector

yarn nx run <project>:build
# Build specific project

yarn nx run <project>:start
# Start Storybook for component

yarn nx run <project>:test
# Run unit tests

yarn nx run <project>:test -u
# Update snapshots

yarn nx run <project>:lint
# Lint

yarn nx run <project>:type-check
# Type check

yarn nx run <project>:generate-api
# Update API docs
```

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

### Install @fluentui/react-charts Package

Source: https://github.com/microsoft/fluentui/blob/master/apps/chart-docsite/src/Introduction.mdx

Use npm or yarn to install the necessary charts package for your project.

```bash
npm install @fluentui/react-charts
```

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

### Example Icon DOM Structure

Source: https://github.com/microsoft/fluentui/blob/master/specs/Icon.md

This is an example of the HTML structure for an icon, utilizing SVG elements for rendering.

```html
<span class="ui-icon ck cb ca" role="img" aria-hidden="true">
  <svg class="em ct cu en cw" viewBox="8 8 16 16" role="presentation" focusable="false">
    <g class="ui-icon__outline eo">
      <path
        d="M23.6968,12.0403c-0.1836-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z M23,18.3315l-1.6865-1.6099v-0.0002  C21.1113,16.5286,21,16.2725,21,16s0.1113-0.5286,0.3135-0.7217L23,13.6685V18.3315z"
      ></path>
      <path
        d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z M18,19.5  c0,0.2756-0.2241,0.5-0.5,0.5H9.8193c-0.2285,0-0.4341-0.2-0.4878-0.4756C9.1113,18.4082,9,17.2224,9,16  s0.1113-2.4082,0.3315-3.5249C9.3853,12.2,9.5908,12,9.8193,12H17.5c0.2759,0,0.5,0.2244,0.5,0.5V19.5z"
      ></path>
    </g>
    <g class="ui-icon__filled">
      <path
        d="M23.6968,12.0403c-0.1841-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z"
      ></path>
      <path
        d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z"
      ></path>
    </g>
  </svg>
</span>
```

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

### Prepare Initial Release for Stable

Source: https://github.com/microsoft/fluentui/blob/master/tools/workspace-plugin/src/generators/prepare-initial-release/README.md

Use this command to initiate the first release preparation for a package in the stable phase. This command automates the steps required for a stable npm release.

```bash
nx prepare-initial-release --phase=stable
```

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

### Chakra UI Link Example DOM

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Link component rendered using Chakra UI.

```html
<a href="https://chakra-ui.com" class="css-u5zpo1">Chakra UI</a>
```

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

### Carbon Design Link Example DOM

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Link component rendered using Carbon Design.

```html
<a href="#" class="bx--link some-class">Link</a>
```

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

### Generate Initial Release Preparation

Source: https://github.com/microsoft/fluentui/blob/master/tools/workspace-plugin/src/generators/prepare-initial-release/README.md

Run this command to generate the necessary files and configurations for the initial release of a package. This is the default command when no specific phase is provided.

```bash
yarn nx g @fluentui/workspace-plugin:prepare-initial-release
```

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

### Basic Link Examples

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-link/library/docs/SPEC.md

Demonstrates the basic usage of the Link component with different configurations.

```jsx
<Link>This is a link</Link>
```

```jsx
<Link href="https://www.bing.com">This is a link</Link>
```

```jsx
<Link href="https://www.bing.com" disabled>This is a link</Link>
```

```jsx
<Link href="https://www.bing.com" target="_blank">This is a link</Link>
```

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

### Base Web Link Example DOM

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Link component rendered using Base Web.

```html
<a data-baseweb="link" href="https://baseweb.design" class="k5 ah eq bk er es bb bc tf tg th"> Link to Base Web </a>
```

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

### SpinButton Basic Example

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-spinbutton/library/docs/Spec.md

A fundamental example showcasing the SpinButton's basic functionality and how formatting can be applied.

```tsx
<SpinButton value={10} displayValue="$10.00" min={1} max={100} step={5} />
```

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

### Example Theme Object

Source: https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/Concepts/Theming.mdx

An example of a theme object structure, showing how tokens are represented as key-value pairs.

```tsx
const exampleTheme = {
  borderRadiusSmall: '2px',
  //...
  colorNeutralForeground2: '#424242',
};
```

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

### Example Package Label Assignment (v8)

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/shared/build-system/triage-automation.md

Illustrates the mapping from component names to package labels for the v8 template.

```text
Text -> package: react, Fluent UI react (v8)
Menu -> package: react, Fluent UI react (v8)
Dialog -> package: react, Fluent UI react (v8)
Chart -> package: react-charting, Fluent UI react (v8)
```

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

### Install Dependencies Command

Source: https://github.com/microsoft/fluentui/blob/master/tools/react-integration-tester/README.md

Command to install dependencies for a specific React major version, caching the results.

```bash
rit --react 18 --install-deps
```

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

### Example Story with Sandbox Export

Source: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-storybook-addon-export-to-sandbox/README.md

Demonstrates how to configure the sandbox export parameters for a specific story, including required dependencies.

```jsx
import React from 'react';
import { Text } from '@fluentui/react-components';

export const Default = () => <Text>This is an example of the Text component's usage.</Text>;

Default.parameters = {
  exportToSandbox: {
    provider: 'stackblitz-cloud',
    bundler: 'vite',
    requiredDependencies: {
      react: 'latest',
      'react-dom': 'latest',
    },
  },
};
```

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

### StartEnd Class

Source: https://github.com/microsoft/fluentui/blob/master/packages/web-components/docs/web-components.api.md

Implements both Start and End interfaces, providing slot elements for start and end content.

```APIDOC
## StartEnd

### Description
Implements Start and End interfaces, providing slot elements.

### Class
`StartEnd`

### Properties
- **end** (HTMLSlotElement) - The slot element for end content.
- **start** (HTMLSlotElement) - The slot element for start content.
```

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

### Material-UI Link Example DOM without href

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Material-UI Link rendered as a button when no href is provided.

```html
<button
  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiLink-button MuiTypography-body2 MuiTypography-colorPrimary"
>
  Button Link
</button>
```

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

### Example Package Label Assignment (Web Components)

Source: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/shared/build-system/triage-automation.md

Illustrates the mapping from component names to package labels for the web-components template.

```text
Text -> package: web-components
Menu -> package: web-components
```

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

### Material-UI Link Example DOM with href

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Material-UI Link rendered as an anchor tag when an href is provided.

```html
<a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss243 MuiTypography-colorPrimary" href="#"> Link </a>
```

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

### Fabric Link Example DOM without href

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Fabric Link rendered as a button when no href is provided.

```html
<button type="button" class="ms-Link root-163">the link is rendered as a button</button>
```

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

### Fabric Link Example DOM with href

Source: https://github.com/microsoft/fluentui/blob/master/specs/Link.md

Example of a Fabric Link rendered as an anchor tag when an href is provided.

```html
<a href="http://dev.office.com/fabric/components/link" class="ms-Link root-109"> it renders as an anchor tag. </a>
```