@fluentui/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -15,39 +15,89 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fluentui/issues/new/choose"
   },
+  "type": "module",
   "main": "dist/esm/index.js",
   "types": "dist/web-components.d.ts",
   "unpkg": "dist/web-components.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/dts/index.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/esm/accordion/define.d.ts",
+      "default": "./dist/esm/accordion/define.js"
+    },
+    "./accordion-item": {
+      "types": "./dist/esm/accordion-item/define.d.ts",
+      "default": "./dist/esm/accordion-item/define.js"
+    },
+    "./avatar": {
+      "types": "./dist/esm/avatar/define.d.ts",
+      "default": "./dist/esm/avatar/define.js"
+    },
+    "./badge": {
+      "types": "./dist/esm/badge/define.d.ts",
+      "default": "./dist/esm/badge/define.js"
+    },
+    "./counter-badge": {
+      "types": "./dist/esm/counter-badge/define.d.ts",
+      "default": "./dist/esm/counter-badge/define.js"
+    },
+    "./divider": {
+      "types": "./dist/esm/divider/define.d.ts",
+      "default": "./dist/esm/divider/define.js"
+    },
+    "./image": {
+      "types": "./dist/esm/image/define.d.ts",
+      "default": "./dist/esm/image/define.js"
+    },
+    "./text": {
+      "types": "./dist/esm/text/define.d.ts",
+      "default": "./dist/esm/text/define.js"
+    },
+    "./progress-bar": {
+      "types": "./dist/esm/progress-bar/define.d.ts",
+      "default": "./dist/esm/progress-bar/define.js"
+    },
+    "./switch": {
+      "types": "./dist/esm/switch/define.d.ts",
+      "default": "./dist/esm/switch/define.js"
+    },
+    "./spinner": {
+      "types": "./dist/esm/spinner/define.d.ts",
+      "default": "./dist/esm/spinner/define.js"
+    }
+  },
   "scripts": {
-    "clean": "node ./build/clean.js dist",
-    "doc": "api-extractor run --local",
-    "doc:ci": "api-extractor run --local",
-    "build": "tsc -p ./tsconfig.json && rollup -c && yarn doc",
-    "dev": "tsc -p ./tsconfig.json -w",
-    "tdd": "yarn dev & yarn test-chrome:watch",
-    "prepare": "yarn clean && yarn build",
+    "tsc": "tsc",
+    "api-extractor": "api-extractor",
+    "compile": "node ./scripts/compile",
+    "clean": "node ./scripts/clean dist",
+    "generate-api": "api-extractor run --local",
+    "build": "yarn compile && rollup -c && yarn generate-api",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
     "format:check": "yarn format -c",
     "code-style": "yarn format:check && yarn lint",
-    "start": "yarn start-storybook -p 6006 --docs",
+    "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
     "start-storybook": "node node_modules/@storybook/html/bin/index",
     "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
-    "test": "yarn doc:ci && yarn test-chrome:verbose",
+    "test": "yarn test-chrome:verbose",
     "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage",
-    "test-chrome:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
-    "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging",
-    "test-chrome:verbose:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha ",
-    "test-chrome:verbose:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --reporter=mocha",
-    "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+    "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
+    "test-chrome:verbose": "karma start karma.conf.cjs --no-fail-on-empty-test-suite --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
+    "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
+    "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
+    "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha ",
+    "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
+    "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
+    "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
-    "@storybook/html": "6.5.5",
+    "@storybook/html": "6.5.15",
     "@types/chai": "4.3.3",
     "@types/chai-spies": "1.0.3",
     "@types/karma": "6.3.3",
@@ -69,14 +119,17 @@
     "karma-source-map-support": "1.4.0",
     "karma-sourcemap-loader": "0.3.8",
     "karma-webpack": "5.0.0",
-    "mocha": "7.2.0"
+    "mocha": "7.2.0",
+    "@microsoft/api-extractor": "7.31.2",
+    "rimraf": "^3.0.2",
+    "typescript": "4.7.4"
   },
   "dependencies": {
-    "@microsoft/fast-element": "^2.0.0-beta.17",
-    "@microsoft/fast-foundation": "^3.0.0-alpha.21",
+    "@microsoft/fast-element": "^2.0.0-beta.22",
+    "@microsoft/fast-foundation": "^3.0.0-alpha.26",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
-    "tslib": "^1.13.0"
+    "tslib": "^2.1.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

package/build/clean.js

@@ -1,29 +0,0 @@
-/**
- * Utility for cleaning directories.
- * Usage: node build/clean.js %path%
- */
-const path = require('path');
-const rimraf = require('rimraf');
-const argv = require('yargs').argv;
-
-/**
- * All paths passed to the clean script
- */
-const paths = argv._;
-
-/**
- * Function to remove a given path
- */
-function cleanPath(cleanPath) {
-  const removePath = path.resolve(process.cwd(), cleanPath);
-  rimraf(removePath, () => {
-    console.log(removePath, 'cleaned');
-  });
-}
-
-/**
- * Clean all paths
- */
-if (Array.isArray(paths)) {
-  paths.forEach(cleanPath);
-}

package/build/transform-fragments.js

@@ -1,29 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef */
-
-/**
- * Reduces extra spaces in HTML tagged templates.
- *
- * @param {string} data - the fragment value
- * @returns string
- */
-export function transformHTMLFragment(data) {
-  data = data.replace(/\s*([<>])\s*/g, '$1'); // remove spaces before and after angle brackets
-  return data.replace(/\s{2,}/g, ' '); // Collapse all sequences to 1 space
-}
-
-/**
- * Reduces extra spaces in CSS tagged templates.
- *
- * Breakdown of this regex:
- *   (?:\s*\/\*(?:.|\s)+?\*\/\s*)  Remove comments (non-capturing)
- *   (?:;)\s+(?=\})  Remove semicolons and spaces followed by property list end (non-capturing)
- *   \s+(?=\{)  Remove spaces before property list start (non-capturing)
- *   (?<=:)\s+  Remove spaces after property declarations (non-capturing)
- *   \s*([{};,])\s*  Remove extra spaces before and after braces, semicolons, and commas (captures)
- *
- * @param {string} data - the fragment value
- * @returns string
- */
-export function transformCSSFragment(data) {
-  return data.replace(/(?:\s*\/\*(?:.|\s)+?\*\/\s*)|(?:;)\s+(?=\})|\s+(?=\{)|(?<=:)\s+|\s*([{};,])\s*/g, '$1');
-}

package/dist/dts/theme/theme.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Tokens: () => string;

package/dist/esm/theme/theme.stories.js

@@ -1,21 +0,0 @@
-import { DesignToken } from '@microsoft/fast-foundation';
-import * as tokens from '../theme/design-tokens';
-DesignToken.registerDefaultStyleTarget();
-export default {
-    title: 'Theme/Tokens',
-};
-export const Tokens = () => `
-<div>
-  <h3>Theme Tokens</h3>
-  <p>Debug story which uses theme tokens to style the element below.</p>
-  <div style="
-    font-family: ${tokens.fontFamilyBase.createCSS()};
-    font-size: ${tokens.fontSizeBase300.createCSS()};
-    background: var(${tokens.colorBrandBackground.cssCustomProperty});
-    color: ${tokens.colorNeutralForegroundOnBrand.createCSS()};
-    border: ${tokens.strokeWidthThicker.createCSS()} solid ${tokens.colorNeutralStroke1.createCSS()};
-    padding: ${tokens.spacingVerticalS.createCSS()} ${tokens.spacingHorizontalM.createCSS()};
-    box-shadow: ${tokens.shadow28.createCSS()};
-  ">colorNeutralForegroundOnBrand on colorBrandBackground with shadow28</div>
-</div>
-`;

package/karma.conf.js

@@ -1,147 +0,0 @@
-const path = require('path');
-
-const basePath = path.resolve(__dirname);
-
-const commonChromeFlags = [
-  '--no-default-browser-check',
-  '--no-first-run',
-  '--no-sandbox',
-  '--no-managed-user-acknowledgment-check',
-  '--disable-background-timer-throttling',
-  '--disable-backing-store-limit',
-  '--disable-boot-animation',
-  '--disable-cloud-import',
-  '--disable-contextual-search',
-  '--disable-default-apps',
-  '--disable-extensions',
-  '--disable-infobars',
-  '--disable-translate',
-];
-
-module.exports = function (config) {
-  let browsers;
-  if (process.env.BROWSERS) {
-    browsers = [process.env.BROWSERS];
-  } else if (config.browsers) {
-    browsers = config.browsers;
-  } else {
-    browsers = ['Chrome'];
-  }
-
-  const setup = 'setup-browser' + (config.package ? '-' + config.package : '');
-  const options = {
-    basePath,
-    browserDisconnectTimeout: 10000,
-    processKillTimeout: 10000,
-    frameworks: ['source-map-support', 'mocha', 'webpack'],
-    plugins: [
-      require('karma-mocha'),
-      require('karma-mocha-reporter'),
-      require('karma-webpack'),
-      require('karma-source-map-support'),
-      require('karma-sourcemap-loader'),
-      require('karma-coverage-istanbul-reporter'),
-      require('karma-chrome-launcher'),
-      require('karma-firefox-launcher'),
-    ],
-    files: [`dist/esm/__test__/${setup}.js`],
-    preprocessors: {
-      [`dist/esm/__test__/${setup}.js`]: ['webpack', 'sourcemap'],
-    },
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only',
-    },
-    webpack: {
-      mode: 'none',
-      resolve: {
-        extensions: ['.js'],
-        modules: ['dist', 'node_modules'],
-        mainFields: ['module', 'main'],
-      },
-      devtool: 'inline-source-map',
-      performance: {
-        hints: false,
-      },
-      optimization: {
-        nodeEnv: false,
-        usedExports: true,
-        flagIncludedChunks: false,
-        sideEffects: true,
-        concatenateModules: true,
-        splitChunks: {
-          name: false,
-        },
-        runtimeChunk: false,
-        emitOnErrors: true,
-        checkWasmTypes: false,
-        minimize: false,
-      },
-      module: {
-        rules: [
-          {
-            test: /\.js\.map$/,
-            use: ['ignore-loader'],
-          },
-          {
-            test: /\.js$/,
-            enforce: 'pre',
-            use: [
-              {
-                loader: 'source-map-loader',
-              },
-            ],
-          },
-        ],
-      },
-    },
-    mime: {
-      'text/x-typescript': ['ts'],
-    },
-    reporters: [config.reporter || (process.env.CI ? 'min' : 'progress')],
-    browsers: browsers,
-    customLaunchers: {
-      ChromeDebugging: {
-        base: 'Chrome',
-        flags: [...commonChromeFlags, '--remote-debugging-port=9333'],
-        debug: true,
-      },
-      ChromeHeadlessOpt: {
-        base: 'ChromeHeadless',
-        flags: [...commonChromeFlags],
-      },
-    },
-    client: {
-      captureConsole: true,
-      mocha: {
-        bail: config['bail'],
-        ui: 'bdd',
-        timeout: 5000,
-      },
-    },
-    logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
-  };
-
-  if (config.coverage) {
-    options.webpack.module.rules.push({
-      enforce: 'post',
-      exclude: /(__tests__|testing|node_modules|\.spec\.[tj]s$)/,
-      loader: 'istanbul-instrumenter-loader',
-      options: { esModules: true },
-      test: /\.[tj]s$/,
-    });
-    options.reporters = ['coverage-istanbul', ...options.reporters];
-    options.coverageIstanbulReporter = {
-      reports: ['html', 'text-summary', 'json', 'lcovonly', 'cobertura'],
-      dir: 'coverage',
-    };
-    options.junitReporter = {
-      outputDir: 'coverage',
-      outputFile: 'test-results.xml',
-      useBrowserName: false,
-    };
-  }
-
-  config.set(options);
-};

