From f6f8ed2518a2c11c908f5326f13f606d27adc210 Mon Sep 17 00:00:00 2001 From: Tringa Krasniqi Date: Thu, 22 Jul 2021 01:09:47 +0200 Subject: [PATCH] react-card: Migrate to new DX (#19036) #### Pull request checklist - [x] Addresses an existing issue: Fixes partially #18579, fixes #19050 - [ ] Include a change request file using `$ yarn change` #### Description of changes Migration to new DX for react-card --- jest.config.js | 1 + nx.json | 2 +- packages/react-card/.storybook/main.js | 11 ++++++++ packages/react-card/.storybook/preview.js | 7 +++++ packages/react-card/.storybook/tsconfig.json | 9 ++++++ packages/react-card/config/api-extractor.json | 1 + .../config/api-extractor.local.json | 5 ++++ packages/react-card/config/tests.js | 7 ----- packages/react-card/etc/react-card.api.md | 3 +- packages/react-card/jest.config.js | 28 +++++++++++++------ packages/react-card/package.json | 11 ++++---- .../react-card/src/common/isConformant.ts | 13 +++++++++ .../src/components/Card/Card.test.tsx | 9 ++++++ .../react-card/src/components/Card/Card.tsx | 7 +++-- .../src/components/CardBody/CardBody.tsx | 2 -- .../src/components/CardFooter/CardFooter.tsx | 2 -- .../src/components/CardHeader/CardHeader.tsx | 2 -- .../components/CardPreview/CardPreview.tsx | 2 -- packages/react-card/tsconfig.json | 20 +++++-------- tsconfig.base.json | 4 ++- workspace.json | 6 +++- 21 files changed, 103 insertions(+), 49 deletions(-) create mode 100644 packages/react-card/.storybook/main.js create mode 100644 packages/react-card/.storybook/preview.js create mode 100644 packages/react-card/.storybook/tsconfig.json create mode 100644 packages/react-card/config/api-extractor.local.json create mode 100644 packages/react-card/src/common/isConformant.ts create mode 100644 packages/react-card/src/components/Card/Card.test.tsx diff --git a/jest.config.js b/jest.config.js index 4e5dbc04283d0..c707abe5c280e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -32,5 +32,6 @@ module.exports = { '/packages/react-avatar', '/packages/react-shared-contexts', '/packages/react-tooltip', + '/packages/react-card', ], }; diff --git a/nx.json b/nx.json index 3d73d10743c54..15883b5fbc902 100644 --- 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 new file mode 100644 index 0000000000000..f47245f2d07f0 --- /dev/null +++ b/packages/react-card/.storybook/main.js @@ -0,0 +1,11 @@ +const rootMain = require('../../../.storybook/main'); + +module.exports = /** @type {Pick} */ ({ + 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 new file mode 100644 index 0000000000000..10fd98d02c945 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..3bd9adcd2ee05 --- /dev/null +++ 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 index c8406ab42ca3c..f890ae360b7f7 100644 --- 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 new file mode 100644 index 0000000000000..c2ea401c1c368 --- /dev/null +++ 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": "/dist//src/index.d.ts" +} diff --git a/packages/react-card/config/tests.js b/packages/react-card/config/tests.js index 7d26fb36b5d0b..9d42be853e465 100644 --- 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 index 5cb79f6084877..d5779943f42e9 100644 --- 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; +export const Card: React_2.FunctionComponent>; // @public (undocumented) export const CardBody: React_2.FunctionComponent; @@ -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 index 7388104706e34..13245f53dd593 100644 --- 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: '/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 index b4298c35d045f..809677f1ba593 100644 --- 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 new file mode 100644 index 0000000000000..204c7f9d3ef2c --- /dev/null +++ b/packages/react-card/src/common/isConformant.ts @@ -0,0 +1,13 @@ +import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance'; + +export function isConformant( + testInfo: Omit, 'componentPath'> & { componentPath?: string }, +) { + const defaultOptions: Partial> = { + 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 new file mode 100644 index 0000000000000..d74e79ca8e6f8 --- /dev/null +++ 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 index 9f6d81c5619a6..54e43227b35d5 100644 --- a/packages/react-card/src/components/Card/Card.tsx +++ b/packages/react-card/src/components/Card/Card.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useFocusRects } from '@fluentui/utilities'; import { CardProps } from './Card.types'; import { useCard } from './useCard'; import { useCardStyles } from './useCardStyles'; @@ -7,11 +6,13 @@ import { useCardStyles } from './useCardStyles'; /** * Define a styled Card, using the `useCard` hook. */ -export const Card: React.FunctionComponent = React.forwardRef((props, ref) => { +export const Card: React.FunctionComponent> = 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 index c12caf97dd9df..ef681b3f12e27 100644 --- 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 = 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 index 930e56b32118f..c6efe534acdc6 100644 --- 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 = 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 index 8a167a4e8a2b2..fb1d6eab1a685 100644 --- 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 = 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 index 9c8e463f8f69f..ecee5570db844 100644 --- 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 = 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 index a140264f55ba3..5a977f51e4d87 100644 --- 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 index d89e441256ba5..6160b1c521ff9 100644 --- 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 index 94593c19f2912..44865361023cd 100644 --- 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" },