open-index/open-npm huggingface dataset:
npm package: @microsoft/arbutus.component-preview
Description: Component Preview is a composite component designed to showcase component in a static environment. It can be use to preview different component variants.
Latest version: 1.1.14

# Component: Component Preview

**Component preview is a composite component designed to showcase component in a static environment it can be use to preview different component variants.**

## Get Started

```sh
npm i "@microsoft/arbutus.component-preview"
```

```tsx
import { ComponentPreview } from '@microsoft/arbutus.component-preview';
```
npm package: @microsoft/arbutus.embed
Description: Embed component in the Content collection. Embed allows users to add third-party iframe content blocks.
Latest version: 1.0.13

# Component: Embed

**Embed component in the content collection embed allows users to add third party iframe content blocks.**

## Get Started

```sh
npm i "@microsoft/arbutus.embed"
```

```
import { Embed } from "@microsoft/arbutus.embed";
```
npm package: @microsoft/arbutus.file-to-string
Description: File To String takes a path to a file and generates a new file that exports it as a string. This utility is useful for documenting code examples that you might want to show the source code for. There are options for output in JavaScript and TypeScript.
Latest version: 1.0.4

# Utility: File To String

**File to string takes a path to a file and generates a new file that exports it as a string this utility is useful for documenting code examples that you might want to show the source code for there are options for output in java script and type script.**

## Get Started

```sh
npm i "@microsoft/arbutus.file-to-string"
```

```ts
import { fileToString } from '@microsoft/arbutus.file-to-string';
```
npm package: @microsoft/arbutus.guidance
Description: Guidance composite component in the Content collection. Guidance is an interactive UI for showcasing best practices and anatomy.
Latest version: 1.1.5

# Component: Guidance

**Guidance composite component in the content collection guidance is an interactive ui for showcasing best practices and anatomy.**

## Get Started

```sh
npm i "@microsoft/arbutus.guidance"
```

```
import { Guidance } from "@microsoft/arbutus.guidance";
```
npm package: @microsoft/arbutus.heading
Description: Heading component in Content collection. Heading is a text component that traditionally marks a new section. Heading also allows to copy a direct link to the section it marks.
Latest version: 1.0.13

# Component: Heading

**Heading component in content collection heading is a text component that traditionally marks a new section heading also allows to copy a direct link to the section it marks.**

## Get Started

```sh
npm i "@microsoft/arbutus.heading"
```

```
import { Heading } from "@microsoft/arbutus.heading";
```
npm package: @microsoft/arbutus.image-tile
Description: ImageTile component in the Tiles collection. ImageTile is a clickable tile that showcases a dominant image a caption.
Latest version: 1.0.7

# Component: Image Tile

**Image tile component in the tiles collection image tile is a clickable tile that showcases a dominant image a caption.**

## Get Started

```sh
npm i "@microsoft/arbutus.image-tile"
```

```
import { ImageTile } from "@microsoft/arbutus.image-tile";
```
npm package: @microsoft/arbutus.person-tile
Description: PersonTile is a component in Tile collection. PersonTile represents a person and is interactive.
Latest version: 1.0.13

# Component: Person Tile

**Person tile is a component in tile collection person tile represents a person and is interactive.**

## Get Started

```sh
npm i "@microsoft/arbutus.person-tile"
```

```
import { PersonTile } from "@microsoft/arbutus.person-tile";
```
npm package: @microsoft/arbutus.prop-docs-cli
Description: Prop Docs CLI generates documentation for React components in a format that is ready to be plugged into a PropTable component. It is best to use it as part of the build proccess.
Latest version: 1.0.4

# Utility: Prop Docs Cli

**Prop docs cli generates documentation for react components in a format that is ready to be plugged into a prop table component it is best to use it as part of the build proccess.**

## Get Started

```sh
npm i "@microsoft/arbutus.prop-docs-cli"
```

```
import { propDocsCli } from "@microsoft/arbutus.prop-docs-cli";
```
npm package: @microsoft/arbutus.prop-table
Description: PropTable is a composite component that generates documentation for React components.
Latest version: 1.0.8

# Component: Prop Table

**Prop table is a composite component that generates documentation for react components.**

## Get Started

```sh
npm i "@microsoft/arbutus.prop-table"
```

```
import { PropTable } from "@microsoft/arbutus.prop-table";
```
npm package: @microsoft/arbutus.resource-chip
Description: ResourceChip represents a shortcut to a single resource like a file or a link.
Latest version: 0.0.10

# Component: ResourceChip

**ResourceChip represents a shortcut to a single resource like a file or a link.**

## Get Started

```sh
npm i "@microsoft/arbutus.resource-chip"
```

```tsx
import { ResourceChip } from '@microsoft/arbutus.resource-chip';
```
npm package: @microsoft/arbutus.style-utilities
Description: Collection of utilities for styling with Griffel.
Latest version: 1.0.4

# Style: Utilities