package/public/theme-switch.ts

@@ -1,13 +0,0 @@
-import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
-import { setTheme } from '../src/theme';
-
-const themes = {
-  'web-light': webLightTheme,
-  'web-dark': webDarkTheme,
-  'teams-light': teamsLightTheme,
-  'teams-dark': teamsDarkTheme,
-};
-
-export function switchTheme(themeName: keyof typeof themes) {
-  setTheme(themes[themeName]);
-}

package/rollup.config.js

@@ -1,53 +0,0 @@
-import commonJS from 'rollup-plugin-commonjs';
-import filesize from 'rollup-plugin-filesize';
-import resolve from 'rollup-plugin-node-resolve';
-import { terser } from 'rollup-plugin-terser';
-import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';
-import typescript from 'rollup-plugin-typescript2';
-import { transformCSSFragment, transformHTMLFragment } from './build/transform-fragments';
-
-const parserOptions = {
-  sourceType: 'module',
-};
-
-export default [
-  {
-    input: 'src/index-rollup.ts',
-    output: [
-      {
-        file: 'dist/web-components.js',
-        format: 'esm',
-      },
-      {
-        file: 'dist/web-components.min.js',
-        format: 'esm',
-        plugins: [terser()],
-      },
-    ],
-    plugins: [
-      resolve(),
-      commonJS(),
-      typescript({
-        tsconfigOverride: {
-          compilerOptions: {
-            declaration: false,
-          },
-        },
-      }),
-      transformTaggedTemplate({
-        tagsToProcess: ['css'],
-        transformer: transformCSSFragment,
-        parserOptions,
-      }),
-      transformTaggedTemplate({
-        tagsToProcess: ['html'],
-        transformer: transformHTMLFragment,
-        parserOptions,
-      }),
-      filesize({
-        showMinifiedSize: false,
-        showBrotliSize: true,
-      }),
-    ],
-  },
-];

package/storybook-typings.d.ts

@@ -1,4 +0,0 @@
-declare module '*.html' {
-  const value: string;
-  export default value;
-}