add directional button to toolbar

Author: LinKCoding

packages/styleguide/.storybook/preview.ts

@@ -177,6 +177,19 @@ export const globalTypes = {
       showName: true,
     },
   },
+  direction: {
+    name: 'Direction',
+    description: 'Text direction (LTR or RTL)',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'arrowright',
+      items: [
+        { value: 'ltr', title: 'Left-to-Right (LTR)', icon: 'arrowright' },
+        { value: 'rtl', title: 'Right-to-Left (RTL)', icon: 'arrowleft' },
+      ],
+      showName: true,
+    },
+  },
 };
 
 export const decorators = [withEmotion];

packages/styleguide/.storybook/theming/GamutThemeProvider.tsx

@@ -35,13 +35,15 @@ type GlobalsContext = {
     colorMode: 'light' | 'dark';
     theme: keyof typeof themeMap;
     logicalProps: 'true' | 'false';
+    direction: 'ltr' | 'rtl';
   };
 };
 
 export const withEmotion = (Story: any, context: GlobalsContext) => {
   const colorMode = context.globals.colorMode ?? 'light';
   const selectedTheme = context.globals.theme;
   const useLogicalProperties = context.globals.logicalProps !== 'false';
+  const direction = context.globals.direction ?? 'ltr';
   const background = corePalette[themeBackground[colorMode]];
   const storyRef = useRef<HTMLDivElement>(null);
   const currentTheme = themeMap[selectedTheme];
@@ -67,7 +69,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
           bg={themeBackground[colorMode]}
           ref={storyRef}
         >
-          {Story()}
+          <div dir={direction}>{Story()}</div>
         </Background>
       </GamutProvider>
     );
@@ -84,7 +86,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
         bg={themeBackground[colorMode]}
         ref={storyRef}
       >
-        {Story()}
+        <div dir={direction}>{Story()}</div>
       </Background>
     </GamutProvider>
   );