Skip to content

Commit be6dcfd

Browse files
frozenheliumfrozenhelium
committed
Revamp UI components
1 parent 85c2f97 commit be6dcfd

File tree

668 files changed

+22702
-25578
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

668 files changed

+22702
-25578
lines changed

‎app/eslint.config.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
// @ts-expect-error: @eslint/eslintrc has no types
21
import { FlatCompat } from '@eslint/eslintrc';
32
import js from '@eslint/js';
43
import json from "@eslint/json";
54
import tseslint from "typescript-eslint";
65
import process from 'process';
6+
import { Linter } from 'eslint';
77

88
import i18nUsage from './scripts/eslint/i18n-usage';
9-
import { Linter } from 'eslint';
109

1110
const dirname = process.cwd();
1211

@@ -166,7 +165,7 @@ const jsonConfig: Linter.Config = {
166165
// },
167166
// };
168167

169-
const config: Linter.Config[] = [
168+
const config = tseslint.config(
170169
{
171170
plugins: {
172171
json,
@@ -178,6 +177,6 @@ const config: Linter.Config[] = [
178177
jsonConfig,
179178
// i18nJsonConfig,
180179
...tseslint.configs.recommended
181-
];
180+
);
182181

183182
export default config;

‎app/src/App/PageError/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function PageError() {
5858
<Button
5959
name={undefined}
6060
onClick={toggleFullErrorVisibility}
61-
variant="tertiary"
61+
styleVariant="action"
6262
>
6363
{fullErrorVisible ? strings.errorPageHide : strings.errorPageShowError}
6464
</Button>
@@ -79,7 +79,8 @@ function PageError() {
7979
<Link
8080
href="/"
8181
external
82-
variant="secondary"
82+
colorVariant="primary"
83+
styleVariant="outline"
8384
>
8485
{strings.errorPageGoBack}
8586
</Link>

‎app/src/App/index.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -239,11 +239,11 @@ function Application() {
239239
);
240240

241241
return (
242-
<RouteContext.Provider value={wrappedRoutes}>
243-
<UserContext.Provider value={userContextValue}>
244-
<AlertContext.Provider value={alertContextValue}>
245-
<RequestContext.Provider value={requestContextValue}>
246-
<LanguageContext.Provider value={languageContextValue}>
242+
<LanguageContext.Provider value={languageContextValue}>
243+
<RouteContext.Provider value={wrappedRoutes}>
244+
<UserContext.Provider value={userContextValue}>
245+
<AlertContext.Provider value={alertContextValue}>
246+
<RequestContext.Provider value={requestContextValue}>
247247
<RouterProvider
248248
router={router}
249249
fallbackElement={(
@@ -257,11 +257,11 @@ function Application() {
257257
</div>
258258
)}
259259
/>
260-
</LanguageContext.Provider>
261-
</RequestContext.Provider>
262-
</AlertContext.Provider>
263-
</UserContext.Provider>
264-
</RouteContext.Provider>
260+
</RequestContext.Provider>
261+
</AlertContext.Provider>
262+
</UserContext.Provider>
263+
</RouteContext.Provider>
264+
</LanguageContext.Provider>
265265
);
266266
}
267267

‎app/src/App/routes/CountryRoutes.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -145,19 +145,6 @@ const countryOngoingActivitiesEmergencies = customWrapRoute({
145145
},
146146
});
147147

148-
const countryOngoingActivitiesThreeWActivities = customWrapRoute({
149-
parent: countryOngoingActivitiesLayout,
150-
path: 'three-w/activities',
151-
component: {
152-
render: () => import('#views/CountryOngoingActivitiesThreeWActivities'),
153-
props: {},
154-
},
155-
context: {
156-
title: 'Country 3W Activities',
157-
visibility: 'anything',
158-
},
159-
});
160-
161148
const countryOngoingActivitiesThreeWProjects = customWrapRoute({
162149
parent: countryOngoingActivitiesLayout,
163150
path: 'three-w/projects',
@@ -484,7 +471,6 @@ export default {
484471
countryOngoingActivitiesLayout,
485472
countryOngoingActivitiesIndex,
486473
countryOngoingActivitiesEmergencies,
487-
countryOngoingActivitiesThreeWActivities,
488474
countryOngoingActivitiesThreeWProjects,
489475

490476
countryNsOverviewLayout,

‎app/src/components/CatalogueInfoCard/index.tsx‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import { useCallback } from 'react';
22
import {
33
Container,
4-
List,
4+
ListView,
5+
RawList,
56
} from '@ifrc-go/ui';
6-
import { _cs } from '@togglecorp/fujs';
77

88
import Link, { type Props as LinkProps } from '#components/Link';
99

10-
import styles from './styles.module.css';
11-
1210
export type LinkData = LinkProps & {
1311
title: string;
1412
}
@@ -19,7 +17,6 @@ interface Props {
1917
title: string;
2018
data: LinkData[];
2119
description?: string;
22-
descriptionClassName?: string;
2320
}
2421

2522
function CatalogueInfoCard(props: Props) {
@@ -28,7 +25,6 @@ function CatalogueInfoCard(props: Props) {
2825
title,
2926
data,
3027
description,
31-
descriptionClassName,
3228
} = props;
3329

3430
const rendererParams = useCallback(
@@ -56,26 +52,27 @@ function CatalogueInfoCard(props: Props) {
5652

5753
return (
5854
<Container
59-
className={_cs(styles.catalogueInfoCard, className)}
55+
className={className}
6056
heading={title}
6157
headingLevel={4}
6258
withHeaderBorder
63-
withInternalPadding
64-
headerDescriptionContainerClassName={descriptionClassName}
6559
headerDescription={description}
66-
spacing="comfortable"
60+
withPadding
61+
withBackground
62+
withShadow
6763
>
68-
<List
69-
className={styles.list}
70-
data={data}
71-
keySelector={catalogueInfoKeySelector}
72-
renderer={Link}
73-
errored={false}
74-
pending={false}
75-
filtered={false}
76-
rendererParams={rendererParams}
77-
compact
78-
/>
64+
<ListView
65+
layout="block"
66+
spacing="sm"
67+
withSpacingOpticalCorrection
68+
>
69+
<RawList
70+
data={data}
71+
keySelector={catalogueInfoKeySelector}
72+
renderer={Link}
73+
rendererParams={rendererParams}
74+
/>
75+
</ListView>
7976
</Container>
8077
);
8178
}

‎app/src/components/CatalogueInfoCard/styles.module.css‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎app/src/components/DropdownMenuItem/index.tsx‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Link, { type Props as LinkProps } from '#components/Link';
1515

1616
type CommonProp = {
1717
persist?: boolean;
18+
withoutFullWidth?: boolean;
1819
}
1920

2021
type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type'> & {
@@ -23,20 +24,25 @@ type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type'> & {
2324

2425
type LinkTypeProps = LinkProps & {
2526
type: 'link';
27+
onClick?: never;
2628
}
2729

2830
type ConfirmButtonTypeProps<NAME> = Omit<ConfirmButtonProps<NAME>, 'type'> & {
2931
type: 'confirm-button',
3032
}
3133

32-
type Props<N> = CommonProp & (ButtonTypeProps<N> | LinkTypeProps | ConfirmButtonTypeProps<N>);
34+
type Props<NAME> = CommonProp & (
35+
ButtonTypeProps<NAME> | LinkTypeProps | ConfirmButtonTypeProps<NAME>
36+
);
3337

3438
function DropdownMenuItem<NAME>(props: Props<NAME>) {
3539
const {
36-
type,
37-
onClick,
3840
persist = false,
41+
onClick,
42+
withoutFullWidth,
43+
...remainingProps
3944
} = props;
45+
4046
const { setShowDropdown } = useContext(DropdownMenuContext);
4147

4248
const handleLinkClick = useCallback(
@@ -51,72 +57,81 @@ function DropdownMenuItem<NAME>(props: Props<NAME>) {
5157

5258
const handleButtonClick = useCallback(
5359
(name: NAME, e: React.MouseEvent<HTMLButtonElement>) => {
54-
if (!persist) {
55-
setShowDropdown(false);
56-
}
57-
if (isDefined(onClick) && type !== 'link') {
58-
onClick(name, e);
60+
if (remainingProps.type !== 'link') {
61+
if (!persist) {
62+
setShowDropdown(false);
63+
}
64+
65+
if (isDefined(onClick)) {
66+
onClick(name, e);
67+
}
5968
}
6069
},
61-
[setShowDropdown, type, onClick, persist],
70+
[setShowDropdown, persist, onClick, remainingProps.type],
6271
);
6372

64-
if (type === 'link') {
73+
if (remainingProps.type === 'link') {
6574
const {
6675
// eslint-disable-next-line @typescript-eslint/no-unused-vars
6776
type: _,
68-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
69-
persist: __,
70-
variant = 'dropdown-item',
77+
styleVariant = 'transparent',
78+
colorVariant = 'text',
79+
children,
7180
...otherProps
72-
} = props;
81+
} = remainingProps;
7382

7483
return (
7584
<Link
7685
// eslint-disable-next-line react/jsx-props-no-spreading
7786
{...otherProps}
78-
variant={variant}
87+
styleVariant={styleVariant}
88+
colorVariant={colorVariant}
7989
onClick={handleLinkClick}
80-
/>
90+
withFullWidth={!withoutFullWidth}
91+
>
92+
{children}
93+
</Link>
8194
);
8295
}
8396

84-
if (type === 'button') {
97+
if (remainingProps.type === 'button') {
8598
const {
8699
// eslint-disable-next-line @typescript-eslint/no-unused-vars
87100
type: _,
88-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
89-
persist: __,
90-
variant = 'dropdown-item',
101+
styleVariant = 'transparent',
102+
colorVariant = 'text',
91103
...otherProps
92-
} = props;
104+
} = remainingProps;
93105

94106
return (
95107
<Button
96108
// eslint-disable-next-line react/jsx-props-no-spreading
97109
{...otherProps}
98-
variant={variant}
110+
styleVariant={styleVariant}
111+
colorVariant={colorVariant}
99112
onClick={handleButtonClick}
113+
withFullWidth={!withoutFullWidth}
100114
/>
101115
);
102116
}
103117

104-
if (type === 'confirm-button') {
118+
if (remainingProps.type === 'confirm-button') {
105119
const {
106120
// eslint-disable-next-line @typescript-eslint/no-unused-vars
107121
type: _,
108-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
109-
persist: __,
110-
variant = 'dropdown-item',
122+
styleVariant = 'transparent',
123+
colorVariant = 'text',
111124
...otherProps
112-
} = props;
125+
} = remainingProps;
113126

114127
return (
115128
<ConfirmButton
116129
// eslint-disable-next-line react/jsx-props-no-spreading
117130
{...otherProps}
118-
variant={variant}
131+
styleVariant={styleVariant}
132+
colorVariant={colorVariant}
119133
onClick={handleButtonClick}
134+
withFullWidth={!withoutFullWidth}
120135
/>
121136
);
122137
}

‎app/src/components/FourHundredThree/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ function FourHundredThree() {
5151
</div>
5252
<Link
5353
to="home"
54-
variant="primary"
54+
colorVariant="primary"
55+
styleVariant="filled"
5556
>
5657
{strings.permissionDeniedExploreOurHomepage}
5758
</Link>

‎app/src/components/GlobalFooter/i18n.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"footerOtherResources":"Other Resources",
99
"footerGoWiki":"GO Wiki",
1010
"footerContactUs":"Contact Us",
11-
"footerIFRC":"© IFRC {year} v{appVersion}",
11+
"footerIFRC":"© IFRC {year} {appVersion}",
1212
"globalFindOut": "Find Out More",
1313
"policies": "Policies",
1414
"cookiePolicy": "Cookie Policy",

0 commit comments

Comments
 (0)