From 802d6b8d4e4d4aee61e6170ceb8a047447f5600d Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 13 Apr 2026 17:07:46 +0200 Subject: [PATCH 1/3] docs: deploy headless to docsite --- .github/workflows/docsite-publish-ghpages.yml | 3 ++- apps/public-docsite-v9/project.json | 2 +- .../stories/.storybook/main.js | 3 +++ .../react-headless-components-preview/stories/package.json | 3 ++- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml index 1d3bdac0e81cb0..1c171b83a13341 100644 --- a/.github/workflows/docsite-publish-ghpages.yml +++ b/.github/workflows/docsite-publish-ghpages.yml @@ -49,11 +49,12 @@ jobs: if: steps.affected_storybooks_count.outputs.value > 0 run: | rm -rf _pages - mkdir -p _pages/react _pages/charts _pages/web-components + mkdir -p _pages/react _pages/charts _pages/web-components _pages/headless cp -R apps/public-docsite-v9/dist/react/* _pages/react/ cp -R apps/chart-docsite/dist/storybook/* _pages/charts/ cp -R packages/web-components/dist/storybook/* _pages/web-components + cp -R packages/react-components/react-headless-components-preview/stories/dist/storybook/* _pages/headless/ - name: Upload Pages Artifact if: steps.affected_storybooks_count.outputs.value > 0 diff --git a/apps/public-docsite-v9/project.json b/apps/public-docsite-v9/project.json index 4118059d01472f..ba79ddfef615db 100644 --- a/apps/public-docsite-v9/project.json +++ b/apps/public-docsite-v9/project.json @@ -28,7 +28,7 @@ "build-storybook", "build-storybook:react", { - "projects": ["chart-docsite", "web-components"], + "projects": ["chart-docsite", "web-components", "react-headless-components-preview-stories"], "target": "build-storybook:docsite" } ] diff --git a/packages/react-components/react-headless-components-preview/stories/.storybook/main.js b/packages/react-components/react-headless-components-preview/stories/.storybook/main.js index 67905c6bfe15f2..a603f242374765 100644 --- a/packages/react-components/react-headless-components-preview/stories/.storybook/main.js +++ b/packages/react-components/react-headless-components-preview/stories/.storybook/main.js @@ -4,6 +4,9 @@ module.exports = /** @type {Omit { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-headless-components-preview/stories/package.json b/packages/react-components/react-headless-components-preview/stories/package.json index fbf175439e43d0..166a4788ece56b 100644 --- a/packages/react-components/react-headless-components-preview/stories/package.json +++ b/packages/react-components/react-headless-components-preview/stories/package.json @@ -3,7 +3,8 @@ "version": "0.0.0", "private": true, "scripts": { - "build-storybook": "storybook build -o ./dist/storybook" + "build-storybook": "storybook build -o ./dist/storybook", + "build-storybook:docsite": "cross-env DEPLOY_PATH=/headless/ storybook build -o ./dist/storybook --docs" }, "devDependencies": {} } From 8ed3930b75dc99ed6e2e8f8262a76155971a9bdc Mon Sep 17 00:00:00 2001 From: mainframev Date: Tue, 14 Apr 2026 11:50:58 +0200 Subject: [PATCH 2/3] chore: create a dedicated docsite app --- .github/workflows/docsite-publish-ghpages.yml | 2 +- apps/pr-deploy-site/just.config.ts | 2 +- apps/pr-deploy-site/pr-deploy-site.js | 6 +-- .../.storybook/main.js | 23 ++++++++++ .../.storybook/manager.js | 10 +++++ .../.storybook/preview-head.html | 6 +++ .../.storybook/preview.js | 20 +++++++++ .../.storybook/theme.js | 43 +++++++++++++++++++ .../eslint.config.js | 16 +++++++ .../public-docsite-v9-headless/just.config.ts | 5 +++ apps/public-docsite-v9-headless/package.json | 26 +++++++++++ apps/public-docsite-v9-headless/project.json | 17 ++++++++ .../public/fluentui-logo.svg | 4 ++ .../src/Introduction.mdx | 37 ++++++++++++++++ .../tsconfig.app.json | 14 ++++++ apps/public-docsite-v9-headless/tsconfig.json | 19 ++++++++ apps/public-docsite-v9/project.json | 2 +- .../stories/.storybook/main.js | 3 -- .../stories/package.json | 3 +- 19 files changed, 247 insertions(+), 11 deletions(-) create mode 100644 apps/public-docsite-v9-headless/.storybook/main.js create mode 100644 apps/public-docsite-v9-headless/.storybook/manager.js create mode 100644 apps/public-docsite-v9-headless/.storybook/preview-head.html create mode 100644 apps/public-docsite-v9-headless/.storybook/preview.js create mode 100644 apps/public-docsite-v9-headless/.storybook/theme.js create mode 100644 apps/public-docsite-v9-headless/eslint.config.js create mode 100644 apps/public-docsite-v9-headless/just.config.ts create mode 100644 apps/public-docsite-v9-headless/package.json create mode 100644 apps/public-docsite-v9-headless/project.json create mode 100644 apps/public-docsite-v9-headless/public/fluentui-logo.svg create mode 100644 apps/public-docsite-v9-headless/src/Introduction.mdx create mode 100644 apps/public-docsite-v9-headless/tsconfig.app.json create mode 100644 apps/public-docsite-v9-headless/tsconfig.json diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml index 1c171b83a13341..7e18da844d0335 100644 --- a/.github/workflows/docsite-publish-ghpages.yml +++ b/.github/workflows/docsite-publish-ghpages.yml @@ -54,7 +54,7 @@ jobs: cp -R apps/public-docsite-v9/dist/react/* _pages/react/ cp -R apps/chart-docsite/dist/storybook/* _pages/charts/ cp -R packages/web-components/dist/storybook/* _pages/web-components - cp -R packages/react-components/react-headless-components-preview/stories/dist/storybook/* _pages/headless/ + cp -R apps/public-docsite-v9-headless/dist/storybook/* _pages/headless/ - name: Upload Pages Artifact if: steps.affected_storybooks_count.outputs.value > 0 diff --git a/apps/pr-deploy-site/just.config.ts b/apps/pr-deploy-site/just.config.ts index 0aac32b650dde1..3fa049d438f1a0 100644 --- a/apps/pr-deploy-site/just.config.ts +++ b/apps/pr-deploy-site/just.config.ts @@ -33,7 +33,7 @@ const dependencies = [ '@fluentui/public-docsite-v9', '@fluentui/perf-test-react-components', '@fluentui/theme-designer', - '@fluentui/react-headless-components-preview-stories', + '@fluentui/public-docsite-v9-headless', // web-components '@fluentui/web-components', // charting diff --git a/apps/pr-deploy-site/pr-deploy-site.js b/apps/pr-deploy-site/pr-deploy-site.js index 5b19c761885997..eb75f70ce03649 100644 --- a/apps/pr-deploy-site/pr-deploy-site.js +++ b/apps/pr-deploy-site/pr-deploy-site.js @@ -85,10 +85,10 @@ function main() { title: 'Theme Designer v9', }, { - package: '@fluentui/react-headless-components-preview-stories', - link: './react-headless-components-preview-stories/storybook/index.html', + package: '@fluentui/public-docsite-v9-headless', + link: './public-docsite-v9-headless/storybook/index.html', icon: 'Code', - title: '@fluentui/react-headless-components-preview Storybook', + title: 'Headless Components', }, { package: '@fluentui/perf-test', diff --git a/apps/public-docsite-v9-headless/.storybook/main.js b/apps/public-docsite-v9-headless/.storybook/main.js new file mode 100644 index 00000000000000..f1f764f65e3c0d --- /dev/null +++ b/apps/public-docsite-v9-headless/.storybook/main.js @@ -0,0 +1,23 @@ +const rootMain = require('../../../.storybook/main'); + +module.exports = /** @type {Omit} */ ({ + ...rootMain, + stories: [ + ...rootMain.stories, + // docsite stories + '../src/**/*.mdx', + '../src/**/index.stories.@(ts|tsx)', + // headless package stories + '../../../packages/react-components/react-headless-components-preview/stories/src/**/index.stories.@(ts|tsx)', + ], + staticDirs: ['../public'], + addons: [...rootMain.addons], + build: { + previewUrl: process.env.DEPLOY_PATH, + }, + webpackFinal: (config, options) => { + const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) }); + + return localConfig; + }, +}); diff --git a/apps/public-docsite-v9-headless/.storybook/manager.js b/apps/public-docsite-v9-headless/.storybook/manager.js new file mode 100644 index 00000000000000..549d47e694f820 --- /dev/null +++ b/apps/public-docsite-v9-headless/.storybook/manager.js @@ -0,0 +1,10 @@ +import { addons } from 'storybook/manager-api'; + +import fluentStorybookTheme from './theme'; + +addons.setConfig({ + enableShortcuts: false, + theme: fluentStorybookTheme, + showPanel: false, + showToolbar: false, +}); diff --git a/apps/public-docsite-v9-headless/.storybook/preview-head.html b/apps/public-docsite-v9-headless/.storybook/preview-head.html new file mode 100644 index 00000000000000..670a7917313c64 --- /dev/null +++ b/apps/public-docsite-v9-headless/.storybook/preview-head.html @@ -0,0 +1,6 @@ + + diff --git a/apps/public-docsite-v9-headless/.storybook/preview.js b/apps/public-docsite-v9-headless/.storybook/preview.js new file mode 100644 index 00000000000000..0f1ef1a261711f --- /dev/null +++ b/apps/public-docsite-v9-headless/.storybook/preview.js @@ -0,0 +1,20 @@ +import * as rootPreview from '../../../.storybook/preview'; + +/** @type {typeof rootPreview.decorators} */ +export const decorators = [...rootPreview.decorators]; + +/** @type {typeof rootPreview.parameters} */ +export const parameters = { + ...rootPreview.parameters, + docs: { + ...rootPreview.parameters.docs, + }, + options: { + storySort: { + method: 'alphabetical', + order: ['Introduction', 'Headless Components'], + }, + }, +}; + +export const tags = ['autodocs']; diff --git a/apps/public-docsite-v9-headless/.storybook/theme.js b/apps/public-docsite-v9-headless/.storybook/theme.js new file mode 100644 index 00000000000000..f52d602117b4a4 --- /dev/null +++ b/apps/public-docsite-v9-headless/.storybook/theme.js @@ -0,0 +1,43 @@ +import { create } from 'storybook/theming'; + +import logo from '../public/fluentui-logo.svg'; + +/** + * Theming and branding the storybook to fluent. Taken from https://storybook.js.org/docs/react/configure/theming + */ +const theme = create({ + base: 'light', + + // Storybook-specific color palette + colorPrimary: 'rgba(255, 255, 255, .4)', + colorSecondary: '#0078d4', + + // UI + appBg: '#ffffff', + appContentBg: '#ffffff', + appBorderColor: '#e0e0e0', // use msft gray + appBorderRadius: 4, + + // Fonts + fontBase: + '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;', + fontCode: 'monospace', + + // Text colors + textColor: '#11100f', + textInverseColor: '#0078d4', // use msft primary blue default + + // Toolbar default and active colors + barSelectedColor: '#0078d4', // use msft primary blue default + + // Form colors + inputBorderRadius: 4, + + // Use the fluent branding for the upper left image + brandTitle: 'Fluent UI Headless Components', + brandUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-headless-components-preview', + brandImage: logo, +}); + +export default theme; diff --git a/apps/public-docsite-v9-headless/eslint.config.js b/apps/public-docsite-v9-headless/eslint.config.js new file mode 100644 index 00000000000000..c35361afdb4c42 --- /dev/null +++ b/apps/public-docsite-v9-headless/eslint.config.js @@ -0,0 +1,16 @@ +// @ts-check +const fluentPlugin = require('@fluentui/eslint-plugin'); + +/** @type {import("eslint").Linter.Config[]} */ +module.exports = [ + ...fluentPlugin.configs['flat/react'], + { + rules: { + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/jsx-no-bind': 'off', + '@typescript-eslint/no-deprecated': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + 'import/no-extraneous-dependencies': ['error', { packageDir: ['.', '../..'] }], + }, + }, +]; diff --git a/apps/public-docsite-v9-headless/just.config.ts b/apps/public-docsite-v9-headless/just.config.ts new file mode 100644 index 00000000000000..242d94f1f02109 --- /dev/null +++ b/apps/public-docsite-v9-headless/just.config.ts @@ -0,0 +1,5 @@ +import { preset, task } from '@fluentui/scripts-tasks'; + +preset(); + +task('build', 'build:node-lib').cached!(); diff --git a/apps/public-docsite-v9-headless/package.json b/apps/public-docsite-v9-headless/package.json new file mode 100644 index 00000000000000..cb7e8b05f1b858 --- /dev/null +++ b/apps/public-docsite-v9-headless/package.json @@ -0,0 +1,26 @@ +{ + "name": "@fluentui/public-docsite-v9-headless", + "version": "1.0.0", + "private": true, + "description": "Fluent UI React Headless Components Preview documentation", + "scripts": { + "build-storybook": "storybook build -o ./dist/storybook --docs", + "build-storybook:docsite": "cross-env DEPLOY_PATH=/headless/ storybook build -o ./dist/storybook --docs", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "type-check": "just-scripts type-check", + "start": "yarn storybook:docs", + "storybook": "storybook dev --port 3000", + "storybook:docs": "yarn storybook --docs", + "test": "jest --passWithNoTests" + }, + "dependencies": { + "@fluentui/react-headless-components-preview": "*", + "@fluentui/react-storybook-addon": "*", + "@fluentui/react-storybook-addon-export-to-sandbox": "*", + "react": "19.2.0", + "react-dom": "19.2.0", + "tslib": "^2.1.0" + } +} diff --git a/apps/public-docsite-v9-headless/project.json b/apps/public-docsite-v9-headless/project.json new file mode 100644 index 00000000000000..9f8f5b300b3e9c --- /dev/null +++ b/apps/public-docsite-v9-headless/project.json @@ -0,0 +1,17 @@ +{ + "name": "public-docsite-v9-headless", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "implicitDependencies": [], + "tags": ["platform:web", "vNext"], + "targets": { + "build-storybook": { + "dependsOn": [ + { + "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox"], + "target": "build" + } + ] + } + } +} diff --git a/apps/public-docsite-v9-headless/public/fluentui-logo.svg b/apps/public-docsite-v9-headless/public/fluentui-logo.svg new file mode 100644 index 00000000000000..9e84b88f79d31a --- /dev/null +++ b/apps/public-docsite-v9-headless/public/fluentui-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/public-docsite-v9-headless/src/Introduction.mdx b/apps/public-docsite-v9-headless/src/Introduction.mdx new file mode 100644 index 00000000000000..e1d51a74ac9146 --- /dev/null +++ b/apps/public-docsite-v9-headless/src/Introduction.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +## Overview + +Fluent UI React Headless Components is a set of unstyled, accessible, and composable React components that implement the Fluent UI design patterns without prescribing any specific styling solution. + +These components provide the behavior, accessibility, and state management while giving you full control over the visual presentation using your preferred styling approach (e.g., Tailwind CSS, CSS Modules, or any other solution). + +## Getting Started + +To get started with the headless components package in your project: + +1. Install the package using `npm` or `yarn`: + + ``` + npm install @fluentui/react-headless-components-preview + ``` + +2. Import and use the components: + + ```tsx + import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-headless-components-preview'; + ``` + +## Available Components + +| Component | Status | +| --------- | ------- | +| Accordion | Preview | +| Button | Preview | +| Divider | Preview | + +## Contributing + +Refer to the main FluentUI [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package. diff --git a/apps/public-docsite-v9-headless/tsconfig.app.json b/apps/public-docsite-v9-headless/tsconfig.app.json new file mode 100644 index 00000000000000..3114b73ab654d7 --- /dev/null +++ b/apps/public-docsite-v9-headless/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "ESNext", + "target": "ES2019", + "noEmit": false, + "outDir": "lib", + "jsx": "react", + "sourceMap": true, + "types": ["static-assets", "webpack-env"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["src"] +} diff --git a/apps/public-docsite-v9-headless/tsconfig.json b/apps/public-docsite-v9-headless/tsconfig.json new file mode 100644 index 00000000000000..1c0b3afbde8d0d --- /dev/null +++ b/apps/public-docsite-v9-headless/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.base.all.json", + "compilerOptions": { + "module": "ESNext", + "target": "ES2019", + "noEmit": true, + "experimentalDecorators": true, + "noUnusedLocals": true, + "strictNullChecks": true, + "noImplicitAny": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/apps/public-docsite-v9/project.json b/apps/public-docsite-v9/project.json index ba79ddfef615db..5faa045dec2c24 100644 --- a/apps/public-docsite-v9/project.json +++ b/apps/public-docsite-v9/project.json @@ -28,7 +28,7 @@ "build-storybook", "build-storybook:react", { - "projects": ["chart-docsite", "web-components", "react-headless-components-preview-stories"], + "projects": ["chart-docsite", "web-components", "public-docsite-v9-headless"], "target": "build-storybook:docsite" } ] diff --git a/packages/react-components/react-headless-components-preview/stories/.storybook/main.js b/packages/react-components/react-headless-components-preview/stories/.storybook/main.js index a603f242374765..67905c6bfe15f2 100644 --- a/packages/react-components/react-headless-components-preview/stories/.storybook/main.js +++ b/packages/react-components/react-headless-components-preview/stories/.storybook/main.js @@ -4,9 +4,6 @@ module.exports = /** @type {Omit { const localConfig = { ...rootMain.webpackFinal(config, options) }; diff --git a/packages/react-components/react-headless-components-preview/stories/package.json b/packages/react-components/react-headless-components-preview/stories/package.json index 166a4788ece56b..fbf175439e43d0 100644 --- a/packages/react-components/react-headless-components-preview/stories/package.json +++ b/packages/react-components/react-headless-components-preview/stories/package.json @@ -3,8 +3,7 @@ "version": "0.0.0", "private": true, "scripts": { - "build-storybook": "storybook build -o ./dist/storybook", - "build-storybook:docsite": "cross-env DEPLOY_PATH=/headless/ storybook build -o ./dist/storybook --docs" + "build-storybook": "storybook build -o ./dist/storybook" }, "devDependencies": {} } From f72a06b88ab019e82968171d2a6b8c2b8cafad76 Mon Sep 17 00:00:00 2001 From: mainframev Date: Tue, 14 Apr 2026 11:59:10 +0200 Subject: [PATCH 3/3] chore: test deploy --- .github/workflows/docsite-publish-ghpages.yml | 2 +- apps/chart-docsite/project.json | 8 ++++++++ apps/public-docsite-v9-headless/src/Introduction.mdx | 7 ++++++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml index 7e18da844d0335..324c97e33fb8ab 100644 --- a/.github/workflows/docsite-publish-ghpages.yml +++ b/.github/workflows/docsite-publish-ghpages.yml @@ -4,7 +4,7 @@ name: 'Docsite publish to Github Pages' on: push: branches: - - master + - chore/add-docsite-for-headless-components-app workflow_dispatch: jobs: diff --git a/apps/chart-docsite/project.json b/apps/chart-docsite/project.json index 408b6da647ded9..10979b6b94e983 100644 --- a/apps/chart-docsite/project.json +++ b/apps/chart-docsite/project.json @@ -12,6 +12,14 @@ "target": "build" } ] + }, + "build-storybook:docsite": { + "dependsOn": [ + { + "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"], + "target": "build" + } + ] } } } diff --git a/apps/public-docsite-v9-headless/src/Introduction.mdx b/apps/public-docsite-v9-headless/src/Introduction.mdx index e1d51a74ac9146..271bbfdd2fe175 100644 --- a/apps/public-docsite-v9-headless/src/Introduction.mdx +++ b/apps/public-docsite-v9-headless/src/Introduction.mdx @@ -21,7 +21,12 @@ To get started with the headless components package in your project: 2. Import and use the components: ```tsx - import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-headless-components-preview'; + import { + Accordion, + AccordionItem, + AccordionHeader, + AccordionPanel, + } from '@fluentui/react-headless-components-preview'; ``` ## Available Components