@fluentui/react-migration-v8-v9 1.0.1

package/CHANGELOG.json

@@ -0,0 +1,26 @@
+{
+  "name": "@fluentui/react-migration-v8-v9",
+  "entries": [
+    {
+      "date": "Tue, 25 Oct 2022 07:42:24 GMT",
+      "tag": "@fluentui/react-migration-v8-v9_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-migration-v8-v9",
+            "commit": "0467df35d2d95e7d782e48755f811af576490795",
+            "comment": "publishing migration package"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react to v8.98.7",
+            "commit": "a1c97799460396fc90984176eeb4eb65851062eb"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log - @fluentui/react-migration-v8-v9
+
+This log was last generated on Tue, 25 Oct 2022 07:42:24 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [1.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v1.0.1)
+
+Tue, 25 Oct 2022 07:42:24 GMT
+
+### Patches
+
+- publishing migration package ([PR #25354](https://github.com/microsoft/fluentui/pull/25354) by gcox@microsoft.com)
+- Bump @fluentui/react to v8.98.7 ([commit](https://github.com/microsoft/fluentui/commit/a1c97799460396fc90984176eeb4eb65851062eb) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-migration-v8-v9
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,9 @@
+# @fluentui/react-migration-v8-v9
+
+**React Migration v8 to v9 [Fluent UI React](https://react.fluentui.dev/)**
+
+This package contains component shims that provide the props interface of a v8 component and render a v9 component.
+
+Our recommendation is to avoid using shims and instead migrate from using v8 components to using v9 components in your codebase. Shims provide a convienient way to start migrating to v9 while defering the cost of updating a multitude of call points.
+
+Shims depend on both v8 and v9, so carefully consider the impact using a shim may have on bundle size and render performance vs. migrating to v9 directly.

package/dist/index.d.ts

@@ -0,0 +1,200 @@
+/// <reference types="react" />
+
+import { BrandVariants } from '@fluentui/react-components';
+import type { ButtonProps } from '@fluentui/react-components';
+import type { IBaseButtonProps } from '@fluentui/react';
+import type { IButtonProps } from '@fluentui/react';
+import type { IContextualMenuItem } from '@fluentui/react';
+import type { IContextualMenuProps } from '@fluentui/react';
+import type { IPalette } from '@fluentui/react';
+import { IStackItemProps } from '@fluentui/react';
+import type { IStackProps } from '@fluentui/react';
+import type { MenuProps } from '@fluentui/react-menu';
+import * as React_2 from 'react';
+import { Theme } from '@fluentui/react-components';
+import { Theme as Theme_2 } from '@fluentui/react';
+
+/**
+ * Shims a v8 ActionButton to render a v9 Button
+ */
+declare const ActionButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+export { ActionButtonShim }
+export { ActionButtonShim as CommandButtonShim }
+
+export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+
+export declare const black = "#000000";
+
+export declare const blackAlpha: Record<AlphaColors, string>;
+
+export declare const brandWeb: BrandVariants;
+
+export declare const ButtonShim: React_2.ForwardRefExoticComponent<IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Possible color variant values
+ */
+export declare type ColorVariants = {
+    shade50: string;
+    shade40: string;
+    shade30: string;
+    shade20: string;
+    shade10: string;
+    primary: string;
+    tint10: string;
+    tint20: string;
+    tint30: string;
+    tint40: string;
+    tint50: string;
+    tint60: string;
+};
+
+/**
+ * Shims v8 CompoundButton to render a v9 CompoundButton
+ */
+export declare const CompoundButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Creates v9 brand colors from a v8 palette using interpolation
+ * A v8 palette has nine colors and v9 has sixteen colors.
+ */
+export declare const createBrandVariants: (palette: IPalette, interpolation?: Interpolation) => BrandVariants;
+
+/**
+ * Creates a v8 theme from v9 brand colors and theme.
+ * You can optionally pass a v8 base theme.
+ * Otherwise the default v8 theme is used.
+ *
+ * The v9 colors, fonts, and effects are applied on top of the v8 theme
+ * to allow v8 components to look as much like v9 components as possible.
+ */
+export declare const createV8Theme: (brandColors: BrandVariants, themeV9: Theme, isDarkTheme?: boolean, themeV8?: Theme_2 | undefined) => Theme_2;
+
+/**
+ * Creates a v9 theme from a v8 theme.
+ * You can optional pass a base v9 theme; otherwise webLightTheme is used.
+ */
+export declare const createV9Theme: (themeV8: Theme_2, baseThemeV9?: Theme | undefined) => Theme;
+
+/**
+ * Shims a v8 DefaultButton to render a v9 Button
+ */
+export declare const DefaultButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * All the global shared colors and their shade/tint variants
+ */
+export declare type GlobalSharedColors = {
+    darkRed: ColorVariants;
+    burgundy: ColorVariants;
+    cranberry: ColorVariants;
+    red: ColorVariants;
+    darkOrange: ColorVariants;
+    bronze: ColorVariants;
+    pumpkin: ColorVariants;
+    orange: ColorVariants;
+    peach: ColorVariants;
+    marigold: ColorVariants;
+    yellow: ColorVariants;
+    gold: ColorVariants;
+    brass: ColorVariants;
+    brown: ColorVariants;
+    darkBrown: ColorVariants;
+    lime: ColorVariants;
+    forest: ColorVariants;
+    seafoam: ColorVariants;
+    lightGreen: ColorVariants;
+    green: ColorVariants;
+    darkGreen: ColorVariants;
+    lightTeal: ColorVariants;
+    teal: ColorVariants;
+    darkTeal: ColorVariants;
+    cyan: ColorVariants;
+    steel: ColorVariants;
+    lightBlue: ColorVariants;
+    blue: ColorVariants;
+    royalBlue: ColorVariants;
+    darkBlue: ColorVariants;
+    cornflower: ColorVariants;
+    navy: ColorVariants;
+    lavender: ColorVariants;
+    purple: ColorVariants;
+    darkPurple: ColorVariants;
+    orchid: ColorVariants;
+    grape: ColorVariants;
+    berry: ColorVariants;
+    lilac: ColorVariants;
+    pink: ColorVariants;
+    hotPink: ColorVariants;
+    magenta: ColorVariants;
+    plum: ColorVariants;
+    beige: ColorVariants;
+    mink: ColorVariants;
+    silver: ColorVariants;
+    platinum: ColorVariants;
+    anchor: ColorVariants;
+    charcoal: ColorVariants;
+};
+
+export declare const grey: Record<Greys, string>;
+
+export declare const grey14Alpha: Record<AlphaColors, string>;
+
+export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
+
+export declare const hcButtonFace = "#ffffff";
+
+export declare const hcButtonText = "#000000";
+
+export declare const hcCanvas = "#000000";
+
+export declare const hcCanvasText = "#ffffff";
+
+export declare const hcDisabled = "#3ff23f";
+
+export declare const hcHighlight = "#1aebff";
+
+export declare const hcHighlightText = "#000000";
+
+export declare const hcHyperlink = "#ffff00";
+
+declare type Interpolation = 'pairs' | 'primaryAndEnds';
+
+export declare const MenuButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const MenuItemShim: (props: IContextualMenuItem) => JSX.Element;
+
+/**
+ * Shims v8 PrimaryButton to render a v9 Button
+ */
+export declare const PrimaryButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const sharedColors: GlobalSharedColors;
+
+export declare const shimButtonProps: (props: IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>) => ButtonProps;
+
+export declare const shimMenuProps: (props: IContextualMenuProps) => Partial<MenuProps>;
+
+export declare const StackItemShim: (props: IStackItemProps) => JSX.Element;
+
+export declare const StackShim: (props: IStackProps) => JSX.Element;
+
+export declare type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right';
+
+export declare type TextAlignments = {
+    start: TextAlignment;
+    center: TextAlignment;
+    end: TextAlignment;
+    justify: TextAlignment;
+};
+
+/**
+ * Shims v8 ToggleButton to render a v9 ToggleButton
+ */
+export declare const ToggleButtonShim: React_2.ForwardRefExoticComponent<IButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const white = "#ffffff";
+
+export declare const whiteAlpha: Record<AlphaColors, string>;
+
+export { }

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@fluentui/react-migration-v8-v9",
+  "version": "1.0.1",
+  "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "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"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.16",
+    "@fluentui/scripts": "^1.0.0"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "3.3.4",
+    "@fluentui/react": "^8.98.7",
+    "@fluentui/react-components": "^9.5.3",
+    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-utilities": "^9.1.2",
+    "@griffel/react": "^1.4.1",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  }
+}