feat(storybook): add rtl/ltr toggle storybook addon (#32814)

microsoft · Sep 11, 2024 · 3b675ae · 3b675ae
1 parent 5a5fbd3
commit 3b675ae
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json
@@ -30,20 +30,21 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-provider": "^9.17.3",
     "@fluentui/react-aria": "^9.13.5",
+    "@fluentui/react-provider": "^9.17.3",
+    "@fluentui/react-theme": "^9.1.19",
+    "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0",
     "@storybook/components": "^7.6.20",
     "@storybook/manager-api": "^7.6.20",
     "@storybook/react": "^7.6.20",
-    "@storybook/theming": "^7.6.20"
+    "@storybook/theming": "^7.6.20",
+    "@types/react-dom": ">=16.9.0 <19.0.0",
+    "@types/react": ">=16.14.0 <19.0.0",
+    "react-dom": ">=16.14.0 <19.0.0",
+    "react": ">=16.14.0 <19.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

diff --git a/packages/react-components/react-storybook-addon/src/components/DirSwitch.styles.ts b/packages/react-components/react-storybook-addon/src/components/DirSwitch.styles.ts
@@ -0,0 +1,7 @@
+import { makeStyles } from '@griffel/react';
+
+export const useDirSwitchStyles = makeStyles({
+  monospace: {
+    fontFamily: 'monospace',
+  },
+});
diff --git a/packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx b/packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconButton } from '@storybook/components';
+
+import { DIR_ID } from '../constants';
+import { useGlobals } from '../hooks';
+
+import { useDirSwitchStyles } from './DirSwitch.styles';
+
+export const DirSwitch = () => {
+  const [globals, updateGlobals] = useGlobals();
+  const styles = useDirSwitchStyles();
+
+  const direction = globals[DIR_ID] ?? 'ltr';
+  const isLTR = direction === 'ltr';
+
+  const toggleDirection = React.useCallback(
+    () =>
+      updateGlobals({
+        [DIR_ID]: isLTR ? 'rtl' : 'ltr',
+      }),
+    [isLTR, updateGlobals],
+  );
+
+  return (
+    <IconButton key={DIR_ID} title="Change Direction" onClick={toggleDirection}>
+      <div>
+        Direction: <span className={styles.monospace}>{direction.toUpperCase()}</span>
+      </div>
+    </IconButton>
+  );
+};
diff --git a/packages/react-components/react-storybook-addon/src/preset/manager.ts b/packages/react-components/react-storybook-addon/src/preset/manager.ts
@@ -1,8 +1,9 @@
 import { addons, types } from '@storybook/manager-api';
 
-import { ADDON_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
+import { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
 import { ThemePicker } from '../components/ThemePicker';
 import { ReactStrictMode } from '../components/ReactStrictMode';
+import { DirSwitch } from '../components/DirSwitch';
 
 addons.register(ADDON_ID, () => {
   addons.add(THEME_ID, {
@@ -12,6 +13,13 @@ addons.register(ADDON_ID, () => {
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: ThemePicker,
   });
+  addons.add(DIR_ID, {
+    title: 'Dir Switch',
+    // eslint-disable-next-line deprecation/deprecation
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: DirSwitch,
+  });
   addons.add(STRICT_MODE_ID, {
     // eslint-disable-next-line deprecation/deprecation
     type: types.TOOL,