react-avatar: migration to new DX (#18866)

* DX migration: partial fix of Storybook issues

* DX migration: partial fix of Storybook

* Fixes for avatar storybook: Avatar Playground story

* Change files

* Fix for the Avatar Playground stories

Co-authored-by: André <[email protected]>

* Added fixes for build errors

* Added api report file: etc/react-avatar.api.md

* Changed description of props in ActiveAnimation story

* Deleted @fluentui-react-examples change file

Co-authored-by: André <[email protected]>

change/@fluentui-react-avatar-cfc81652-43b6-45e0-a231-4ae3f52e51f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "react-avatar: migration to new DX",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

jest.config.js

@@ -28,5 +28,6 @@ module.exports = {
     '<rootDir>/packages/keyboard-keys',
     '<rootDir>/packages/react-slider',
     '<rootDir>/packages/make-styles-webpack-loader',
+    '<rootDir>/packages/react-avatar',
   ],
 };

nx.json

@@ -75,7 +75,7 @@
     "@fluentui/public-docsite-setup": { "implicitDependencies": [] },
     "@fluentui/react": { "implicitDependencies": [] },
     "@fluentui/react-accordion": { "tags": ["vNext"], "implicitDependencies": [] },
-    "@fluentui/react-avatar": { "implicitDependencies": [] },
+    "@fluentui/react-avatar": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-badge": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-button": { "implicitDependencies": [] },
     "@fluentui/react-card": { "implicitDependencies": [] },

packages/react-avatar/.storybook/main.js

@@ -0,0 +1,11 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    return localConfig;
+  },
+});

packages/react-avatar/.storybook/preview.js

@@ -0,0 +1,3 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+export const decorators = [...rootPreview.decorators];

packages/react-avatar/.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  },
+  "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"],
+  "include": ["../src/**/*", "*.js"]
+}

packages/react-avatar/config/api-extractor.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
+}

packages/react-avatar/config/api-extractor.local.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "./api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts"
+}

packages/react-avatar/etc/react-avatar.api.md

@@ -0,0 +1,65 @@
+## API Report File for "@fluentui/react-avatar"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentPropsCompat } from '@fluentui/react-utilities';
+import { ComponentStateCompat } from '@fluentui/react-utilities';
+import { PresenceBadgeProps } from '@fluentui/react-badge';
+import { PresenceBadgeStatus } from '@fluentui/react-badge';
+import * as React_2 from 'react';
+import { ShorthandPropsCompat } from '@fluentui/react-utilities';
+
+// @public (undocumented)
+export const Avatar: React_2.ForwardRefExoticComponent<AvatarProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public
+export type AvatarDefaultedProps = 'size' | 'color' | 'activeDisplay' | 'getInitials' | 'label';
+
+// @public
+export type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
+
+// @public (undocumented)
+export interface AvatarProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
+    active?: 'active' | 'inactive' | 'unset';
+    activeDisplay?: 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+    badge?: PresenceBadgeStatus | Exclude<ShorthandPropsCompat<PresenceBadgeProps>, string>;
+    color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+    getInitials?: (name: string, isRtl: boolean) => string;
+    icon?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
+    idForColor?: string;
+    image?: ShorthandPropsCompat<React_2.ImgHTMLAttributes<HTMLImageElement>>;
+    label?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
+    name?: string;
+    size?: AvatarSizeValue;
+    square?: boolean;
+}
+
+// @public
+export type AvatarShorthandPropsCompat = 'label' | 'image' | 'badge';
+
+// @public
+export const avatarShorthandPropsCompat: AvatarShorthandPropsCompat[];
+
+// @public
+export type AvatarSizeValue = 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
+// @public (undocumented)
+export interface AvatarState extends ComponentStateCompat<AvatarProps, AvatarShorthandPropsCompat, AvatarDefaultedProps> {
+    ref: React_2.Ref<HTMLElement>;
+}
+
+// @public (undocumented)
+export const renderAvatar: (state: AvatarState) => JSX.Element;
+
+// @public (undocumented)
+export const useAvatar: (props: AvatarProps, ref: React_2.Ref<HTMLElement>, defaultProps?: AvatarProps | undefined) => AvatarState;
+
+// @public (undocumented)
+export const useAvatarStyles: (state: AvatarState) => AvatarState;
+
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-avatar/jest.config.js

@@ -1,9 +1,21 @@
-const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
-const path = require('path');
+// @ts-check
 
-const config = createConfig({
-  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-avatar',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
   snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
-});
-
-module.exports = config;
+};

packages/react-avatar/package.json

@@ -17,10 +17,11 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-avatar/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/babel-make-styles": "^9.0.0-alpha.25",