bigbinary · josephmathew900 · Jul 20, 2024 · Jul 19, 2024
diff --git a/src/components/DatePicker/Provider.jsx b/src/components/DatePicker/Provider.jsx
@@ -1,66 +1,73 @@
 import React from "react";
 
 import { ConfigProvider } from "antd";
+import { useTranslation } from "react-i18next";
 
+import { ANTD_LOCALE } from "components/constants";
 import { ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from "utils";
 
-const Provider = ({ children }) => (
-  <ConfigProvider
-    theme={{
-      token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
-      components: {
-        DatePicker: {
-          activeBg: "rgb(var(--neeto-ui-white))",
-          activeBorderColor: "rgb(var(--neeto-ui-primary-500))",
-          addonBg: "rgb(var(--neeto-ui-gray-100))",
-          cellActiveWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
-          cellBgDisabled: "rgb(var(--neeto-ui-gray-100))",
-          cellHoverBg: "rgb(var(--neeto-ui-gray-200))",
-          cellHoverWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
-          cellRangeBorderColor: "rgb(var(--neeto-ui-primary-100))",
-          hoverBg: "rgb(var(--neeto-ui-white))",
-          hoverBorderColor: "rgb(var(--neeto-ui-primary-500))",
+const Provider = ({ children }) => {
+  const { i18n } = useTranslation();
 
-          // Global overrides
-          colorBgContainer: "rgb(var(--neeto-ui-white))",
-          colorBgElevated: "rgb(var(--neeto-ui-white))",
-          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
-          colorPrimaryBorder: "rgb(var(--neeto-ui-primary-100))",
-          colorPrimaryHover: "rgb(var(--neeto-ui-primary-600))",
-          colorBorder: "rgb(var(--neeto-ui-gray-300))",
-          colorError: "rgb(var(--neeto-ui-error-500))",
-          colorErrorHover: "rgb(var(--neeto-ui-error-600))",
-          colorErrorOutline: "rgb(var(--neeto-ui-error-100))",
-          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
-          colorIcon: "rgb(var(--neeto-ui-gray-700))",
-          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
-          colorLink: "rgb(var(--neeto-ui-primary-500))",
-          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
-          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
-          colorSplit: "rgb(var(--neeto-ui-gray-200))",
-          colorText: "rgb(var(--neeto-ui-gray-800))",
-          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
-          colorTextDisabled: "rgb(var(--neeto-ui-gray-500))",
-          colorTextHeading: "rgb(var(--neeto-ui-black))",
-          colorTextLightSolid: "rgb(var(--neeto-ui-white))",
-          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-400))",
-          colorTextQuaternary: "rgb(var(--neeto-ui-gray-400))",
-          colorWarning: "rgb(var(--neeto-ui-warning-500))",
-          colorWarningHover: "rgb(var(--neeto-ui-warning-600))",
-          colorWarningOutline: "rgb(var(--neeto-ui-warning-100))",
-          controlItemBgActive: "rgb(var(--neeto-ui-pastel-purple))",
-          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))",
-          controlOutline: "rgb(var(--neeto-ui-gray-300))",
+  return (
+    <ConfigProvider
+      locale={ANTD_LOCALE[i18n.language || "en"]}
+      theme={{
+        token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
+        components: {
+          DatePicker: {
+            activeBg: "rgb(var(--neeto-ui-white))",
+            activeBorderColor: "rgb(var(--neeto-ui-primary-500))",
+            addonBg: "rgb(var(--neeto-ui-gray-100))",
+            cellActiveWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
+            cellBgDisabled: "rgb(var(--neeto-ui-gray-100))",
+            cellHoverBg: "rgb(var(--neeto-ui-gray-200))",
+            cellHoverWithRangeBg: "rgb(var(--neeto-ui-primary-100))",
+            cellRangeBorderColor: "rgb(var(--neeto-ui-primary-100))",
+            hoverBg: "rgb(var(--neeto-ui-white))",
+            hoverBorderColor: "rgb(var(--neeto-ui-primary-500))",
 
-          // Sizes
-          cellHeight: 32,
-          padding: 22,
+            // Global overrides
+            colorBgContainer: "rgb(var(--neeto-ui-white))",
+            colorBgElevated: "rgb(var(--neeto-ui-white))",
+            colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+            colorPrimaryBorder: "rgb(var(--neeto-ui-primary-100))",
+            colorPrimaryHover: "rgb(var(--neeto-ui-primary-600))",
+            colorBorder: "rgb(var(--neeto-ui-gray-300))",
+            colorError: "rgb(var(--neeto-ui-error-500))",
+            colorErrorHover: "rgb(var(--neeto-ui-error-600))",
+            colorErrorOutline: "rgb(var(--neeto-ui-error-100))",
+            colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
+            colorIcon: "rgb(var(--neeto-ui-gray-700))",
+            colorIconHover: "rgb(var(--neeto-ui-gray-800))",
+            colorLink: "rgb(var(--neeto-ui-primary-500))",
+            colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+            colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
+            colorSplit: "rgb(var(--neeto-ui-gray-200))",
+            colorText: "rgb(var(--neeto-ui-gray-800))",
+            colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
+            colorTextDisabled: "rgb(var(--neeto-ui-gray-500))",
+            colorTextHeading: "rgb(var(--neeto-ui-black))",
+            colorTextLightSolid: "rgb(var(--neeto-ui-white))",
+            colorTextPlaceholder: "rgb(var(--neeto-ui-gray-400))",
+            colorTextQuaternary: "rgb(var(--neeto-ui-gray-400))",
+            colorWarning: "rgb(var(--neeto-ui-warning-500))",
+            colorWarningHover: "rgb(var(--neeto-ui-warning-600))",
+            colorWarningOutline: "rgb(var(--neeto-ui-warning-100))",
+            controlItemBgActive: "rgb(var(--neeto-ui-pastel-purple))",
+            controlItemBgHover: "rgb(var(--neeto-ui-gray-100))",
+            controlOutline: "rgb(var(--neeto-ui-gray-300))",
+
+            // Sizes
+            cellHeight: 32,
+            padding: 22,
+          },
         },
-      },
-    }}
-  >
-    {children}
-  </ConfigProvider>
-);
+      }}
+    >
+      {children}
+    </ConfigProvider>
+  );
+};
 
 export default Provider;
