chore: migrate react-provider to use Griffel (#21360)

* chore: use Griffel in react-provider * fix to lock, hoist linaria pkg * fix syncpack * enable hack for presets
microsoft · Jan 24, 2022 · 7063053 · 7063053
1 parent c2706ce
commit 7063053
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 218 deletions.
diff --git a/.storybook/custom-loader.js b/.storybook/custom-loader.js
@@ -1,4 +1,5 @@
 const excludePlugins = ['module:@fluentui/babel-make-styles'];
+const excludePresets = ['@griffel'];
 
 module.exports = () => {
   return {
@@ -14,9 +15,17 @@ module.exports = () => {
         return !excludePlugins.includes(requestedPlugin);
       });
 
+      const existingPresets = /** @type {Required<import('@babel/core').ConfigItem[]>} */ (cfg.options.presets || []);
+      const presetsToInclude = existingPresets.filter(plugin => {
+        const requestedPreset = /** @type {NonNullable<typeof plugin['file']>} */ (plugin.file).request;
+
+        return !excludePresets.includes(requestedPreset);
+      });
+
       return {
         ...cfg.options,
         plugins: pluginsToInclude,
+        presets: presetsToInclude,
       };
     },
   };

diff --git a/change/@fluentui-react-provider-49fd1cbe-761c-4dc3-8c7f-2a87766c6e05.json b/change/@fluentui-react-provider-49fd1cbe-761c-4dc3-8c7f-2a87766c6e05.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "use Griffel packages",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
@@ -86,6 +86,9 @@
     "@babel/standalone": "7.14.8",
     "@ctrl/tinycolor": "3.3.4",
     "@fluentui/react-icons": "^2.0.154-beta.5",
+    "@griffel/babel-preset": "1.0.0",
+    "@griffel/jest-serializer": "1.0.0",
+    "@linaria/babel-preset": "3.0.0-beta.14",
     "@microsoft/api-extractor": "7.18.1",
     "@nrwl/cli": "13.4.5",
     "@nrwl/devkit": "13.4.5",
@@ -297,6 +300,7 @@
         "dependencies": [
           "@babel/core",
           "@babel/preset-typescript",
+          "@linaria/babel-preset",
           "@rnx-kit/eslint-plugin",
           "@types/react-test-renderer",
           "@typescript-eslint/eslint-plugin",

diff --git a/packages/react-provider/.babelrc.json b/packages/react-provider/.babelrc.json
@@ -1,3 +1,4 @@
 {
-  "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"]
+  "presets": ["@griffel"],
+  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
 }
diff --git a/packages/react-provider/etc/react-provider.api.md b/packages/react-provider/etc/react-provider.api.md
@@ -33,6 +33,8 @@ export interface FluentProviderContextValues extends Pick<FluentProviderState, '
     // (undocumented)
     provider: ProviderContextValue;
     // (undocumented)
+    textDirection: 'ltr' | 'rtl';
+    // (undocumented)
     themeClassName: ThemeClassNameContextValue;
     // (undocumented)
     tooltip: TooltipContextType;

diff --git a/packages/react-provider/jest.config.js b/packages/react-provider/jest.config.js
@@ -17,5 +17,5 @@ module.exports = {
   },
   coverageDirectory: './coverage',
   setupFilesAfterEnv: ['./config/tests.js'],
-  snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
+  snapshotSerializers: ['@griffel/jest-serializer'],
 };
diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
@@ -26,11 +26,9 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-beta.4",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.0",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -43,7 +41,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-beta.4",
+    "@griffel/react": "1.0.0",
     "@fluentui/react-shared-contexts": "9.0.0-beta.4",
     "@fluentui/react-tabster": "9.0.0-beta.5",
     "@fluentui/react-theme": "9.0.0-beta.4",

diff --git a/packages/react-provider/src/common/isConformant.ts b/packages/react-provider/src/common/isConformant.ts
@@ -1,6 +1,6 @@
 import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
 import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
+import griffelTests from '@fluentui/react-conformance-griffel';
 
 export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
