From 124d6321d599c970e76fbd5f3f66276f27e2b0df Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 11 Sep 2024 11:18:26 +0200
Subject: [PATCH 1/2] feat(storybook): add rtl/ltr toggle storybook addon

---
 .../react-storybook-addon/package.json        | 15 ++++-----
 .../src/components/DirSwitch.styles.ts        |  7 +++++
 .../src/components/DirSwitch.tsx              | 31 +++++++++++++++++++
 .../src/preset/manager.ts                     | 10 +++++-
 4 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-components/react-storybook-addon/src/components/DirSwitch.styles.ts
 create mode 100644 packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx

diff --git a/packages/react-components/react-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json
index bbca5892eec3d..2a41c755e5d76 100644
--- 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.2",
     "@fluentui/react-aria": "^9.13.4",
+    "@fluentui/react-provider": "^9.17.2",
+    "@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
new file mode 100644
index 0000000000000..f77eb3fa36f2d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..472e9702fd034
--- /dev/null
+++ 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}>{isLTR ? 'LTR' : 'RTL'}</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
index 1780a37a7021f..ee925d00cdca5 100644
--- 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,

From 1f1a5ac295869fff42b6a9e811395f72300b3470 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 11 Sep 2024 11:44:46 +0200
Subject: [PATCH 2/2] fix: simplify logic to display text

---
 .../react-storybook-addon/src/components/DirSwitch.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx b/packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx
index 472e9702fd034..8329dd86e1853 100644
--- a/packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx
+++ b/packages/react-components/react-storybook-addon/src/components/DirSwitch.tsx
@@ -24,7 +24,7 @@ export const DirSwitch = () => {
   return (
     <IconButton key={DIR_ID} title="Change Direction" onClick={toggleDirection}>
       <div>
-        Direction: <span className={styles.monospace}>{isLTR ? 'LTR' : 'RTL'}</span>
+        Direction: <span className={styles.monospace}>{direction.toUpperCase()}</span>
       </div>
     </IconButton>
   );