[REFACTORING]: created a VitalityText component and used it

ekino · Jan 13, 2025 · 9383fa0 · 9383fa0
1 parent 5f831ac
commit 9383fa0
Show file tree

Hide file tree

Showing 18 changed files with 112 additions and 84 deletions.
diff --git a/v6y-apps/front-bo/src/commons/components/VitalityDetailsView.tsx b/v6y-apps/front-bo/src/commons/components/VitalityDetailsView.tsx
@@ -1,5 +1,6 @@
 import { HttpError } from '@refinedev/core';
-import { Descriptions, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Descriptions } from 'antd';
 import * as React from 'react';
 import { ReactNode } from 'react';
 
@@ -20,7 +21,7 @@ const VitalityDetailsView = ({
         <Descriptions bordered size="middle" column={1}>
             {Object.keys(details).map((itemKey, index) => (
                 <Descriptions.Item key={`${itemKey}-${index}`} label={itemKey}>
-                    <Typography.Text>{details[itemKey]}</Typography.Text>
+                    <VitalityText text={details[itemKey] as string} />
                 </Descriptions.Item>
             ))}
         </Descriptions>

diff --git a/v6y-apps/front-bo/src/commons/components/VitalityEmptyView.tsx b/v6y-apps/front-bo/src/commons/components/VitalityEmptyView.tsx
@@ -1,4 +1,6 @@
-import { Empty, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Empty } from 'antd';
+import * as React from 'react';
 
 import { useTranslation } from '../../infrastructure/adapters/translation/TranslationAdapter';
 
@@ -7,7 +9,7 @@ const VitalityEmptyView = ({ message }: { message?: string }) => {
     return (
         <Empty
             description={
-                <Typography.Text>{message || translate('pages.error.empty-data')}</Typography.Text>
+                <VitalityText text={message || translate('pages.error.empty-data') || ''} />
             }
         />
     );

diff --git a/v6y-apps/front-bo/src/commons/components/VitalityLinks.tsx b/v6y-apps/front-bo/src/commons/components/VitalityLinks.tsx
@@ -1,6 +1,8 @@
 import { LinkType } from '@v6y/core-logic';
-import { Col, Row, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Col, Row } from 'antd';
 import Link from 'next/link';
+import * as React from 'react';
 
 type ContentJustify =
     | 'end'
@@ -34,7 +36,7 @@ const VitalityLinks = ({ links, align }: { links: LinkType[]; align: ContentJust
                             rel="noopener noreferrer"
                             style={{ textDecoration: 'underline' }}
                         >
-                            <Typography.Text>{link.label}</Typography.Text>
+                            <VitalityText text={link.label} />
                         </Link>
                     </Col>
                 );

diff --git a/v6y-apps/front-bo/src/commons/components/layout/VitalityPageHeader.tsx b/v6y-apps/front-bo/src/commons/components/layout/VitalityPageHeader.tsx
@@ -2,16 +2,8 @@
 
 import { DownOutlined } from '@ant-design/icons';
 import { useGetIdentity } from '@refinedev/core';
-import {
-    Layout as AntdLayout,
-    Avatar,
-    Button,
-    Dropdown,
-    Space,
-    Switch,
-    Typography,
-    theme,
-} from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Layout as AntdLayout, Avatar, Button, Dropdown, Space, Switch, theme } from 'antd';
 import Cookies from 'js-cookie';
 import * as React from 'react';
 import { useContext } from 'react';
@@ -75,9 +67,7 @@ export const VitalityPageHeader = () => {
                 <Button type="text">
                     <Space>
                         <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
-                        <Typography.Text>
-                            {currentLocale === 'en' ? 'English' : 'French'}
-                        </Typography.Text>
+                        <VitalityText text={currentLocale === 'en' ? 'English' : 'French'} />
                         <DownOutlined />
                     </Space>
                 </Button>
@@ -94,7 +84,7 @@ export const VitalityPageHeader = () => {
                 />
                 {(user?.name || user?.avatar) && (
                     <Space style={{ marginLeft: '8px' }} size="middle">
-                        {user?.name && <Typography.Text strong>{user.name}</Typography.Text>}
+                        {user?.name && <VitalityText strong text={user.name} />}
                         {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
                     </Space>
                 )}

diff --git a/v6y-apps/front/src/commons/components/VitalityEmptyView.tsx b/v6y-apps/front/src/commons/components/VitalityEmptyView.tsx
@@ -1,14 +1,12 @@
-import { Empty, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Empty } from 'antd';
+import * as React from 'react';
 
 import VitalityTerms from '../config/VitalityTerms';
 
 const VitalityEmptyView = ({ message }: { message?: string }) => (
     <Empty
-        description={
-            <Typography.Text>
-                {message || VitalityTerms.VITALITY_EMPTY_DATA_MESSAGE}
-            </Typography.Text>
-        }
+        description={<VitalityText text={message || VitalityTerms.VITALITY_EMPTY_DATA_MESSAGE} />}
     />
 );
 

diff --git a/v6y-apps/front/src/commons/components/VitalityLinks.tsx b/v6y-apps/front/src/commons/components/VitalityLinks.tsx
@@ -1,6 +1,8 @@
 import { LinkType } from '@v6y/core-logic';
-import { Col, Row, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Col, Row } from 'antd';
 import Link from 'next/link';
+import * as React from 'react';
 
 import { VitalityLinksProps } from '../types/VitalityLinksProps';
 
@@ -32,7 +34,7 @@ const VitalityLinks = ({ links, align }: VitalityLinksProps) => {
                                 rel="noopener noreferrer"
                                 style={{ textDecoration: 'underline' }}
                             >
-                                <Typography.Text>{link.label}</Typography.Text>
+                                <VitalityText text={link.label} />
                             </Link>
                         )}
                     </Col>

diff --git a/v6y-apps/front/src/commons/components/VitalityPaginatedList.tsx b/v6y-apps/front/src/commons/components/VitalityPaginatedList.tsx
@@ -1,4 +1,6 @@
-import { List, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { List } from 'antd';
+import * as React from 'react';
 
 import { VitalityListProps } from '../types/VitalityListProps';
 
@@ -26,9 +28,7 @@ const VitalityPaginatedList = ({
         renderItem={renderItem}
         header={header}
         footer={
-            showFooter ? (
-                <Typography.Text strong>{`Total: ${dataSource?.length || 0}`}</Typography.Text>
-            ) : null
+            showFooter ? <VitalityText text={`Total: ${dataSource?.length || 0}`} strong /> : null
         }
         style={{
             ...(style || {}),

diff --git a/v6y-apps/front/src/commons/components/VitalitySearchBar.tsx b/v6y-apps/front/src/commons/components/VitalitySearchBar.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { Col, Form, Input, Row, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Col, Form, Input, Row } from 'antd';
 import * as React from 'react';
 
 import useNavigationAdapter from '../../infrastructure/adapters/navigation/useNavigationAdapter';
@@ -36,8 +37,8 @@ const VitalitySearchBar = ({ helper, label, status, placeholder }: VitalitySearc
                 <Form layout="vertical">
                     <Form.Item
                         name="vitality_search"
-                        label={<Typography.Text>{label}</Typography.Text>}
-                        help={<Typography.Text>{helper}</Typography.Text>}
+                        label={<VitalityText text={label} />}
+                        help={<VitalityText text={helper || ''} />}
                         initialValue={searchText}
                     >
                         <Search

diff --git a/v6y-apps/front/src/commons/components/application-info/VitalityAppInfos.tsx b/v6y-apps/front/src/commons/components/application-info/VitalityAppInfos.tsx
@@ -1,4 +1,5 @@
-import { Col, Divider, List, Row, Tag, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Col, Divider, List, Row, Tag } from 'antd';
 import Link from 'next/link';
 import * as React from 'react';
 
@@ -49,7 +50,7 @@ const VitalityAppInfos = ({ app, source, canOpenDetails = true, style }: Vitalit
                     <Row gutter={[12, 16]} justify="end" align="middle">
                         <Col span={24} />
                         <Col span={24} style={{ textAlign: 'left', marginTop: '0' }}>
-                            <Typography.Text>{app.description}</Typography.Text>
+                            <VitalityText text={app.description || ''} />
                         </Col>
                         <Col span={24}>
                             <VitalityLinks
@@ -66,18 +67,19 @@ const VitalityAppInfos = ({ app, source, canOpenDetails = true, style }: Vitalit
                         <Col>
                             {app.contactMail?.length && (
                                 <Link key="team-mail-contact" href={`mailto:${app.contactMail}`}>
-                                    <Typography.Text>
-                                        {VitalityTerms.VITALITY_APP_LIST_CONTACT_EMAIL}
-                                    </Typography.Text>
+                                    <VitalityText
+                                        text={VitalityTerms.VITALITY_APP_LIST_CONTACT_EMAIL}
+                                    />
                                 </Link>
                             )}
                         </Col>
                         <Col>
                             {canOpenDetails && (
                                 <Link key="app-details-link" href={appDetailsLink}>
-                                    <Typography.Text underline>
-                                        {VitalityTerms.VITALITY_APP_LIST_OPEN_DETAILS_LABEL}
-                                    </Typography.Text>
+                                    <VitalityText
+                                        text={VitalityTerms.VITALITY_APP_LIST_OPEN_DETAILS_LABEL}
+                                        underline
+                                    />
                                 </Link>
                             )}
                         </Col>

diff --git a/v6y-apps/front/src/commons/components/modules/VitalityModulesView.tsx b/v6y-apps/front/src/commons/components/modules/VitalityModulesView.tsx
@@ -1,6 +1,6 @@
 import { InfoCircleOutlined, PushpinOutlined } from '@ant-design/icons';
-import { VitalityTitle } from '@v6y/shared-ui';
-import { Avatar, Button, Card, Divider, List, Space, Statistic, Typography } from 'antd';
+import { VitalityText, VitalityTitle } from '@v6y/shared-ui';
+import { Avatar, Button, Card, Divider, List, Space, Statistic } from 'antd';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 
@@ -102,24 +102,31 @@ const VitalityModulesView = ({ modules }: VitalityModulesProps) => {
                                                 />
                                             )}
                                             {(itemModule.branch?.length || 0) > 0 && (
-                                                <Typography.Text style={{ fontWeight: 'bold' }}>
-                                                    {`${VitalityTerms.VITALITY_APP_DETAILS_AUDIT_DETECT_ON_BRANCH_LABEL}: `}
-                                                    <Typography.Text
+                                                <>
+                                                    <VitalityText
+                                                        style={{ fontWeight: 'bold' }}
+                                                        text={`${VitalityTerms.VITALITY_APP_DETAILS_AUDIT_DETECT_ON_BRANCH_LABEL}: `}
+                                                    />
+                                                    <VitalityText
                                                         style={{ fontWeight: 'normal' }}
-                                                    >
-                                                        {itemModule.branch}
-                                                    </Typography.Text>
-                                                </Typography.Text>
+                                                        text={itemModule.branch}
+                                                    />
+                                                </>
                                             )}
                                             {(itemModule.path?.length || 0) > 0 && (
-                                                <Typography.Text style={{ fontWeight: 'bold' }}>
-                                                    {`${VitalityTerms.VITALITY_APP_DETAILS_AUDIT_DETECT_ON_PATH_LABEL}: `}
-                                                    <Typography.Text
+                                                <>
+                                                    <VitalityText
+                                                        style={{ fontWeight: 'bold' }}
+                                                        text={`${VitalityTerms.VITALITY_APP_DETAILS_AUDIT_DETECT_ON_PATH_LABEL}: `}
+                                                    />
+                                                    <VitalityText
                                                         style={{ fontWeight: 'normal' }}
-                                                    >
-                                                        {itemModule.path?.replaceAll(' -> []', '')}
-                                                    </Typography.Text>
-                                                </Typography.Text>
+                                                        text={itemModule.path?.replaceAll(
+                                                            ' -> []',
+                                                            '',
+                                                        )}
+                                                    />
+                                                </>
                                             )}
                                         </Space>
                                     </Card>

diff --git a/v6y-apps/front/src/commons/config/VitalityCommonConfig.tsx b/v6y-apps/front/src/commons/config/VitalityCommonConfig.tsx
@@ -13,7 +13,7 @@ import {
 } from '@ant-design/icons';
 import { ApplicationType } from '@v6y/core-logic';
 import Matcher from '@v6y/core-logic/src/core/Matcher';
-import { Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
 import Link from 'next/link';
 import * as React from 'react';
 import { ReactNode } from 'react';
@@ -289,7 +289,7 @@ const VITALITY_HEADER_MENU_ITEMS = [
         icon: <NotificationOutlined />,
         label: (
             <Link href={VitalityNavigationPaths.NOTIFICATIONS} style={{ textDecoration: 'none' }}>
-                <Typography.Text>Notifications</Typography.Text>
+                <VitalityText text="Notifications" />
             </Link>
         ),
     },
@@ -298,7 +298,7 @@ const VITALITY_HEADER_MENU_ITEMS = [
         icon: <QuestionOutlined />,
         label: (
             <Link href={VitalityNavigationPaths.FAQ} style={{ textDecoration: 'none' }}>
-                <Typography.Text>FAQ</Typography.Text>
+                <VitalityText text="FAQ" />
             </Link>
         ),
     },
@@ -315,7 +315,7 @@ export const buildVitalityHeaderMenuItems = (isLogged: boolean, onLogout: () =>
                 onClick={onLogout}
                 style={{ textDecoration: 'none' }}
             >
-                <Typography.Text>Logout</Typography.Text>
+                <VitalityText text="Logout" />
             </Link>
         ),
     },

diff --git a/v6y-apps/front/src/commons/hooks/useDataGrouper.tsx b/v6y-apps/front/src/commons/hooks/useDataGrouper.tsx
@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 
@@ -33,14 +33,14 @@ const useDataGrouper = ({
         const groups = Object.keys(groupedDataSource || {})?.map((group) => ({
             key: group,
             value: group,
-            label: <Typography.Text>{group}</Typography.Text>,
+            label: <VitalityText text={group} />,
         }));
 
         if (hasAllGroup) {
             const hasAllGroup = {
                 key: 'All',
                 value: 'All',
-                label: <Typography.Text>All</Typography.Text>,
+                label: <VitalityText text="All" />,
             };
             setCriteriaGroups([hasAllGroup, ...(groups || [])]);
         } else {

diff --git a/...components/audit-reports/auditors/lighthouse/VitalityLighthouseReportsCategoryGrouper.tsx b/...components/audit-reports/auditors/lighthouse/VitalityLighthouseReportsCategoryGrouper.tsx
@@ -1,7 +1,7 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { AuditType } from '@v6y/core-logic';
-import { VitalityTitle } from '@v6y/shared-ui';
-import { Button, Card, Col, List, Row, Statistic, Typography } from 'antd';
+import { VitalityText, VitalityTitle } from '@v6y/shared-ui';
+import { Button, Card, Col, List, Row, Statistic } from 'antd';
 import Link from 'next/link';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -67,9 +67,9 @@ const VitalityLighthouseReportsCategoryGrouper = ({ reports }: { reports: AuditT
                                     description={
                                         <Row gutter={[16, 16]} justify="center" align="middle">
                                             <Col span={22} style={{ textAlign: 'left' }}>
-                                                <Typography.Text>
-                                                    {`${VitalityTerms.VITALITY_APP_DETAILS_AUDIT_HELP_CATEGORY_LABEL}: ${report.category}`}
-                                                </Typography.Text>
+                                                <VitalityText
+                                                    text={`${VitalityTerms.VITALITY_APP_DETAILS_AUDIT_HELP_CATEGORY_LABEL}: ${report.category}`}
+                                                />
                                             </Col>
                                             <Col span={22} style={{ textAlign: 'center' }}>
                                                 <Statistic
@@ -92,13 +92,12 @@ const VitalityLighthouseReportsCategoryGrouper = ({ reports }: { reports: AuditT
                                             {report.module?.url?.length && (
                                                 <Col span={22} style={{ textAlign: 'right' }}>
                                                     <Link href={report.module?.url} target="_blank">
-                                                        <Typography.Text
-                                                            style={{ textDecoration: 'underline' }}
-                                                        >
-                                                            {
+                                                        <VitalityText
+                                                            text={
                                                                 VitalityTerms.VITALITY_APP_DETAILS_AUDIT_OPEN_APP_LABEL
                                                             }
-                                                        </Typography.Text>
+                                                            underline
+                                                        />
                                                     </Link>
                                                 </Col>
                                             )}

diff --git a/v6y-apps/front/src/features/dashboard/components/VitalityDashboardMenuItem.tsx b/v6y-apps/front/src/features/dashboard/components/VitalityDashboardMenuItem.tsx
@@ -1,5 +1,5 @@
-import { VitalityTitle } from '@v6y/shared-ui';
-import { Avatar, Card, Typography } from 'antd';
+import { VitalityText, VitalityTitle } from '@v6y/shared-ui';
+import { Avatar, Card } from 'antd';
 import Link from 'next/link';
 import * as React from 'react';
 
@@ -22,7 +22,7 @@ const VitalityDashboardMenuItem = ({ option }: { option: DashboardItemType }) =>
                         />
                     }
                     title={<VitalityTitle title={option.title} level={4} underline />}
-                    description={<Typography.Text>{option.description}</Typography.Text>}
+                    description={<VitalityText text={option.description} />}
                 />
             </Card>
         </Link>