Button: Migrate react-button to new DX

change/@fluentui-react-button-1b2e69bc-f82f-49a8-a211-b843e3bef591.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Button: Migrate to new dx",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-28ae56c7-be37-496c-a550-ccfd1b3180c6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Button: Migrate to new dx",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

jest.config.js

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

nx.json

@@ -79,7 +79,7 @@
     "@fluentui/react-accordion": { "tags": ["vNext"], "implicitDependencies": [] },
     "@fluentui/react-avatar": { "implicitDependencies": [] },
     "@fluentui/react-badge": { "implicitDependencies": [] },
-    "@fluentui/react-button": { "implicitDependencies": [] },
+    "@fluentui/react-button": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-cards": { "implicitDependencies": [] },
     "@fluentui/react-charting": { "implicitDependencies": [] },
     "@fluentui/react-checkbox": { "implicitDependencies": [] },

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

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

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

@@ -17,10 +17,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-button/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",

packages/react-examples/src/react-button/Button/Button.stories.tsx → packages/react-button/src/Button.stories.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Button, ButtonProps } from '@fluentui/react-button';
-import { Playground } from '../Playground';
-import { PlaygroundProps, PropDefinition } from '../Playground.types';
+import { Button, ButtonProps } from './Button';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps';
 
 // TODO: this is here while waiting for react-icons to merge
 const SVGIcon = () => (
@@ -101,25 +102,6 @@ export const Disabled = () => (
   </>
 );
 
-type ExampleProps = { iconOnly?: string };
-
-export const buttonBaseProps: PropDefinition<ButtonProps & ExampleProps>[] = [
-  { propName: 'content', propType: 'string', defaultValue: 'This is a button', dependsOnProps: ['~iconOnly'] },
-  { propName: 'disabled', propType: 'boolean' },
-  { propName: 'icon', propType: 'boolean' },
-  { propName: 'iconOnly', propType: 'boolean', dependsOnProps: ['icon'] },
-  {
-    propName: 'iconPosition',
-    propType: ['before', 'after'],
-    defaultValue: 'before',
-    dependsOnProps: ['icon', '~iconOnly'],
-  },
-  { propName: 'primary', propType: 'boolean', dependsOnProps: ['~subtle', '~transparent'] },
-  { propName: 'size', propType: ['small', 'medium', 'large'], defaultValue: 'medium' },
-  { propName: 'subtle', propType: 'boolean', dependsOnProps: ['~primary', '~transparent'] },
-  { propName: 'transparent', propType: 'boolean', dependsOnProps: ['~primary', '~subtle'] },
-];
-
 const buttonProps: PlaygroundProps<ButtonProps>['sections'] = [
   { sectionName: 'Button props', propList: buttonBaseProps },
 ];
@@ -129,3 +111,8 @@ export const ButtonPlayground = () => (
     <Button />
   </Playground>
 );
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+};

packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx → packages/react-button/src/CompoundButton.stories.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { CompoundButton, CompoundButtonProps } from '@fluentui/react-button';
-import { buttonBaseProps } from '../Button/Button.stories';
-import { Playground } from '../Playground';
-import { PlaygroundProps, PropDefinition } from '../Playground.types';
+import { CompoundButton, CompoundButtonProps } from './CompoundButton';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps, PropDefinition } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps';
 
 type ExampleProps = { iconOnly?: string };
 
@@ -25,3 +25,8 @@ export const CompoundButtonPlayground = () => (
     <CompoundButton />
   </Playground>
 );
+
+export default {
+  title: 'Components/CompoundButton',
+  component: CompoundButton,
+};

packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx → packages/react-button/src/MenuButton.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { MenuButton, MenuButtonProps } from '@fluentui/react-button';
 import { Menu, MenuItem, MenuList, MenuProps, MenuTrigger } from '@fluentui/react-menu';
-import { buttonBaseProps } from '../Button/Button.stories';
-import { Playground } from '../Playground';
-import { PlaygroundProps } from '../Playground.types';
+import { MenuButton, MenuButtonProps } from './MenuButton';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps';
 
 const ExampleMenu = (props: MenuButtonProps): JSX.Element => (
   <Menu>
@@ -29,3 +29,8 @@ export const MenuButtonPlayground = () => {
     </Playground>
   );
 };
