chore: merge web-components-v3 feature branch

.github/CODEOWNERS

@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
 apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
 apps/vr-tests @microsoft/fluentui-react
 apps/vr-tests-react-components @microsoft/fluentui-react
+apps/vr-tests-web-components @microsoft/fui-wc
 apps/ssr-tests @microsoft/fluentui-react
 apps/pr-deploy-site @microsoft/fluentui-react-build
 apps/public-docsite-v9 @microsoft/cxe-red @microsoft/fluentui-react-build

.github/workflows/azure-static-web-apps-deploy.yml

@@ -0,0 +1,30 @@
+name: Azure Static Web Apps web components
+
+on:
+ push:
+ branches:
+ - master
+ paths:
+ - packages/web-components/**
+ workflow_dispatch:
+
+permissions:
+ contents: read
+
+jobs:
+ build_and_deploy:
+ runs-on: ubuntu-latest
+ name: Build and Deploy Job
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Build and Deploy Job
+ id: builddeploy
+ uses: Azure/static-web-apps-deploy@v1
+ with:
+ azure_static_web_apps_api_token: ${{ secrets.WEB_COMPONENTS_AZURE_STATIC_WEB_APPS_API_TOKEN }}
+ repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
+ action: 'upload'
+ app_build_command: 'yarn workspace @fluentui/web-components build-storybook'
+ output_location: 'packages/web-components/dist/storybook' # Built app content directory, relative to app_location - optional
+ skip_api_build: true

.gitignore

@@ -155,6 +155,9 @@ rush.json
 # tsdoc
 tsdoc-metadata.json
 
+# benchmarking
+.tensile/
+
 # tools cache
 gulp-cache
 .cache

.prettierignore

@@ -35,9 +35,6 @@ packages/fluentui/docs/src/behaviorMenu.json
 packages/fluentui/docs/src/exampleMenus
 packages/fluentui/docs/src/exampleSources
 packages/fluentui/ability-attributes/src/schema.ts
-packages/web-components/src/**/*.styles.ts
-packages/web-components/**/*.spec.ts
-packages/web-components/src/default-palette.ts
 
 # template files which actually follow a different language's formatting
 *.hbs

apps/vr-tests-web-components/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "import"],
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier"
+ ],
+ "rules": {
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+}

apps/vr-tests-web-components/.storybook/main.cjs

@@ -0,0 +1,90 @@
+const path = require('path');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+
+const tsBin = require.resolve('typescript');
+const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');
+
+const tsPaths = new TsconfigPathsPlugin({
+ configFile: tsConfigPath,
+});
+
+// TODO - these types are copied from root ./storybook/main.js as if we would like to use those as is, it will force us to add our custom storybook plugins as devDeps to WC
+// - refactor this to be shared
+
+/** @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig */
+
+module.exports = /** @type {StorybookBaseConfig} */ ({
+ addons: [
+ {
+ name: '@storybook/addon-docs',
+ },
+ {
+ name: '@storybook/addon-essentials',
+ options: {
+ backgrounds: false,
+ viewport: false,
+ toolbars: false,
+ actions: false,
+ },
+ },
+ ],
+
+ stories: ['../src/**/*.stories.tsx'],
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true,
+ },
+ babel: {},
+ typescript: {
+ // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+ reactDocgen: false,
+ },
+ webpackFinal: async config => {
+ config.resolve = config.resolve ?? {};
+ config.resolve.extensions = config.resolve.extensions ?? [];
+ config.resolve.plugins = config.resolve.plugins ?? [];
+ config.module = config.module ?? {};
+ config.plugins = config.plugins ?? [];
+
+ config.resolve.extensionAlias = {
+ '.js': ['.js', '.ts', '.tsx'],
+ '.mjs': ['.mjs', '.mts'],
+ };
+ config.resolve.extensions.push(...['.ts', '.js']);
+ config.resolve.plugins.push(tsPaths);
+ config.module.rules = config.module.rules ?? [];
+ config.module.rules.push(
+ {
+ test: /\.([cm]?ts|tsx)$/,
+ loader: 'ts-loader',
+ sideEffects: true,
+ options: {
+ transpileOnly: true,
+ compiler: tsBin,
+ },
+ },
+ // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
+ // It also enables importing other packages without proper ESM extensions, but that should be avoided !
+ // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
+ {
+ test: /\.m?js/,
+ resolve: { fullySpecified: false },
+ },
+ );
+
+ config.plugins.push(
+ new CircularDependencyPlugin({
+ exclude: /node_modules/,
+ failOnError: process.env.NODE_ENV === 'production',
+ }),
+ );
+
+ // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
+ if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
+ config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+ }
+
+ return config;
+ },
+});

apps/vr-tests-web-components/.storybook/manager.mjs

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ enableShortcuts: false,
+ sidebar: {
+ showRoots: true,
+ },
+});

apps/vr-tests-web-components/.storybook/preview.mjs

@@ -0,0 +1,17 @@
+import { WCThemeDecorator } from '../src/utilities/WCThemeDecorator';
+
+export const parameters = {
+ layout: 'fullscreen',
+ controls: { expanded: true },
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ options: {
+ storySort: {
+ method: 'alphabetical',
+ },
+ },
+};
+
+export const decorators = [WCThemeDecorator];

apps/vr-tests-web-components/package.json

