Added shims to shim packages

lerna.json

@@ -3,6 +3,7 @@
     "apps/*",
     "packages/*",
     "packages/react-components/*",
+    "packages/react-components-migration/*",
     "scripts",
     "packages/fluentui/*",
     "tools",

package.json

@@ -310,6 +310,7 @@
       "packages/*",
       "packages/fluentui/*",
       "packages/react-components/*",
+      "packages/react-components-migration/*",
       "scripts",
       "tools",
       "typings"
@@ -344,6 +345,7 @@
       "apps/![react-18-tests-v8][react-18-tests-v9]/package.json",
       "packages/!(web-components)/package.json",
       "packages/react-components/*/package.json",
+      "packages/react-components-migration/*/package.json",
       "packages/fluentui/*/package.json",
       "scripts/package.json"
     ],

packages/react-components-migration/react-button-shim-v8-v9/.storybook/main.js

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

packages/react-components-migration/react-button-shim-v8-v9/.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 };

packages/react-components-migration/react-button-shim-v8-v9/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+}

packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json

@@ -5,5 +5,6 @@
     "enabled": true,
     "untrimmedFilePath": "",
     "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
-  }
+  },
+  "mainEntryPointFilePath": "<projectFolder>/../../../dist/out-tsc/types/packages/react-components-migration/<unscopedPackageName>/src/index.d.ts"
 }

packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md

@@ -0,0 +1,41 @@
+## API Report File for "@fluentui/react-button-shim-v8-v9"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ButtonProps } from '@fluentui/react-components';
+import { IBaseButtonProps } from '@fluentui/react';
+import { IButtonProps } from '@fluentui/react';
+import * as React_2 from 'react';
+
+// @public
+export const ActionButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public (undocumented)
+export const ButtonShim: React_2.ForwardRefExoticComponent<IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const CommandButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const CompoundButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const DefaultButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public (undocumented)
+export const MenuButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public
+export const PrimaryButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// @public (undocumented)
+export const shimButtonProps: (props: IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>) => ButtonProps;
+
+// @public
+export const ToggleButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components-migration/react-button-shim-v8-v9/package.json

@@ -20,7 +20,9 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -29,6 +31,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react": "^8.97.1",
+    "@fluentui/react-components": "^9.3.2",
+    "@fluentui/react-menu-shim-v8-v9": "9.0.0-alpha.0",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
     "@griffel/react": "^1.3.0",

packages/react-components-migration/react-button-shim-v8-v9/src/ActionButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/ActionButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/ButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/ButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/CommandButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/CommandButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/CompoundButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/CompoundButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/DefaultButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/DefaultButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/MenuButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/MenuButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/PrimaryButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/PrimaryButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/ToggleButtonShim.ts

@@ -0,0 +1 @@
+export * from './components/ToggleButtonShim/index';

packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ActionButtonShim } from './ActionButtonShim';
+
+describe('ActionButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<ActionButtonShim>Default ActionButtonShim</ActionButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/ActionButtonShim.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { Button } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+
+/**
+ * Shims a v8 ActionButton to render a v9 Button
+ */
+export const ActionButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: 'ms-Button--action ms-Button--command',
+  };
+
+  const shimProps = shimButtonProps(variantProps);
+
+  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance="transparent" />;
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/__snapshots__/ActionButtonShim.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default ActionButtonShim
+  </button>
+</div>
+`;

packages/react-components-migration/react-button-shim-v8-v9/src/components/ActionButtonShim/index.ts

@@ -0,0 +1 @@
+export * from './ActionButtonShim';

packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ButtonShim } from './ButtonShim';
+
+describe('ButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<ButtonShim>Default ButtonShim</ButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/ButtonShim.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { IBaseButtonProps } from '@fluentui/react';
+
+import { Button } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+import { ToggleButtonShim } from '../ToggleButtonShim';
+import { CompoundButtonShim } from '../CompoundButtonShim';
+
+export const ButtonShim: React.ForwardRefExoticComponent<
+  IBaseButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const shimProps = shimButtonProps(props);
+
+  if (props.toggle) {
+    return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;
+  }
+  if (props.secondaryText || props.onRenderDescription?.(props)) {
+    return <CompoundButtonShim {...props} />;
+  }
+
+  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/__snapshots__/ButtonShim.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--default"
+    type="button"
+  >
+    Default ButtonShim
+  </button>
+</div>
+`;

