Adds Fluent Image web component

change/@fluentui-web-components-b6b8fdad-d432-4c23-871e-ff051099582f.json → change/@fluentui-web-components-185f47b3-238d-4e5a-a29a-ede968004918.json

@@ -1,7 +1,7 @@
 {
   "type": "prerelease",
-  "comment": "Adds Spinner as a web component",
+  "comment": "Adds Image component.",
   "packageName": "@fluentui/web-components",
-  "email": "ryan@ryanmerrill.net",
+  "email": "harankin@microsoft.com",
   "dependentChangeType": "patch"
 }

packages/web-components/.npmignore

@@ -1,30 +1,41 @@
+.vscode/
+
 # Tests
-dist/dts/__test__/
-dist/esm/__test__/
 *.spec.*
+*.test.*
 coverage/
+__fixtures__
+__mocks__
+__tests__
 
 # images
 images/
 
 # Source files
 src/
+scripts/
 
 # config files
 .eslintignore
 .eslintrc.js
+.eslintrc.json
 .prettierignore
-.storybook
 tsconfig.json
-tsconfig.build.json
+tsconfig.*.json
 rollup.config.json
+rollup.config.js
 karma.conf.cjs
 api-extractor.json
 .mocharc.json
 
-# Storybook static site
+# Storybook
+.storybook
+*.stories.*
+public/
 dist/storybook-static/
 
 # cache
 .rollupcache
-temp
+temp/
+etc/
+CHANGELOG.json

packages/web-components/.storybook/main.cjs

@@ -1,8 +1,15 @@
+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');
 
-module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookConfig,'typescript'|'babel'>} */ ({
+const tsPaths = new TsconfigPathsPlugin({
+  configFile: tsConfigPath,
+});
+
+module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookConfig,'typescript'|'babel'|'previewHead'>} */ ({
   stories: ['../src/**/*.stories.@(ts|mdx)'],
   staticDirs: ['../public'],
   core: {
@@ -24,10 +31,19 @@ module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookCon
     },
   ],
   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': ['.ts', '.js'],
       '.mjs': ['.mts', '.mjs'],
     };
+    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)$/,
@@ -46,7 +62,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookCon
         resolve: { fullySpecified: false },
       },
     );
