open-index/open-npm huggingface dataset:
npm package: @microsoft/eslint-config-fast-dna
Description: eslint rules for FAST projects
Author: Microsoft
Latest version: 2.1.0

# `@microsoft/fast-eslint-rules`

## Usage

### Installation

Install the package:
```
npm install @microsoft/eslint-config-fast-dna
```

### Configure your eslint config

Add `fast-eslint-rules` as an extension in your eslint config
```js
{
    "extends": [
        "@microsoft/eslint-config-fast-dna",
        // Other rule sets (if any)
    ]
}
```

Please see [configuring eslint](https://eslint.org/docs/user-guide/configuring) for more details.
npm package: @microsoft/eslint-formatter-sarif
Description: ESLint formatter for the SARIF (Static Analysis Results Interchange Format) v2.1.0 file format
Author: Microsoft Corporation
Latest version: 3.1.0

# SARIF formatter for ESLint

`eslint-formatter-sarif` is a formatter for [ESLint](https://www.npmjs.com/package/eslint) that produces output in the SARIF (Static Analysis Results Interchange Format) v2.1.0 format.

It is available as an npm module [@microsoft/eslint-formatter-sarif](https://www.npmjs.com/package/@microsoft/eslint-formatter-sarif).

# Installation and usage

1. To install ESLint, follow the instructions at [Getting Started with ESLint](https://eslint.org/docs/3.0.0/user-guide/getting-started).

2. To install the ESLint SARIF formatter:

    ```
    npm install @microsoft/eslint-formatter-sarif --save-dev
    ```

3. To run ESLint with the SARIF formatter:

    ```
    ./node-modules/.bin/eslint -f @microsoft/eslint-formatter-sarif -o yourfile.sarif yourfile.js
    ```

Note that you *cannot* use the abbreviated form `-f sarif`, because that only works when the npm module name is of the form `eslint-formatter-example`, and the ESLint SARIF formatter module is not `eslint-formatter-sarif`; it's `@microsoft/eslint-formatter-sarif`. Alternatively, you can use the form `-f @microsoft/sarif`.

# Developer details

To embed the contents of the analyzed source files in the resulting SARIF file:

```bat
set SARIF_ESLINT_EMBED=true
```

To disable content embedding:

```bat
set SARIF_ESLINT_EMBED=
```

To run unit tests:

```bat
RunTests.cmd
```
npm package: @microsoft/extra-shot-mocha
Description: This package is an extension of [Mocha](https://mochajs.org/).
Latest version: 0.0.1

# Extra Shot Mocha

This package is an extension of [Mocha](https://mochajs.org/).

## Install

```shell
npm install --save-dev @microsoft/extra-shot-mocha

```

## Features

- support for custom data to "it"

### it

Sometimes, we're gonna add extra data to our test cases and show it in the report. You can use this "it" to replace mocha.it.

(Currently, this depends on [Mochawesome](https://github.com/adamgruber/mochawesome) as reporter. We'll develop a new reporter later.)

```typescript
import it from "@microsoft/extra-shot-mocha";
import { describe } from "mocha";
import { expect } from "chai";

describe("extra shot mocha it tests", async () => {
  it("should run as normal mocha.it with sync arrow function", () => {
    expect(1).equals(1);
  });

  it("should run as normal mocha.it with async arrow function", async () => {
    expect(1).equals(1);
  });

  it("should inject ctx with async function", { a: 1 }, async function () {
    expect(1).equals(1);
  });

  it("should inject ctx with async arrow function", { a: 1 }, async () => {
    expect(1).equals(1);
  });

  it("should inject ctx with sync function", { a: 1 }, function () {
    expect(1).equals(1);
  });

  it("should inject ctx with sync arrow function", { a: 1 }, () => {
    expect(1).equals(1);
  });
});
```

## License

Copyright (c) Microsoft Corporation. All rights reserved.

Licensed under the [MIT](LICENSE.txt) license.
npm package: @microsoft/fast-application-utilities
Description: FAST application utilities
Author: Microsoft
Latest version: 3.1.3

# FAST Application utilities

**FAST application utilities has been deprecated. Use [FAST web utilities](https://www.npmjs.com/package/@microsoft/fast-web-utilities) instead.**

A list of utilities used by FAST applications.

## Localization

The `isRTL` utility determines if a string which should correspond to a language or language-locale is right to left.

```typescript
import { isRTL } from "@microsoft/fast-application-utilities";

isRTL("en");
```

### Typescript enum

The `Direction` enum contains the `ltr` and `rtl` enum for use in a Typescript project.

```typescript
import { Direction } from "@microsoft/fast-application-utilities";

let direction: Direction = Direction.ltr;
```
npm package: @microsoft/fast-breakpoint-tracker-react
Description: React component for managing breakpoints
Author: Microsoft
Latest version: 2.2.3

**This project is no longer under active development.**
# FAST Breakpoint tracker React

A library for managing viewport breakpoints. Given a set of breakpoints, this component will monitor the width of the browser window and track the current active breakpoint.

## Installation

`npm i --save @microsoft/fast-breakpoint-tracker-react`

## Breakpoints

`Breakpoints` are expected as an array. Six default breakpoint values are provided for convenience:

```jsx
const defaultBreakpoints = [0, 540, 768, 1084, 1400, 1779];
```

### Setting custom breakpoint values

Custom breakpoint values are defined by setting the `breakpoints` value on the BreakpointTracker class with a new array of number values:

```jsx
// Set the public static value to your custom breakpoints
BreakpointTracker.breakpoints = [0, 800, 1024, 1559];
```

## Usage

```jsx
import React from "react";
import BreakpointTracker from "@microsoft/fast-breakpoint-tracker-react";

export interface AppProps {}

class App extends React.Component<AppProps, {}> {
    render() {
        return (
            <BreakpointTracker
                render={breakpoint => (
                    <p>The current breakpoint is {breakpoint}</p>
                )}
            />
        );
    }
}
```
npm package: @microsoft/fast-cli
Description: A FAST command line interface for improving process when working with FAST projects
Author: Microsoft
Latest version: 1.0.0-alpha.6

# FAST CLI

## Local Installation

`npm install --save-dev @microsoft/fast-cli`

## Global Installation

`npm install -g @microsoft/fast-cli`

> Tip
>
> Note that this is not a recommended practice, as this could cause issues if you have multiple projects which may need different versions. Instead use the local installation above and alias the commands into your project's `package.json` scripts.

## Usage

Check out our documentation for details at https://microsoft.github.io/fast-cli/.
npm package: @microsoft/fast-colors
Description: A color utility for generating a range of colors from a single color
Author: Microsoft
Latest version: 5.3.1

# FAST Colors

`@microsoft/fast-colors` includes a number of color classes and utilities designed to make parsing and manipulating colors easy, fast, and light-weight.

## Color classes

There are a number of color classes exported for common color formats. These include:

- `ColorHSL`
- `ColorHSV`
- `ColorLAB`
- `ColorLCH`
- `ColorRGBA64` (note each channel is a number from 0-1)
- `ColorXYZ`

```ts
const myColor: new ColorRGBA64(0, 0, 0, 1);

myColor.toStringHexRGB() // "#000000"
```

## Color parsers

A number of color parsers are also available to parse a variety of different color formats.

- `parseColorHexRGB(raw: string): ColorRGBA64 | null` parses `#RGB` or `#RRGGBB` color strings
- `parseColorHexARGB(raw: string): ColorRGBA64 | null` parses `#ARGB` or `#AARRGGBB` color strings
- `parseColorHexRGBA(raw: string): ColorRGBA64 | null` parses `#RGBA` or `#RRGGBBAA` color strings
- `parseColorWebRGB(raw: string): ColorRGBA64 | null` parses `#rgb(R, G, B)` color strings
- `parseColorWebRGBA(raw: string): ColorRGBA64 | null` parses `#rgb(R, G, B, A)` color strings
- `parseColorNamned(raw: string): ColorRGBA64 | null` parses [named color strings](https://www.w3schools.com/colors/colors_names.asp)

## Color Palette

A utility for creating a palette of colors from a source color and configuration options:

- `baseColor?: ColorRGBA64`
- `steps?: number`
- `interpolationMode?: ColorInterpolationSpace`
- `scaleColorLight?: ColorRGBA64`
- `scaleColorDark?: ColorRGBA64`
- `clipLight?: number`
- `clipDark?: number`
- `saturationAdjustmentCutoff?: number`
- `saturationLight?: number`
- `saturationDark?: number`
- `overlayLight?: number`
- `overlayDark?: number`
- `multiplyLight?: number`
- `multiplyDark?: number`

Example:

```ts
const palette: ColorPalette = new ColorPalette({
    baseColor: new ColorRGBA64(.4, .4, .7, 1),
    steps: 99,
    interpolationMode: ColorInterpolationSpace.RGB
})
```

## Color converters

A number of color converters are available to convert one color format to the other. Each color accepts a color class of the source type and returns a color class of the converted type:

- `hslToRGB`
- `rgbToHSL`
- `rgbToHSV`
- `hsvToRGB`
- `lchToLAB`
- `labToLCH`
- `labToXYZ`
- `xyzToLAB`
- `rgbToXYZ`
- `xyzToRGB`
- `rgbToLAB`
- `labToRGB`
- `rgbToLCH`
- `lchToRGB`

```ts
const rgb: ColorRGBA64 = new ColorRGBA64(.5, .5, .5, 1);
const hsl: ColorHSL = rgbToHSL(rgb);
```
npm package: @microsoft/fast-components-class-name-contracts-base
Description: Type descriptions for the classnames that any given component can expect as props.
Author: Microsoft
Latest version: 4.8.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST Components class name contracts base

This package provides the TypeScript typings for all FAST components class-name contracts. These contracts enable strict typing of JSS stylesheets and each component's expectation of which class-names will be made available (and under which keys those class-names reside) to the component at runtime.

## A deeper dive

FAST base components are built from the ground-up to work with CSS module implementations. This means that each HTML `class` attribute can be dynamic and unique. To facilitate working with any CSS module implementation, each component expects as a data the `class` attribute values when the component is instantiated.

These contracts simply describe - as TypeScript interfaces - the key/value pairs that each component can expect to be able to use when retrieving these dynamic class-names.

```tsx
inteface ButtonClassNameContract {
    button: string;
}

// In the button base-component, we use the class-name contract to inform which keys will available on the
// `managedClasses` object, which is where dynamic class-names get added as props to a component.
render(): JSX.Element {
    return (
        <button className={this.props.managedClasses.button}>{this.props.children}</button>
    );
}
```

## TypeScript only

This package only contains TypeScript interfaces to be used by other packages - as such, it will get completely compiled out of your project during your build to JavaScript. If you're not using TypeScript, this package will have no effect on your codebase.
npm package: @microsoft/fast-components-class-name-contracts-msft
Description: Type descriptions for the classnames that any given component can expect as props.
Author: Microsoft
Latest version: 4.9.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST Components class name contracts MSFT

This package refrences the BASE class name contracts and provides the TypeScript typings for all MSFT components class name contracts. These contracts enable strict typing of JSS stylesheets and each component's expectation of which class names will be made available (and under which keys those class names reside) to the component at runtime.
npm package: @microsoft/fast-components-msft
Description: A library of Web Components with Microsoft styles
Author: Microsoft
Latest version: 1.6.0
Deprecated: This package has been deprecated in favor of @fluentui/web-components.

# FAST Components MSFT

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)

`fast-components-msft` is a library of Web Components that *composes* `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets that support Microsoft's Fluent design language.

## Installation

### From NPM

To install the `fast-components-msft` library, use either `npm` or `yarn` as follows:

```shell
npm install --save @microsoft/fast-components-msft
```

```shell
yarn add @microsoft/fast-components-msft
```

Within your JavaScript or TypeScript code, you can then import library APIs like this:

```ts
import { FASTAnchor } from '@microsoft/fast-components-msft';
```

Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](http://fast.design/docs/integrations/introduction).

### From CDN

A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module" src="https://unpkg.com/@microsoft/fast-components-msft">
    </head>
    <!-- ... -->
</html>
```

The above CDN location points to the latest release of `fast-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.

For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.

## Development

To start the component development environment, run `yarn start`.

### Known issue with Storybook site hot-reloading during development

Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`

This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.
npm package: @microsoft/fast-components-react-base
Description: FAST base components implemented in React.
Author: Microsoft
Latest version: 4.27.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST Components React base

Base components are the structural, semantic, and interactive core of a piece of UI without any explicit visual representation. For the most part, base components are only as opinionated as they have to be to support the semantic, structural, and accessibility related goals. In rare cases, there are structural changes made to support external styling (such as native elements like an input of type checkbox). Base components are useful when building out a new design system, or when you have two components that require the same base functionality and structure, but completely different visual represenations (button vs flipper).

## Installation

`npm i --save @microsoft/fast-components-react-base`

## Usage

### Basic implementation

An example of using one of the components from the `@microsoft/fast-components-react-base` package:

```tsx
import React from "react";
import ReactDOM from "react-dom";
import { ClassNames, IButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
import { Button } from "@microsoft/fast-components-react-base";

const root = document.createElement("div");
root.setAttribute("id", "root");
document.body.appendChild(root);

const classNames: ClassNames<IButtonClassNameContract> = {
    button: "my-button-classname"
};

function render(): void {
    ReactDOM.render(
        <Button managedClasses={classNames}>
            Click me!
        </Button>,
        root
    );
}

render();
```

### Styled implementation

An example of using the `manageJss` from `@microsoft/fast-jss-manager-react` higher order component to export a component with a JSS style. See the `@microsoft/fast-components-class-name-contracts-base` for the list of class names that can be applied to the base components.

```tsx
import React from "react";
import { Button } from "@microsoft/fast-components-react-base";
import manageJss from "@microsoft/fast-jss-manager-react";

const buttonStyles = {
    button: {
        background: "blue"
    }
};

export default manageJss(buttonStyles)(Button);
```

## Component documentation

Each component comes with a README.md for implementation and other usage details, a JSON schema for the properties that can be used and additional TypeScript definition files.
npm package: @microsoft/fast-components-react-msft
Description: FAST Microsoft components implemented in React
Author: Microsoft
Latest version: 4.32.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST Components React MSFT

A set of React components which implements the Microsoft styling.

## Installation

`npm i --save @microsoft/fast-components-react-msft`

## Usage

An example of using one of the components from the `@microsoft/fast-components-react-msft` package:

```tsx
import React from "react";
import ReactDOM from "react-dom";
import { Button, ButtonAppearance } from "@microsoft/fast-components-react-msft";

const root = document.createElement("div");
root.setAttribute("id", "root");
document.body.appendChild(root);

function render(): void {
    ReactDOM.render(
        <Button appearance={ButtonAppearance.primary}>
            Click me!
        </Button>,
        root
    );
}

render();
```

## Documentation site

[FAST Components React Microsoft](https://msft-docs.azurewebsites.net/)
npm package: @microsoft/fast-element
Description: A library for constructing Web Components
Author: Microsoft
Latest version: 2.10.3

# FAST Element

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-element.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-element)

The `fast-element` library is a lightweight means to easily build performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework.

## Installation

### From NPM

To install the latest `fast-element` library using `npm`:

```shell
npm install --save @microsoft/fast-element
```

Within your JavaScript or TypeScript code, you can then import library APIs like this:

```ts
import { FASTElement } from '@microsoft/fast-element';
```

### From CDN

A pre-bundled script that contains all APIs needed to build web components with FAST Element is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module">
          import { FASTElement } from "https://cdn.jsdelivr.net/npm/@microsoft/fast-element/dist/fast-element.min.js";

          // your code here
        </script>
    </head>
    <!-- ... -->
</html>
```

The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-element@1.6.2/dist/fast-element.min.js"></script>
```

:::note
For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
:::

:::tip
Looking for a quick guide on building components?  Check out [our Cheat Sheet](../resources/cheat-sheet.md#building-components).
:::
npm package: @microsoft/fast-foundation
Description: A library of Web Component building blocks
Author: Microsoft
Latest version: 2.50.0

# FAST Foundation

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-foundation.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-foundation)

The `fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.

This package does not export Web Components registered as [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - it exports parts and pieces intended to be *composed* into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.

## Installation

### From NPM

To install the `fast-foundation` library, use either `npm` or `yarn` as follows:

```shell
npm install --save @microsoft/fast-foundation
```

```shell
yarn add @microsoft/fast-foundation
```

Within your JavaScript or TypeScript code, you can then import library APIs like this:

```ts
import { Anchor } from '@microsoft/fast-foundation';
```

Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](https://fast.design/docs/integrations/introduction).

### From CDN

A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module">
          import { Anchor } from "https://cdn.jsdelivr.net/npm/@microsoft/fast-foundation/dist/fast-foundation.min.js";

          // your code here
        </script>
    </head>
    <!-- ... -->
</html>
```

The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-foundation@2.26.2/dist/fast-foundation.min.js"></script>
```

:::note
For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
:::
npm package: @microsoft/fast-glyphs-msft
Description: Microsoft SVG Glyphs
Author: Microsoft
Latest version: 4.0.4

# FAST Glyphs MSFT
**_This package has been deprecated and is no longer under active development_.**
This is a distribution of Microsoft glyphs which are exported as strings.

Example:

```ts
export const exampleGlyph = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M25.2,16h3V30H2.2V4h14V7l7-7,9,9Zm-21,0h10V6H4.2Zm10,2H4.2V28h10Zm2-7v5h5Zm0,7V28h10V18Zm.47-9,6.53,6.54L29.73,9,23.2,2.46Z"/></svg>';
```

They can be embedded into webpages via a build process or for example in React using [dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml).

## Installation

`npm i --save @microsoft/fast-glyphs-msft`

## Usage

```js
import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";

const container = document.createElement("div");
container.innerHTML = glyphBuildingblocks;
document.body.appendChild(container);
```

## Current available glyphs

- glyphBuildingblocks
- glyphExamples
- glyphGlobalnavbutton
- glyphPage
npm package: @microsoft/fast-jest-snapshots-react
Description: A small utility for automating Jest snapshot creation of React components
Author: Microsoft
Latest version: 4.0.4

# FAST Jest snapshots React
**_This package has been deprecated and is no longer under active development_.**
`@microsoft/fast-jest-snapshots-react` is a small utility library for creating snapshot Jest tests for React components.
Given a single component, the `generateSnapshots` function will iterate over a set of prop data and create a snapshot test for each `prop` instance.

## Usage

To use, import the `ISnapshotTestSuite` interface and the `generateSnapshots` function from `@microsoft/fast-jest-snapshots-react`:

```ts
import {generateSnapshots, ISnapshotTestSuite} from "@microsoft/fast-jest-snapshots-react";
```

Then, create you test data snapshot suite, where every index of `data` is a valid prop object for your `component`:

```ts
// in a Jest test file
import {MyReactComponent, IMyReactComponentProps} from "my-react-component.tsx";
import {ISnapshotTestSuite, generateSnapshots} from "@microsoft/fast-jest-snapshots-react";

const testSuite: ISnapshotTestSuite<IMyReactComponentProps> = {
    name: 'test component',
    component: MyCustomReactComponentConstructor,
    data: [
        {
            id: "test-id",
            text: "hello world",
            // other component props
        }
    ]
};

// Generate snapshots using the prop and component data you defined
generateSnapshots(testSuite);
```

### Snapshot descriptions
Descriptions can optionally be applied to any snapshot for providing context to the test and the expectation of the test.
To do this, simply put the `prop` object into an array where the first index is the snapshot description and the second index is the `prop` object:

```ts
// in a Jest test file
import {MyReactComponent, IMyReactComponentProps} from "my-react-component.tsx";
import {ISnapshotTestSuite, generateSnapshots} from "@microsoft/fast-jest-snapshots-react";

const testSuite: ISnapshotTestSuite<IMyReactComponentProps> = {
    // ...
    data: [
        [
            "should render with an id attribute",
            {
                id: "test-id",
                text: "hello world",
                // other component props
            }

        ]
    ]
};
```
npm package: @microsoft/fast-jss-manager
Description: Provides common code to all JSS manager implementations.
Author: Microsoft
Latest version: 4.2.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST JSS manager

FAST JSS manager provides common code used by implementations of a JSS Manager and other libraries using JSS stylesheets. This package does not export any functional code only TypeScript definitions.

## Installation

`npm i --save @microsoft/fast-jss-manager`
npm package: @microsoft/fast-layouts-react
Description: FAST layout components written in React
Author: Microsoft
Latest version: 4.12.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST Layouts React

A collection of components used to form various layouts built using React.

## App layout components

The following components can be used to create single page application view layouts. These components have been composed using flexbox.

`Container` - The application container which wraps all other app layout components

`Canvas` - The main content area

`Pane` - Additional regions that can be added to the left and/or right of the canvas

`Row` - Used to create sections of pane or canvas content

## Page layout components

The following components can be used to compose a page layout. Each component includes properties which can be custom configured to each use case. These components have been composed using CSS grid.

`Page` - The page layout is designed to create the primary view. It manages page margins and the overall content width.

`Grid` - The grid component defines a region for column components to reside.

`Column` - The column creates regions in a grid and can be configured in many powerful ways to support even the most complex layouts. Certain configuration options can be assigned either a single value, assigned consistently, or an array of values treated as breakpoint specific assignments. The first value applies to the lowest breakpoint and the last value to the highest breakpoint. This feature enables staggering user interface changes for each breakpoint with simple configuration.

### -ms-grid support

CSS Grid does some amazing things automatically. By default, elements inside an element with `display: grid;` will be aware of each-other and not overlap. This makes the grid incredibly simple to set up and means you often don’t need to set column configuration values.

`-ms-grid` works a little differently, and because of this, if you need to support -ms-grid you will need to be more explicit when defining the configuration options for columns. For instance, if you have two 12 column (full width) Columns, you will explicitly need to assign the second column to the second row. If you don’t, `-ms-grid` will draw the two Columns in the same row (and overlapping each-other).

## Utilities

`Breakpoint tracker` - Given a set of breakpoints, this utility will monitor the width of the browser window and notify subscribers via callback if a known breakpoint threshold has been reached.
npm package: @microsoft/fast-markdown-msft-react
Description: Converter for markdown files to JSX as a string which can be embedded in a site
Author: Microsoft
Latest version: 4.1.78

**This project is no longer under active development**

# FAST Markdown MSFT React
This is a plugin for [markdown-it](https://github.com/markdown-it/markdown-it) and will convert markdown to strings which correspond to MSFT styled React components from the `@microsoft/fast-components-react-msft`.

## Installation

`npm i --save @microsoft/fast-markdown-msft-react`

## Usage

```js
import MarkdownIt from "markdown-it";
import FASTMarkdownIt from "@microsoft/fast-markdown-msft-react";

const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    xhtmlOut: true
});

md.use(FASTMarkdownIt);

const markdown = "https://microsoft.com";

md.render(markdown);
```
npm package: @microsoft/fast-permutator
Description: Creates all possible permutations of a component based on its JSON Schema.
Author: Microsoft
Latest version: 2.3.0

# FAST Permutator

**FAST Permutator has been deprecated. Use [FAST Tooling React](https://www.npmjs.com/package/@microsoft/fast-tooling-react) instead.**

The FAST permutator creates all possible data permutations from a given JSON Schema, allowing for deep testing or display of complex data sets.

## Use

### Including the permutator

Add the permutator as a required variable:

```javascript
const permutator = require('@microsoft/fast-permutator');
```

### Permutating data sets

The main export of the permutator is to recieve a schema and any schema references. For example, take this simple schema:

```javascript
let schema = {
    type: "object",
    properties: {
        stringItem: {
            type: "string",
            example: "Hello World"
        },
        booleanItem: {
            type: "boolean"
        }
    },
    required: [
        "stringItem"
    ]
};

permutator(schema);
```

This main export permutator will generate the following data:

```javascript
[
    {
        stringItem: "Hello World"
    },
    {
        stringItem: "Hello World"
        booleanItem: true        
    },
    {
        stringItem: "Hello World"
        booleanItem: false        
    }
]
```

If an example or a default is not provided, fake data will be generated.

### Exporting an example

Use the export `getExample` to retrieve an example piece of data.

```javascript
permutator.getExample(schema);
```

### Simplifying schemas

Use the export `simplifySchemas` to show all schema permutations. This can be useful for extrapolating out all possible schema combinations.

```javascript
permutator.simplifySchemas(schema, references);
```

### Finding properties

Use the export `getDeepPropLocations` to find properties within the schema.

```javascript
permutator.getDeepPropLocations(schema, propertyName);
```

### Resolve references

Use the export `resolveReferences` to resolve the references of a schema by consolidating them with their referenced schema.

```javascript
permutator.resolveReferences(schema, references);
```

### Resolving properties

Use the export `resolveSchemaProps` to resolve the given props for a schema.

```javascript
permutator.resolveSchemaProps(schema, ['$ref', 'allOf']);
```

## Developing

Contribute to the ES6 source files in the lib folder.

## Testing

Run `npm run test` to test the exposed utilities and schemas

## Building

Run `npm run build` to build before `npm publish` to convert files to ES5 from ES6.

## Special properties

- `whitelisted` ignores a property
- `example` is a piece of supplied example data
npm package: @microsoft/fast-react-wrapper
Description: A utility for wrapping web components for use in React.
Author: Microsoft
Latest version: 0.3.25

# FAST React Wrapper

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-react-wrapper.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-react-wrapper)

The `fast-react-wrapper` package contains a utility that enables automatically wrapping Web Components in a React component for ease of integration into React projects.

## Installation

### From NPM

To install the `fast-react-wrapper` library, use either `npm` or `yarn` as follows:

```shell
npm install --save @microsoft/fast-react-wrapper
```

```shell
yarn add @microsoft/fast-react-wrapper
```

Within your JavaScript or TypeScript code, you can then and use the wrapper like this:

```ts
import React from 'react';
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';

const { wrap } = provideReactWrapper(React);

const MyComponent = wrap(MyComponent);
```

For additional wrapper settings and more information on integrating with Design Systems, see [our integration docs](https://fast.design/docs/integrations/react).
npm package: @microsoft/fast-storybook-presets
Description: Storybook presets for FAST integration
Author: Microsoft
Latest version: 1.3.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST Storybook presets
A [Storybook preset](https://storybook.js.org/docs/presets/introduction/) to bring consistency across FAST storybook implementations.

## Installation
`npm i @microsoft/fast-storybook-presets`

## Usage
In your projects `.storybook` directory, add `.storybook/presets.js` if it does not already exist. Then add `@microsoft/fast-storybook-presets` to the exported preset array:

```js
module.exports = ["@microsoft/fast-storybook-presets"];
```

See [preset documentation](https://storybook.js.org/docs/presets/introduction/) for more details on adding [Storybook](https://storybook.js.org) presets.

## Options
The `@microsoft/fast-storybook-presets` can be configured with options. To configure the presets, adjust the preset include to resemble the following:
```js
module.exports = [{
    name: "@microsoft/fast-storybook-presets",
    options: { /* add options here */ }
}]

```

### `designSystemAddon` - Configure the design system addon
```js
{
    enabled: true, // Includes the @microsoft/fast-storybook-design-system-addon
}
```
npm package: @microsoft/fast-tslint-rules
Description: tslint rules for FAST projects
Author: Microsoft
Latest version: 3.2.0
Deprecated: This package is no longer maintained. Use https://www.npmjs.com/package/@microsoft/eslint-config-fast-dna

# FAST TSLINT rules

This project provides [tslint](https://github.com/palantir/tslint) rules for all FAST projects.

## Usage

### Installation

Install the package:

```shell
npm install @microsoft/fast-tslint-rules
```

### Configure your tslint config

Add *fast-tslint-rules* as an extension to your `tslint.json`:

```json
{
    "extends": "@microsoft/fast-tslint-rules" 
}
```

If your are extending multiple rulesets, you can define `extends` as an array of strings:

```json
{
    "extends": [
        "@microsoft/fast-tslint-rules",
        "another-tslint-ruleset"
    ]
}
```

Please see [configuring tslint](https://palantir.github.io/tslint/usage/configuration/) for more details.
npm package: @microsoft/fast-viewer
Description: An initial implementation of a React iframe that is self-contained.
Author: Fluent Web
Latest version: 1.0.1


# FAST viewer
A self contained React component which shows content in an iframe.
This can be used to as a method for previewing a React component(s) or an entire page.

## Getting started
- `npm i`

## Running local environment
- `npm run dev-server`

## Building the library for production
- `npm run build`

# Contributing

This project welcomes contributions and suggestions.  Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
npm package: @microsoft/generator-azure-devops-extension
Description: Generates a basic Azure DevOps extension with support for hot reload and debugging in VS Code
Author: Microsoft
Latest version: 1.0.1

# Azure DevOps extension generator

Generates a basic Azure DevOps extension with support for hot reload and debugging in VS Code. For more information about how hot reload and debugging works with Azure DevOps extensions, please see the [azure-devops-extension-hot-reload-and-debug](https://github.com/microsoft/azure-devops-extension-hot-reload-and-debug) repo, as well as the accompanying [blog post](https://devblogs.microsoft.com/devops/streamlining-azure-devops-extension-development/).

## Installation

First, install [Yeoman](http://yeoman.io) and generator-azure-devops-extension using [npm](https://www.npmjs.com/) (we assume you have pre-installed [Node.js](https://nodejs.org/)).

```shell
npm install -g yo
npm install -g @microsoft/generator-azure-devops-extension
```

Then generate your new project:

```shell
yo @microsoft/azure-devops-extension
```

## Output

Running the generator will result in the following file structure:

```text
.
├── .eslintrc.js
├── .gitignore
├── .vscode
│   └── launch.json
├── README.md
├── configs
│   ├── dev.json
│   └── release.json
├── img
│   └── world.png
├── package.json
├── src
│   └── hub
│       ├── hub.html
│       ├── hub.scss
│       └── hub.tsx
├── tsconfig.json
├── vss-extension.json
└── webpack.config.js
```

## What's next?

Now that you have generated a new project, you are ready to start debugging. Refer to the generated readme in your new project for instructions on how to get started. You should also check out our [azure-devops-extension-hot-reload-and-debug](https://github.com/microsoft/azure-devops-extension-hot-reload-and-debug#deploy-your-dev-extension-to-azure-devops) repo for an in-depth look at how these features work.

## Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
npm package: @microsoft/generator-bot-adaptive
Description: Yeoman generator for creating a base bot built on the Azure Bot Framework and the Adaptive stack.
Author: Bot Framework
Latest version: 1.4.2

# @microsoft/generator-bot-adaptive [![NPM version](https://badge.fury.io/js/%40microsoft%2Fgenerator-bot-adaptive.svg)](https://www.npmjs.com/package/@microsoft/generator-bot-adaptive)

This generator is for creating an Azure Bot Framework bot using the Adaptive Dialog stack. This generator is designed to be used as a base for other more purpose-specific generators, and is responsible for scaffolding:

- The basic bot project (code files, root dialog, base schema) for your bot, based on the platform you choose (.NET or JavaScript)
- The publishing environment for your bot (Azure Functions, or a Web App)

You can also use our [generator for generating bot generators](https://github.com/microsoft/botframework-components/tree/main/generators/generator-bot-template-generator) to help you create your own generators and templates.

## Supported Languages

- English (en-US)

## Resource Deployment

This template contains scaffold code for publishing your bot to either Azure Functions, or Azure Web App. You can also choose to use neither option, and publish to your own web application hosting service of choice.

## Usage

### Creating your own templates

If you need to create your own templates, you can use this generator as a base, and extend it to meet your needs with [Yeoman generator composition](https://yeoman.io/authoring/composability.html). Learn more about creating your own templates in [our documentation](https://aka.ms/bf-create-templates).

### From the command-line

This template can also be installed from the [command line](https://github.com/microsoft/botframework-components/blob/main/generators/command-line-instructions).

## License

[MIT License](https://github.com/microsoft/botframework-components/blob/main/LICENSE)
npm package: @microsoft/generator-bot-core-assistant
Description: Yeoman generator for creating an assistant-style bot with NLP built on the Azure Bot Framework.
Author: Bot Framework
Latest version: 1.4.2

# @microsoft/generator-bot-core-assistant [![NPM version](https://badge.fury.io/js/%40microsoft%2Fgenerator-bot-core-assistant.svg)](https://www.npmjs.com/package/@microsoft/generator-bot-core-assistant)

**Important**: The QnA Maker service will retire on the 31st of March, 2025. A newer version of the question and answering capability is now available as part of Azure Cognitive Service for Language.
For question-and-answer capabilities within the Cognitive Services, see _question answering_. Starting 1st October, 2022 you won’t be able to create new QnA Maker resources.

**This template is being provided for support of existing customers.  New users should refrain from using this template for a new bot.**

A bot with Azure Language Understanding (LUIS) and common trigger phrases used to direct the conversation flow and help customers accomplish basic tasks.

### Recommended use

- Create a sophisticated conversational bot
- Customize and extend sophisticated dialogs, bot logic, language understanding and bot responses

### Included capabilities

- Greeting new and returning users
- Chit chat with QnA Maker ([professional personality](https://docs.microsoft.com/en-us/azure/cognitive-services/qnamaker/how-to/chit-chat-knowledge-base?tabs=v1))
- Asking for help
- Error handling in conversations
- Cancelling a dialog
- Get customer feedback
- Repeat the previous question
- Disambiguation when multiple intents are recognized

### Required Azure resources

- [Azure Language Understanding (LUIS)](https://docs.microsoft.com/en-us/azure/cognitive-services/luis/what-is-luis), or another recognizer of your choice
- [Azure QnA Maker](https://docs.microsoft.com/en-us/azure/cognitive-services/qnamaker/overview/overview)
- A storage solution for persistent state storage like Azure Cosmos DB

### Supported languages

- English (en-US)

### License

[MIT License](https://github.com/microsoft/botframework-components/blob/main/LICENSE)
npm package: @microsoft/generator-bot-core-language
Description: Yeoman generator for creating a simple conversational bot with NLP built on the Azure Bot Framework.
Author: Bot Framework
Latest version: 1.4.2

# @microsoft/generator-bot-core-language [![NPM version](https://badge.fury.io/js/%40microsoft%2Fgenerator-bot-core-language.svg)](https://www.npmjs.com/package/@microsoft/generator-bot-core-language)

A simple bot with Azure Language Understanding (LUIS) and common trigger phrases used to direct the conversation flow.

### Recommended use

- Create a simple conversational bot with Azure Language Understanding ([LUIS](https://docs.microsoft.com/en-us/azure/cognitive-services/luis/what-is-luis))
- Customize and extend example dialogs, bot logic, language understanding and bot responses
- Extend your bot with [Azure Bot Framework components](https://aka.ms/ComponentTemplateDocumentation)

### Included capabilities

- Welcoming new users
- Asking for help
- Responding to unknown language requests (unknown intents)
- Cancelling a dialog
- Use Azure Language Understanding Service ([LUIS](https://docs.microsoft.com/en-us/azure/cognitive-services/luis/what-is-luis)) for natural language processing

### Required Azure resources

- [Azure Language Understanding (LUIS)](https://docs.microsoft.com/en-us/azure/cognitive-services/luis/what-is-luis), or another recognizer of your choice
- A storage solution for persistent state storage like Azure Cosmos DB

### Supported languages

- English (en-US)

### License

[MIT License](https://github.com/microsoft/botframework-components/blob/main/LICENSE)
npm package: @microsoft/generator-bot-empty
Description: Yeoman generator for creating an empty bot built on the Azure Bot Framework.
Author: Bot Framework
Latest version: 1.4.2

# @microsoft/generator-bot-empty [![NPM version](https://badge.fury.io/js/%40microsoft%2Fgenerator-bot-empty.svg)](https://www.npmjs.com/package/@microsoft/generator-bot-empty)

A simple bot with a root dialog and greeting dialog.

### Recommended use

- Start from scratch, with a basic bot without additions
- Good for first time bot developers, or seasoned pros

### Included capabilities

- Greeting new and returning users

### Required Azure resources

- This template does not rely on any additional Azure resources

### Supported languages

- English (en-US)

### License

[MIT License](https://github.com/microsoft/botframework-components/blob/main/LICENSE)