@@ -0,0 +1,28 @@
+{
+ "name": "@fluentui/vr-tests-web-components",
+ "version": "0.0.1",
+ "private": true,
+ "description": "Visual regression tests for @fluentui/web-components",
+ "type": "module",
+ "scripts": {
+ "build": "build-storybook -o dist/storybook",
+ "format": "prettier . -w --ignore-path ../../.prettierignore",
+ "lint": "eslint src --ext .ts,.tsx",
+ "start": "start-storybook",
+ "type-check": "echo 'TODO'",
+ "vr:build": "yarn build",
+ "vr:test": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
+ },
+ "devDependencies": {
+ "@fluentui/eslint-plugin": "*",
+ "@fluentui/scripts-tasks": "*",
+ "html-react-parser": "4.0.0",
+ "typescript": "4.7.4"
+ },
+ "dependencies": {
+ "@fluentui/react-button": "*",
+ "@fluentui/react-storybook-addon": "*",
+ "@fluentui/web-components": ">=3.0.0-alpha",
+ "tslib": "^2.1.0"
+ }
+}

apps/vr-tests-web-components/project.json

@@ -0,0 +1,6 @@
+{
+ "name": "@fluentui/vr-tests-web-components",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "implicitDependencies": []
+}

apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { accordionDefinition, accordionItemDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+accordionDefinition.define(FluentDesignSystem.registry);
+accordionItemDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Accordion',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+ <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+ <div className="testWrapper" style={{ width: '300px' }}>
+ {story()}
+ </div>
+ </StoryWright>
+ );
+ },
+ ],
+};
+
+const add20Filled = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M10.5 2.75C10.5 2.33579 10.1642 2 9.75 2C9.33579 2 9 2.33579 9 2.75V9H2.75C2.33579 9 2 9.33579 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5H9V16.75C9 17.1642 9.33579 17.5 9.75 17.5C10.1642 17.5 10.5 17.1642 10.5 16.75V10.5H16.75C17.1642 10.5 17.5 10.1642 17.5 9.75C17.5 9.33579 17.1642 9 16.75 9H10.5V2.75Z"
+ fill="#212121"
+ />
+</svg>`;
+const subtract20Filled = `<svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <rect x="3" y="9.25" width="14" height="1.5" rx="0.75" fill="#212121" />
+</svg>`;
+
+export const Size = () =>
+ parse(`
+ <fluent-accordion>
+ <fluent-accordion-item expanded size="small">
+ <span slot="heading">Small</span>
+ Small Panel
+ </fluent-accordion-item>
+ <fluent-accordion-item expanded size="medium">
+ <span slot="heading">Medium</span>
+ Medium Panel
+ </fluent-accordion-item>
+ <fluent-accordion-item expanded size="large">
+ <span slot="heading">Large</span>
+ Large Panel
+ </fluent-accordion-item>
+ <fluent-accordion-item expanded size="extra-large">
+ <span slot="heading">Extra Large</span>
+ Extra Large Panel
+ </fluent-accordion-item>
+ </fluent-accordion>
+ `);
+
+export const SizeRTL = getStoryVariant(Size, RTL);
+export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
+
+export const ExpandIconPositionEnd = () =>
+ parse(`
+ <fluent-accordion openItems={[0]}>
+ <fluent-accordion-item expanded expand-icon-position="end">
+ <span slot="heading">Opened</span>
+ Visible Panel
+ </fluent-accordion-item>
+ <fluent-accordion-item expand-icon-position="end">
+ <span slot="heading">Closed</span>
+ Hidden Panel
+ </fluent-accordion-item>
+ </fluent-accordion>
+`);
+
+export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
+export const ExpandIconPositionEndDarkMode = getStoryVariant(ExpandIconPositionEnd, DARK_MODE);
+
+export const AccordionWithCustomIcons = () =>
+ parse(`
+ <fluent-accordion>
+ <fluent-accordion-item>
+ <span slot="collapsed-icon">${add20Filled}</span>
+ <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="heading">Accordion Header 1</span>
+ Accordion Panel 1
+ </fluent-accordion-item>
+ <fluent-accordion-item>
+ <span slot="collapsed-icon">${add20Filled}</span>
+ <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="heading">Accordion Header 2</span>
+ Accordion Panel 1
+ </fluent-accordion-item>
+ <fluent-accordion-item>
+ <span slot="collapsed-icon">${add20Filled}</span>
+ <span slot="expanded-icon">${subtract20Filled}</span>
+ <span slot="heading">Accordion Header 3</span>
+ Accordion Panel 1
+ </fluent-accordion-item>
+ </fluent-accordion>
+`);
+
+export const AccordionWithCustomIconsRTL = getStoryVariant(AccordionWithCustomIcons, RTL);
+export const AccordionWithCustomIconsDarkMode = getStoryVariant(AccordionWithCustomIcons, DARK_MODE);
+
+export const Disabled = () =>
+ parse(`
+ <fluent-accordion>
+ <fluent-accordion-item disabled expanded>
+ <span slot="heading">Disabled Item Opened</span>
+ Disabled Item Opened Panel
+ </fluent-accordion-item>
+ <fluent-accordion-item disabled>
+ <span slot="heading">Disabled Item Closed</span>
+ Disabled Item Closed Panel
+ </fluent-accordion-item>
+ </fluent-accordion>
+`);
+
+export const DisabledRTL = getStoryVariant(Disabled, RTL);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);