-    config.resolve.extensions.push(...['.ts', '.js']);
+
     config.plugins.push(
       new CircularDependencyPlugin({
         exclude: /node_modules/,

packages/web-components/.storybook/preview.mjs

@@ -1,14 +1,14 @@
-import * as Fluent from '../src/index-rollup.ts';
+import * as Fluent from '../src/index-rollup.js';
 import webcomponentsTheme from './theme.mjs';
-import { switchTheme } from '../public/theme-switch.ts';
+import { switchTheme } from '../public/theme-switch.js';
 
 Fluent;
 
 function changeTheme(e) {
   switchTheme(e.target.value);
 }
 
-document.getElementById('theme-switch').addEventListener('change', changeTheme, false);
+document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false);
 switchTheme('web-light');
 
 export const parameters = {

packages/web-components/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["*", "../public", "../src/**/*.stories.*"]
+}

packages/web-components/CHANGELOG.json

@@ -1,6 +1,65 @@
 {
   "name": "@fluentui/web-components",
   "entries": [
+    {
+      "date": "Fri, 17 Feb 2023 04:19:53 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+      "version": "3.0.0-alpha.4",
+      "comments": {
+        "none": [
+          {
+            "author": "jslone@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "b79b33d10cbd6015531fa943e0e6dbe7f84b9b42",
+            "comment": "chore: run manually to bump wc to fix failed CI release"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Feb 2023 16:51:48 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+      "version": "3.0.0-alpha.4",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "ae03f3eec389aca7e15fde295868aacd51eb1822",
+            "comment": "chore(web-components): introduce ts-solution configs and monorepo setup/DX"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "226b7af089cea03d27ec722cabc73d018f263fd1",
+            "comment": "fix(web-components): dont ship non production assets to npm registry"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 04:24:51 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.3",
+      "version": "3.0.0-alpha.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ryan@ryanmerrill.net",
+            "package": "@fluentui/web-components",
+            "commit": "4d959c01c7b282136e669b7c0ac0d038b9deeafe",
+            "comment": "Adds Spinner as a web component"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "09b44a73d3d225044af4e114d210176f7f38001a",
+            "comment": "update fast element and foundation versions"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 13 Feb 2023 04:21:38 GMT",
       "tag": "@fluentui/web-components_v3.0.0-alpha.2",

packages/web-components/CHANGELOG.md

@@ -1,9 +1,28 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 26 Jan 2023 07:35:32 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Feb 2023 16:51:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.4)
+
+Thu, 16 Feb 2023 16:51:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.3..@fluentui/web-components_v3.0.0-alpha.4)
+
+### Changes
+
+- fix(web-components): dont ship non production assets to npm registry ([PR #26854](https://github.com/microsoft/fluentui/pull/26854) by martinhochel@microsoft.com)
+
+## [3.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.3)
+
+Wed, 15 Feb 2023 04:24:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.2..@fluentui/web-components_v3.0.0-alpha.3)
+
+### Changes
+
+- Adds Spinner as a web component ([PR #26392](https://github.com/microsoft/fluentui/pull/26392) by ryan@ryanmerrill.net)
+- update fast element and foundation versions ([PR #26844](https://github.com/microsoft/fluentui/pull/26844) by chhol@microsoft.com)
+
 ## [3.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.2)
 
 Wed, 25 Jan 2023 17:42:30 GMT

packages/web-components/api-extractor.json

@@ -16,5 +16,13 @@
 
   "dtsRollup": {
     "enabled": true
+  },
+  "compiler": {
+    "tsconfigFilePath": "./tsconfig.lib.json",
+    "overrideTsconfig": {
+      "compilerOptions": {
+        "paths": {}
+      }
+    }
   }
 }

packages/web-components/docs/api-report.md

@@ -1173,6 +1173,59 @@ export const fontWeightRegular: CSSDesignToken<string>;
 // @public (undocumented)
 export const fontWeightSemibold: CSSDesignToken<string>;
 
+// @public
+class Image_2 extends FASTElement {
+    block?: boolean;
+    border?: boolean;
+    borderRadius: ImageBorderRadius;
+    fit: ImageFit;
+    shadow?: boolean;
+    shape: ImageShape;
+}
+export { Image_2 as Image }
+
+// @public
+export const ImageBorderRadius: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly xlarge: "x-large";
+};
+
+// @public
+export type ImageBorderRadius = ValuesOf<typeof ImageBorderRadius>;
+
+// @public
+export const ImageDefinition: FASTElementDefinition<typeof Image_2>;
+
+// @public
+export const ImageFit: {
+    readonly none: "none";
+    readonly center: "center";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly default: "default";
+};
+
+// @public
+export type ImageFit = ValuesOf<typeof ImageFit>;
+
+// @public
+export const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public (undocumented)
+export type ImageShape = ValuesOf<typeof ImageShape>;
+
+// @public
+export const ImageStyles: ElementStyles;
+
+// @public
+export const ImageTemplate: ElementViewTemplate<Image_2>;
+
 // @public (undocumented)
 export const lineHeightBase100: CSSDesignToken<string>;
 
@@ -1204,14 +1257,15 @@ export const lineHeightHero800: CSSDesignToken<string>;
 export const lineHeightHero900: CSSDesignToken<string>;
 
 // @public
-export class ProgressBar extends FASTProgress {
+class ProgressBar_2 extends FASTProgress {
     shape: ProgressBarShape;
     thickness: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
+export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
 
 // @public
 export const ProgressBarShape: {
@@ -1226,7 +1280,7 @@ export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 export const ProgressBarStyles: ElementStyles;
 
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
 
 // @public
 export const ProgressBarThickness: {

packages/web-components/karma.conf.cjs

@@ -29,6 +29,7 @@ module.exports = function (config) {
   }
 
   const setup = 'setup-browser' + (config.package ? '-' + config.package : '');
+
   const options = {
     basePath,
     browserDisconnectTimeout: 10000,
@@ -44,9 +45,9 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-firefox-launcher'),
     ],
-    files: [`dist/esm/__test__/${setup}.js`],
+    files: [`scripts/${setup}.cjs`],
     preprocessors: {
-      [`dist/esm/__test__/${setup}.cjs`]: ['webpack', 'sourcemap'],
+      [`scripts/${setup}.cjs`]: ['webpack', 'sourcemap'],
     },
     webpackMiddleware: {
       // webpack-dev-middleware configuration

packages/web-components/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -48,22 +48,19 @@
   "scripts": {
     "tsc": "tsc",
     "api-extractor": "api-extractor",
-    "clean": "node ./build/clean.cjs dist",
-    "doc": "api-extractor run --local",
-    "doc:ci": "yarn doc",
-    "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",
+    "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.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
@@ -104,8 +101,8 @@
     "typescript": "4.7.4"
   },
   "dependencies": {
-    "@microsoft/fast-element": "^2.0.0-beta.20",
-    "@microsoft/fast-foundation": "^3.0.0-alpha.24",
+    "@microsoft/fast-element": "^2.0.0-beta.21",
+    "@microsoft/fast-foundation": "^3.0.0-alpha.25",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
     "tslib": "^2.1.0"