react-card: Migrate to new DX (microsoft#19036)

#### Pull request checklist - [x] Addresses an existing issue: Fixes partially microsoft#18579, fixes microsoft#19050 - [ ] Include a change request file using `$ yarn change` #### Description of changes Migration to new DX for react-card
PeterDraex · Aug 6, 2021 · f6f8ed2 · f6f8ed2
1 parent 3bd2ad0
commit f6f8ed2
Show file tree

Hide file tree

Showing 21 changed files with 103 additions and 49 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -32,5 +32,6 @@ module.exports = {
     '<rootDir>/packages/react-avatar',
     '<rootDir>/packages/react-shared-contexts',
     '<rootDir>/packages/react-tooltip',
+    '<rootDir>/packages/react-card',
   ],
 };
diff --git a/nx.json b/nx.json
@@ -78,7 +78,7 @@
     "@fluentui/react-avatar": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-badge": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-button": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
-    "@fluentui/react-card": { "implicitDependencies": [] },
+    "@fluentui/react-card": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-cards": { "implicitDependencies": [] },
     "@fluentui/react-charting": { "implicitDependencies": [] },
     "@fluentui/react-checkbox": { "implicitDependencies": [] },

diff --git a/packages/react-card/.storybook/main.js b/packages/react-card/.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;
+  },
+});
diff --git a/packages/react-card/.storybook/preview.js b/packages/react-card/.storybook/preview.js
@@ -0,0 +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 };
diff --git a/packages/react-card/.storybook/tsconfig.json b/packages/react-card/.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"]
+}
diff --git a/packages/react-card/config/api-extractor.json b/packages/react-card/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"
 }
diff --git a/packages/react-card/config/api-extractor.local.json b/packages/react-card/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"
+}
diff --git a/packages/react-card/config/tests.js b/packages/react-card/config/tests.js
@@ -1,13 +1,6 @@
 /** Jest test setup file. */
-
-const { setIconOptions } = require('@fluentui/react/lib/Styling');
 const { configure } = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 
-// Suppress icon warnings.
-setIconOptions({
-  disableWarnings: true,
-});
-
 // Configure enzyme.
 configure({ adapter: new Adapter() });
diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
@@ -8,7 +8,7 @@ import { ComponentPropsCompat } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 
 // @public
-export const Card: React_2.FunctionComponent<CardProps>;
+export const Card: React_2.FunctionComponent<CardProps & React_2.RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 export const CardBody: React_2.FunctionComponent<CardSectionProps>;
@@ -86,7 +86,6 @@ export const useCardState: (draftState: CardState) => void;
 // @public (undocumented)
 export function useCardStyles(state: CardState): CardState;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/react-card/jest.config.js b/packages/react-card/jest.config.js
@@ -1,9 +1,21 @@
-let { createConfig, resolveMergeStylesSerializer } = require('@fluentui/scripts/jest/jest-resources');
-let path = require('path');
+// @ts-check
 
-const config = createConfig({
-  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
-  snapshotSerializers: [resolveMergeStylesSerializer()],
-});
-
-module.exports = config;
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-card',
+  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'],
+};
diff --git a/packages/react-card/package.json b/packages/react-card/package.json
@@ -18,13 +18,15 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start-test": "just-scripts jest-watch",
-    "start": "just-scripts dev:storybook",
-    "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-card/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.3.2",
+    "@fluentui/react-conformance": "^0.4.3",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -41,7 +43,6 @@
     "@fluentui/keyboard-key": "^0.3.3",
     "@fluentui/react-make-styles": "^9.0.0-alpha.49",
     "@fluentui/react-utilities": "^9.0.0-alpha.33",
-    "@fluentui/utilities": "^8.2.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

diff --git a/packages/react-card/src/common/isConformant.ts b/packages/react-card/src/common/isConformant.ts
@@ -0,0 +1,13 @@
+import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';
+
+export function isConformant<TProps = {}>(
+  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
+) {
+  const defaultOptions: Partial<IsConformantOptions<TProps>> = {
+    asPropHandlesRef: true,
+    componentPath: module!.parent!.filename.replace('.test', ''),
+    disabledTests: ['has-docblock', 'kebab-aria-attributes'],
+  };
+
+  baseIsConformant(defaultOptions, testInfo);
+}
diff --git a/packages/react-card/src/components/Card/Card.test.tsx b/packages/react-card/src/components/Card/Card.test.tsx
@@ -0,0 +1,9 @@
+import { isConformant } from '../../common/isConformant';
+import { Card } from './Card';
+
+describe('Card', () => {
+  isConformant({
+    Component: Card,
+    displayName: 'Card',
+  });
+});
diff --git a/packages/react-card/src/components/Card/Card.tsx b/packages/react-card/src/components/Card/Card.tsx
@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { useFocusRects } from '@fluentui/utilities';
 import { CardProps } from './Card.types';
 import { useCard } from './useCard';
 import { useCardStyles } from './useCardStyles';
 
 /**
  * Define a styled Card, using the `useCard` hook.
  */
