Merge pull request #50 from rajat-ws/feat/add-lingui

feat: migrate react-intl to lingui
wednesday-solutions · Aug 21, 2024 · 5371f79 · 5371f79
2 parents 54dc925 + 9d6783e
commit 5371f79
Show file tree

Hide file tree

Showing 47 changed files with 1,071 additions and 442 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,14 +1,11 @@
-import { configure } from '@storybook/react';
-import '@formatjs/intl-relativetimeformat/polyfill';
-import '@formatjs/intl-relativetimeformat/locale-data/en';
 import React from 'react';
+import { configure } from '@storybook/react';
 import { addDecorator } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import StoryRouter from 'storybook-router';
 import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 import { setIntlConfig, withIntl } from 'storybook-addon-intl';
-// import enLocaleData from 'react-intl/locale-data/en';
-import { translationMessages, appLocales, DEFAULT_LOCALE } from '../app/i18n.js';
+import { translationMessages, appLocales, DEFAULT_LOCALE } from '../app/i18n.ts';
 
 Object.values = (obj) => Object.keys(obj).map((key) => obj[key]);
 

diff --git a/README.md b/README.md
@@ -118,9 +118,9 @@ An enterprise react template application showcasing - Testing strategies, Global
 
   - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)
 
-## Localization using react-intl
+## Localization using Lingui
 