+
+export default {
+  title: 'Components/MenuButton',
+  component: MenuButton,
+};

packages/react-examples/src/react-button/Playground.tsx → packages/react-button/src/Playground.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Checkbox, Dropdown, IDropdownOption, Stack, TextField } from '@fluentui/react';
 import { Text } from '@fluentui/react-text';
-import { PlaygroundProps } from './Playground.types';
+import { PlaygroundProps } from './Playground.types.stories';
 
 const tableStyle: React.CSSProperties = {
   border: '1px solid black',

packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx → packages/react-button/src/ToggleButton.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ToggleButton, ToggleButtonProps } from '@fluentui/react-button';
 import { useBoolean } from '@fluentui/react-utilities';
-import { buttonBaseProps } from '../Button/Button.stories';
-import { Playground } from '../Playground';
-import { PlaygroundProps, PropDefinition } from '../Playground.types';
+import { ToggleButton, ToggleButtonProps } from './ToggleButton';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps, PropDefinition } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps';
 
 export const ToggleButtonPlayground = () => {
   const [checked, { setTrue: setTrueChecked, setFalse: setFalseChecked, toggle: toggleChecked }] = useBoolean(false);
@@ -43,3 +43,8 @@ export const ToggleButtonPlayground = () => {
     </Playground>
   );
 };
+
+export default {
+  title: 'Components/ToggleButton',
+  component: ToggleButton,
+};

packages/react-button/src/buttonBaseProps.tsx

@@ -0,0 +1,21 @@
+import { ButtonProps } from './Button';
+import { PropDefinition } from './Playground.types';
+
+type ExampleProps = { iconOnly?: string };
+
+export const buttonBaseProps: PropDefinition<ButtonProps & ExampleProps>[] = [
+  { propName: 'content', propType: 'string', defaultValue: 'This is a button', dependsOnProps: ['~iconOnly'] },
+  { propName: 'disabled', propType: 'boolean' },
+  { propName: 'icon', propType: 'boolean' },
+  { propName: 'iconOnly', propType: 'boolean', dependsOnProps: ['icon'] },
+  {
+    propName: 'iconPosition',
+    propType: ['before', 'after'],
+    defaultValue: 'before',
+    dependsOnProps: ['icon', '~iconOnly'],
+  },
+  { propName: 'primary', propType: 'boolean', dependsOnProps: ['~subtle', '~transparent'] },
+  { propName: 'size', propType: ['small', 'medium', 'large'], defaultValue: 'medium' },
+  { propName: 'subtle', propType: 'boolean', dependsOnProps: ['~primary', '~transparent'] },
+  { propName: 'transparent', propType: 'boolean', dependsOnProps: ['~primary', '~subtle'] },
+];

packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts

@@ -157,8 +157,7 @@ const useContentContainerStyles = makeStyles({
 const useSecondaryContentStyles = makeStyles({
   base: theme => ({
     lineHeight: '100%',
-    marginTop: buttonSpacing.smaller,
-
+    marginTop: '4px',
     fontWeight: theme.global.type.fontWeights.regular,
   }),
   small: theme => ({

packages/react-button/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,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["jest", "custom-global"],
-    "skipLibCheck": true
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+  }
 }

packages/react-examples/package.json

@@ -41,7 +41,6 @@
     "@fluentui/react": "^8.19.1",
     "@fluentui/react-avatar": "^9.0.0-alpha.46",
     "@fluentui/react-badge": "^9.0.0-alpha.47",
-    "@fluentui/react-button": "^9.0.0-alpha.48",
     "@fluentui/react-cards": "^1.0.0-beta.104",
     "@fluentui/react-charting": "^5.2.8",
     "@fluentui/react-checkbox": "^9.0.0-alpha.3",

tsconfig.base.json

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

workspace.json

@@ -98,7 +98,11 @@
     },
     "@fluentui/react-avatar": { "root": "packages/react-avatar", "projectType": "library" },
     "@fluentui/react-badge": { "root": "packages/react-badge", "projectType": "library" },
-    "@fluentui/react-button": { "root": "packages/react-button", "projectType": "library" },
+    "@fluentui/react-button": {
+      "root": "packages/react-button",
+      "projectType": "library",
+      "sourceRoot": "packages/react-button/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" },