**Collection of utilities for styling with Griffel.**

## Get Started

```sh
npm i @microsoft/arbutus.style-utilities
```

## Usage

### mapToStyles

**mapToStyles is designed to help generating styles variants. It generates Griffel classes from a map of values.**

```tsx
import { mapToStyles } from '@microsoft/arbutus.style-utilities';
```

#### Parameters

- `map` An object, where the key will become a class name, and the value will be passed to the `styleFunction`.
- `styleFunction` A function that takes the value from the `map` and returns a `GriffelStyle`.

#### Returns

An object with keys from the map and values as GriffelStyle returned by the `styleFunction`.

#### Example

##### Step 1: Create a map of variants for your component.

```tsx
type ColorValue = string;
const textColors = { primary: 'red', secondary: 'blue' };
const textStyleFunction = (color: ColorValue) => ({
  color,
  '&:visited': { color },
});
const textColorClasses = mapToStyles<ColorValue, typeof textColors>(
  textColors,
  textStyleFunction,
);
// Output
// {
//   primary: {
//     color: 'red',
//     '&:visited: { color: 'red'}}
//   },
//   secondary: {
//     color: 'blue',
//     '&:visited: { color: 'blue'}}
//   },
// }
```

##### Step 2: Pass to the `makeStyles()` function.
npm package: @microsoft/arbutus.theme-switch
Description: ThemeSwitch is a composite component that indicates a currently selected theme and allows the user to change it between light and dark.
Latest version: 1.0.11

# Component: Theme Switch

**Theme switch is a composite component that indicates a currently selected theme and allows the user to change it between light and dark.**

## Get Started

```sh
npm i "@microsoft/arbutus.theme-switch"
```

```tsx
import { ThemeSwitch } from '@microsoft/arbutus.theme-switch';
```
npm package: @microsoft/arbutus.ts
Description: Arbutus base TSConfig for working with Node 16.
Latest version: 0.0.2

# Typescript Config

Arbutus `.tsconfig` base.

## Get Started

### (1) Install dependencies

```sh
npm i -D @microsoft/arbutus.ts
```

### (2) Add to .tsconfig.json

```json
{
  "extends": "@microsoft/arbutus.ts",
  "include": ["src"]
}
```

### Rationale

- Targeting ESNext and ES Modules
- ES Module bundlers ready (Esbuild, Cloudpack, etc). See [RFC: Enforce consistency through package linting](https://hackmd.io/DQ1oJxCcSr6BxDM_37dVJQ) for more details.
npm package: @microsoft/arbutus.use-copy-to-clipboard
Description: useCopyToClipboard hook returns an action that can be used in user events to copy text into clipboard.
Latest version: 1.0.4

# Hook: Copy To Clipboard

**`useCopyToClipboard` hook returns an action that can be used in user events to copy text into clipboard.**

## Get Started

```sh
npm i "@microsoft/arbutus.use-copy-to-clipboard"
```

```
import { useCopyToClipboard } from "@microsoft/arbutus.use-copy-to-clipboard";
```
npm package: @microsoft/arbutus.use-css-vars
Description: useCSSVars takes an object of theme values, generates CSS variables from them, and injects them into the document.
Latest version: 1.1.2

# Hook: useCSSVars

**useCSSVars takes an object of theme values, generates CSS variables from them, and injects them into the document.**

## Get Started

```sh
npm i @microsoft/arbutus.use-css-vars
```

```tsx
import { useCSSVars } from '@microsoft/arbutus.use-css-vars';
```

## Usage

- `theme` An object of theme values. An object can be nested (e.g. `color.button.primary: #fff` will translate to `--color-button-primary: #fff`).
- `prefix` A string to prefix all CSS variables with. This is an optional parameter, but it is recommended to use it to avoid CSS variable collisions.

```tsx
const theme = {
  color: {
    button: {
      primary: '#fff',
      secondary: '#000',
    },
  },
};

const MyAppShell = () => {
  // Injects CSS variables into the document.
  useCSSVars({ theme, prefix: 'MY_APP' });

  return <div>...</div>;
};
```
npm package: @microsoft/arbutus.use-prefers-color-scheme
Description: usePrefersColorScheme returns a value of prefers-color-scheme media query. Based on Media Queries Level 5: 11.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature.
Latest version: 1.0.4

# Hook usePrefersColorScheme

**usePrefersColorScheme returns a value of prefers-color-scheme media query. Based on Media Queries Level 5: 11.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature.**

## Get Started

```sh
npm i @microsoft/arbutus.use-prefers-color-scheme
```

```ts
import { usePrefersColorScheme } from '@microsoft/arbutus.use-prefers-color-scheme';
```

## Usage

```tsx
const MyComponent = () => {
  const preferredTheme = usePrefersColorScheme(); // "light" | "dark" | undefined
  return <div>{preferredTheme === 'light' ? 'light' : 'dark'</div>;
};
```