react-badge: Migrate to new DX (#18746)

* Migrate to new DX

* Change files

* Removed dependency on v9 icons for Badge storybook

* Update packages/react-examples/package.json

Co-authored-by: Martin Hochel <[email protected]>

* Update packages/react-examples/package.json

Co-authored-by: Martin Hochel <[email protected]>

* Update change/@fluentui-react-examples-7fda57e7-5640-426d-a34c-5273f5c1723b.json

Co-authored-by: Makoto Morimoto <[email protected]>

Co-authored-by: Martin Hochel <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

change/@fluentui-react-badge-ff19e180-13e9-4b2d-bc0e-cbe221e8e124.json

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

change/@fluentui-react-examples-7fda57e7-5640-426d-a34c-5273f5c1723b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Removing react-badge examples that have been moved due to migration to new DX.",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

jest.config.js

@@ -21,5 +21,6 @@ module.exports = {
     '<rootDir>/packages/jest-serializer-make-styles',
     '<rootDir>/packages/react-context-selector',
     '<rootDir>/packages/babel-make-styles',
+    '<rootDir>/packages/react-badge',
   ],
 };

nx.json

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

packages/react-badge/.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-badge/.storybook/preview.js

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

packages/react-badge/.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-badge/config/api-extractor.json

@@ -1,3 +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-badge/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-badge/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-badge',
+  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-badge/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": "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-badge/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/babel-make-styles": "^9.0.0-alpha.20",

packages/react-examples/src/react-badge/Badge/Badge.stories.tsx → packages/react-badge/src/Badge.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@fluentui/react-badge';
+import { Badge } from './index';
 
 export const BadgeAppearanceExample = () => (
   <>
@@ -53,3 +53,8 @@ export const BadgeAppearanceExample = () => (
     </div>
   </>
 );
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+};

packages/react-examples/src/react-badge/Badge/BadgeAppearance.stories.tsx → packages/react-badge/src/BadgeAppearance.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@fluentui/react-badge';
+import { Badge } from './index';
 
 export const BadgeAppearanceExample = () => (
   <div
@@ -179,3 +179,8 @@ export const BadgeAppearanceExample = () => (
     </div>
   </div>
 );
+
+export default {
+  title: 'Components/BadgeAppearance',
+  component: Badge,
+};

packages/react-examples/src/react-badge/Badge/BadgeContent.stories.tsx → packages/react-badge/src/BadgeContent.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Badge } from '@fluentui/react-badge';
+import { Badge } from './index';
 
 export const BadgeContentExample = () => (
   <div
@@ -84,3 +84,8 @@ export const BadgeContentExample = () => (
     </div>
   </div>
 );
+
+export default {
+  title: 'Components/BadgeContent',
+  component: Badge,
+};

packages/react-examples/src/react-badge/Badge/BadgeIcon.stories.tsx → packages/react-badge/src/BadgeIcon.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Badge } from '@fluentui/react-badge';
-import { AcceptIcon } from '@fluentui/react-icons-mdl2';
+import { Badge } from './index';
+import { AcceptIcon } from './tmp-icons.stories';
 
 export const BadgeIconExample = () => (
   <div
@@ -19,3 +19,8 @@ export const BadgeIconExample = () => (
     <Badge size="largest" icon={<AcceptIcon />} />
   </div>
 );
+
+export default {
+  title: 'Components/BadgeIcon',
+  component: Badge,
+};

packages/react-examples/src/react-badge/CounterBadge/CounterBadge.stories.tsx → packages/react-badge/src/CounterBadge.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CounterBadge } from '@fluentui/react-badge';
+import { CounterBadge } from './index';
 
 const DisplayBadge: React.FC<{}> = props => (
   <div style={{ display: 'flex', alignItems: 'center', gap: 4, margin: 4 }}>{props.children}</div>
@@ -57,3 +57,8 @@ export const BadgeAppearanceExample = () => {
     </>
   );
 };
+
+export default {
+  title: 'Components/CounterBadge',
+  component: CounterBadge,
+};

