fix(tablekit-input): add rtl support

Part of #93
tablecheck · May 10, 2022 · 12d910c · 12d910c
1 parent 296c8aa
commit 12d910c
Show file tree

Hide file tree

Showing 7 changed files with 703 additions and 263 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -2,7 +2,7 @@ const mainConfig = require('@tablecheck/scripts/config/storybook.main');
 
 module.exports = {
   ...mainConfig,
-  addons: [...mainConfig.addons, 'storybook-dark-mode'],
+  addons: [...mainConfig.addons, 'storybook-dark-mode', 'storybook-rtl-addon'],
   stories: [
     '../pages/**/*.stories.mdx',
     '../packages/**/src/*.stories.mdx',

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,8 @@
 import { themes } from '@storybook/theming';
+import { LocaleCode } from '@tablecheck/locales';
 import * as React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
+import { useDirection } from 'storybook-rtl-addon';
 
 import { ThemeProvider, CLASSIC_COLORS, DARK_COLORS } from '../packages/theme';
 
@@ -64,8 +66,9 @@ export const parameters = {
 };
 
 export const decorators = [
-  (story: () => JSX.Element): JSX.Element => {
+  (story: () => JSX.Element, context): JSX.Element => {
     const isDark = useDarkMode();
+    const direction = useDirection(context);
     const theme = {
       isDark,
       colors: isDark
@@ -76,8 +79,12 @@ export const decorators = [
           }
     };
     return (
-      <ThemeProvider theme={theme} isDark={isDark}>
-        {story()}
+      <ThemeProvider
+        theme={theme}
+        isDark={isDark}
+        locale={direction === 'rtl' ? LocaleCode.Arabic : LocaleCode.English}
+      >
+        <div dir={direction}>{story()}</div>
       </ThemeProvider>
     );
   }