├── .editorconfig ├── .github ├── CODEOWNERS ├── dependabot.yml └── workflows │ ├── ci-change.yml │ ├── ci.yml │ └── docs.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .storybook ├── copied-from-fluentui-core │ ├── components │ │ ├── FluentDocsContainer.tsx │ │ ├── FluentDocsPage.tsx │ │ └── Toc.tsx │ ├── docs-root-v9.css │ └── docs-root.css ├── main.ts ├── preview.tsx └── tsconfig.json ├── .syncpackrc ├── .verdaccio └── config.yml ├── .vscode ├── extensions.json └── settings.json ├── .yarn └── releases │ └── cli.js ├── .yarnrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── SUPPORT.md ├── apps └── docsite │ ├── .babelrc │ ├── .storybook │ ├── main.ts │ ├── manager.ts │ ├── preview.tsx │ ├── theme.ts │ └── tsconfig.json │ ├── eslint.config.js │ ├── project.json │ ├── public │ └── fluentui-logo.svg │ ├── src │ └── Welcome.mdx │ └── tsconfig.json ├── azure-pipelines.yml ├── babel.config.json ├── beachball.config.js ├── beachball.hooks.js ├── eslint.config.js ├── jest.config.ts ├── jest.preset.js ├── migrations.json ├── nx.json ├── package.json ├── packages ├── azure-theme │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── AzureDarkTheme │ │ │ │ ├── AzureDarkTheme.test.tsx │ │ │ │ ├── AzureDarkTheme.tsx │ │ │ │ └── index.tsx │ │ │ └── AzureLightTheme │ │ │ │ ├── AzureLightTheme.test.tsx │ │ │ │ ├── AzureLightTheme.tsx │ │ │ │ └── index.tsx │ │ ├── index.ts │ │ └── tokens │ │ │ ├── brandRamp.tsx │ │ │ └── colorPalette.tsx │ ├── stories │ │ ├── .gitkeep │ │ ├── Accordion.stories.tsx │ │ ├── All.stories.tsx │ │ ├── Avatar.stories.tsx │ │ ├── AvatarGroup.stories.tsx │ │ ├── Badge.stories.tsx │ │ ├── Breadcrumb.stories.tsx │ │ ├── Buttons.stories.tsx │ │ ├── Cards.stories.tsx │ │ ├── Checkbox.stories.tsx │ │ ├── Combobox.stories.tsx │ │ ├── DataGrid.stories.tsx │ │ ├── Dialog.stories.tsx │ │ ├── Divider.stories.tsx │ │ ├── Drawer.stories.tsx │ │ ├── Dropdown.stories.tsx │ │ ├── Field.stories.tsx │ │ ├── InfoLabel.stories.tsx │ │ ├── Input.stories.tsx │ │ ├── Label.stories.tsx │ │ ├── Link.stories.tsx │ │ ├── Menu.stories.tsx │ │ ├── MessageBar.stories.tsx │ │ ├── Overflow.stories.tsx │ │ ├── Persona.stories.tsx │ │ ├── Popover.stories.tsx │ │ ├── RadioGroup.stories.tsx │ │ ├── Select.stories.tsx │ │ ├── Skeleton.stories.tsx │ │ ├── Slider.stories.tsx │ │ ├── SpinButton.stories.tsx │ │ ├── Switch.stories.tsx │ │ ├── TabList.stories.tsx │ │ ├── Table.stories.tsx │ │ ├── Text.stories.tsx │ │ ├── Textarea.stories.tsx │ │ ├── Toast.stories.tsx │ │ ├── Toolbar.stories.tsx │ │ ├── Tooltip.stories.tsx │ │ ├── Tree.stories.tsx │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── houdini-utils │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ ├── paint │ │ │ ├── fallback │ │ │ │ ├── animate.ts │ │ │ │ ├── anims │ │ │ │ │ └── play.ts │ │ │ │ ├── fallbackPaintAnimation.ts │ │ │ │ ├── keyframe.ts │ │ │ │ ├── lerp.ts │ │ │ │ └── util │ │ │ │ │ ├── canvas.ts │ │ │ │ │ ├── color.test.ts │ │ │ │ │ ├── color.ts │ │ │ │ │ ├── css.test.ts │ │ │ │ │ ├── css.ts │ │ │ │ │ └── wrapper.ts │ │ │ └── houdini │ │ │ │ └── registerPaintWorklet.ts │ │ ├── types.ts │ │ └── util │ │ │ ├── addModule.ts │ │ │ ├── blobify.ts │ │ │ └── featureDetect.ts │ ├── stories │ │ └── Utils │ │ │ ├── Default.stories.tsx │ │ │ ├── Fallback.stories.tsx │ │ │ ├── FallbackWithDuration.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tsconfig.storybook.json ├── nx-plugin │ ├── .swcrc │ ├── README.md │ ├── eslint.config.js │ ├── executors.json │ ├── generators.json │ ├── jest-setup.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── executors │ │ │ ├── build │ │ │ │ ├── executor.spec.ts │ │ │ │ ├── executor.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ ├── playwright │ │ │ │ ├── executor.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ └── type-check │ │ │ │ ├── executor.spec.ts │ │ │ │ ├── executor.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ ├── generators │ │ │ ├── add-codeowners.spec.ts │ │ │ ├── add-codeowners.ts │ │ │ ├── component-playwright-spec │ │ │ │ ├── files │ │ │ │ │ └── src │ │ │ │ │ │ └── components │ │ │ │ │ │ └── __componentName__ │ │ │ │ │ │ └── __componentName__.component-browser-spec.tsx.template │ │ │ │ ├── generator.spec.ts │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ ├── component │ │ │ │ ├── files │ │ │ │ │ ├── src │ │ │ │ │ │ └── components │ │ │ │ │ │ │ └── __componentName__ │ │ │ │ │ │ │ ├── __componentName__.styles.ts.template │ │ │ │ │ │ │ ├── __componentName__.test.tsx.template │ │ │ │ │ │ │ ├── __componentName__.tsx.template │ │ │ │ │ │ │ └── index.ts.template │ │ │ │ │ └── stories │ │ │ │ │ │ └── __componentName__ │ │ │ │ │ │ ├── Default.stories.tsx.template │ │ │ │ │ │ └── index.stories.tsx.template │ │ │ │ ├── generator.spec.ts │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ ├── schema.json │ │ │ │ └── update-dependencies.ts │ │ │ ├── configure-storybook │ │ │ │ ├── files │ │ │ │ │ ├── .babelrc.template │ │ │ │ │ ├── .storybook │ │ │ │ │ │ ├── main.ts.template │ │ │ │ │ │ ├── preview.tsx.template │ │ │ │ │ │ └── tsconfig.json.template │ │ │ │ │ └── stories │ │ │ │ │ │ └── .gitkeep │ │ │ │ ├── generator.spec.ts │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ ├── library │ │ │ │ ├── files │ │ │ │ │ ├── .swcrc │ │ │ │ │ ├── eslint.config.js.template │ │ │ │ │ ├── src │ │ │ │ │ │ └── index.ts.template │ │ │ │ │ ├── tsconfig.json.template │ │ │ │ │ ├── tsconfig.lib.json.template │ │ │ │ │ └── tsconfig.spec.json.template │ │ │ │ ├── findInstalledReactComponentsVersion.ts │ │ │ │ ├── generator.spec.ts │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ └── playwright-component-configuration │ │ │ │ ├── files │ │ │ │ ├── playwright.config.ts.template │ │ │ │ └── playwright │ │ │ │ │ ├── index.html.template │ │ │ │ │ └── index.tsx.template │ │ │ │ ├── generator.spec.ts │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ ├── index.ts │ │ ├── utils-testing.ts │ │ └── utils.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── pierce-dom │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ └── index.ts │ ├── stories │ │ └── .gitkeep │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-chat │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── Chat │ │ │ │ ├── Chat.test.tsx │ │ │ │ ├── Chat.tsx │ │ │ │ ├── Chat.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderChat.tsx │ │ │ │ ├── useChat.ts │ │ │ │ ├── useChatMoverAttribute.tsx │ │ │ │ └── useChatStyles.styles.ts │ │ │ ├── ChatMessage │ │ │ │ ├── ChatMessage.styles.ts │ │ │ │ ├── ChatMessage.test.tsx │ │ │ │ ├── ChatMessage.tsx │ │ │ │ ├── ChatMessage.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderChatMessage.tsx │ │ │ │ └── useChatMessage.ts │ │ │ ├── ChatMyMessage │ │ │ │ ├── ChatMyMessage.styles.ts │ │ │ │ ├── ChatMyMessage.test.tsx │ │ │ │ ├── ChatMyMessage.tsx │ │ │ │ ├── ChatMyMessage.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderChatMyMessage.tsx │ │ │ │ └── useChatMyMessage.tsx │ │ │ ├── styles │ │ │ │ ├── shared.mixins.ts │ │ │ │ └── shared.styles.ts │ │ │ └── utils │ │ │ │ ├── getDecorationIcon.tsx │ │ │ │ ├── mergeCallbacks.ts │ │ │ │ ├── useChatMessagePopoverTrigger.test.ts │ │ │ │ ├── useChatMessagePopoverTrigger.ts │ │ │ │ └── useEventCallback.ts │ │ └── index.ts │ ├── stories │ │ ├── Chat │ │ │ ├── ChatWithFocusableContent.stories.tsx │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ │ ├── ChatMessage │ │ │ ├── Decoration.stories.tsx │ │ │ ├── Default.stories.tsx │ │ │ ├── Slots.stories.tsx │ │ │ └── index.stories.tsx │ │ └── ChatMyMessage │ │ │ ├── Decoration.stories.tsx │ │ │ ├── Default.stories.tsx │ │ │ ├── Slots.stories.tsx │ │ │ ├── Status.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-contextual-pane │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── README.md │ ├── eslint.config.cjs │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── Footer │ │ │ │ ├── Footer.styles.ts │ │ │ │ ├── Footer.test.tsx │ │ │ │ ├── Footer.tsx │ │ │ │ └── index.ts │ │ │ └── Header │ │ │ │ ├── Header.styles.ts │ │ │ │ ├── Header.test.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── HeaderTitle.tsx │ │ │ │ └── index.ts │ │ ├── index.ts │ │ └── lib │ │ │ └── useEllipsisCheck.tsx │ ├── stories │ │ ├── .gitkeep │ │ ├── Footer │ │ │ ├── CustomChildren.stories.tsx │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ │ ├── Header │ │ │ ├── Actions.stories.tsx │ │ │ ├── Brand.stories.tsx │ │ │ ├── Default.stories.tsx │ │ │ ├── LongTitle.stories.tsx │ │ │ ├── Truncation.stories.tsx │ │ │ ├── index.stories.tsx │ │ │ └── styles.ts │ │ └── Mock │ │ │ ├── Avatar.tsx │ │ │ └── mocks.styles.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-data-grid-react-window-grid │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── DataGrid │ │ │ │ ├── DataGrid.tsx │ │ │ │ ├── DataGrid.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderDataGrid.tsx │ │ │ │ └── useDataGrid.ts │ │ │ ├── DataGridBody │ │ │ │ ├── DataGridBody.tsx │ │ │ │ ├── DataGridBody.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderDataGridBody.tsx │ │ │ │ ├── useDataGridBody.tsx │ │ │ │ └── useDataGridBodyStyles.styles.ts │ │ │ ├── DataGridCell │ │ │ │ ├── DataGridCell.tsx │ │ │ │ ├── index.ts │ │ │ │ └── useDataGridCell.ts │ │ │ ├── DataGridHeaderCell │ │ │ │ ├── DataGridHeaderCell.tsx │ │ │ │ ├── index.ts │ │ │ │ └── useDataGridHeaderCell.ts │ │ │ └── DataGridHeaderRow │ │ │ │ ├── DataGridHeaderRow.tsx │ │ │ │ ├── DataGridHeaderRow.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderDataGridHeaderRow.tsx │ │ │ │ └── useDataGridHeaderRow.tsx │ │ ├── contexts │ │ │ ├── bodyRefContext.ts │ │ │ ├── columnIndexContext.ts │ │ │ ├── headerListRefContext.ts │ │ │ └── rowIndexContext.ts │ │ └── index.ts │ ├── stories │ │ └── DataGrid │ │ │ ├── DataGridScrollingIndicators.stories.tsx │ │ │ ├── VirtualizedDataGrid.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-data-grid-react-window │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── DataGrid │ │ │ │ ├── DataGrid.tsx │ │ │ │ ├── DataGrid.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderDataGrid.tsx │ │ │ │ └── useDataGrid.ts │ │ │ ├── DataGridBody │ │ │ │ ├── DataGridBody.tsx │ │ │ │ ├── DataGridBody.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderDataGridBody.tsx │ │ │ │ ├── useDataGridBody.tsx │ │ │ │ └── useDataGridBodyStyles.styles.ts │ │ │ ├── DataGridHeader │ │ │ │ ├── DataGridHeader.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── useDataGridHeader.ts │ │ │ │ └── useDataGridHeaderStyles.styles.ts │ │ │ └── DataGridRow │ │ │ │ ├── DataGridRow.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── useDataGridRow.styles.ts │ │ │ │ └── useDataGridRow.tsx │ │ ├── contexts │ │ │ ├── bodyRefContext.ts │ │ │ ├── headerRefContext.ts │ │ │ └── rowIndexContext.ts │ │ └── index.ts │ ├── stories │ │ └── DataGrid │ │ │ ├── DataGridScrollingIndicators.stories.tsx │ │ │ ├── ReactWindowOverrides.stories.tsx │ │ │ ├── ResizableDataGrid.stories.tsx │ │ │ ├── VirtualizedDataGrid.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-draggable-dialog │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ │ ├── index.html │ │ └── index.tsx │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── DraggableDialog │ │ │ │ ├── DraggableDialog.component-browser-spec.tsx │ │ │ │ ├── DraggableDialog.test.tsx │ │ │ │ ├── DraggableDialog.tsx │ │ │ │ ├── DraggableDialog.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── useDraggableDialog.test.ts │ │ │ │ ├── useDraggableDialog.ts │ │ │ │ └── utils │ │ │ │ │ ├── getParsedDraggableMargin.ts │ │ │ │ │ └── restrictToMarginModifier.ts │ │ │ ├── DraggableDialogHandle │ │ │ │ ├── DraggableDialogHandle.styles.ts │ │ │ │ ├── DraggableDialogHandle.test.tsx │ │ │ │ ├── DraggableDialogHandle.tsx │ │ │ │ ├── DraggableDialogHandle.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── useDraggableDialogHandle.test.ts │ │ │ │ └── useDraggableDialogHandle.ts │ │ │ └── DraggableDialogSurface │ │ │ │ ├── DraggableDialogSurface.styles.ts │ │ │ │ ├── DraggableDialogSurface.test.tsx │ │ │ │ ├── DraggableDialogSurface.tsx │ │ │ │ ├── DraggableDialogSurface.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── useDraggableDialogSurface.test.ts │ │ │ │ └── useDraggableDialogSurface.ts │ │ ├── contexts │ │ │ └── DraggableDialogContext.ts │ │ ├── index.ts │ │ └── utils │ │ │ └── assertDialogParent.ts │ ├── stories │ │ └── DraggableDialog │ │ │ ├── CustomBoundary.stories.tsx │ │ │ ├── Default.stories.tsx │ │ │ ├── InitialPosition.stories.tsx │ │ │ ├── NoBoundary.stories.tsx │ │ │ ├── WithMargin.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-gamepad-navigation │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ │ ├── index.html │ │ └── index.tsx │ ├── project.json │ ├── src │ │ ├── core │ │ │ ├── Constants.ts │ │ │ ├── GamepadEvents.ts │ │ │ ├── GamepadMappings.ts │ │ │ ├── GamepadUtils.ts │ │ │ ├── InputManager.ts │ │ │ ├── InputProcessor.ts │ │ │ └── NavigationManager.ts │ │ ├── hooks │ │ │ ├── useGamepadNavigation.test.ts │ │ │ ├── useGamepadNavigation.ts │ │ │ ├── useGamepadNavigationGroup.test.ts │ │ │ └── useGamepadNavigationGroup.ts │ │ ├── index.ts │ │ └── types │ │ │ ├── DirectionalSource.ts │ │ │ ├── FluentGPNShadowDOMAPI.ts │ │ │ ├── FocusDirection.ts │ │ │ ├── GamepadEventHandlers.ts │ │ │ ├── InputMode.ts │ │ │ ├── Keys.ts │ │ │ └── Trigger.ts │ ├── stories │ │ ├── .gitkeep │ │ ├── ComposedElements.stories.tsx │ │ ├── Default.stories.tsx │ │ ├── MultipleGroups.stories.tsx │ │ ├── SingleElements.stories.tsx │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-headless-provider │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ └── HeadlessFluentProvider │ │ │ │ ├── HeadlessFluentProvider.test.tsx │ │ │ │ ├── HeadlessFluentProvider.tsx │ │ │ │ └── index.ts │ │ └── index.ts │ ├── stories │ │ └── HeadlessFluentProvider │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-interactive-tab │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ │ ├── index.html │ │ └── index.tsx │ ├── project.json │ ├── src │ │ ├── components │ │ │ └── InteractiveTab │ │ │ │ ├── InteractiveTab.test.tsx │ │ │ │ ├── InteractiveTab.tsx │ │ │ │ ├── InteractiveTab.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── renderInteractiveTab.tsx │ │ │ │ ├── useInteractiveTab.ts │ │ │ │ └── useInteractiveTabStyles.styles.ts │ │ └── index.ts │ ├── stories │ │ ├── .gitkeep │ │ └── InteractiveTab │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-keytips │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── manager.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ │ ├── index.html │ │ └── index.tsx │ ├── project.json │ ├── src │ │ ├── Keytip.ts │ │ ├── Keytips.ts │ │ ├── components │ │ │ ├── Keytip │ │ │ │ ├── Keytip.test.tsx │ │ │ │ ├── Keytip.tsx │ │ │ │ ├── Keytip.types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── internal │ │ │ │ │ └── Keytip.types.ts │ │ │ │ ├── renderKeytip.tsx │ │ │ │ ├── useKeytip.tsx │ │ │ │ └── useKeytipStyles.styles.ts │ │ │ └── Keytips │ │ │ │ ├── Keytips.component-browser-spec.tsx │ │ │ │ ├── Keytips.test.tsx │ │ │ │ ├── Keytips.tsx │ │ │ │ ├── Keytips.types.ts │ │ │ │ ├── KeytipsExamples.component-browser-spec.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── renderKeytips.tsx │ │ │ │ └── useKeytips.tsx │ │ ├── constants.ts │ │ ├── docs │ │ │ ├── MIGRATION.md │ │ │ ├── Spec.md │ │ │ └── assets │ │ │ │ ├── positioning.png │ │ │ │ └── style-variants.png │ │ ├── hooks │ │ │ ├── useEventService.test.ts │ │ │ ├── useEventService.ts │ │ │ ├── useHotkeys │ │ │ │ ├── index.ts │ │ │ │ ├── isMatchingKeyboardEvent.ts │ │ │ │ ├── parseHotkey.ts │ │ │ │ ├── useHotkeys.test.ts │ │ │ │ ├── useHotkeys.ts │ │ │ │ └── useHotkeys.types.ts │ │ │ ├── useIsMacOS.test.ts │ │ │ ├── useIsMacOS.ts │ │ │ ├── useKeytipRef.test.ts │ │ │ ├── useKeytipRef.ts │ │ │ ├── useKeytipsManager.ts │ │ │ ├── useTree.test.ts │ │ │ └── useTree.ts │ │ ├── index.ts │ │ └── utilities │ │ │ ├── createNode.ts │ │ │ ├── index.ts │ │ │ ├── isDisabled.ts │ │ │ ├── isTargetVisible.ts │ │ │ ├── omit.ts │ │ │ └── sequencesToID.ts │ ├── stories │ │ ├── Default.md │ │ ├── Default.stories.tsx │ │ ├── Dynamic.md │ │ ├── Dynamic.stories.tsx │ │ ├── Overflow │ │ │ ├── Help │ │ │ │ └── index.tsx │ │ │ ├── Home │ │ │ │ ├── EmailMenuButton.tsx │ │ │ │ └── index.tsx │ │ │ ├── Overflow.stories.tsx │ │ │ ├── OverflowItemCustom.tsx │ │ │ ├── OverflowMenu.tsx │ │ │ ├── View │ │ │ │ └── index.tsx │ │ │ ├── keytipsMap.ts │ │ │ ├── shared.types.ts │ │ │ └── useStyles.ts │ │ ├── Shortcuts.md │ │ ├── Shortcuts.stories.tsx │ │ ├── WithTabs.stories.tsx │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-resize-handle │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ │ ├── index.html │ │ └── index.tsx │ ├── project.json │ ├── public │ │ └── demo.gif │ ├── src │ │ ├── hooks │ │ │ ├── useKeyboardHandler.ts │ │ │ ├── useMouseHandler.ts │ │ │ ├── useResizeHandle.component-browser-spec.tsx │ │ │ ├── useResizeHandle.test.tsx │ │ │ ├── useResizeHandle.ts │ │ │ ├── useResizeHandleExample.component-browser-spec.tsx │ │ │ ├── useUnitHandle.test.tsx │ │ │ └── useUnitHandle.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils │ │ │ ├── clamp.ts │ │ │ └── index.ts │ ├── stories │ │ ├── .gitkeep │ │ ├── Default.stories.tsx │ │ ├── Handle.tsx │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-shadow │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ ├── root.tsx │ │ └── types.ts │ ├── stories │ │ └── root │ │ │ ├── Default.stories.tsx │ │ │ ├── InsertionPoint.stories.tsx │ │ │ ├── Portals.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-themeless-provider │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ └── ThemelessFluentProvider │ │ │ │ ├── ThemelessFluentProvider.test.tsx │ │ │ │ ├── ThemelessFluentProvider.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── renderThemelessFluentProvider.tsx │ │ │ │ └── useThemelessFluentProviderStyles.styles.tsx │ │ ├── index.ts │ │ └── utils │ │ │ └── createCSSStyleSheetFromTheme.ts │ ├── stories │ │ ├── .gitkeep │ │ └── ThemelessFluentProvider │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── react-tree-grid │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ │ ├── index.html │ │ └── index.tsx │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── TreeGrid │ │ │ │ ├── TreeGrid.component-browser-spec.tsx │ │ │ │ ├── TreeGrid.tsx │ │ │ │ ├── TreeGrid.types.ts │ │ │ │ ├── TreeGridExample.component-browser-spec.tsx │ │ │ │ └── index.ts │ │ │ ├── TreeGridCell │ │ │ │ ├── TreeGridCell.tsx │ │ │ │ ├── TreeGridCell.types.ts │ │ │ │ └── index.ts │ │ │ ├── TreeGridInteraction │ │ │ │ ├── TreeGridInteraction.tsx │ │ │ │ ├── TreeGridInteraction.types.ts │ │ │ │ └── index.ts │ │ │ ├── TreeGridRow │ │ │ │ ├── TreeGridRow.tsx │ │ │ │ ├── TreeGridRow.types.ts │ │ │ │ ├── index.ts │ │ │ │ └── useTreeGridRowStyles.styles.ts │ │ │ └── TreeGridRowTrigger │ │ │ │ ├── TreeGridRowTrigger.tsx │ │ │ │ └── index.ts │ │ ├── contexts │ │ │ └── TreeGridRowContext.ts │ │ ├── hooks │ │ │ └── useFindParentRow.ts │ │ └── index.ts │ ├── stories │ │ ├── Calls.stories.tsx │ │ ├── Default.stories.tsx │ │ ├── EmailInbox.stories.tsx │ │ ├── LiveMeetingsList.stories.tsx │ │ ├── Meet.stories.tsx │ │ ├── Virtualization.stories.tsx │ │ ├── a11y.md │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── stylelint-plugin │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── create-rule.ts │ │ ├── get-doc-url.ts │ │ ├── has-docs.test.ts │ │ ├── index.ts │ │ ├── normalize-rule-name.ts │ │ ├── postcss-utils.ts │ │ └── rules │ │ │ ├── combinator-depth │ │ │ ├── README.md │ │ │ ├── combinator-depth.test.ts │ │ │ └── combinator-depth.ts │ │ │ └── no-focus-visible │ │ │ ├── README.md │ │ │ ├── no-focus-visible.test.ts │ │ │ └── no-focus-visible.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── teams-components │ ├── .babelrc │ ├── .storybook │ │ ├── main.ts │ │ ├── preview.tsx │ │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ ├── components │ │ │ ├── Button │ │ │ │ ├── Button.test.tsx │ │ │ │ ├── Button.tsx │ │ │ │ ├── index.ts │ │ │ │ └── validateProps.ts │ │ │ ├── MenuButton │ │ │ │ ├── MenuButton.styles.ts │ │ │ │ ├── MenuButton.test.tsx │ │ │ │ ├── MenuButton.tsx │ │ │ │ └── index.ts │ │ │ └── ToggleButton │ │ │ │ ├── ToggleButton.test.tsx │ │ │ │ ├── ToggleButton.tsx │ │ │ │ ├── index.ts │ │ │ │ └── validateProps.ts │ │ ├── index.ts │ │ ├── strictSlot.ts │ │ └── strictStyles │ │ │ ├── STRICT_SYMBOL.ts │ │ │ ├── createStrictClass.test.ts │ │ │ ├── createStrictClass.ts │ │ │ ├── index.ts │ │ │ ├── makeStrictStyles.production.test.ts │ │ │ ├── makeStrictStyles.test.ts │ │ │ ├── makeStrictStyles.ts │ │ │ ├── mergeStrictClasses.production.test.ts │ │ │ ├── mergeStrictClasses.test.ts │ │ │ ├── mergeStrictClasses.ts │ │ │ ├── types.ts │ │ │ ├── validateStrictClasses.test.ts │ │ │ └── validateStrictClasses.ts │ ├── stories │ │ ├── .gitkeep │ │ ├── Button │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ │ ├── MenuButton │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ │ └── ToggleButton │ │ │ ├── Default.stories.tsx │ │ │ └── index.stories.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── token-analyzer │ ├── .swcrc │ ├── README.md │ ├── eslint.config.cjs │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── project.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json └── variant-theme │ ├── .babelrc │ ├── .storybook │ ├── main.ts │ ├── preview.tsx │ └── tsconfig.json │ ├── .swcrc │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.js │ ├── jest.config.ts │ ├── package.json │ ├── playwright.config.ts │ ├── playwright │ ├── index.html │ └── index.tsx │ ├── project.json │ ├── src │ ├── ThemeDesigner │ │ ├── colors │ │ │ ├── csswg.ts │ │ │ ├── geometry.ts │ │ │ ├── hueMap.ts │ │ │ ├── index.ts │ │ │ ├── palettes.ts │ │ │ ├── templates.ts │ │ │ └── types.ts │ │ ├── generated-api.ts │ │ └── utils │ │ │ ├── brandColors.ts │ │ │ ├── getBrandTokensFromPalette.ts │ │ │ ├── getOverridableTokenBrandColors.ts │ │ │ ├── themeList.ts │ │ │ ├── toString.ts │ │ │ └── useDebounce.ts │ ├── ThemeGenerator.ts │ └── index.ts │ ├── stories │ └── .gitkeep │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── patches └── beachball+2.33.2.patch ├── project.json ├── tools ├── scripts │ ├── preinstall.mjs │ ├── publish.mjs │ └── verify-repo-integrity.mjs └── tsconfig.tools.json ├── tsconfig.base.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: 'github-actions' 4 | directory: '/' 5 | schedule: 6 | interval: 'weekly' 7 | # Weekly updates for devDependencies. 8 | - package-ecosystem: 'npm' 9 | directory: '/' 10 | schedule: 11 | interval: 'weekly' 12 | allow: 13 | - dependency-type: 'development' 14 | open-pull-requests-limit: 6 15 | versioning-strategy: increase 16 | -------------------------------------------------------------------------------- /.github/workflows/ci-change.yml: -------------------------------------------------------------------------------- 1 | name: Changelog 2 | on: 3 | pull_request: 4 | 5 | jobs: 6 | pr: 7 | runs-on: ubuntu-latest 8 | if: ${{ github.event_name == 'pull_request' }} 9 | steps: 10 | - uses: actions/checkout@v4 11 | with: 12 | fetch-depth: 0 13 | 14 | - uses: actions/setup-node@v4 15 | with: 16 | node-version: '20' 17 | 18 | - run: npx beachball check --changehint "Run 'yarn change' to generate a change file" 19 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | /dist 3 | /coverage 4 | .yarn/ 5 | patches/ 6 | packages/nx-plugin/src/generators/**/files/ 7 | 8 | /.nx/cache 9 | /.nx/workspace-data -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /.storybook/copied-from-fluentui-core/docs-root-v9.css: -------------------------------------------------------------------------------- 1 | /* remove the docs wrapper bg to let page bg show through */ 2 | /* remove unnecessary padding now that theme switcher is not taking up space */ 3 | #storybook-docs .sbdocs-wrapper { 4 | background: transparent !important; 5 | padding: 0 48px; 6 | } 7 | 8 | /* sb-show-main is missing during page transitions causing a page shift */ 9 | /* todo: cleanup once we no longer inherit docs-root */ 10 | .sb-show-main.sb-main-fullscreen, 11 | .sb-main-fullscreen { 12 | margin: 0; 13 | padding: 0; 14 | display: block; 15 | } 16 | 17 | /* remove loading overlay */ 18 | .sb-preparing-story, 19 | .sb-preparing-docs, 20 | .sb-nopreview, 21 | .sb-errordisplay { 22 | display: none !important; 23 | } 24 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | const config: StorybookConfig = { 4 | stories: [], 5 | addons: ['@storybook/addon-docs', '@nx/react/plugins/storybook'], 6 | framework: { 7 | name: '@storybook/react-webpack5', 8 | options: {}, 9 | }, 10 | docs: { 11 | autodocs: true, 12 | }, 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /.syncpackrc: -------------------------------------------------------------------------------- 1 | { 2 | "dependencyTypes": [ 3 | "prod", 4 | "peer" 5 | ], 6 | "versionGroups": [ 7 | { 8 | "packages": [ 9 | "**" 10 | ], 11 | "dependencies": [ 12 | "@fluentui/react-components" 13 | ], 14 | "dependencyTypes": [ 15 | "peer" 16 | ], 17 | "isIgnored": true 18 | }, 19 | { 20 | "packages": [ 21 | "@fluentui-contrib/react-interactive-tab", 22 | "@fluentui-contrib/react-keytips" 23 | ], 24 | "dependencies": [ 25 | "@fluentui/react-jsx-runtime", 26 | "@fluentui/react-utilities" 27 | ], 28 | "dependencyTypes": [ 29 | "prod" 30 | ], 31 | "isIgnored": true 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nrwl.angular-console", 4 | "esbenp.prettier-vscode", 5 | "dbaeumer.vscode-eslint", 6 | "firsttris.vscode-jest-runner", 7 | "ms-playwright.playwright" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | yarn-path ".yarn/releases/cli.js" 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /apps/docsite/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /apps/docsite/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '../../../.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: [ 9 | // docsite stories 10 | '../src/**/*.mdx', 11 | '../src/**/index.stories.@(js|jsx|ts|tsx)', 12 | // packages stories 13 | '../../../packages/*/stories/**/*.mdx', 14 | '../../../packages/*/stories/**/index.stories.@(js|jsx|ts|tsx)', 15 | ], 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /apps/docsite/.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/manager-api'; 2 | 3 | import fluentStorybookTheme from './theme'; 4 | 5 | addons.setConfig({ 6 | enableShortcuts: false, 7 | theme: fluentStorybookTheme, 8 | showPanel: false, 9 | showToolbar: false, 10 | }); 11 | -------------------------------------------------------------------------------- /apps/docsite/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '../../../.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | parameters: { 9 | ...rootPreview.parameters, 10 | options: { 11 | storySort: { 12 | method: 'alphabetical', 13 | order: ['Welcome', 'Packages'], 14 | }, 15 | }, 16 | }, 17 | }; 18 | 19 | export default preview; 20 | -------------------------------------------------------------------------------- /apps/docsite/eslint.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.ts', '**/*.tsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | { 16 | files: ['**/*.js', '**/*.jsx'], 17 | // Override or add rules here 18 | rules: {}, 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /apps/docsite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "allowJs": false, 6 | "esModuleInterop": false, 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "files": [], 11 | "include": [], 12 | "references": [ 13 | { 14 | "path": "./.storybook/tsconfig.base.json" 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceType": "unambiguous", 3 | "presets": [ 4 | [ 5 | "@babel/preset-env", 6 | { 7 | "targets": { 8 | "chrome": 100 9 | } 10 | } 11 | ], 12 | "@babel/preset-typescript", 13 | "@babel/preset-react" 14 | ], 15 | "plugins": [] 16 | } -------------------------------------------------------------------------------- /beachball.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** 4 | * @type {import('beachball').BeachballConfig} 5 | */ 6 | module.exports = { 7 | gitTags: false, 8 | ignorePatterns: [ 9 | '**/*.test.tsx', 10 | '**/*.test.ts', 11 | '**/*.spec.tsx', 12 | '**/*.spec.ts', 13 | '**/*.component-browser-spec.tsx', 14 | '**/*.stories.tsx', 15 | '**/eslint.config.js', 16 | '**/jest.config.js', 17 | '**/playwright.config.ts', 18 | '**/project.json', 19 | '**/*.md', 20 | '**/*.babelrc', 21 | '**/playwright/**', 22 | '**/.storybook/**', 23 | ], 24 | hooks: require('./beachball.hooks'), 25 | }; 26 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import { getJestProjectsAsync } from '@nx/jest'; 2 | 3 | export default async () => ({ 4 | projects: await getJestProjectsAsync(), 5 | }); 6 | -------------------------------------------------------------------------------- /jest.preset.js: -------------------------------------------------------------------------------- 1 | const nxPreset = require('@nx/jest/preset').default; 2 | 3 | module.exports = { 4 | ...nxPreset, 5 | transform: { 6 | // TODO: override the nx default transform. without this we need to have ts-jest installed... 7 | // @see https://github.com/nrwl/nx/blob/master/packages/jest/preset/jest-preset.ts#L8-L13 8 | '^.+\\.(ts|js|html)$': ['@swc/jest'], 9 | }, 10 | maxWorkers: isCI() ? 1 : '50%', 11 | }; 12 | 13 | function isCI() { 14 | return ( 15 | (process.env.CI && process.env.CI !== 'false') || 16 | process.env.TF_BUILD === 'true' || 17 | process.env.GITHUB_ACTIONS === 'true' 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /packages/azure-theme/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/azure-theme/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '../../../.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/azure-theme/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '../../../.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | }; 9 | 10 | export default preview; 11 | -------------------------------------------------------------------------------- /packages/azure-theme/.swcrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsc": { 3 | "target": "es2019", 4 | "parser": { 5 | "syntax": "typescript", 6 | "tsx": true, 7 | "decorators": false, 8 | "dynamicImport": false 9 | }, 10 | "transform": { 11 | "react": { 12 | "runtime": "classic", 13 | "useSpread": true 14 | } 15 | }, 16 | "keepClassNames": true, 17 | "externalHelpers": true, 18 | "loose": true 19 | }, 20 | "sourceMaps": true, 21 | "exclude": [ 22 | "jest.config.ts", 23 | ".*\\.spec.tsx?$", 24 | ".*\\.test.tsx?$", 25 | "./src/jest-setup.ts$", 26 | "./**/jest-setup.ts$", 27 | ".*.js$" 28 | ], 29 | "$schema": "https://json.schemastore.org/swcrc" 30 | } 31 | -------------------------------------------------------------------------------- /packages/azure-theme/eslint.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.ts', '**/*.tsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | { 16 | files: ['**/*.js', '**/*.jsx'], 17 | // Override or add rules here 18 | rules: {}, 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /packages/azure-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fluentui-contrib/azure-theme", 3 | "version": "0.1.1", 4 | "dependencies": { 5 | "@swc/helpers": "~0.5.11" 6 | }, 7 | "main": "./src/index.js", 8 | "typings": "./src/index.d.ts", 9 | "beachball": { 10 | "disallowedChangeTypes": [ 11 | "prerelease", 12 | "major" 13 | ] 14 | }, 15 | "peerDependencies": { 16 | "@fluentui/react-components": ">=9.46.3 <10.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/azure-theme/src/components/AzureDarkTheme/AzureDarkTheme.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { AzureDarkTheme } from './AzureDarkTheme'; 4 | import { FluentProvider } from '@fluentui/react-components'; 5 | describe('AzureDarkTheme', () => { 6 | it('should render', () => { 7 | render(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/azure-theme/src/components/AzureDarkTheme/AzureDarkTheme.tsx: -------------------------------------------------------------------------------- 1 | import { Theme, createDarkTheme } from '@fluentui/react-components'; 2 | import { brandAzure } from '../../tokens/brandRamp'; 3 | 4 | const darkColors: Theme = createDarkTheme(brandAzure); 5 | 6 | export const AzureDarkTheme: Theme = { 7 | ...darkColors, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/azure-theme/src/components/AzureDarkTheme/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './AzureDarkTheme'; 2 | -------------------------------------------------------------------------------- /packages/azure-theme/src/components/AzureLightTheme/AzureLightTheme.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/fluentui-contrib/e012ed2d0080f41d739e9e804c451357e584777e/packages/azure-theme/src/components/AzureLightTheme/AzureLightTheme.test.tsx -------------------------------------------------------------------------------- /packages/azure-theme/src/components/AzureLightTheme/AzureLightTheme.tsx: -------------------------------------------------------------------------------- 1 | import { Theme, createLightTheme } from '@fluentui/react-components'; 2 | import { brandAzure } from '../../tokens/brandRamp'; 3 | 4 | const lightColors: Theme = createLightTheme(brandAzure); 5 | 6 | export const AzureLightTheme: Theme = { 7 | ...lightColors, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/azure-theme/src/components/AzureLightTheme/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './AzureLightTheme'; 2 | -------------------------------------------------------------------------------- /packages/azure-theme/src/index.ts: -------------------------------------------------------------------------------- 1 | export { AzureLightTheme } from './components/AzureLightTheme'; 2 | export { AzureDarkTheme } from './components/AzureDarkTheme'; 3 | -------------------------------------------------------------------------------- /packages/azure-theme/stories/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/fluentui-contrib/e012ed2d0080f41d739e9e804c451357e584777e/packages/azure-theme/stories/.gitkeep -------------------------------------------------------------------------------- /packages/azure-theme/stories/All.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const AllControls = () => { 4 | return ( 5 |
6 |
All controls
7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /packages/azure-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "compilerOptions": { 5 | "jsx": "react" 6 | }, 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.lib.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | }, 15 | { 16 | "path": "./.storybook/tsconfig.json" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/azure-theme/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true 6 | }, 7 | "include": ["src/**/*.ts"], 8 | "exclude": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "files/**", 13 | "**/*.stories.ts", 14 | "**/*.stories.js", 15 | "**/*.stories.jsx", 16 | "**/*.stories.tsx" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/azure-theme/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/houdini-utils/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/houdini-utils/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '../../../.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/houdini-utils/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '../../../.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | }; 9 | 10 | export default preview; 11 | -------------------------------------------------------------------------------- /packages/houdini-utils/.swcrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsc": { 3 | "target": "es2019", 4 | "parser": { 5 | "syntax": "typescript", 6 | "tsx": true, 7 | "decorators": false, 8 | "dynamicImport": false 9 | }, 10 | "transform": { 11 | "react": { 12 | "runtime": "classic", 13 | "useSpread": true 14 | } 15 | }, 16 | "keepClassNames": true, 17 | "externalHelpers": true, 18 | "loose": true 19 | }, 20 | "sourceMaps": true, 21 | "exclude": [ 22 | "jest.config.ts", 23 | ".*\\.spec.tsx?$", 24 | ".*\\.test.tsx?$", 25 | "./src/jest-setup.ts$", 26 | "./**/jest-setup.ts$", 27 | ".*.js$" 28 | ], 29 | "$schema": "https://json.schemastore.org/swcrc" 30 | } 31 | -------------------------------------------------------------------------------- /packages/houdini-utils/README.md: -------------------------------------------------------------------------------- 1 | # @fluentui-contrib/houdini-utils 2 | 3 | This library exposes some low level utilities to use the [houdini APIs](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) 4 | 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. 5 | 6 | Please refer to the [documentation samples](https://microsoft.github.io/fluentui-contrib/houdini-utils/) for usage guidance 7 | -------------------------------------------------------------------------------- /packages/houdini-utils/eslint.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.ts', '**/*.tsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | { 16 | files: ['**/*.js', '**/*.jsx'], 17 | // Override or add rules here 18 | rules: {}, 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /packages/houdini-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fluentui-contrib/houdini-utils", 3 | "version": "0.3.5", 4 | "dependencies": { 5 | "@swc/helpers": "~0.5.11" 6 | }, 7 | "main": "./src/index.js", 8 | "typings": "./src/index.d.ts" 9 | } 10 | -------------------------------------------------------------------------------- /packages/houdini-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export { PaintWorklet } from './types'; 2 | export type { PaintWorkletGeometry } from './types'; 3 | export { registerPaintWorklet } from './paint/houdini/registerPaintWorklet'; 4 | export { fallbackPaintAnimation } from './paint/fallback/fallbackPaintAnimation'; 5 | export { 6 | hasHoudini, 7 | hasMozElement, 8 | hasWebkitCanvas, 9 | } from './util/featureDetect'; 10 | 11 | export { blobify } from './util/blobify'; 12 | export { addModule } from './util/addModule'; 13 | -------------------------------------------------------------------------------- /packages/houdini-utils/src/paint/houdini/registerPaintWorklet.ts: -------------------------------------------------------------------------------- 1 | import { addModule } from '../../util/addModule'; 2 | import { hasHoudini } from '../../util/featureDetect'; 3 | 4 | export const registerPaintWorklet = (baseUrl: string, filebaseUrl: string) => { 5 | if (hasHoudini()) { 6 | return addModule(baseUrl, filebaseUrl); 7 | } 8 | 9 | return Promise.resolve(); 10 | }; 11 | -------------------------------------------------------------------------------- /packages/houdini-utils/stories/Utils/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/react'; 2 | import description from '../../README.md'; 3 | 4 | export { Default } from './Default.stories'; 5 | export { Fallback } from './Fallback.stories'; 6 | export { FallbackWithDuration } from './FallbackWithDuration.stories'; 7 | 8 | const meta: Meta = { 9 | title: 'Packages/houdini-utils', 10 | parameters: { 11 | docs: { 12 | description: { 13 | component: description, 14 | }, 15 | hideArgsTable: true, 16 | }, 17 | }, 18 | }; 19 | 20 | export default meta; 21 | -------------------------------------------------------------------------------- /packages/houdini-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "compilerOptions": { 5 | "jsx": "react" 6 | }, 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.lib.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | }, 15 | { 16 | "path": "./.storybook/tsconfig.json" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/houdini-utils/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true 6 | }, 7 | "include": ["src/**/*.ts"], 8 | "exclude": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "files/**", 13 | "**/*.stories.ts", 14 | "**/*.stories.js", 15 | "**/*.stories.jsx", 16 | "**/*.stories.tsx" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/houdini-utils/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/nx-plugin/.swcrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsc": { 3 | "target": "es2019", 4 | "parser": { 5 | "syntax": "typescript", 6 | "tsx": true, 7 | "decorators": false, 8 | "dynamicImport": false 9 | }, 10 | "transform": { 11 | "react": { 12 | "runtime": "classic", 13 | "useSpread": true 14 | } 15 | }, 16 | "keepClassNames": true, 17 | "externalHelpers": true, 18 | "loose": true 19 | }, 20 | "sourceMaps": true, 21 | "exclude": [ 22 | "jest.config.ts", 23 | ".*\\.spec.tsx?$", 24 | ".*\\.test.tsx?$", 25 | "./src/jest-setup.ts$", 26 | "./**/jest-setup.ts$", 27 | ".*.js$" 28 | ], 29 | "$schema": "https://json.schemastore.org/swcrc" 30 | } 31 | -------------------------------------------------------------------------------- /packages/nx-plugin/README.md: -------------------------------------------------------------------------------- 1 | # @fluentui-contrib/nx-plugin 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Building 6 | 7 | Run `nx build nx-plugin` to build the library. 8 | 9 | ## Running unit tests 10 | 11 | Run `nx test nx-plugin` to execute the unit tests via [Jest](https://jestjs.io). 12 | -------------------------------------------------------------------------------- /packages/nx-plugin/executors.json: -------------------------------------------------------------------------------- 1 | { 2 | "executors": { 3 | "build": { 4 | "implementation": "./src/executors/build/executor", 5 | "schema": "./src/executors/build/schema.json", 6 | "description": "build executor" 7 | }, 8 | "playwright": { 9 | "implementation": "./src/executors/playwright/executor", 10 | "schema": "./src/executors/playwright/schema.json", 11 | "description": "playwright executor" 12 | }, 13 | "type-check": { 14 | "implementation": "./src/executors/type-check/executor", 15 | "schema": "./src/executors/type-check/schema.json", 16 | "description": "type-check executor" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/executors/build/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface BuildExecutorSchema {} // eslint-disable-line 2 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/executors/build/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "version": 2, 4 | "title": "Build executor", 5 | "description": "", 6 | "type": "object", 7 | "properties": {}, 8 | "required": [] 9 | } 10 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/executors/type-check/executor.spec.ts: -------------------------------------------------------------------------------- 1 | describe('TypeCheck Executor', () => { 2 | it('can run', async () => { 3 | expect(true).toBe(true); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/executors/type-check/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface TypeCheckExecutorSchema {} // eslint-disable-line 2 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/executors/type-check/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "version": 2, 4 | "title": "TypeCheck executor", 5 | "description": "", 6 | "type": "object", 7 | "properties": {}, 8 | "required": [] 9 | } 10 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component-playwright-spec/files/src/components/__componentName__/__componentName__.component-browser-spec.tsx.template: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { test, expect } from '@playwright/experimental-ct-react'; 3 | import { <%= componentName %> } from './<%= componentName %>.tsx'; 4 | 5 | 6 | test.use({ viewport: { width: 500, height: 500 } }); 7 | 8 | test('should fail', async ({ mount }) => { 9 | const component = await mount(<<%= componentName %>/>); 10 | await expect(component).toContainText('Update this test file'); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component-playwright-spec/generator.ts: -------------------------------------------------------------------------------- 1 | import { 2 | formatFiles, 3 | generateFiles, 4 | Tree, 5 | readProjectConfiguration, 6 | } from '@nx/devkit'; 7 | import * as path from 'path'; 8 | import { PlaywrightComponentSpecGeneratorSchema } from './schema'; 9 | 10 | export default async function ( 11 | tree: Tree, 12 | options: PlaywrightComponentSpecGeneratorSchema 13 | ) { 14 | const { name } = options; 15 | const projectConfig = readProjectConfiguration(tree, name); 16 | generateFiles( 17 | tree, 18 | path.join(__dirname, 'files'), 19 | projectConfig.root, 20 | options 21 | ); 22 | await formatFiles(tree); 23 | } 24 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component-playwright-spec/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface PlaywrightComponentSpecGeneratorSchema { 2 | name: string; 3 | componentName: string; 4 | } 5 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/files/src/components/__componentName__/__componentName__.test.tsx.template: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { <%= componentName %> } from './<%= componentName %>'; 4 | 5 | describe('<%= componentName %>', () => { 6 | it('should render', () => { 7 | render(<<%= componentName %> />); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/files/src/components/__componentName__/__componentName__.tsx.template: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { mergeClasses } from '@fluentui/react-components'; 3 | import { useStyles } from './<%= componentName %>.styles'; 4 | 5 | export const <%= componentName %>: React.FC = () => { 6 | const styles = useStyles(); 7 | return
Hello World!
; 8 | }; 9 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/files/src/components/__componentName__/index.ts.template: -------------------------------------------------------------------------------- 1 | export * from './<%= componentName %>'; -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/files/stories/__componentName__/Default.stories.tsx.template: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { <%= componentName %> } from '<%= npmScope %>/<%= name %>'; 3 | 4 | export const Default = () => <<%= componentName %> />; 5 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/files/stories/__componentName__/index.stories.tsx.template: -------------------------------------------------------------------------------- 1 | import type { Meta } from '@storybook/react'; 2 | import { <%= componentName %> } from '<%= npmScope %>/<%= name %>'; 3 | export { Default } from './Default.stories'; 4 | 5 | const meta = { 6 | title: 'Packages/<%= name %>/<%= componentName %>', 7 | component: <%= componentName %>, 8 | } satisfies Meta>; 9 | 10 | export default meta; 11 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface ComponentGeneratorSchema { 2 | name: string; 3 | componentName: string; 4 | } 5 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/component/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "$id": "Component", 4 | "title": "", 5 | "type": "object", 6 | "properties": { 7 | "name": { 8 | "type": "string", 9 | "description": "", 10 | "$default": { 11 | "$source": "argv", 12 | "index": 0 13 | }, 14 | "x-prompt": "In what library should this componnet be created" 15 | }, 16 | "componentName": { 17 | "type": "string", 18 | "description": "", 19 | "$default": { 20 | "$source": "argv", 21 | "index": 1 22 | }, 23 | "x-prompt": "What is the component name?" 24 | } 25 | }, 26 | "required": ["name", "componentName"] 27 | } 28 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/configure-storybook/files/.babelrc.template: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/configure-storybook/files/.storybook/main.ts.template: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '<%= rootOffset %>/.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/configure-storybook/files/.storybook/preview.tsx.template: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '<%= rootOffset %>/.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | }; 9 | 10 | export default preview; 11 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/configure-storybook/files/stories/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/fluentui-contrib/e012ed2d0080f41d739e9e804c451357e584777e/packages/nx-plugin/src/generators/configure-storybook/files/stories/.gitkeep -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/configure-storybook/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface ConfigureStorybookGeneratorSchema { 2 | name: string; 3 | } 4 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/configure-storybook/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "$id": "ConfigureStorybook", 4 | "title": "", 5 | "type": "object", 6 | "properties": { 7 | "name": { 8 | "type": "string", 9 | "description": "Project for which to generate Storybook configuration.", 10 | "$default": { 11 | "$source": "argv", 12 | "index": 0 13 | }, 14 | "x-prompt": "For which project do you want to generate Storybook configuration?", 15 | "x-dropdown": "projects" 16 | } 17 | }, 18 | "required": ["name"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/library/files/eslint.config.js.template: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.js', '**/*.jsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/library/files/src/index.ts.template: -------------------------------------------------------------------------------- 1 | export {}; -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/library/files/tsconfig.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "compilerOptions": { 5 | "jsx": "react" 6 | }, 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.lib.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/library/files/tsconfig.lib.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true 6 | }, 7 | "include": ["src/**/*.ts"], 8 | "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.test.tsx" , "files/**"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/library/files/tsconfig.spec.json.template: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/library/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface LibraryGeneratorSchema { 2 | name: string; 3 | owner: string; 4 | testEnvironment?: 'jsdom' | 'node'; 5 | } 6 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/playwright-component-configuration/files/playwright/index.html.template: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Testing Page 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/playwright-component-configuration/files/playwright/index.tsx.template: -------------------------------------------------------------------------------- 1 | // Import styles, initialize component theme here. 2 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/playwright-component-configuration/schema.d.ts: -------------------------------------------------------------------------------- 1 | export interface PlaywrightComponentConfigurationGeneratorSchema { 2 | name: string; 3 | } 4 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/generators/playwright-component-configuration/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "$id": "ConfigurePlaywright", 4 | "title": "", 5 | "type": "object", 6 | "properties": { 7 | "name": { 8 | "type": "string", 9 | "description": "Project for which to generate Playwright configuration.", 10 | "$default": { 11 | "$source": "argv", 12 | "index": 0 13 | }, 14 | "x-prompt": "For which project do you want to generate Playwright configuration?", 15 | "x-dropdown": "projects" 16 | } 17 | }, 18 | "required": ["name"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/nx-plugin/src/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/fluentui-contrib/e012ed2d0080f41d739e9e804c451357e584777e/packages/nx-plugin/src/index.ts -------------------------------------------------------------------------------- /packages/nx-plugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | }, 6 | "files": [], 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.lib.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/nx-plugin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "types": ["node"] 7 | }, 8 | "include": ["src/**/*.ts"], 9 | "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts", "src/**/files/**"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/nx-plugin/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/pierce-dom/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/pierce-dom/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '../../../.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/pierce-dom/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '../../../.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | }; 9 | 10 | export default preview; 11 | -------------------------------------------------------------------------------- /packages/pierce-dom/.swcrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsc": { 3 | "target": "es2019", 4 | "parser": { 5 | "syntax": "typescript", 6 | "tsx": true, 7 | "decorators": false, 8 | "dynamicImport": false 9 | }, 10 | "transform": { 11 | "react": { 12 | "runtime": "classic", 13 | "useSpread": true 14 | } 15 | }, 16 | "keepClassNames": true, 17 | "externalHelpers": true, 18 | "loose": true 19 | }, 20 | "sourceMaps": true, 21 | "exclude": [ 22 | "jest.config.ts", 23 | ".*\\.spec.tsx?$", 24 | ".*\\.test.tsx?$", 25 | "./src/jest-setup.ts$", 26 | "./**/jest-setup.ts$", 27 | ".*.js$" 28 | ], 29 | "$schema": "https://json.schemastore.org/swcrc" 30 | } 31 | -------------------------------------------------------------------------------- /packages/pierce-dom/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @fluentui-contrib/pierce-dom 2 | 3 | This log was last generated on Thu, 10 Apr 2025 14:11:17 GMT and should not be manually modified. 4 | 5 | 6 | 7 | ## 0.1.1 8 | 9 | Thu, 10 Apr 2025 14:11:17 GMT 10 | 11 | ### Patches 12 | 13 | - fix: normalize package dependencies (hochelmartin@gmail.com) 14 | - fix: add missing runtime @swc/helper dependency (hochelmartin@gmail.com) 15 | 16 | ## 0.1.0 17 | 18 | Wed, 31 Jan 2024 23:19:33 GMT 19 | 20 | ### Minor changes 21 | 22 | - Bumping pierce-dom. (marata@microsoft.com) 23 | -------------------------------------------------------------------------------- /packages/pierce-dom/eslint.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.ts', '**/*.tsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | { 16 | files: ['**/*.js', '**/*.jsx'], 17 | // Override or add rules here 18 | rules: {}, 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /packages/pierce-dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fluentui-contrib/pierce-dom", 3 | "version": "0.1.1", 4 | "dependencies": { 5 | "@swc/helpers": "~0.5.11" 6 | }, 7 | "peerDependencies": { 8 | "@fluentui/react-components": ">=9.46.3 <10.0.0", 9 | "tabster": ">=6.0.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/pierce-dom/stories/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/fluentui-contrib/e012ed2d0080f41d739e9e804c451357e584777e/packages/pierce-dom/stories/.gitkeep -------------------------------------------------------------------------------- /packages/pierce-dom/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "compilerOptions": { 5 | "jsx": "react" 6 | }, 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.lib.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | }, 15 | { 16 | "path": "./.storybook/tsconfig.json" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/pierce-dom/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true 6 | }, 7 | "include": ["src/**/*.ts"], 8 | "exclude": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "files/**", 13 | "**/*.stories.ts", 14 | "**/*.stories.js", 15 | "**/*.stories.jsx", 16 | "**/*.stories.tsx" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/pierce-dom/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-chat/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/react-chat/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '../../../.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/react-chat/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '../../../.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | }; 9 | 10 | export default preview; 11 | -------------------------------------------------------------------------------- /packages/react-chat/.swcrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsc": { 3 | "target": "es2019", 4 | "parser": { 5 | "syntax": "typescript", 6 | "tsx": true, 7 | "decorators": false, 8 | "dynamicImport": false 9 | }, 10 | "transform": { 11 | "react": { 12 | "runtime": "classic", 13 | "useSpread": true 14 | } 15 | }, 16 | "keepClassNames": true, 17 | "externalHelpers": true, 18 | "loose": true 19 | }, 20 | "sourceMaps": true, 21 | "exclude": [ 22 | "jest.config.ts", 23 | ".*\\.spec.tsx?$", 24 | ".*\\.test.tsx?$", 25 | "./src/jest-setup.ts$", 26 | "./**/jest-setup.ts$", 27 | ".*.js$" 28 | ], 29 | "$schema": "https://json.schemastore.org/swcrc" 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-chat/eslint.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.ts', '**/*.tsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | { 16 | files: ['**/*.js', '**/*.jsx'], 17 | // Override or add rules here 18 | rules: {}, 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /packages/react-chat/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fluentui-contrib/react-chat", 3 | "version": "0.1.11", 4 | "peerDependencies": { 5 | "@fluentui/react-components": ">=9.25.1 <10.0.0", 6 | "@fluentui/react-icons": ">=2.0.204 <3.0.0", 7 | "@types/react": ">=16.8.0 <19.0.0", 8 | "react": ">=16.8.0 <19.0.0" 9 | }, 10 | "dependencies": { 11 | "@swc/helpers": "~0.5.11", 12 | "@fluentui/react-jsx-runtime": "^9.0.29" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/Chat/Chat.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { Chat } from './Chat'; 4 | 5 | describe('Chat', () => { 6 | it('should render', () => { 7 | render(); 8 | }); 9 | 10 | it('should be able to override tabster', () => { 11 | const { container } = render(); 12 | expect(container.firstElementChild?.getAttribute('data-tabster')).toBe( 13 | 'foo' 14 | ); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/Chat/Chat.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { useChat_unstable } from './useChat'; 3 | import { renderChat_unstable } from './renderChat'; 4 | import { useChatStyles_unstable } from './useChatStyles.styles'; 5 | import type { ChatProps } from './Chat.types'; 6 | import type { ForwardRefComponent } from '@fluentui/react-components'; 7 | 8 | export const Chat: ForwardRefComponent = React.forwardRef( 9 | (props, ref) => { 10 | const state = useChat_unstable(props, ref); 11 | 12 | useChatStyles_unstable(state); 13 | return renderChat_unstable(state); 14 | } 15 | ); 16 | 17 | Chat.displayName = 'Chat'; 18 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/Chat/Chat.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ComponentProps, 3 | ComponentState, 4 | Slot, 5 | } from '@fluentui/react-components'; 6 | 7 | export type ChatSlots = { 8 | root: Slot<'div'>; 9 | }; 10 | 11 | /** 12 | * Chat Props 13 | */ 14 | export type ChatProps = ComponentProps; 15 | 16 | /** 17 | * State used in rendering Chat 18 | */ 19 | export type ChatState = ComponentState; 20 | // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from ChatProps. 21 | // & Required> 22 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/Chat/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Chat'; 2 | export * from './Chat.types'; 3 | export * from './renderChat'; 4 | export * from './useChat'; 5 | export * from './useChatStyles.styles'; 6 | 7 | export * from './useChatMoverAttribute'; 8 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/Chat/renderChat.tsx: -------------------------------------------------------------------------------- 1 | /** @jsxRuntime classic */ 2 | /** @jsx createElement */ 3 | 4 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 5 | import { createElement } from '@fluentui/react-jsx-runtime'; 6 | 7 | import { assertSlots } from '@fluentui/react-components'; 8 | import type { ChatState, ChatSlots } from './Chat.types'; 9 | 10 | /** 11 | * Render the final JSX of Chat 12 | */ 13 | export const renderChat_unstable = (state: ChatState) => { 14 | assertSlots(state); 15 | 16 | return ; 17 | }; 18 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/Chat/useChatMoverAttribute.tsx: -------------------------------------------------------------------------------- 1 | import { useArrowNavigationGroup } from '@fluentui/react-components'; 2 | 3 | export const useChatMoverAttribute_unstable = (): ReturnType< 4 | typeof useArrowNavigationGroup 5 | > => 6 | useArrowNavigationGroup({ 7 | axis: 'vertical', 8 | memorizeCurrent: true, 9 | unstable_hasDefault: true, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/ChatMessage/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ChatMessage'; 2 | export * from './ChatMessage.types'; 3 | export * from './renderChatMessage'; 4 | export * from './useChatMessage'; 5 | export * from './ChatMessage.styles'; 6 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/ChatMyMessage/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ChatMyMessage'; 2 | export * from './ChatMyMessage.types'; 3 | export * from './renderChatMyMessage'; 4 | export * from './useChatMyMessage'; 5 | export * from './ChatMyMessage.styles'; 6 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/styles/shared.styles.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles, tokens } from '@fluentui/react-components'; 2 | 3 | /** 4 | * This file has styles hooks shared by all chat message components 5 | */ 6 | 7 | export const useDecorationClasses = makeStyles({ 8 | default: { 9 | color: tokens.colorPaletteRedForeground3, 10 | }, 11 | mention: { 12 | color: tokens.colorPaletteDarkOrangeForeground3, 13 | }, 14 | mentionContrast: { 15 | color: tokens.colorBrandForegroundLink, // hcHyperlink '#ffff00' 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/utils/getDecorationIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | AlertUrgentFilled, 4 | ImportantFilled, 5 | MentionFilled, 6 | PeopleFilled, 7 | } from '@fluentui/react-icons'; 8 | 9 | export const getDecorationIcon = ( 10 | decoration?: 'important' | 'urgent' | 'mention' | 'mentionEveryone' 11 | ) => { 12 | switch (decoration) { 13 | case 'important': 14 | return ; 15 | case 'urgent': 16 | return ; 17 | case 'mention': 18 | return ; 19 | case 'mentionEveryone': 20 | return ; 21 | default: 22 | return null; 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-chat/src/components/utils/mergeCallbacks.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * TODO - replace this with Fluent UI utility 3 | * https://github.com/microsoft/fluentui/pull/28428 4 | */ 5 | export function mergeCallbacks( 6 | callback1: ((...args: Args) => void) | undefined, 7 | callback2: ((...args: Args) => void) | undefined 8 | ) { 9 | return (...args: Args) => { 10 | callback1?.(...args); 11 | callback2?.(...args); 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-chat/stories/Chat/Default.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Avatar } from '@fluentui/react-components'; 3 | import { Chat, ChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat'; 4 | 5 | export const Default = () => { 6 | return ( 7 | 8 | 11 | } 12 | > 13 | Hello I am Ashley 14 | 15 | Nice to meet you! 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/react-chat/stories/Chat/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/react'; 2 | import { Chat } from '@fluentui-contrib/react-chat'; 3 | import description from '../../README.md'; 4 | 5 | export { Default } from './Default.stories'; 6 | export { ChatWithFocusableContent } from './ChatWithFocusableContent.stories'; 7 | 8 | const meta: Meta = { 9 | title: 'Packages/react-chat/Chat', 10 | component: Chat, 11 | parameters: { 12 | docs: { 13 | description: { 14 | component: description, 15 | }, 16 | }, 17 | }, 18 | }; 19 | 20 | export default meta; 21 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMessage/Decoration.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Chat, ChatMessage } from '@fluentui-contrib/react-chat'; 3 | 4 | export const Decoration = () => { 5 | return ( 6 | 7 | Important message 8 | Urgent message 9 | Message with mention 10 | 11 | Message mentioning everyone 12 | 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMessage/Default.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Avatar } from '@fluentui/react-components'; 3 | import { Chat, ChatMessage } from '@fluentui-contrib/react-chat'; 4 | 5 | export const Default = () => { 6 | return ( 7 | 8 | 11 | } 12 | > 13 | Hello I am Ashley 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMessage/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/react'; 2 | import { ChatMessage } from '@fluentui-contrib/react-chat'; 3 | 4 | export { Default } from './Default.stories'; 5 | export { Decoration } from './Decoration.stories'; 6 | export { Slots } from './Slots.stories'; 7 | 8 | const meta: Meta = { 9 | title: 'Packages/react-chat/ChatMessage', 10 | component: ChatMessage, 11 | }; 12 | 13 | export default meta; 14 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMyMessage/Decoration.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Chat, ChatMyMessage } from '@fluentui-contrib/react-chat'; 3 | 4 | export const Decoration = () => { 5 | return ( 6 | 7 | Important message 8 | Urgent message 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMyMessage/Default.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Chat, ChatMyMessage } from '@fluentui-contrib/react-chat'; 3 | 4 | export const Default = () => { 5 | return ( 6 | 7 | Nice to meet you! 8 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMyMessage/Status.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Chat, ChatMyMessage } from '@fluentui-contrib/react-chat'; 3 | 4 | export const Status = () => { 5 | return ( 6 | 7 | Failed message 8 | Sending message 9 | Received message 10 | Read message 11 | Blocked message 12 | Scheduled message 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/react-chat/stories/ChatMyMessage/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/react'; 2 | import { ChatMyMessage } from '@fluentui-contrib/react-chat'; 3 | export { Default } from './Default.stories'; 4 | export { Decoration } from './Decoration.stories'; 5 | export { Status } from './Status.stories'; 6 | export { Slots } from './Slots.stories'; 7 | 8 | const meta: Meta = { 9 | title: 'Packages/react-chat/ChatMyMessage', 10 | component: ChatMyMessage, 11 | }; 12 | 13 | export default meta; 14 | -------------------------------------------------------------------------------- /packages/react-chat/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | "files": [], 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.lib.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | }, 15 | { 16 | "path": "./.storybook/tsconfig.json" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-chat/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true 6 | }, 7 | "include": ["src/**/*.ts"], 8 | "exclude": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "files/**", 13 | "**/*.stories.ts", 14 | "**/*.stories.js", 15 | "**/*.stories.jsx", 16 | "**/*.stories.tsx" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-chat/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "jest.config.ts", 10 | "src/**/*.test.ts", 11 | "src/**/*.test.tsx", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootConfig from '../../../.storybook/main'; 5 | 6 | const config: StorybookConfig = { 7 | ...rootConfig, 8 | stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | // eslint-disable-next-line @nx/enforce-module-boundaries 4 | import rootPreview from '../../../.storybook/preview'; 5 | 6 | const preview: Preview = { 7 | ...rootPreview, 8 | }; 9 | 10 | export default preview; 11 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/.swcrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsc": { 3 | "target": "es2019", 4 | "parser": { 5 | "syntax": "typescript", 6 | "tsx": true, 7 | "decorators": false, 8 | "dynamicImport": false 9 | }, 10 | "transform": { 11 | "react": { 12 | "runtime": "classic", 13 | "useSpread": true 14 | } 15 | }, 16 | "keepClassNames": true, 17 | "externalHelpers": true, 18 | "loose": true 19 | }, 20 | "sourceMaps": true, 21 | "exclude": [ 22 | "jest.config.ts", 23 | ".*\\.spec.tsx?$", 24 | ".*\\.test.tsx?$", 25 | "./src/jest-setup.ts$", 26 | "./**/jest-setup.ts$", 27 | ".*.js$" 28 | ], 29 | "$schema": "https://json.schemastore.org/swcrc" 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/README.md: -------------------------------------------------------------------------------- 1 | # react-contextual-pane 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Building 6 | 7 | Run `nx build react-contextual-pane` to build the library. 8 | 9 | ## Running unit tests 10 | 11 | Run `nx test react-contextual-pane` to execute the unit tests via [Jest](https://jestjs.io). 12 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/eslint.config.cjs: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.json'], 7 | rules: { 8 | '@nx/dependency-checks': [ 9 | 'error', 10 | { 11 | ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'], 12 | }, 13 | ], 14 | }, 15 | languageOptions: { 16 | parser: require('jsonc-eslint-parser'), 17 | }, 18 | }, 19 | ]; 20 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/eslint.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../eslint.config.js'); 2 | 3 | module.exports = [ 4 | ...baseConfig, 5 | { 6 | files: ['**/*.ts', '**/*.tsx'], 7 | // Override or add rules here 8 | rules: {}, 9 | }, 10 | { 11 | files: ['**/*.js', '**/*.jsx'], 12 | // Override or add rules here 13 | rules: {}, 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fluentui-contrib/react-contextual-pane", 3 | "version": "0.0.1", 4 | "main": "./src/index.js", 5 | "types": "./src/index.d.ts", 6 | "dependencies": { 7 | "@swc/helpers": "~0.5.11" 8 | }, 9 | "private": true, 10 | "peerDependencies": { 11 | "@fluentui/react-components": ">=9.54.13 <10.0.0", 12 | "@types/react": ">=16.8.0 <19.0.0", 13 | "react": ">=16.8.0 <19.0.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/src/components/Footer/Footer.styles.ts: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@fluentui/react-components'; 2 | 3 | export const useStyles = makeStyles({ 4 | paneFooterRoot: { 5 | alignItems: 'center', 6 | display: 'flex', 7 | justifyContent: 'space-between', 8 | width: '100%', 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/react-contextual-pane/src/components/Footer/Footer.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { Footer } from './Footer'; 4 | 5 | describe('Footer', () => { 6 | it('should render', () => { 7 | render(