packages/react-components-migration/react-button-shim-v8-v9/src/components/ButtonShim/index.ts

@@ -0,0 +1 @@
+export * from './ButtonShim';

packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { CommandButtonShim } from './CommandButtonShim';
+
+describe('CommandButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<CommandButtonShim>Default CommandButtonShim</CommandButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/CommandButtonShim.tsx

@@ -0,0 +1,4 @@
+/**
+ * Shims v8 CommandButtonShim to render a v9 Button
+ */
+export { ActionButtonShim as CommandButtonShim } from '../ActionButtonShim';

packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/__snapshots__/CommandButtonShim.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommandButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default CommandButtonShim
+  </button>
+</div>
+`;

packages/react-components-migration/react-button-shim-v8-v9/src/components/CommandButtonShim/index.ts

@@ -0,0 +1 @@
+export * from './CommandButtonShim';

packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { CompoundButtonShim } from './CompoundButtonShim';
+
+describe('CompoundButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<CompoundButtonShim>Default CompoundButtonShim</CompoundButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/CompoundButtonShim.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { CompoundButton, CompoundButtonProps } from '@fluentui/react-components';
+
+import { shimButtonProps } from '../../shimButtonProps';
+
+/**
+ * Shims v8 CompoundButton to render a v9 CompoundButton
+ */
+export const CompoundButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',
+  };
+
+  const shimProps: CompoundButtonProps = {
+    ...shimButtonProps(variantProps),
+    secondaryContent: props.secondaryText || props.onRenderDescription?.(props),
+  };
+
+  return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/__snapshots__/CompoundButtonShim.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CompoundButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button fui-CompoundButton ms-Button--primary"
+    type="button"
+  >
+    <span
+      class="fui-CompoundButton__contentContainer"
+    >
+      Default CompoundButtonShim
+    </span>
+  </button>
+</div>
+`;

packages/react-components-migration/react-button-shim-v8-v9/src/components/CompoundButtonShim/index.ts

@@ -0,0 +1 @@
+export * from './CompoundButtonShim';

packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DefaultButtonShim } from './DefaultButtonShim';
+
+describe('DefaultButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<DefaultButtonShim>Default DefaultButtonShim</DefaultButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/DefaultButtonShim.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { IButtonProps } from '@fluentui/react';
+
+import { ButtonShim } from '../ButtonShim';
+
+/**
+ * Shims a v8 DefaultButton to render a v9 Button
+ */
+export const DefaultButtonShim: React.ForwardRefExoticComponent<
+  IButtonProps & React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  return <ButtonShim {...props} variantClassName={props.primary ? 'ms-Button--primary' : 'ms-Button--default'} />;
+});

packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/__snapshots__/DefaultButtonShim.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultButtonShim renders a default state 1`] = `
+<div>
+  <button
+    class="fui-Button ms-Button--primary"
+    type="button"
+  >
+    Default DefaultButtonShim
+  </button>
+</div>
+`;

packages/react-components-migration/react-button-shim-v8-v9/src/components/DefaultButtonShim/index.ts

@@ -0,0 +1 @@
+export * from './DefaultButtonShim';

packages/react-components-migration/react-button-shim-v8-v9/src/components/MenuButtonShim/MenuButtonShim.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { MenuButtonShim } from './MenuButtonShim';
+
+describe('MenuButtonShim', () => {
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<MenuButtonShim id="test">Default MenuButtonShim</MenuButtonShim>);
+    expect(result.container).toMatchSnapshot();
+  });
+});