open-index/open-npm huggingface dataset:
npm package: @fluentify/fluentify
Description: Fluent design system components based framework for Vue.js
Author: Alexander Wennerstrøm
Latest version: 0.2.0

![fluentify-opengraph](https://user-images.githubusercontent.com/4184558/67981054-169c3600-fc20-11e9-83e1-52f695776774.png)

[![codebeat badge](https://codebeat.co/badges/d2cb26e8-55e3-40a7-b4be-bc9811f0cd98)](https://codebeat.co/projects/github-com-fluentifyjs-fluentify-master)
![image](https://img.shields.io/npm/dm/@fluentify/fluentify.svg)
![image](https://img.shields.io/npm/v/@fluentify/fluentify.svg)
![image](https://img.shields.io/npm/l/@fluentify/fluentify.svg)
![Javascript and css linting](https://github.com/FluentifyJs/fluentify/workflows/Javascript%20and%20css%20linting/badge.svg)
![CodeQL](https://github.com/FluentifyJs/fluentify/workflows/CodeQL/badge.svg)

### [View demo](https://fluent.ayw.io/)

## This Components framework is *Work in progress*, please keep that in mind that it's not ready for production yet, feel free to contribute and get it ready faster 

# Todo:
## Components
- [x] Container
- [x] Grid - Rows and Columns using css grid (Room for improvements)
- [x] Button
- [x] List
- [x] List item
- [x] List item avatar
- [x] List item content (with support of single line, double line and triple line)
- [ ] Card
- [ ] Video player
- [x] Menu component
- [ ] Modal / Dialog
- [ ] Date picker
- [ ] Date calendar picker
- [ ] Time picker
- [ ] Color picker
- [ ] Flyout / Snackbar
- [x] Progressbar linear
- [ ] Progressbar circular
- [x] Input field
- [x] Checkbox input
- [x] Radio input
- [x] Radio Group
- [ ] Select (Missing arrow icon)
- [ ] File picker
- [ ] Textarea
- [ ] Datalist
- [ ] Divider
- [ ] Data table
- [ ] Image component
- [ ] Switch
- [x] Slider (horizontal/vertical)
- [ ] Rating
- [ ] Autocomplete / Auto-suggest input
- [ ] Context menu
- [ ] Navigation view (Content of view will be the list component)
- [ ] Command bar
- [ ] Tree view
- [ ] Pivot
- [ ] Icon component

# Classes

- [ ] Typography
- [ ] Colors
- [ ] Padding helper
- [ ] Margin helper
- [ ] Display helper (block, inline, inline-block etc)
- [ ] MDL2 icon font

# Theme
- [ ] Custom colors support
- [ ] Dark theme for all components

# Website
- [ ] Main page
- [ ] Documentation
- [ ] Theme generator
- [ ] Codepen template
npm package: @fluentity/cli
Description: Fluentity CLI for model generation
Author: Cedric Pierre
Latest version: 1.3.0

# Fluentity CLI

A command-line interface tool for generating Fluentity models. This tool helps streamline the process of creating and managing Fluentity models in your project.

## Installation

```bash
# Using npm
npm install -g @fluentity/cli

# Using pnpm
pnpm add -g @fluentity/cli

# Using yarn
yarn global add @fluentity/cli
```

## Usage

The CLI provides a simple interface for generating Fluentity models:

```bash
# Generate a new model
fluentity generate:model [name]

# Generate a model with specific options
fluentity generate:model [name] --path ./custom/path --force
```

### Commands

#### `generate:model [name]`

Generates a new Fluentity model with the specified name.

**Arguments:**
- `[name]` - Name of the model to generate (optional)

**Options:**
- `-p, --path <path>` - Path where the model should be generated (default: './src/models')
- `-f, --force` - Overwrite existing model file if it exists

#### `parse:openapi [filename]`

Generates all Fluentity models from a JSON OpenAPI file.

**Arguments:**
- `[filename]` - Name of the JSON file to parse

**Options:**
- `-p, --path <path>` - Path where the model should be generated (default: './src/models')
- `-f, --force` - Overwrite existing model file if it exists

## Development

### Prerequisites

- Node.js (Latest LTS version recommended)
- pnpm 8.0.0 or later

### Setup

1. Clone the repository
2. Install dependencies:
   ```bash
   pnpm install
   ```

### Available Scripts

- `pnpm build` - Build the project
- `pnpm start` - Run the CLI locally
- `pnpm dev` - Build and watch for changes
- `pnpm test` - Run tests
- `pnpm test:coverage` - Run tests with coverage
- `pnpm test:ui` - Run tests with UI

## License

MIT © Cedric Pierre

## Author

- Cedric Pierre (jirotoh@gmail.com)
npm package: @fluentliteui/button
Description: install ``` yarn add @fluentliteui/button ```
Author: kasagawa
Latest version: 0.0.15

# @fluentliteui/button

install
```
yarn add @fluentliteui/button
```

usage
```jsx
import { Button,CloseButton,CompoundButton } from "@fluentliteui/button";
import "@fluentliteui/button/dist/index.css";

function App() {
    return <>
        <Button variant="default">Default</Button>
        <Button onClick={() => { console.log('hello') }} 
        variant="primary">Primary</Button>
        <Button onClick={() => { console.log('hello') }} variant="warning">Warning</Button>
        <Button variant="success">Success</Button>
        <Button variant="info">Info</Button>
        <CloseButton size="large" color="#f00" />
        <CompoundButton variant="primary" secondaryText="This is the secondary text">Primary</CompoundButton>
    <>
}
```
npm package: @fluentliteui/card
Description: install ``` yarn add @fluentliteui/button ```
Author: kasagawa
Latest version: 0.0.2

# @fluentliteui/button

install
```
yarn add @fluentliteui/button
```

usage
```jsx
import { Button,CloseButton } from "@fluentliteui/button";
import "@fluentliteui/button/dist/index.css";

function App() {
    return <>
        <Button variant="default">Default</Button>
        <Button onClick={() => { console.log('hello') }} 
        variant="primary">Primary</Button>
        <Button onClick={() => { console.log('hello') }} variant="warning">Warning</Button>
        <Button variant="success">Success</Button>
        <Button variant="info">Info</Button>
        <CloseButton size="large" color="#f00" />
    <>
}
```
npm package: @fluentliteui/details
Description: install ``` yarn add @fluentliteui/details ```
Author: kasagawa
Latest version: 0.0.4

# @fluentliteui/details

install
```
yarn add @fluentliteui/details
```

usage
```jsx
import { Details } from "@fluentliteui/details";
import "@fluentliteui/details/dist/index.css";

function App() {
    return <Details open={true} onToggle={({ target: { open } }: any) => {
          console.log(open);
        }} summaryStyle={{ borderBottom: "solid 1px #ccc" }} bodyStyle={{ background: "#adadad" }} extra={<div>^</div>} style={{ width: "300px" }} label={"hello"}><button>666</button></Details>
}
```
npm package: @fluentliteui/dialog
Description: install ``` yarn add @fluentliteui/dialog ```
Author: kasagawa
Latest version: 0.0.13

# @fluentliteui/dialog

install
```
yarn add @fluentliteui/dialog
```

usage
```jsx
import { dialog } from "@fluentliteui/dialog";
import "@fluentliteui/dialog/dist/index.css";

function App() {
    const [showDialog, setShowDialog] = useState<boolean>(true);
    return <>
        <Button onClick={() => {
          setShowDialog(true);
        }}>open</Button>
        <Dialog style={{ width: "300px" }} 
        show={showDialog}
        label="hello"
        showCancel={false}
        body={<p>this is a demo</p>}
        closeButtonColor="#f00"
        onOK=()=>{}
        />
    <>
}
```
npm package: @fluentliteui/dropdown
Description: install ``` yarn add @fluentliteui/dropdown ```
Author: kasagawa
Latest version: 0.0.17

# @fluentliteui/dropdown

install
```
yarn add @fluentliteui/dropdown
```

usage
```jsx
import { Dropdown } from "@fluentliteui/dropdown";
import "@fluentliteui/dropdown/dist/index.css";

function App() {
  const [dropdownValue, setDropdownValue] = useState<string | number | boolean>("tom");
  <Dropdown className="my-dropdown" disabled={false} label={"name"} value={dropdownValue} options={[{
          title: "Tom",
          key: "tom",
          value: "tom"
        }, {
          title: "Jerry",
          key: "jerry",
          value: "Jerry"
        }]} onOptionChange={setDropdownValue} />
}
```
npm package: @fluentliteui/loading
Description: install ``` yarn add @fluentliteui/loading ```
Author: kasagawa
Latest version: 0.0.13

# @fluentliteui/loading

install
```
yarn add @fluentliteui/loading
```

usage
```jsx
import { loading } from "@fluentliteui/loading";
import "@fluentliteui/loading/dist/index.css";

function App() {
  <Loading loading={true}>
    <p>1</p>
    <p>2</p>
    <p>3</p>        
  </Loading>
}
```
npm package: @fluentliteui/pagenav
Description: install ``` yarn add @fluentliteui/pagenav ```
Author: kasagawa
Latest version: 0.0.26

# @fluentliteui/pagenav

install
```
yarn add @fluentliteui/pagenav
```

usage
```jsx
import { pagenav } from "@fluentliteui/pagenav";
import "@fluentliteui/pagenav/dist/index.css";

function App() {
  const [pageNavAction, setPageNavAction] = useState<number>(1);
  return <Pagenav max={30} unactiveStyle={{background:"rgb(240, 240, 240)",border:"solid 1px rgb(240, 240, 240)"}} active={pageNavAction} onPageChange={setPageNavAction} />
}
```
npm package: @fluentliteui/popover
Description: install ``` yarn add @fluentliteui/popover ```
Author: kasagawa
Latest version: 0.0.11

# @fluentliteui/popover

install
```
yarn add @fluentliteui/popover
```

usage
```jsx
import { Popover } from "@fluentliteui/popover";
import "@fluentliteui/popover/dist/index.css";

function App() {
    return <>
        <Popover pop={<div style={{ width: "100px" }}><h2>hello</h2><p>tom</p></div>}><Button>helllo</Button></Popover>
    <>
}
```
npm package: @fluentliteui/space
Description: install ``` yarn add @fluentliteui/space ```
Author: kasagawa
Latest version: 0.0.1

# @fluentliteui/space

install
```
yarn add @fluentliteui/space
```

usage
```jsx
import { space } from "@fluentliteui/space";
import "@fluentliteui/space/dist/index.css";

function App() {
    return <>
        <Space>
          <p>1</p>
          <p>2</p>
          <p>3</p>
        </Space>
        <Space gap={0} direction="column">
          <p>1</p>
          <p>2</p>
          <p>3</p>
        </Space>
    <>
}
```
npm package: @fluentui-contrib/azure-theme
Description: Azure Theme package powered by Fluent UI and used in Microsoft Azure.
Latest version: 0.2.0

# @fluentui-contrib/azure-theme

Azure Theme package powered by Fluent UI and used in Microsoft Azure.

## Requirements

Node 20

## Try it out

```sh
yarn add @fluentui-contrib/azure-theme

npm install @fluentui-contrib/azure-theme
```

```tsx
import * as React from 'react';
import { Button } from '@fluentui/react-components';
import { FluentProvider, button } from '@fluentui/react-components';
import { AzureDarkTheme } from '@fluentui-contrib/azure-theme';

function App() {
  const theme = AzureDarkTheme; // or AzureLightTheme

  return (
    <FluentProvider theme={theme}>
      <Button>Azure Themed Button</Button>
    </FluentProvider>
  );
}
```
npm package: @fluentui-contrib/houdini-utils
Description: This library exposes some low level utilities to use the [houdini APIs](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) as well as a canvas fallback that should be usable with the [paint worklet](https://developer.mozilla.org/en-US/docs/Web
Latest version: 0.5.2

# @fluentui-contrib/houdini-utils

This library exposes some low level utilities to use the [houdini APIs](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs)
as well as a canvas fallback that should be usable with the [paint worklet](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API#the_paint_worklet) that would normally be used by houdini.

Please refer to the [documentation samples](https://microsoft.github.io/fluentui-contrib/houdini-utils/) for usage guidance
npm package: @fluentui-contrib/pierce-dom
Description: This package provides "shadow DOM aware" implementatons of browser DOM APIs allowing, for example, traversal of DOM trees containing shadow roots.
Latest version: 0.1.2

# @fluentui-contrib/pierce-dom

This package provides "shadow DOM aware" implementatons of browser DOM APIs allowing, for example, traversal of DOM trees containing shadow roots.

## Background

Consider the following HTML snippet:

```html
<button>Light DOM button</button>
<custom-element>
  #shadow-root
  <button>Shadow DOM button</button>
</custom-element>
```

When `Light DOM button` has focus `document.activeElement` points to the DOM node associated with this element. When `Shadow DOM button` has focus `document.activeElement` points to `<custom-element>`, which is probably not useful information for your application.

This can be worked around by inspecting [ShadowRoot.activeElement](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/activeElement) to get a reference to the actual focused element.

## Limitations

`pierce-dom` only supports open shadow roots. Closed shadow roots are ignored.

Slots support is not implemented yet.

## Using with FluentUI React keyboarg navigation

```sh
yarn add @fluentui-contrib/pierce-dom

npm install @fluentui-contrib/pierce-dom
```

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider } from '@fluentui/react-components';
import { useShadowDOMSupport } from '@fluentui-contrib/pierce-dom';

import App from './App';

const ShadowDOMSupport = () => {
  // This hook must be called before the app starts rendering the UI.
  useShadowDOMSupport();
  return null;
};

ReactDOM.render(
  <FluentProvider>
    <ShadowDOMSupport />
    <App />
  </FluentProvider>,
  document.getElementById('root')
);
```
npm package: @fluentui-contrib/react-cap-theme
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.2.4

# react-cap-theme

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build react-cap-theme` to build the library.

## Running unit tests

Run `nx test react-cap-theme` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @fluentui-contrib/react-chat
Description: Chat component powered by Fluent UI and used in Microsoft Teams.
Latest version: 0.2.2

# @fluentui-contrib/react-chat

Chat component powered by Fluent UI and used in Microsoft Teams.

## Try it out

```sh
yarn add @fluentui-contrib/react-chat

npm install @fluentui-contrib/react-chat
```

```tsx
import * as React from 'react';
import { Avatar } from '@fluentui/react-components';
import { Chat, ChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';

export const SampleChat = () => {
  return (
    <Chat>
      <ChatMessage avatar={<Avatar name="Ashley McCarthy" badge={{ status: 'available' }} />}>Hello I am Ashley</ChatMessage>
      <ChatMyMessage>Nice to meet you!</ChatMyMessage>
    </Chat>
  );
};
```
npm package: @fluentui-contrib/react-data-grid-react-window
Description: A variant of the Fluent UI [DataGrid](https://react.fluentui.dev/?path=/docs/components-datagrid--default) that is virtualized using [react-window](https://react-window.vercel.app/#/examples/list/fixed-size).
Latest version: 1.4.2

# @fluentui-contrib/react-data-grid-react-window

A variant of the Fluent UI [DataGrid](https://react.fluentui.dev/?path=/docs/components-datagrid--default) that is
virtualized using [react-window](https://react-window.vercel.app/#/examples/list/fixed-size).

## Try it out

```sh
yarn add @fluentui-contrib/react-data-grid-react-window

npm install @fluentui-contrib/react-data-grid-react-window
```

For a full usage example please take a look at [The documentation sample](https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-data-grid-react-window/stories/DataGrid/VirtualizedDataGrid.stories.tsx).
npm package: @fluentui-contrib/react-data-grid-react-window-grid
Description: A variant of the Fluent UI [DataGrid](https://react.fluentui.dev/?path=/docs/components-datagrid--default) that is virtualized 2 dimentionally using [react-window](https://react-window.vercel.app/#/examples/grid/variable-size).
Latest version: 2.4.2

# @fluentui-contrib/react-data-grid-react-window-grid

A variant of the Fluent UI [DataGrid](https://react.fluentui.dev/?path=/docs/components-datagrid--default) that is
virtualized 2 dimentionally using [react-window](https://react-window.vercel.app/#/examples/grid/variable-size).

## Building

Run `nx build react-data-grid-react-window-grid` to build the library.

## What is different from `react-data-grid-react-window`?

- `react-data-grid-react-window` support vertical virtualization using FixedSizeList in react-window
- `react-data-grid-react-window-grid` support 2 dimentional virtualization (including both horizontal and vertical) using VariableSizeGrid in react-window.
- `react-data-grid-react-window-grid` has a virtualized header as well using VariableSizeList in react-window

## `DataGridHeaderRow`

Be aware of `DataGridHeaderRow` is a new component that does not has in fluentui v9 `DataGrid`, it is for supporting header virtualization. And be aware of there is no need to use `DataGridRow` in `react-data-grid-react-window-grid`, as for virtualized grid is using cell to render instead of using row.

## Try it out

```sh
yarn add @fluentui-contrib/react-data-grid-react-window-grid

npm install @fluentui-contrib/react-data-grid-react-window-grid
```

For a full usage example please take a look at [the documentation sample](https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-data-grid-react-window-grid/stories/DataGrid/VirtualizedDataGrid.stories.tsx), and
[Storybook](https://microsoft.github.io/fluentui-contrib/react-data-grid-react-window-grid/?path=/story/datagrid--virtualized-data-grid).
npm package: @fluentui-contrib/react-headless-provider
Description: A package that provides a headless provider, a replacement in some cases for `FluentProvider` from `@fluentui/react-components`.
Latest version: 1.0.6

# @fluentui/react-headless-provider

A package that provides a headless provider, a replacement in some cases for `FluentProvider` from `@fluentui/react-components`.

`HeadlessFluentProvider` does not render additional any DOM elements, only applies React Contexts needed for components from `@fluentui/react-components` to render properly.

Following features work:

- rendering into different documents i.e. `targetDocument` prop
- `customStyleHooks_unstable` & `overrides_unstable` props

Following features don't work:

- scoped theming, in this scenario theming should be configured globally or separately
- scoped "dir", in this scenario text direction should be configured globally or separately
- polyfill for `:focus-visible` (`useFocusVisible()` from `@fluentui/react-tabster`) should be initialized separately

Designed to be used with [`createCSSRuleFromTheme()`](https://github.com/microsoft/fluentui/pull/29052), see for context [microsoft/fluentui#21290](https://github.com/microsoft/fluentui/issues/21290).

## Install

```sh
yarn add @fluentui-contrib/react-headless-provider
# or
npm install @fluentui-contrib/react-headless-provider
```

## Usage

```tsx
import * as React from 'react';
import { HeadlessFluentProvider } from '@fluentui-contrib/react-headless-provider';

export function RootContainer(props) {
  const { targetDocument } = props;

  return <HeadlessFluentProvider targetDocument={targetDocument}>{/* children */}</HeadlessFluentProvider>;
}
```
npm package: @fluentui-contrib/react-shadow
Description: React components for Shadow DOM
Latest version: 0.1.4

# @fluentui-contrib/react-shadow

This package provides a React component that renders its children inside a shadow DOM.

## Installation

```bash
yarn add @fluentui-contrib/react-shadow
```

## Usage

```tsx
import * as React from 'react';
import { root } from '@fluentui-contrib/react-shadow';

export const App = () => (
  <root.div>
    <div>Shadow DOM</div>
  </root.div>
);
```
npm package: @fluentui-contrib/react-themeless-provider
Description: This package provides `ThemelessFluentProvider`, a replacement for `FluentProvider` when the provider needs to be rendered inside shadow DOM.
Latest version: 0.2.2

# @fluentui-contrib/react-themeless-provider

This package provides `ThemelessFluentProvider`, a replacement for `FluentProvider` when the provider needs to be rendered inside shadow DOM.

`ThemelessFluentProvider` does not render the theme contexts or inject theme CSS custom properties into the DOM. When using this provider you are responsible for setting the necessary CSS custom properties in such a way that they will pierce the shadow DOM (e.g., apply them to `:root`).

## Install

```sh
yarn add @fluentui-contrib/react-themeless-provider
# or
npm install @fluentui-contrib/react-themeless-provider
```

## Usage

```tsx
import * as React from 'react';
import { root } from '@fluentui-contrib/react-shadow';
import { ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider';
import { createCSSRuleFromTheme, webLightTheme, Button } from '@fluentui/react-components';

export function App() {
  React.useEffect(() => {
    // Example of how to create a style that will piece the shadow DOM.
    // This does not need to be created by React and can be created
    // by a host Web Component application for example.
    const cssRule = createCSSRuleFromTheme(':root', webLightTheme);
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet.insertRule(cssRule);

    return () => {
      document.head.removeChild(style);
    }
  }, []);

  return (
    {/* renders a shadow root */}
    <root.div>
     <ThemelessFluentProvider>
        <Button>A themed Fluent React Button in shadow DOM</Button>
      </ThemelessFluentProvider>
    </root.div>
  );
}
```
npm package: @fluentui-contrib/react-tree-grid
Description: This package provides a set of styleless components to implement the `treegrid` navigation pattern.
Latest version: 0.3.2

# @fluentui-contrib/react-tree-grid

This package provides a set of styleless components to implement the `treegrid` navigation pattern.

## Installation

```bash
yarn add @fluentui-contrib/react-tree-grid
```

## Usage

Follow up on the [Storybook](https://microsoft.github.io/fluentui-contrib/react-tree-grid) for examples on how to use the components provided by this package.
npm package: @fluentui-contrib/react-virtualizer
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 1.0.0

# react-virtualizer

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build react-virtualizer` to build the library.

## Running unit tests

Run `nx test react-virtualizer` to execute the unit tests via [Jest](https://jestjs.io).

## Dependency

When taking @fluentui/react-contributor as a dependency, we recommend using the latest patch version i.e. "@fluentui-contrib/react-virtualizer": "~0.0.1".
This is due to major version bumps being reserved for future stable releases or major API changes, while minor versioning may contain smaller API modifications.

## Description

React-virtualizer is a new approach to virtualization that uses IntersectionObserver to enable scroll detection.

The core benefit of this method, is that the virtualization itself is disconnected from both a scroll container, and any JS loop detection, to increase flexibility and react performance.

This enables virtualization in the top level HTML page body, as well as multiple virtualized lists in a single scroll view.

## Usage

It is recommended to use the ScrollView versions of this virtualizer for simple virtualization scenarios, as it simplifies the encapsulation of virtualizer hooks and provides access to internal variables via context.

If more complex virtualization is needed, a variety of static/dynamic hooks has been provided to configure virtualizer variants, be sure to take a look at the base virtualizer stories to see core implementation, or implement the hooks similar to the internal usage of VirtualizerScrollView/VirtualizerScrollViewDynamic.
npm package: @fluentui-contrib/stylelint-plugin
Description: This stylelint plugin contains rules that are (first and foremost) applicable to Fluent UI. These rules can also be used with projects that do not use Fluent UI or [Griffel](https://griffel.js.org/), but support is not guaranteed.
Latest version: 0.2.2

# @fluentui-contrib/stylelint-plugin

This stylelint plugin contains rules that are (first and foremost) applicable to Fluent UI. These rules
can also be used with projects that do not use Fluent UI or [Griffel](https://griffel.js.org/), but support
is not guaranteed.

## Install

```sh
yarn add @fluentui-contrib/stylelint-plugin

npm install @fluentui-contrib/stylelint-plugin
```

## Configuration

```js
// .stylelintrc.js

module.exports = {
  plugins: ['@fluentui-contrib/stylelint-plugin'],
  rules: {
    '@fluentui-contrib/combinator-depth': [0],
  },
  defaultSeverity: 'error',
};
```
npm package: @fluentui-contrib/variant-theme
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.1.1

# @fluentui-contrib/variant-theme

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build variant-theme` to build the library.

## Running unit tests

Run `nx test variant-theme` to execute the unit tests via [Jest](https://jestjs.io).
npm package: @fluentui-react-native/component-cache
Description: Simple caching package to avoid duplicate requireNativeComponent calls
Latest version: 1.6.1

# @fluentui-react-native/component-cache

This is a simple wrapper to ensure that `requireNativeComponent` doesn't get called multiple times and that multiple consuming controls can reference the same HostComponent. It is designed to be very rarely changed, this helps insulate against multiple versions of a component in the same bundle making rNC calls.
npm package: @fluentui-react-native/dependency-profiles
Description: @rnx-kit/align-deps profiles covering packages published from FluentUI-React-Native
Latest version: 0.8.70

# @fluentui-react-native/dependency-profiles

[![npm version](https://badge.fury.io/js/@fluentui-react-native%2Fdependency-profiles.svg)](https://badge.fury.io/js/@fluentui-react-native%2Fdependency-profiles)

`@fluentui-react-native/dependency-profiles` is a package that contains dependency profiles for FluentUI React Native. A dependency profile is a set of package@version mappings, usually tied to a single version of react-native. These profiles can be used by users of `@rnx-kit/align-deps` to manage FURN dependencies in their repo. To learn more about `@rnx-kit/align-deps`, visit https://microsoft.github.io/rnx-kit/docs/tools/align-deps.

## Usage

If you have an existing repo that uses FURN and you would like to stay up-to-date on the latest versions of FURN packages for a specific version of react-native, you can start by installing `@rnx-kit/align-deps`. Installation and usage instructions can be found here: https://microsoft.github.io/rnx-kit/docs/tools/align-deps.

Once `@rnx-kit/align-deps` is installed, you can add `@fluentui-react-native/dependency-profiles` as a dependency in your repo.

```
yarn add @fluentui-react-native/dependency-profiles --dev
```

or

```
npm add --save-dev @fluentui-react-native/dependency-profiles
```

Next, configure each of your onboarded React Native packages to use a profile from `@fluentui-react-native/dependency-profiles` for the react-native version you're using under "presets". You can read more about configurations here: https://microsoft.github.io/rnx-kit/docs/tools/align-deps#configure and presets here: https://microsoft.github.io/rnx-kit/docs/tools/align-deps#presets.

```
+ const furnProfiles = require('@fluentui-react-native/dependency-profiles');
+ const furnProfile = furnProfiles[0.68];

 .
 .
 .

 {
   "rnx-kit": {
     "alignDeps": {
+      "presets": [
+        "furnProfile"
+      ],
       "requirements": [
        "react-native@0.68"
       ],
       "capabilities": [
         "core-android",
         "core-ios",
         "core-macos",
         "core-windows",
         "react"
       ]
     }
   }
 }
```

Now, you can use the `@rnx-kit/align-deps` tool to keep your FURN dependencies up-to-date by updating `@fluentui-react-native/dependency-profiles` to newer versions and running `yarn rnx-align-deps --write`.

## Note for Package Maintainers

Since this package is intended to contain multiple profiles for different versions of react-native, we need to make sure we save the current profile when updating the FURN repo to a newer version of react-native. To do this, copy the current profile (in index.js) to a new file under the src folder named `furn-profile-X.Y.js` where X.Y is the current version of react-native (for example, `furn-profile-0.68.js`). Next, add this file to the list of profiles in update-profile.js after "[`${major}.${minor}`]: packages" (which lists the profile for the new version of react-native you're updating to).