chore: migrate @fluentui/react-tabster (#20756)

* chore: migrate @fluentui/react-tabster

* Change files

* restore --passWithNoTests

* fix keyborg test name

* disable e2e tests for react-tabster

Co-authored-by: Lingfan Gao <[email protected]>

change/@fluentui-react-tabster-48b79843-9d37-473a-9867-25b6de014363.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update tooling configs",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-tabster/.babelrc.json

@@ -1,3 +1,3 @@
 {
-  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
+  "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"]
 }

packages/react-tabster/.npmignore

@@ -1,4 +1,3 @@
-.cache/
 .storybook/
 .vscode/
 bundle-size/

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

@@ -1,12 +1,14 @@
 const rootMain = require('../../../.storybook/main');
 
-module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
   stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 
+    // add your own webpack tweaks if needed
+
     return localConfig;
   },
-  previewHead: rootMain.previewHead,
 });

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

@@ -1,3 +1,7 @@
 import * as rootPreview from '../../../.storybook/preview';
 
+/** @type {typeof rootPreview.decorators} */
 export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };

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

@@ -1,9 +1,10 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "outDir": "",
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "types": ["static-assets", "environment", "inline-style-expand-shorthand", "storybook__addons"]
   },
-  "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"],
-  "include": ["../src/**/*", "*.js"]
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
 }

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

@@ -1,5 +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"
+  "mainEntryPointFilePath": "<projectFolder>/dist/packages/<unscopedPackageName>/src/index.d.ts"
 }

packages/react-tabster/config/tests.js

@@ -0,0 +1 @@
+/** Jest test setup file. */

packages/react-tabster/e2e/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress", "cypress-real-events", "cypress-storybook/cypress"],
-    "lib": ["es2015", "dom"]
+    "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
+    "lib": ["ES2019", "dom"]
   },
-  "include": ["."]
+  "include": ["**/*.ts"]
 }

packages/react-tabster/e2e/useKeyborg.e2e.ts

@@ -5,7 +5,7 @@ describe('Keyborg', () => {
     cy.visitStorybook();
   });
 
-  beforeEach(() => cy.loadStory('tabster', 'Keyborg'));
+  beforeEach(() => cy.loadStory('Components/tabster', 'Keyborg'));
 
   it('should open when clicked', () => {
     cy.contains('Start').focus().realPress('Tab');

packages/react-tabster/jest.config.js

@@ -8,12 +8,14 @@ module.exports = {
   preset: '../../jest.preset.js',
   globals: {
     'ts-jest': {
-      tsConfig: '<rootDir>/tsconfig.json',
+      tsConfig: '<rootDir>/tsconfig.spec.json',
       diagnostics: false,
     },
   },
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },
   coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
+  snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
 };

packages/react-tabster/package.json

@@ -20,8 +20,9 @@
     "storybook": "start-storybook",
     "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": "yarn storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-tabster/src && yarn docs",
+    "start": "yarn storybook",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -31,7 +32,8 @@
     "@types/react-test-renderer": "^16.0.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "react-test-renderer": "^16.3.0",
+    "@fluentui/babel-make-styles": "9.0.0-beta.3"
   },
   "dependencies": {
     "@fluentui/make-styles": "9.0.0-beta.3",

packages/react-tabster/tsconfig.json

@@ -1,18 +1,28 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["src"],
   "compilerOptions": {
     "target": "ES2019",
-    "module": "CommonJS",
-    "lib": ["ES2019", "DOM"],
-    "outDir": "dist",
-    "jsx": "react",
-    "declaration": true,
-    "experimentalDecorators": true,
+    "noEmit": true,
+    "isolatedModules": true,
     "importHelpers": true,
+    "jsx": "react",
     "noUnusedLocals": true,
-    "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"],
-    "isolatedModules": true
-  }
+    "preserveConstEnums": true
+  },
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    },
+    {
+      "path": "./e2e/tsconfig.json"
+    }
+  ]
 }

packages/react-tabster/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "lib": ["ES2019", "dom"],
+    "outDir": "dist",
+    "declaration": true,
+    "types": ["static-assets", "environment", "inline-style-expand-shorthand"]
+  },
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

packages/react-tabster/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "outDir": "dist",
+    "types": ["jest", "node", "inline-style-expand-shorthand"]
+  },
+  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}