@@ -9,7 +9,7 @@ export function isConformant<TProps = {}>(
     disabledTests: ['has-docblock'],
     asPropHandlesRef: true,
     componentPath: module!.parent!.filename.replace('.test', ''),
-    extraTests: makeStylesTests as TestObject<TProps>,
+    extraTests: griffelTests as TestObject<TProps>,
   };
 
   baseIsConformant(defaultOptions, testInfo);

diff --git a/packages/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -1,4 +1,5 @@
 import { resetIdsForTests } from '@fluentui/react-utilities';
+import { TextDirectionProvider } from '@griffel/react';
 import * as React from 'react';
 import { FluentProvider } from './FluentProvider';
 import * as renderer from 'react-test-renderer';
@@ -18,7 +19,7 @@ describe('FluentProvider', () => {
     Component: FluentProvider,
     displayName: 'FluentProvider',
     skipAsPropTests: true,
-    helperComponents: [ProviderContext.Provider],
+    helperComponents: [ProviderContext.Provider, TextDirectionProvider],
   });
 
   afterEach(() => {

diff --git a/packages/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-provider/src/components/FluentProvider/FluentProvider.types.ts
@@ -32,5 +32,6 @@ export interface FluentProviderState extends ComponentState<FluentProviderSlots>
 export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
   provider: ProviderContextValue;
   themeClassName: ThemeClassNameContextValue;
+  textDirection: 'ltr' | 'rtl';
   tooltip: TooltipContextType;
 }
diff --git a/packages/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TextDirectionProvider } from '@griffel/react';
 import { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
 import type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
@@ -14,7 +15,9 @@ export const renderFluentProvider = (state: FluentProviderState, contextValues:
       <ThemeContext.Provider value={contextValues.theme}>
         <ThemeClassNameContext.Provider value={contextValues.themeClassName}>
           <TooltipContext.Provider value={contextValues.tooltip}>
-            <slots.root {...slotProps.root}>{state.root.children}</slots.root>
+            <TextDirectionProvider dir={contextValues.textDirection}>
+              <slots.root {...slotProps.root}>{state.root.children}</slots.root>
+            </TextDirectionProvider>
           </TooltipContext.Provider>
         </ThemeClassNameContext.Provider>
       </ThemeContext.Provider>

diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts
@@ -11,6 +11,7 @@ export function useFluentProviderContextValues(state: FluentProviderState): Flue
 
   return {
     provider,
+    textDirection: dir,
     tooltip,
     theme,
     themeClassName: root.className!,

diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { FluentProviderState } from './FluentProvider.types';
 

diff --git a/packages/react-provider/src/stories/FluentProviderDefault.stories.tsx b/packages/react-provider/src/stories/FluentProviderDefault.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
-import { makeStyles, shorthands } from '@fluentui/react-make-styles';
+import { makeStyles, shorthands } from '@griffel/react';
 import { teamsDarkTheme, teamsLightTheme, tokens, webLightTheme } from '@fluentui/react-theme';
 
 import { FluentProvider } from '../FluentProvider';

diff --git a/packages/react-provider/src/stories/FluentProviderDir.stories.tsx b/packages/react-provider/src/stories/FluentProviderDir.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+import { shorthands, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 
 import { FluentProvider } from '../FluentProvider';

diff --git a/packages/react-provider/src/stories/FluentProviderFrame.stories.tsx b/packages/react-provider/src/stories/FluentProviderFrame.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Button } from '@fluentui/react-button';
-import { createDOMRenderer, makeStyles, RendererProvider, shorthands } from '@fluentui/react-make-styles';
+import { createDOMRenderer, makeStyles, RendererProvider, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 
 import { FluentProvider } from '../FluentProvider';

diff --git a/packages/react-provider/src/stories/FluentProviderNested.stories.tsx b/packages/react-provider/src/stories/FluentProviderNested.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+import { shorthands, makeStyles } from '@griffel/react';
 import { tokens, webLightTheme } from '@fluentui/react-theme';
 
 import { FluentProvider } from '../FluentProvider';