packages/react-examples/src/react-badge/PresenceBadge/PresenceBadge.stories.tsx → packages/react-badge/src/PresenceBadge.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PresenceBadge } from '@fluentui/react-badge';
+import { PresenceBadge } from './index';
 
 export const PresenceBadgeStatus = () => (
   <>
@@ -37,3 +37,8 @@ export const PresenceBadgeStatus = () => (
     </div>
   </>
 );
+
+export default {
+  title: 'Components/PresenceBadge',
+  component: PresenceBadge,
+};

packages/react-badge/src/tmp-icons.stories.tsx

@@ -0,0 +1,62 @@
+//
+// !!!   A temporary workaround to avoid dependencies on any icon packages.
+// !!!   A usage of converged icon package should be considered.
+// !!!   Used for converged stories to avoid dependencies on non-converged icons
+//
+
+import * as React from 'react';
+import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
+import { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    speak: 'none',
+    width: '1em',
+    height: '1em',
+  },
+  svg: {
+    height: '100%',
+    fill: 'currentColor',
+    verticalAlign: 'top',
+  },
+});
+
+const useIconProps = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+  const containerProps = props['aria-label']
+    ? {}
+    : {
+        role: 'presentation',
+        ['aria-hidden']: true,
+      };
+  const nativeProps = getNativeProps<React.HTMLAttributes<HTMLElement>>(props, htmlElementProperties);
+  const styles = useStyles();
+
+  const rootClasses = styles.root;
+  const svgClasses = styles.svg;
+
+  return { containerProps, nativeProps, rootClasses, svgClasses };
+};
+
+export const renderIcon = (
+  SVGElement: (props: { svgClasses: string }) => JSX.Element,
+): React.FC<React.HTMLAttributes<HTMLSpanElement>> => props => {
+  const { containerProps, nativeProps, rootClasses, svgClasses } = useIconProps(props);
+
+  return React.createElement(
+    'span',
+    {
+      ...containerProps,
+      ...nativeProps,
+      className: mergeClasses(rootClasses, props.className),
+    },
+    <SVGElement svgClasses={svgClasses} />,
+  );
+};
+
+export const AcceptIcon = renderIcon(props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" className={props.svgClasses}>
+    <path d="M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z" />
+  </svg>
+));

packages/react-badge/tsconfig.json

@@ -1,22 +1,17 @@
 {
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
-    "baseUrl": ".",
+    "target": "ES5",
+    "module": "CommonJS",
+    "lib": ["es5", "dom"],
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["jest", "custom-global"]
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+  }
 }

packages/react-examples/package.json

@@ -40,7 +40,6 @@
     "@fluentui/merge-styles": "^8.1.2",
     "@fluentui/react": "^8.22.0",
     "@fluentui/react-avatar": "^9.0.0-alpha.50",
-    "@fluentui/react-badge": "^9.0.0-alpha.51",
     "@fluentui/react-button": "^9.0.0-alpha.53",
     "@fluentui/react-charting": "^5.3.3",
     "@fluentui/react-checkbox": "^9.0.0-alpha.5",

tsconfig.base.json

@@ -37,7 +37,8 @@
       "@fluentui/react-divider": ["packages/react-divider/src/index.ts"],
       "@fluentui/react-label": ["packages/react-label/src/index.ts"],
       "@fluentui/jest-serializer-make-styles": ["packages/jest-serializer-make-styles/src/index.ts"],
-      "@fluentui/babel-make-styles": ["packages/babel-make-styles/src/index.ts"]
+      "@fluentui/babel-make-styles": ["packages/babel-make-styles/src/index.ts"],
+      "@fluentui/react-badge": ["packages/react-badge/src/index.ts"]
     }
   },
   "exclude": ["node_modules"]

workspace.json

@@ -106,7 +106,11 @@
       "sourceRoot": "packages/react-accordion/src"
     },
     "@fluentui/react-avatar": { "root": "packages/react-avatar", "projectType": "library" },
-    "@fluentui/react-badge": { "root": "packages/react-badge", "projectType": "library" },
+    "@fluentui/react-badge": {
+      "root": "packages/react-badge",
+      "projectType": "library",
+      "sourceRoot": "packages/react-badge/src"
+    },
     "@fluentui/react-button": { "root": "packages/react-button", "projectType": "library" },
     "@fluentui/react-card": { "root": "packages/react-card", "projectType": "library" },
     "@fluentui/react-charting": { "root": "packages/react-charting", "projectType": "library" },