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);