Merge branch 'feature/Cash-flow' of https://github.com/bigcapitalhq/client into feature/Cash-flow

2026-02-18 22:00:31 +00:00 · 2021-10-28 14:43:15 +02:00
parent 4b96ba76f5 0b5c5d83a4
commit 8c5552edd8
12 changed files with 187 additions and 158 deletions
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -14,7 +14,7 @@ import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import Authentication from 'components/Authentication';

-import { SplashScreen } from '../components';
+import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';

 /**
@@ -23,16 +23,18 @@ import { queryConfig } from '../hooks/query/base';
 function AppInsider({ history }) {
  return (
    <div className="App">
-      <Router history={history}>
-        <Switch>
-          <Route path={'/auth'} component={Authentication} />
-          <Route path={'/'}>
-            <PrivateRoute component={DashboardPrivatePages} />
-          </Route>
-        </Switch>
-      </Router>
+      <DashboardThemeProvider>
+        <Router history={history}>
+          <Switch>
+            <Route path={'/auth'} component={Authentication} />
+            <Route path={'/'}>
+              <PrivateRoute component={DashboardPrivatePages} />
+            </Route>
+          </Switch>
+        </Router>

-      <GlobalErrors />
+        <GlobalErrors />
+      </DashboardThemeProvider>
    </div>
  );
 }
--- a/src/components/BankAccounts/index.js
+++ b/src/components/BankAccounts/index.js
@@ -4,6 +4,94 @@ import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
 import Icon from '../Icon';
+import { whenRtl, whenLtr } from 'utils/styled-components';
+
+const ACCOUNT_TYPE = {
+  CASH: 'cash',
+  BANK: 'bank',
+  CREDIT_CARD: 'credit-card',
+};
+
+const ACCOUNT_TYPE_PAIR_ICON = {
+  [ACCOUNT_TYPE.CASH]: 'payments',
+  [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
+  [ACCOUNT_TYPE.BANK]: 'account-balance',
+};
+
+function BankAccountMetaLine({ title, value, className }) {
+  return (
+    <MetaLineWrap className={className}>
+      <MetaLineTitle>{title}</MetaLineTitle>
+      {value && <MetaLineValue>{value}</MetaLineValue>}
+    </MetaLineWrap>
+  );
+}
+
+function BankAccountBalance({ amount, loading }) {
+  return (
+    <BankAccountBalanceWrap>
+      <BankAccountBalanceAmount
+        className={clsx({
+          [Classes.SKELETON]: loading,
+        })}
+      >
+        {amount}
+      </BankAccountBalanceAmount>
+      <BankAccountBalanceLabel>{intl.get('balance')}</BankAccountBalanceLabel>
+    </BankAccountBalanceWrap>
+  );
+}
+
+function BankAccountTypeIcon({ type }) {
+  const icon = ACCOUNT_TYPE_PAIR_ICON[type];
+
+  if (!icon) {
+    return;
+  }
+  return (
+    <AccountIconWrap>
+      <Icon icon={icon} iconSize={18} />
+    </AccountIconWrap>
+  );
+}
+
+export function BankAccount({
+  title,
+  code,
+  type,
+  balance,
+  loading = false,
+  updatedBeforeText,
+  ...restProps
+}) {
+  return (
+    <BankAccountWrap {...restProps}>
+      <BankAccountHeader>
+        <BankAccountTitle className={clsx({ [Classes.SKELETON]: loading })}>
+          {title}
+        </BankAccountTitle>
+        <BnakAccountCode className={clsx({ [Classes.SKELETON]: loading })}>
+          {code}
+        </BnakAccountCode>
+        {!loading && <BankAccountTypeIcon type={type} />}
+      </BankAccountHeader>
+
+      <BankAccountMeta>
+        <BankAccountMetaLine
+          title={intl.get('cash_flow.label_account_transcations')}
+          value={2}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+        <BankAccountMetaLine
+          title={updatedBeforeText}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+      </BankAccountMeta>
+
+      <BankAccountBalance amount={balance} loading={loading} />
+    </BankAccountWrap>
+  );
+}

 const BankAccountWrap = styled.div`
  width: 225px;
@@ -91,13 +179,15 @@ const MetaLineValue = styled.div`
  border-radius: 9.6px;
  font-weight: normal;
  text-transform: none;
-  margin-left: auto;
  width: 30px;
  min-width: 30px;
  height: 16px;
  text-align: center;
  color: rgb(23, 43, 77);
  font-size: 11px;
+
+  ${whenLtr(`margin-left: auto;`)}
+  ${whenRtl(`margin-right: auto;`)}
 `;

 const BankAccountMeta = styled.div`
@@ -107,98 +197,14 @@ const BankAccountMeta = styled.div`
 export const BankAccountsList = styled.div`
  display: flex;
  margin: -8px;
+  flex-wrap: wrap;
 `;

 const AccountIconWrap = styled.div`
  position: absolute;
  top: 14px;
-  right: 12px;
  color: #abb3bb;
+
+  ${whenLtr(`right: 12px;`)}
+  ${whenRtl(`left: 12px;`)}
 `;
-
-function BankAccountMetaLine({ title, value, className }) {
-  return (
-    <MetaLineWrap className={className}>
-      <MetaLineTitle>{title}</MetaLineTitle>
-      {value && <MetaLineValue>{value}</MetaLineValue>}
-    </MetaLineWrap>
-  );
-}
-
-function BankAccountBalance({ amount, loading }) {
-  return (
-    <BankAccountBalanceWrap>
-      <BankAccountBalanceAmount
-        className={clsx({
-          [Classes.SKELETON]: loading,
-        })}
-      >
-        {amount}
-      </BankAccountBalanceAmount>
-      <BankAccountBalanceLabel>{intl.get('balance')}</BankAccountBalanceLabel>
-    </BankAccountBalanceWrap>
-  );
-}
-
-const ACCOUNT_TYPE = {
-  CASH: 'cash',
-  BANK: 'bank',
-  CREDIT_CARD: 'credit-card',
-};
-
-const ACCOUNT_TYPE_PAIR_ICON = {
-  [ACCOUNT_TYPE.CASH]: 'payments',
-  [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
-  [ACCOUNT_TYPE.BANK]: 'account-balance',
-};
-
-function BankAccountTypeIcon({ type }) {
-  const icon = ACCOUNT_TYPE_PAIR_ICON[type];
-
-  if (!icon) {
-    return;
-  }
-  return (
-    <AccountIconWrap>
-      <Icon icon={icon} iconSize={18} />
-    </AccountIconWrap>
-  );
-}
-
-export function BankAccount({
-  title,
-  code,
-  type,
-  balance,
-  loading = false,
-  updatedBeforeText,
-  ...restProps
-}) {
-  return (
-    <BankAccountWrap {...restProps}>
-      <BankAccountHeader>
-        <BankAccountTitle className={clsx({ [Classes.SKELETON]: loading })}>
-          {title}
-        </BankAccountTitle>
-        <BnakAccountCode className={clsx({ [Classes.SKELETON]: loading })}>
-          {code}
-        </BnakAccountCode>
-        {!loading && <BankAccountTypeIcon type={type} />}
-      </BankAccountHeader>
-
-      <BankAccountMeta>
-        <BankAccountMetaLine
-          title={intl.get('cash_flow.label_account_transcations')}
-          value={2}
-          className={clsx({ [Classes.SKELETON]: loading })}
-        />
-        <BankAccountMetaLine
-          title={updatedBeforeText}
-          className={clsx({ [Classes.SKELETON]: loading })}
-        />
-      </BankAccountMeta>
-
-      <BankAccountBalance amount={balance} loading={loading} />
-    </BankAccountWrap>
-  );
-}
--- a/src/components/Dashboard/DashboardThemeProvider.js
+++ b/src/components/Dashboard/DashboardThemeProvider.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { useAppIntlContext } from '../AppIntlProvider';
+
+export function DashboardThemeProvider({ children }) {
+  const { direction } = useAppIntlContext();
+
+  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+}
--- a/src/components/Dashboard/index.js
+++ b/src/components/Dashboard/index.js
@@ -1,4 +1,3 @@
-
-
 export * from './SplashScreen';
-export * from './DashboardBoot';
+export * from './DashboardBoot';
+export * from './DashboardThemeProvider';
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
@@ -16,7 +16,9 @@ import { useMemorizedColumnsWidths } from '../../../hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
+
 import { compose } from 'utils';
+import { whenRtl, whenLtr } from 'utils/styled-components';

 /**
 * Account transactions data table.
@@ -79,13 +81,7 @@ function AccountTransactionsDataTable({
      vListOverscanRowCount={0}
      initialColumnsWidths={initialColumnsWidths}
      onColumnResizing={handleColumnResizing}
-      noResults={
-        <T
-          id={
-            'cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account'
-          }
-        />
-      }
+      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
      className="table-constrant"
      payload={{
        onViewDetails: handleViewDetailCashflowTransaction,
@@ -133,10 +129,9 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`

    .tbody-inner {
      .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
+        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
+        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
      }
    }
  }
 `;
-
-const DashboardRegularTable = styled(DataTable)``;
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
@@ -14,6 +14,7 @@ import { curry } from 'lodash/fp';

 import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { whenRtl, whenLtr } from 'utils/styled-components';

 function AccountSwitchButton() {
  const { currentAccount } = useAccountTransactionsContext();
@@ -62,7 +63,7 @@ function AccountBalanceItem() {

  return (
    <AccountBalanceItemWrap>
-      Balance in Bigcapital {''}
+      {intl.get('cash_flow_transaction.balance_in_bigcapital')} {''}
      <AccountBalanceAmount>
        {currentAccount.formatted_amount}
      </AccountBalanceAmount>
@@ -159,8 +160,9 @@ const AccountSwitchText = styled.div`
 const AccountBalanceAmount = styled.span`
  font-weight: 600;
  display: inline-block;
-  margin-left: 10px;
  color: rgb(31, 50, 85);
+  ${whenLtr(`margin-left: 10px;`)}
+  ${whenRtl(`margin-right: 10px;`)}
 `;

 const AccountSwitchItemName = styled.div`
@@ -178,6 +180,7 @@ const AccountSwitchItemUpdatedAt = styled.div`

 const AccountSwitchButtonBase = styled(Button)`
  .bp3-button-text {
-    margin-right: 5px;
+    ${whenLtr(`margin-right: 5px;`)}
+    ${whenRtl(`margin-left: 5px;`)}
  }
 `;
--- a/src/containers/CashFlow/AccountTransactions/components.js
+++ b/src/containers/CashFlow/AccountTransactions/components.js
@@ -45,6 +45,8 @@ export function useAccountTransactionsColumns() {
        Cell: FormatDateCell,
        width: 110,
        className: 'date',
+        clickable: true,
+        textOverview: true,
      },
      {
        id: 'type',
@@ -53,6 +55,7 @@ export function useAccountTransactionsColumns() {
        className: 'type',
        width: 140,
        textOverview: true,
+        clickable: true,
      },
      {
        id: 'transaction_number',
@@ -60,6 +63,8 @@ export function useAccountTransactionsColumns() {
        accessor: 'transaction_number',
        width: 160,
        className: 'transaction_number',
+        clickable: true,
+        textOverview: true,
      },
      {
        id: 'reference_number',
@@ -67,6 +72,8 @@ export function useAccountTransactionsColumns() {
        accessor: 'reference_number',
        width: 160,
        className: 'reference_number',
+        clickable: true,
+        textOverview: true,
      },
      {
        id: 'deposit',
@@ -76,6 +83,7 @@ export function useAccountTransactionsColumns() {
        className: 'deposit',
        textOverview: true,
        align: 'right',
+        clickable: true
      },
      {
        id: 'withdrawal',
@@ -85,6 +93,7 @@ export function useAccountTransactionsColumns() {
        width: 150,
        textOverview: true,
        align: 'right',
+        clickable: true
      },
      {
        id: 'running_balance',
@@ -94,6 +103,7 @@ export function useAccountTransactionsColumns() {
        width: 150,
        textOverview: true,
        align: 'right',
+        clickable: true
      },
      {
        id: 'balance',
@@ -102,6 +112,7 @@ export function useAccountTransactionsColumns() {
        className: 'balance',
        width: 150,
        textOverview: true,
+        clickable: true,
        align: 'right',
      },
    ],
--- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
@@ -151,7 +151,7 @@ const CashflowBankAccountEnhanced = compose(
 )(CashflowBankAccount);

 function getUpdatedBeforeText(createdAt) {
-  return ''
+  return '';
 }

 /**
@@ -170,11 +170,7 @@ function CashflowAccountsEmptyState() {
  return (
    <AccountsEmptyStateBase>
      <AccountsEmptyStateTitle>
-        <T
-          id={
-            'cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria'
-          }
-        />
+        <T id={'cash_flow.accounts.no_results'} />
      </AccountsEmptyStateTitle>
    </AccountsEmptyStateBase>
  );
@@ -260,7 +256,7 @@ function CashflowAccountContextMenu({
      </MenuItem>

      <MenuItem
-    text={<T id={'cash_flow_money_out'} />}
+        text={<T id={'cash_flow_money_out'} />}
        icon={<Icon icon={'arrow-upward'} iconSize={16} />}
      >
        <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1247,7 +1247,7 @@
  "expense.details.total": "إجمالي",
  "manual_journal.details.subtotal": "المجموع",
  "manual_journal.details.total": "إجمالي",
-  "manual_journal.details.description": "الوصف", 
+  "manual_journal.details.description": "الوصف",
  "setup.left_side.title": "سجل منشأة جديدة الأن.",
  "setup.left_side.description": "حسابك علي Bigcapital",
  "setup.left_side.footer_help": "نحن هنا للمساعدة!",
@@ -1369,46 +1369,46 @@
  "filter.enter_date": "أدخل تاريخ",
  "filter.value": "قيمة",
  "payment_made.empty_status.title": "المنشأة لم تدفع اي اموال إلي الموردين ، إلي حد الأن!.",
-  "estimate.delete.error.estimate_converted_to_invoice":"لا يمكن حذف عملية عرض اسعار الذي تم تحويلها إلي فاتورة بيع.",
+  "estimate.delete.error.estimate_converted_to_invoice": "لا يمكن حذف عملية عرض اسعار الذي تم تحويلها إلي فاتورة بيع.",
  "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
-  
+
  "items.option.only_active": "Only active",
  "items.option_all_items.hint": "جميع الاصناف ، بما في ذلك تلك الاصناف لديها رصيد صفر.",
  "items.option_with_transactions": "الاصناف مع معاملات",
  "items.option_with_transactions.hint": "قم بتضمين الاصناف التي لها معاملات في فترة التاريخ المحددة فقط.",
-  "items.option_without_zero_balance":  "الاصناف ذات رصيد صفر",
+  "items.option_without_zero_balance": "الاصناف ذات رصيد صفر",
  "items.option_without_zero_balance.hint": "قم بتضمين الاصناف واستبعاد تلك التي لديها رصيد صفري.",
  "items.label_filter_items": "تصفية الاصناف",

-  "customers.option_all_customers.hint":"All customers, including that ones have zero-balance.",
+  "customers.option_all_customers.hint": "All customers, including that ones have zero-balance.",
  "customers.option_without_zero_balance": "Customers without zero-balance",
-  "customers.option_without_zero_balance.hint":"Include customers and exclude that ones have zero-balance.",
+  "customers.option_without_zero_balance.hint": "Include customers and exclude that ones have zero-balance.",
  "customers.option_with_transactions": "Customers with transactions",
  "customers.option_with_transactions.hint": "Include customers that onces have transactions on the given date period only.",
  "customers.label_filter_customers": "Filter customers",
- 
- 
-  "vendors.option_all_vendors.hint":"All vendors, including that ones have zero-balance.",
+
+
+  "vendors.option_all_vendors.hint": "All vendors, including that ones have zero-balance.",
  "vendors.label_filter_vendors": "Filter Vendors",
  "vendors.option_without_zero_balance": "Vendors without zero-balance",
-  "vendors.option_without_zero_balance.hint":"Include vendors and exclude that ones have zero-balance.",
+  "vendors.option_without_zero_balance.hint": "Include vendors and exclude that ones have zero-balance.",
  "vendors.option_with_transactions": "Vendors with transactions",
  "vendors.option_with_transactions.hint": "Include vendors that onces have transactions on the given date period only.",

-  "siebar.cashflow":"التدفق النقدي",
-  "siebar.cashflow.label_cash_and_bank_accounts": "حسابات نقدية ومصرفية ",
-  "cash_flow.label_account_transcations": "حساب المعاملات",
+  "siebar.cashflow": "التدفق النقدي",
+  "siebar.cashflow.label_cash_and_bank_accounts": "حسابات نقدية والمصارف ",
+  "cash_flow.label_account_transcations": "معاملات الحساب",
  "cash_flow.label.deposit": "الإيداع",
  "cash_flow.label.withdrawal": "السحب",
  "cash_flow.label.running_balance": "الرصيد التحليلي",
-  "cash_flow.label.add_cash_account": "اضافة حساب نقدي",
-  "cash_flow.label.add_bank_account": "اضافة حساب مصرفي",
-  "cash_flow.label.add_money_in": "إيداع إلي حساب",
-  "cash_flow.label.add_money_out": "سحب من حساب",
+  "cash_flow.label.add_cash_account": "اضافة حساب نقدية",
+  "cash_flow.label.add_bank_account": "اضافة حساب مصرف",
+  "cash_flow.label.add_money_in": "إيداع إلي الحساب",
+  "cash_flow.label.add_money_out": "سحب من الحساب",

  "cash_flow.owner_contribution": "زيادة رأس المال",
-  "cash_flow.other_income": "الإيرادات الأخرى",
-  "cash_flow.owner_drawings": "نقصان رأس المال",
+  "cash_flow.other_income": "إيراد أخر",
+  "cash_flow.owner_drawings": "سحب رأس المال",
  "cash_flow.expenses": "المصاريف",
  "cash_flow.transfer_form_account": "تحويل من الحساب ",
  "cash_flow.transfer_to_account": "تحويل إلى الحساب ",
@@ -1423,7 +1423,7 @@
  "cash_flow_transaction.label_transfer_from_account": "تحويل من الحساب ",
  "cash_flow_transaction.label_transfer_to_account": "تحويل إلى الحساب ",
  "cash_flow_transaction.label_current_account": "حساب الحالي",
-  "cash_flow_transaction.delete.alert_message":  "تم حذف معاملة التدفق النقدي بنجاح",
+  "cash_flow_transaction.delete.alert_message": "تم حذف معاملة التدفق النقدي بنجاح",
  "cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it": "بمجرد حذف هذه معاملة ، لن تتمكن من استعادتها لاحقًا. هل أنت متأكد أنك تريد حذف ؟",
  "cash_flow.auto_increment.auto": "يتم تعيين أرقام المعاملات على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
  "cash_flow.auto_increment.manually": "يتم تعيين أرقام معاملاتك يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
@@ -1431,10 +1431,10 @@
  "cash_flow_drawer.label_transaction_type": " نوع المعاملة",
  "cash_flow.drawer.label_transaction_no": " رقم المعاملة",
  "cash_flow.drawer.label_transaction": "معاملة التدفق النقدي {number}",
-  "cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account": "لا توجد معاملات إيداع / سحب على الحساب الحالي.  ",
-  "cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria:":"لا توجد حسابات تدفق نقدي بمعايير التصفية الحالية. ",
-  "cash_flow_money_in":"إيداع مال الي حساب",
-  "cash_flow_money_out":"سحب مال من حساب",
-  "cash_flow_transaction.switch_item":" {value} من معاملات "
-}
-
+  "cash_flow.account_transactions.no_results": "لا توجد معاملات إيداع او سحب على الحساب الحالي.",
+  "cash_flow.accounts.no_results": "لا توجد حسابات نقدية او مصرف بحسب شروط المرشح الحالية. ",
+  "cash_flow_money_in": "إيداع",
+  "cash_flow_money_out": "سحب",
+  "cash_flow_transaction.switch_item": " {value} معاملة علي حساب",
+  "cash_flow_transaction.balance_in_bigcapital": "الرصيد في Bigcapital"
+}
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1365,7 +1365,7 @@
  "vendors.option_with_transactions": "Vendors with transactions",
  "vendors.option_with_transactions.hint": "Include vendors that onces have transactions on the given date period only.",
  "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
-  "siebar.cashflow":"Cash flow",
+  "siebar.cashflow": "Cash flow",
  "siebar.cashflow.label_cash_and_bank_accounts": "Cash & Bank Accounts",
  "cash_flow.label_account_transcations": "Account Transcations",
  "cash_flow.label.deposit": "Deposit",
@@ -1400,12 +1400,11 @@
  "cash_flow_drawer.label_transaction_type": "Transaction type",
  "cash_flow.drawer.label_transaction_no": "Transaction number",
  "cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
-  "cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account": "There are no deposit/withdrawal transactions on the current account.",
-  "cash_flow_balance_in":"Balance in {name}",
-  "cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria:":"There are no cashflow accounts with current filter criteria.",
-  "cash_flow_money_in":"Money In",
-  "cash_flow_money_out":"Money Out",
-  "cash_flow_transaction.switch_item":"Transactions {value}"
-
-
+  "cash_flow.transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
+  "cash_flow_balance_in": "Balance in {name}",
+  "cash_flow.accounts.no_results": "There are no cashflow accounts with current filter criteria.",
+  "cash_flow_money_in": "Money In",
+  "cash_flow_money_out": "Money Out",
+  "cash_flow_transaction.switch_item": "Transactions {value}",
+  "cash_flow_transaction.balance_in_bigcapital": "Balance in Bigcapital"
 }
--- a/src/utils/index.js
+++ b/src/utils/index.js
--- a/src/utils/styled-components.js
+++ b/src/utils/styled-components.js
@@ -0,0 +1,9 @@
+import { css } from 'styled-components';
+
+export const whenRtl = (restCss) => css`
+  ${({ theme }) => theme.dir === 'rtl' && restCss}
+`;
+
+export const whenLtr = (restCss) => css`
+  ${({ theme }) => !theme.dir === 'ltr' && restCss}
+`;