Skip to content

AxisCommunications/fluent-components

Repository files navigation

React components for use React & Fluent v9

ci

React: The components work with a range of React versions as specified in the peer dependencies. However, we've experienced type errors in slots when using a @types/react version other than 17 (which is the version used by Fluent v9).

The React packages are based on the @fluentui/react-* v9 packages.

Usage

  1. Add registry to .npmrc, .yarnrc or similar, as well as your GitHub token:

    @axiscommunications:registry=https://npm.pkg.github.com
    //npm.pkg.github.com/:_authToken=TOKEN
    

    If using .yarnrc.yml this would instead be:

    npmScopes:
      axiscommunications:
        npmRegistryServer: "https://npm.pkg.github.com"
        npmAuthToken: TOKEN
    
  2. Add the @fluentui/react-components, @fluentui/react-icons, @axiscommunications/fluent-theme and @axiscommunications/fluent-icons packages.

    npm add @fluentui/react-components @fluentui/react-icons @axiscommunications/fluent-theme @axiscommunications/fluent-icons
  3. Start using Fluent UI v9 in and the Axis theme in in your application

    import React from "react";
    import { FluentProvider } from "@fluentui/react-components";
    import { axisDarkTheme } from "@axiscommunications/fluent-theme";
    import { createRoot } from "react-dom/client";
    
    const container = document.getElementById("root");
    const root = createRoot(container!);
    
    root.render(
      <React.StrictMode>
        <FluentProvider theme={axisDarkTheme}>
          <App />
        </FluentProvider>
      </React.StrictMode>
    );

Contributing

Make sure you have node and pnpm installed.

  1. Clone this repository

    git clone git@github.com:AxisCommunications/fluent-components.git
  2. Install all dependencies

    pnpm install
  3. Build all packages

    pnpm build
  4. Run examples

    pnpm dev

Development

The following is one example of how to use a local version while developing.

  1. Application project's package.json: "@axiscommunications/fluent-topbar": "portal:path/to/repo/top-bar"
  2. Application project's esbuild config: { preserveSymlinks: true }
  3. path/to/repo/top-bar/node_modules: rm react -rf

This setup avoids bundling multiple copies of React. The application project's dev server will pick up changes only after running pnpm build, not when source files change.

Release a new version

  1. Checkout a new temporary branch for the release PR (e.g. rel)

    git fetch
    git switch -c rel origin/main
  2. Create release commit on the branch

    pnpm exec release major|minor|patch

    or to release an alpha version

    pnpm exec release premajor|preminor|prepatch|prerelease
  3. Push release branch

    git push origin rel
  4. Create a PR on GitHub, and when it's merged, it will automatically deploy NPM packages and create a GitHub release. Make sure the rel branch is removed after the PR is merged, that makes it easier to re-use it later on.

Notes

When bumping @fluentui/react-components it is preferred to regenerate theme-tokens due to potential updates to tokens. These generated files are used for applications not able to run @fluentui, but still be able to use the themes.

pnpm --filter @axiscommunications/fluent-theme tokens:runall