-- Translations using [React Intl](https://github.com/formatjs/react-intl)
+- Translations using [Lingui](https://github.com/lingui/js-lingui)
 
   Take a look at the following files
 

diff --git a/app/components/Clickable/tests/__snapshots__/index.test.tsx.snap b/app/components/Clickable/tests/__snapshots__/index.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`<Clickable /> component tests should render and match the snapshot 1`] = `
 <body>
   <div>
+     
     <div
       class="Clickable__StyledClickable-sc-1vn3tbu-0 mgTtM"
       data-testid="clickable"
@@ -14,6 +15,7 @@ exports[`<Clickable /> component tests should render and match the snapshot 1`]
         List of launches
       </p>
     </div>
+     
   </div>
 </body>
 `;
diff --git a/app/components/ErrorBoundary/index.tsx b/app/components/ErrorBoundary/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { translate } from '@components/IntlGlobalProvider/index';
+import { translate } from '@app/utils';
 
 interface ErrorState {
   hasError: boolean;

diff --git a/app/components/ErrorHandler/index.tsx b/app/components/ErrorHandler/index.tsx
@@ -13,15 +13,15 @@ const CustomCard = styled(Card)`
 
 interface ErrorHandlerTypes {
   loading: boolean;
-  launchListError?: string;
+  launchListError: string;
 }
 
 export function ErrorHandler({ loading, launchListError }: ErrorHandlerTypes) {
   if (!loading) {
     return (
       <If condition={launchListError} otherwise={<T data-testid="default-message" id={launchListError} />}>
         <CustomCard data-testid="error-card">
-          <T data-testid="error-message" text={launchListError} />
+          <T data-testid="error-message" text={launchListError} id={launchListError} />
         </CustomCard>
       </If>
     );

diff --git a/app/components/ErrorHandler/tests/__snapshots__/index.test.js.snap b/app/components/ErrorHandler/tests/__snapshots__/index.test.js.snap
@@ -3,6 +3,7 @@
 exports[`<ErrorHandler /> should render and match the snapshot 1`] = `
 <body>
   <div>
+     
     <div
       class="ant-card ant-card-bordered ErrorHandler__CustomCard-sc-1rh55w4-0 eOLbNC"
       data-testid="error-card"
@@ -14,10 +15,11 @@ exports[`<ErrorHandler /> should render and match the snapshot 1`] = `
           class="T__StyledText-znbtqz-0 TmgHn"
           data-testid="error-message"
         >
-          something_went_wrong
+          Something went wrong
         </p>
       </div>
     </div>
+     
   </div>
 </body>
 `;
diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -18,7 +18,7 @@ const StyledHeader = styled(Layout.Header)`
       height: ${(props) => props.theme.headerHeight};
       align-items: center;
       justify-content: center;
-      background-color: ${colors.primary};
+      background-color: ${colors.lightGreen};
       gap: 1rem;
       ${media.lessThan('mobile')`
       padding-left: ${(props) => props.theme.sidebarWidth}

diff --git a/app/components/Header/tests/__snapshots__/index.test.tsx.snap b/app/components/Header/tests/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<Header /> should render and match the snapshot 1`] = `
 <body>
   <div>
     <header
-      class="ant-layout-header Header__StyledHeader-sc-1oujkb8-0 gUdnlM"
+      class="ant-layout-header Header__StyledHeader-sc-1oujkb8-0 iCzSdw"
       data-testid="header"
     >
       <a

diff --git a/app/components/IntlGlobalProvider/index.tsx b/app/components/IntlGlobalProvider/index.tsx
diff --git a/app/components/IntlGlobalProvider/tests/index.test.tsx b/app/components/IntlGlobalProvider/tests/index.test.tsx
diff --git a/app/components/LaunchDetails/index.tsx b/app/components/LaunchDetails/index.tsx
@@ -69,7 +69,7 @@ const CustomT = styled(T)`
 const launchLabelStyles = () => css`
   text-transform: uppercase;
   display: block;
-  color: ${colors.primary};
+  color: ${colors.text};
   font-size: smaller;
   font-weight: bold;
 `;
@@ -108,7 +108,14 @@ function LaunchDetails({ missionName, links, details, rocket, ships, loading }:
       <Skeleton loading={loading} active>
         <DetailsCard>
           <If condition={!isEmpty(missionName)}>
-            <CustomT marginBottom={0.5} data-testid="mission-name" type="heading" text={missionName} />
+            <CustomT
+              marginBottom={0.5}
+              data-testid="mission-name"
+              type="heading"
+              text={missionName}
+              id="mission_name"
+              values={{ missionName }}
+            />
           </If>
 
           <If condition={!isEmpty(details)}>
@@ -120,15 +127,13 @@ function LaunchDetails({ missionName, links, details, rocket, ships, loading }:
               <If condition={!isEmpty(rocket?.rocketName)}>
                 <CustomT
                   data-testid="rocket-name"
-                  type="standard"
                   id="name_label"
                   values={{ name: rocket?.rocketName, b: labelRenderer }}
                 />
               </If>
               <If condition={!isEmpty(rocket?.rocketType)}>
                 <CustomT
                   data-testid="rocket-type"
-                  type="standard"
                   id="type_label"
                   values={{ type: rocket?.rocketType, b: labelRenderer }}
                 />

diff --git a/app/components/LaunchDetails/tests/__snapshots__/index.test.tsx.snap b/app/components/LaunchDetails/tests/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<LaundDetails> tests should render and match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered LaunchDetails__LaunchDetailsCard-asn7bn-0 dsEqMn"
+      class="ant-card ant-card-bordered LaunchDetails__LaunchDetailsCard-asn7bn-0 kwiAxS"
       data-testid="launch-details"
     >
       <div
@@ -27,15 +27,11 @@ exports[`<LaundDetails> tests should render and match the snapshot 1`] = `
             class="T__StyledText-znbtqz-0 TmgHn LaunchDetails__CustomT-asn7bn-4 dMaFrz"
             data-testid="details"
           >
-            <b
-              class="LaunchDetails__LaunchLabel-asn7bn-5 eWVLWT"
-            >
-              Details
-            </b>
+            Details:
              SpaceX's 21st ISS resupply mission.
           </p>
           <p
-            class="T__StyledText-znbtqz-0 gLJJxM LaunchDetails__LaunchLabelT-asn7bn-6 rxgOQ"
+            class="T__StyledText-znbtqz-0 gLJJxM LaunchDetails__LaunchLabelT-asn7bn-6 jvdXQM"
             data-testid="t"
           >
             Rocket 
@@ -47,27 +43,17 @@ exports[`<LaundDetails> tests should render and match the snapshot 1`] = `
               class="T__StyledText-znbtqz-0 TmgHn LaunchDetails__CustomT-asn7bn-4 dMaFrz"
               data-testid="rocket-name"
             >
-              <b
-                class="LaunchDetails__LaunchLabel-asn7bn-5 eWVLWT"
-              >
-                Name
-              </b>
-               Falcon 9
+              Name: Falcon 9
             </p>
             <p
               class="T__StyledText-znbtqz-0 TmgHn LaunchDetails__CustomT-asn7bn-4 dMaFrz"
               data-testid="rocket-type"
             >
-              <b
-                class="LaunchDetails__LaunchLabel-asn7bn-5 eWVLWT"
-              >
-                Type
-              </b>
-               FT
+              Type: FT
             </p>
           </div>
           <p
-            class="T__StyledText-znbtqz-0 gLJJxM LaunchDetails__LaunchLabelT-asn7bn-6 rxgOQ"
+            class="T__StyledText-znbtqz-0 gLJJxM LaunchDetails__LaunchLabelT-asn7bn-6 jvdXQM"
             data-testid="t"
           >
             Ships 
@@ -79,23 +65,13 @@ exports[`<LaundDetails> tests should render and match the snapshot 1`] = `
               class="T__StyledText-znbtqz-0 TmgHn LaunchDetails__CustomT-asn7bn-4 dMaFrz"
               data-testid="ship-name"
             >
-              <b
-                class="LaunchDetails__LaunchLabel-asn7bn-5 eWVLWT"
-              >
-                Name
-              </b>
-               Ship 1
+              Name: Ship 1
             </p>
             <p
               class="T__StyledText-znbtqz-0 TmgHn LaunchDetails__CustomT-asn7bn-4 dMaFrz"
               data-testid="ship-type"
             >
-              <b
-                class="LaunchDetails__LaunchLabel-asn7bn-5 eWVLWT"
-              >
-                Type
-              </b>
-               Type 1
+              Type: Type 1
             </p>
           </div>
         </div>

diff --git a/app/components/LaunchItem/index.tsx b/app/components/LaunchItem/index.tsx
@@ -47,10 +47,17 @@ function LaunchItem({ missionName, launchDateUtc, links, id }: Launch) {
   return (
     <LaunchCard data-testid="launch-item" onClick={goToLaunch}>
       <If condition={!isEmpty(missionName)}>
-        <T data-testid="mission-name" marginBottom={1.5} type="subheading" text={missionName} />
+        <T
+          data-testid="mission-name"
+          marginBottom={1.5}
+          type="subheading"
+          text={missionName}
+          id="mission_name"
+          values={{ missionName }}
+        />
       </If>
       <If condition={!isEmpty(launchDateUtc)}>
-        <T text={memoizedLaunchDate} />
+        <T text={memoizedLaunchDate} id="launch_date" values={{ launchDate: memoizedLaunchDate }} />
       </If>
       <If condition={!isEmpty(links)}>
         <If condition={!isEmpty(links.wikipedia)}>

diff --git a/app/components/LaunchItem/tests/__snapshots__/index.test.tsx.snap b/app/components/LaunchItem/tests/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<LaunchItem /> should render and match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered LaunchItem__LaunchCard-yxhovu-0 crOuqK"
+      class="ant-card ant-card-bordered LaunchItem__LaunchCard-yxhovu-0 kZTzfL"
       data-testid="launch-item"
     >
       <div
@@ -23,7 +23,7 @@ exports[`<LaunchItem /> should render and match the snapshot 1`] = `
           Mon, 6th January 2014, 06:06 PM
         </p>
         <a
-          class="ant-btn ant-btn-link LaunchItem__WikiLink-yxhovu-1 hcXJZC"
+          class="ant-btn ant-btn-link LaunchItem__WikiLink-yxhovu-1 ddjxGd"
           data-testid="wiki-link"
           href="https://en.wikipedia.org/wiki/Thaicom_6"
           rel="noreferrer"

diff --git a/app/components/LaunchList/tests/__snapshots__/index.test.tsx.snap b/app/components/LaunchList/tests/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<LaunchList /> should render and match the snapshot 1`] = `
       orientation="row"
     >
       <div
-        class="ant-card ant-card-bordered LaunchItem__LaunchCard-yxhovu-0 crOuqK"
+        class="ant-card ant-card-bordered LaunchItem__LaunchCard-yxhovu-0 kZTzfL"
         data-testid="launch-item"
       >
         <div
@@ -28,7 +28,7 @@ exports[`<LaunchList /> should render and match the snapshot 1`] = `
             Mon, 6th January 2014, 06:06 PM
           </p>
           <a
-            class="ant-btn ant-btn-link LaunchItem__WikiLink-yxhovu-1 hcXJZC"
+            class="ant-btn ant-btn-link LaunchItem__WikiLink-yxhovu-1 ddjxGd"
             data-testid="wiki-link"
             href="https://en.wikipedia.org/wiki/Thaicom_6"
             rel="noreferrer"

diff --git a/app/components/Siderbar/index.tsx b/app/components/Siderbar/index.tsx
@@ -35,7 +35,7 @@ const SideBarStatic = styled.div`
     max-width: 7rem;
     min-height: calc(100vh - ${(props) => props.theme.headerHeight});
     height: auto;
-    background-color: ${colors.primary};
+    background-color: ${colors.lightGreen};
     display: inline;
     text-align: center;
   }

diff --git a/app/components/StyledContainer/tests/__snapshots__/index.test.tsx.snap b/app/components/StyledContainer/tests/__snapshots__/index.test.tsx.snap
@@ -3,9 +3,11 @@
 exports[`<StyledContainer /> tests should render and match the snapshot 1`] = `
 <body>
   <div>
+     
     <div
       class="StyledContainer-sc-1xw91me-0 jzYaeF"
     />
+     
   </div>
 </body>
 `;