diff --git a/src/components/Slider/index.jsx b/src/components/Slider/index.jsx
@@ -2,7 +2,9 @@ import React from "react";
 
 import { Slider as AntdSlider, ConfigProvider } from "antd";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
+import { ANTD_LOCALE } from "components/constants";
 import Label from "components/Label";
 import { useId } from "hooks";
 import { ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, hyphenize, noop } from "utils";
@@ -24,8 +26,11 @@ const Slider = ({
   const errorId = `error_${id}`;
   const helpTextId = `helpText_${id}`;
 
+  const { i18n } = useTranslation();
+
   return (
     <ConfigProvider
+      locale={ANTD_LOCALE[i18n.language || "en"]}
       theme={{
         token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
         components: {

diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx
@@ -18,8 +18,10 @@ import { Left, Right, MenuHorizontal } from "neetoicons";
 import PropTypes from "prop-types";
 import { assoc, isEmpty, mergeLeft, pluck } from "ramda";
 import ReactDragListView from "react-drag-listview";
+import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
+import { ANTD_LOCALE } from "components/constants";
 import { useQueryParams, useTimeout } from "hooks";
 import { ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, buildUrl, noop } from "utils";
 
@@ -69,6 +71,7 @@ const Table = ({
   bulkSelectAllRowsProps,
   ...otherProps
 }) => {
+  const { i18n } = useTranslation();
   const [containerHeight, setContainerHeight] = useState(null);
   const [headerHeight, setHeaderHeight] = useState(TABLE_DEFAULT_HEADER_HEIGHT);
   const [columns, setColumns] = useState(columnData);
@@ -281,6 +284,7 @@ const Table = ({
 
   const renderTable = () => (
     <ConfigProvider
+      locale={ANTD_LOCALE[i18n.language || "en"]}
       theme={{
         token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
         components: {

diff --git a/src/components/TimePicker/index.jsx b/src/components/TimePicker/index.jsx
@@ -7,6 +7,7 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 
 import { Tag } from "components";
+import { ANTD_LOCALE } from "components/constants";
 import Label from "components/Label";
 import { useSyncedRef, useId } from "hooks";
 import {
@@ -108,6 +109,7 @@ const TimePicker = forwardRef(
 
     return (
       <ConfigProvider
+        locale={ANTD_LOCALE[i18n.language || "en"]}
         theme={{
           token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
           components: {

diff --git a/src/components/Tree/index.jsx b/src/components/Tree/index.jsx
@@ -3,32 +3,39 @@ import React from "react";
 import { ConfigProvider, Tree as TreeComponent } from "antd";
 import classnames from "classnames";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
+import { ANTD_LOCALE } from "components/constants";
 import { ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from "utils";
 
 import SwitcherIcon from "./SwitcherIcon";
 
-const Tree = props => (
-  <ConfigProvider
-    theme={{
-      token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
-      components: {
-        Tree: {
-          directoryNodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
-          directoryNodeSelectedColor: "rgb(var(--neeto-ui-white))",
-          nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
-          nodeSelectedBg: "rgb(var(--neeto-ui-primary-100))",
+const Tree = props => {
+  const { i18n } = useTranslation();
+
+  return (
+    <ConfigProvider
+      locale={ANTD_LOCALE[i18n.language || "en"]}
+      theme={{
+        token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
+        components: {
+          Tree: {
+            directoryNodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
+            directoryNodeSelectedColor: "rgb(var(--neeto-ui-white))",
+            nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
+            nodeSelectedBg: "rgb(var(--neeto-ui-primary-100))",
+          },
         },
-      },
-    }}
-  >
-    <TreeComponent
-      switcherIcon={SwitcherIcon}
-      {...props}
-      className={classnames("neeto-ui-tree", props.className)}
-    />
-  </ConfigProvider>
-);
+      }}
+    >
+      <TreeComponent
+        switcherIcon={SwitcherIcon}
+        {...props}
+        className={classnames("neeto-ui-tree", props.className)}
+      />
+    </ConfigProvider>
+  );
+};
 
 Tree.propTypes = {
   /**

diff --git a/src/components/TreeSelect.jsx b/src/components/TreeSelect.jsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 
 import { ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, getLocale } from "utils";
 
+import { ANTD_LOCALE } from "./constants";
 import Label from "./Label";
 
 const TreeSelect = forwardRef(
@@ -40,6 +41,7 @@ const TreeSelect = forwardRef(
 
     return (
       <ConfigProvider
+        locale={ANTD_LOCALE[i18n.language || "en"]}
         theme={{
           token: { ...ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES },
           components: {

diff --git a/src/components/constants.js b/src/components/constants.js
@@ -0,0 +1,17 @@
+import deDE from "antd/locale/de_DE";
+import enUS from "antd/locale/en_US";
+import esES from "antd/locale/es_ES";
+import frFR from "antd/locale/fr_FR";
+import nlNL from "antd/locale/nl_NL";
+import plPL from "antd/locale/pl_PL";
+import ptPT from "antd/locale/pt_PT";
+
+export const ANTD_LOCALE = {
+  en: enUS,
+  es: esES,
+  fr: frFR,
+  de: deDE,
+  nl: nlNL,
+  pl: plPL,
+  pt: ptPT,
+};