react-divider: Migrate to new DX

change/@fluentui-react-divider-0094a310-de20-40b5-9518-a3b7bee1aa91.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Divider: Migrate react-divider to new DX.",
+  "packageName": "@fluentui/react-divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-a33dafc0-fc68-4afd-94d8-467f1209faf4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Removing @fluentui/react-divider stories from @fluentui/react-examples.",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

jest.config.js

@@ -8,5 +8,6 @@ module.exports = {
     '<rootDir>/packages/react-portal',
     '<rootDir>/packages/react-aria',
     '<rootDir>/packages/react-positioning',
+    '<rootDir>/packages/react-divider',
   ],
 };

nx.json

@@ -88,7 +88,7 @@
     "@fluentui/react-conformance": { "implicitDependencies": [] },
     "@fluentui/react-context-selector": { "implicitDependencies": [] },
     "@fluentui/react-date-time": { "implicitDependencies": [] },
-    "@fluentui/react-divider": { "implicitDependencies": [] },
+    "@fluentui/react-divider": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-docsite-components": { "implicitDependencies": [] },
     "@fluentui/react-examples": { "implicitDependencies": [] },
     "@fluentui/react-experiments": { "implicitDependencies": [] },

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

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

packages/react-divider/.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-divider/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-divider/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-divider',
+  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-divider/package.json

@@ -18,10 +18,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/packages/react-divider/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/babel-make-styles": "^9.0.0-alpha.16",

packages/react-examples/src/react-divider/Divider/Divider.stories.tsx → packages/react-divider/src/Divider.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
-import { ClockIcon } from '@fluentui/react-icons-mdl2';
-import { Divider, DividerProps } from '@fluentui/react-divider';
+import { ClockIcon } from './tmp-icons.stories';
+import { Divider, DividerProps } from './index';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export interface DividerStoryProps {
@@ -283,3 +283,8 @@ const DividerExamples = (props: DividerProps) => {
   );
 };
 export const DividerExample = () => <DividerExamples />;
+
+export default {
+  title: 'Components/Divider',
+  component: Divider,
+};

packages/react-divider/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 ClockIcon = renderIcon(props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" className={props.svgClasses} focusable="false">
+    <path d="M1024 2048q-124 0-238-32t-214-90-181-140-140-181-91-214-32-239q0-124 32-238t90-214 140-181 181-140 214-91 239-32q124 0 238 32t214 90 181 140 140 181 91 214 32 239q0 124-32 238t-90 214-140 181-181 140-214 91-239 32zm0-1664q-159 0-298 60T482 609 317 853t-61 299q0 159 60 298t165 244 244 165 299 61q159 0 298-60t244-165 165-244 61-299q0-159-60-298t-165-244-244-165-299-61zm0 768V640H896v640h512v-128h-384z" />
+  </svg>
+));

packages/react-divider/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"],
-    "skipLibCheck": true,
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["jest", "custom-global"]
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+  }
 }

packages/react-examples/package.json

@@ -46,7 +46,6 @@
     "@fluentui/react-charting": "^5.2.9",
     "@fluentui/react-checkbox": "^9.0.0-alpha.3",
     "@fluentui/react-components": "^9.0.0-alpha.66",
-    "@fluentui/react-divider": "^9.0.0-alpha.34",
     "@fluentui/react-docsite-components": "^8.2.26",
     "@fluentui/react-experiments": "^8.1.28",
     "@fluentui/react-file-type-icons": "^8.1.3",

tsconfig.base.json

@@ -31,7 +31,8 @@
       "@fluentui/react-storybook": ["packages/react-storybook/src/index.ts"],
       "@fluentui/react-accordion": ["packages/react-accordion/src/index.ts"],
       "@fluentui/react-text": ["packages/react-text/src/index.ts"],
-      "@fluentui/react-aria": ["packages/react-aria/src/index.ts"]
+      "@fluentui/react-aria": ["packages/react-aria/src/index.ts"],
+      "@fluentui/react-divider": ["packages/react-divider/src/index.ts"]
     }
   },
   "exclude": ["node_modules"]

workspace.json

@@ -107,7 +107,11 @@
     "@fluentui/react-conformance": { "root": "packages/react-conformance", "projectType": "library" },
     "@fluentui/react-context-selector": { "root": "packages/react-context-selector", "projectType": "library" },
     "@fluentui/react-date-time": { "root": "packages/react-date-time", "projectType": "library" },
-    "@fluentui/react-divider": { "root": "packages/react-divider", "projectType": "library" },
+    "@fluentui/react-divider": {
+      "root": "packages/react-divider",
+      "projectType": "library",
+      "sourceRoot": "packages/react-divider/src"
+    },
     "@fluentui/react-docsite-components": { "root": "packages/react-docsite-components", "projectType": "library" },
     "@fluentui/react-examples": { "root": "packages/react-examples", "projectType": "library" },
     "@fluentui/react-experiments": { "root": "packages/react-experiments", "projectType": "library" },