chore(react-tabster): Migrate to new DX

change/@fluentui-react-tabster-aa375e06-b22e-4266-a51d-bfb461207c58.json

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

jest.config.js

@@ -11,5 +11,6 @@ module.exports = {
     '<rootDir>/packages/react-positioning',
     '<rootDir>/packages/react-link',
     '<rootDir>/packages/react-divider',
+    '<rootDir>/packages/react-tabster',
   ],
 };

nx.json

@@ -111,7 +111,7 @@
     "@fluentui/react-slider": { "implicitDependencies": [] },
     "@fluentui/react-storybook": { "implicitDependencies": [] },
     "@fluentui/react-tabs": { "implicitDependencies": [] },
-    "@fluentui/react-tabster": { "implicitDependencies": [] },
+    "@fluentui/react-tabster": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-text": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-theme": { "implicitDependencies": [] },
     "@fluentui/react-theme-provider": { "implicitDependencies": [] },

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

@@ -1,4 +1,3 @@
 import * as rootPreview from '../../../.storybook/preview';
 
 export const decorators = [...rootPreview.decorators];
-export const parameters = { layout: 'centered' };

packages/react-tabster/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-tabster/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-tabster/jest.config.js

@@ -1,5 +1,19 @@
-const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
+// @ts-check
 
-const config = createConfig({});
-
-module.exports = config;
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-tabster',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+};

packages/react-tabster/package.json

@@ -17,10 +17,11 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start-test": "just-scripts jest-watch",
     "storybook": "start-storybook",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "test": "jest --passWithNoTests",
+    "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-tabster/src && yarn docs",
+    "start": "storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.3.1",

packages/react-tabster/tsconfig.json

@@ -1,17 +1,17 @@
 {
   "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
     "target": "ES5",
-    "lib": ["ES2015", "DOM"],
+    "module": "CommonJS",
+    "lib": ["ES2015", "dom"],
     "outDir": "dist",
     "jsx": "react",
     "declaration": true,
-    "module": "CommonJS",
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
     "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
-  },
-  "include": ["src"]
+  }
 }

workspace.json

@@ -154,7 +154,11 @@
     "@fluentui/react-slider": { "root": "packages/react-slider", "projectType": "library" },
     "@fluentui/react-storybook": { "root": "packages/react-storybook", "projectType": "library" },
     "@fluentui/react-tabs": { "root": "packages/react-tabs", "projectType": "library" },
-    "@fluentui/react-tabster": { "root": "packages/react-tabster", "projectType": "library" },
+    "@fluentui/react-tabster": {
+      "root": "packages/react-tabster",
+      "projectType": "library",
+      "sourceRoot": "packages/react-tabster/src"
+    },
     "@fluentui/react-text": {
       "root": "packages/react-text",
       "projectType": "library",