-export const Card: React.FunctionComponent<CardProps> = React.forwardRef<HTMLElement, CardProps>((props, ref) => {
+export const Card: React.FunctionComponent<CardProps & React.RefAttributes<HTMLElement>> = React.forwardRef<
+  HTMLElement,
+  CardProps
+>((props, ref) => {
   const { render, state } = useCard(props, ref);
 
   useCardStyles(state);
-  useFocusRects(state.ref);
 
   return render(state);
 });

diff --git a/packages/react-card/src/components/CardBody/CardBody.tsx b/packages/react-card/src/components/CardBody/CardBody.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useFocusRects } from '@fluentui/utilities';
 import { useCardSection, CardSectionProps } from '../../CardSection';
 import { useCardBodyStyles } from './useCardBodyStyles';
 
@@ -8,7 +7,6 @@ export const CardBody: React.FunctionComponent<CardSectionProps> = React.forward
     const { render, state } = useCardSection(props, ref);
 
     useCardBodyStyles(state);
-    useFocusRects(state.ref);
 
     return render(state);
   },

diff --git a/packages/react-card/src/components/CardFooter/CardFooter.tsx b/packages/react-card/src/components/CardFooter/CardFooter.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useFocusRects } from '@fluentui/utilities';
 import { useCardSection, CardSectionProps } from '../../CardSection';
 import { useCardFooterStyles } from './useCardFooterStyles';
 
@@ -8,7 +7,6 @@ export const CardFooter: React.FunctionComponent<CardSectionProps> = React.forwa
     const { render, state } = useCardSection(props, ref);
 
     useCardFooterStyles(state);
-    useFocusRects(state.ref);
 
     return render(state);
   },

diff --git a/packages/react-card/src/components/CardHeader/CardHeader.tsx b/packages/react-card/src/components/CardHeader/CardHeader.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useFocusRects } from '@fluentui/utilities';
 import { useCardSection, CardSectionProps } from '../../CardSection';
 import { useCardHeaderStyles } from './useCardHeaderStyles';
 
@@ -8,7 +7,6 @@ export const CardHeader: React.FunctionComponent<CardSectionProps> = React.forwa
     const { render, state } = useCardSection(props, ref);
 
     useCardHeaderStyles(state);
-    useFocusRects(state.ref);
 
     return render(state);
   },

diff --git a/packages/react-card/src/components/CardPreview/CardPreview.tsx b/packages/react-card/src/components/CardPreview/CardPreview.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useFocusRects } from '@fluentui/utilities';
 import { useCardSection, CardSectionProps } from '../../CardSection';
 import { useCardPreviewStyles } from './useCardPreviewStyles';
 
@@ -8,7 +7,6 @@ export const CardPreview: React.FunctionComponent<CardSectionProps> = React.forw
     const { render, state } = useCardSection(props, ref);
 
     useCardPreviewStyles(state);
-    useFocusRects(state.ref);
 
     return render(state);
   },

diff --git a/packages/react-card/tsconfig.json b/packages/react-card/tsconfig.json
@@ -1,23 +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,
-    "strictNullChecks": true,
-    "noImplicitAny": 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", "storybook__addons"]
+  }
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -43,7 +43,9 @@
       "@fluentui/keyboard-keys": ["packages/keyboard-keys/src/index.ts"],
       "@fluentui/react-slider": ["packages/react-slider/src/index.ts"],
       "@fluentui/make-styles-webpack-loader": ["packages/make-styles-webpack-loader/src/index.ts"],
-      "@fluentui/react-avatar": ["packages/react-avatar/src/index.ts"]
+      "@fluentui/react-avatar": ["packages/react-avatar/src/index.ts"],
+      "@fluentui/react-card": ["packages/react-card/src/index.ts"],
+      "@fluentui/utilities": ["packages/utilities/src/index.ts"]
     }
   },
   "exclude": ["node_modules"]

diff --git a/workspace.json b/workspace.json
@@ -119,7 +119,11 @@
       "projectType": "library",
       "sourceRoot": "packages/react-button/src"
     },
-    "@fluentui/react-card": { "root": "packages/react-card", "projectType": "library" },
+    "@fluentui/react-card": {
+      "root": "packages/react-card",
+      "projectType": "library",
+      "sourceRoot": "packages/react-card/src"
+    },
     "@fluentui/react-cards": { "root": "packages/react-cards", "projectType": "library" },
     "@fluentui/react-charting": { "root": "packages/react-charting", "projectType": "library" },
     "@fluentui/react-checkbox": { "root": "packages/react-checkbox", "projectType": "library" },