Skip to content

Commit 2a9ca40

Browse files
michnowakmichnowak
committed
refactor(ui): restructure NotificationSummary block to use infoCards for priority notifications
1 parent 73053a5 commit 2a9ca40

File tree

4 files changed

+97
-120
lines changed

4 files changed

+97
-120
lines changed

‎packages/blocks/notification-summary/src/api-harmonization/notification-summary.mapper.ts‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CMS, Notifications } from '@o2s/configs.integrations';
22

3-
import { NotificationSummaryBlock } from './notification-summary.model';
3+
import { NotificationSummaryBlock, NotificationSummaryInfoCard } from './notification-summary.model';
44

55
export const mapNotificationSummary = (
66
cms: CMS.Model.NotificationSummaryBlock.NotificationSummaryBlock,
@@ -15,51 +15,49 @@ export const mapNotificationSummary = (
1515
{} as Record<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL', number>,
1616
);
1717

18-
const result: NotificationSummaryBlock = {
19-
__typename: 'NotificationSummaryBlock',
20-
id: cms.id,
21-
layout: cms.layout,
22-
};
18+
const infoCards: NotificationSummaryInfoCard[] = [];
2319

20+
if (cms.critical) {
21+
infoCards.push({
22+
title: cms.critical.title,
23+
icon: cms.critical.icon,
24+
value: priorityCounts.CRITICAL || 0,
25+
description: cms.critical.message,
26+
color: 'text-destructive',
27+
});
28+
}
2429
if (cms.high) {
25-
result.high = {
30+
infoCards.push({
2631
title: cms.high.title,
2732
icon: cms.high.icon,
2833
value: priorityCounts.HIGH || 0,
2934
description: cms.high.message,
3035
color: 'text-destructive',
31-
};
36+
});
3237
}
33-
3438
if (cms.medium) {
35-
result.medium = {
39+
infoCards.push({
3640
title: cms.medium.title,
3741
icon: cms.medium.icon,
3842
value: priorityCounts.MEDIUM || 0,
3943
description: cms.medium.message,
4044
color: 'text-badge-secondary-background',
41-
};
45+
});
4246
}
43-
4447
if (cms.low) {
45-
result.low = {
48+
infoCards.push({
4649
title: cms.low.title,
4750
icon: cms.low.icon,
4851
value: priorityCounts.LOW || 0,
4952
description: cms.low.message,
5053
color: 'text-muted-foreground',
51-
};
54+
});
5255
}
5356

54-
if (cms.critical) {
55-
result.critical = {
56-
title: cms.critical.title,
57-
icon: cms.critical.icon,
58-
value: priorityCounts.CRITICAL || 0,
59-
description: cms.critical.message,
60-
color: 'text-destructive',
61-
};
62-
}
63-
64-
return result;
57+
return {
58+
__typename: 'NotificationSummaryBlock',
59+
id: cms.id,
60+
layout: cms.layout,
61+
infoCards,
62+
};
6563
};

‎packages/blocks/notification-summary/src/api-harmonization/notification-summary.model.ts‎

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,15 @@
11
import { Models } from '@o2s/utils.api-harmonization';
22

3+
export class NotificationSummaryInfoCard {
4+
title!: string;
5+
icon?: string;
6+
value!: number;
7+
description?: string;
8+
color?: string;
9+
}
10+
311
export class NotificationSummaryBlock extends Models.Block.Block {
412
__typename!: 'NotificationSummaryBlock';
513
layout?: 'vertical' | 'horizontal';
6-
high?: {
7-
title: string;
8-
icon?: string;
9-
value: number;
10-
description?: string;
11-
color?: string;
12-
};
13-
medium?: {
14-
title: string;
15-
icon?: string;
16-
value: number;
17-
description?: string;
18-
color?: string;
19-
};
20-
low?: {
21-
title: string;
22-
icon?: string;
23-
value: number;
24-
description?: string;
25-
color?: string;
26-
};
27-
critical?: {
28-
title: string;
29-
icon?: string;
30-
value: number;
31-
description?: string;
32-
color?: string;
33-
};
14+
infoCards!: NotificationSummaryInfoCard[];
3415
}

‎packages/blocks/notification-summary/src/frontend/NotificationSummary.client.stories.tsx‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,22 @@ export const Default: Story = {
2727
__typename: 'NotificationSummaryBlock',
2828
id: 'notification-summary-1',
2929
layout: 'horizontal',
30-
high: {
31-
title: 'High Priority',
32-
icon: 'AlertCircle',
33-
value: 12,
34-
description: 'High priority notifications',
35-
color: 'text-destructive',
36-
},
37-
medium: {
38-
title: 'Medium Priority',
39-
icon: 'Info',
40-
value: 5,
41-
description: 'Medium priority notifications',
42-
color: 'text-badge-secondary-background',
43-
},
30+
infoCards: [
31+
{
32+
title: 'High Priority',
33+
icon: 'AlertCircle',
34+
value: 12,
35+
description: 'High priority notifications',
36+
color: 'text-destructive',
37+
},
38+
{
39+
title: 'Medium Priority',
40+
icon: 'Info',
41+
value: 5,
42+
description: 'Medium priority notifications',
43+
color: 'text-badge-secondary-background',
44+
},
45+
],
4446
accessToken:
4547
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSmFuZSBEb2UiLCJlbWFpbCI6ImphbmVAZXhhbXBsZS5jb20iLCJyb2xlIjoic2VsZnNlcnZpY2Vfb3JnX2FkbWluIiwiY3VzdG9tZXIiOnsiaWQiOiJjdXN0LTAwMSIsInJvbGVzIjpbInNlbGZzZXJ2aWNlX29yZ191c2VyIiwic2VsZnNlcnZpY2Vfb3JnX3VzZXIiLCJzZWxmc2VydmljZV9vcmdfYWRtaW4iXSwibmFtZSI6IkFjbWUgQ29ycG9yYXRpb24ifSWiaWF0IjoxNzU2MzI0NTg0fQ.wFAXi1DbgN67z8xQcqZdGz9YeAolbim3lecVIzV2rv0',
4648
locale: 'en',
@@ -57,47 +59,50 @@ export const Vertical: Story = {
5759
export const AllPriorities: Story = {
5860
args: {
5961
...Default.args,
60-
critical: {
61-
title: 'Critical Priority',
62-
icon: 'AlertTriangle',
63-
value: 3,
64-
description: 'Critical priority notifications',
65-
color: 'text-destructive',
66-
},
67-
high: {
68-
title: 'High Priority',
69-
icon: 'AlertCircle',
70-
value: 12,
71-
description: 'High priority notifications',
72-
color: 'text-destructive',
73-
},
74-
medium: {
75-
title: 'Medium Priority',
76-
icon: 'Info',
77-
value: 5,
78-
description: 'Medium priority notifications',
79-
color: 'text-badge-secondary-background',
80-
},
81-
low: {
82-
title: 'Low Priority',
83-
icon: 'Bell',
84-
value: 8,
85-
description: 'Low priority notifications',
86-
color: 'text-muted-foreground',
87-
},
62+
infoCards: [
63+
{
64+
title: 'Critical Priority',
65+
icon: 'AlertTriangle',
66+
value: 3,
67+
description: 'Critical priority notifications',
68+
color: 'text-destructive',
69+
},
70+
{
71+
title: 'High Priority',
72+
icon: 'AlertCircle',
73+
value: 12,
74+
description: 'High priority notifications',
75+
color: 'text-destructive',
76+
},
77+
{
78+
title: 'Medium Priority',
79+
icon: 'Info',
80+
value: 5,
81+
description: 'Medium priority notifications',
82+
color: 'text-badge-secondary-background',
83+
},
84+
{
85+
title: 'Low Priority',
86+
icon: 'Bell',
87+
value: 8,
88+
description: 'Low priority notifications',
89+
color: 'text-muted-foreground',
90+
},
91+
],
8892
},
8993
};
9094

9195
export const SinglePriority: Story = {
9296
args: {
9397
...Default.args,
94-
high: {
95-
title: 'High Priority',
96-
icon: 'AlertCircle',
97-
value: 12,
98-
description: 'High priority notifications',
99-
color: 'text-destructive',
100-
},
101-
medium: undefined,
98+
infoCards: [
99+
{
100+
title: 'High Priority',
101+
icon: 'AlertCircle',
102+
value: 12,
103+
description: 'High priority notifications',
104+
color: 'text-destructive',
105+
},
106+
],
102107
},
103108
};

‎packages/blocks/notification-summary/src/frontend/NotificationSummary.client.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,39 +13,32 @@ import { Typography } from '@o2s/ui/elements/typography';
1313
import { NotificationSummaryPureProps } from './NotificationSummary.types';
1414

1515
export const NotificationSummaryPure: React.FC<NotificationSummaryPureProps> = ({ ...component }) => {
16-
const { high, medium, low, critical, layout } = component;
16+
const { infoCards, layout } = component;
1717

1818
const isVertical = layout === 'vertical';
1919
const containerClass = cn('w-full gap-6', isVertical ? 'flex flex-col' : 'grid grid-cols-1 md:grid-cols-2');
2020

21-
const priorityCards = [
22-
{ key: 'critical' as const, data: critical },
23-
{ key: 'high' as const, data: high },
24-
{ key: 'medium' as const, data: medium },
25-
{ key: 'low' as const, data: low },
26-
].filter(({ data }) => data !== undefined);
27-
2821
return (
2922
<div className={containerClass}>
30-
{priorityCards.map(({ key, data }) => (
23+
{infoCards.map((infoCard, index) => (
3124
<InfoCard
32-
key={key}
33-
title={data!.title}
25+
key={index}
26+
title={infoCard.title}
3427
value={
35-
<Typography variant="highlightedBig" className={data!.color}>
36-
{data!.value}
28+
<Typography variant="highlightedBig" className={infoCard.color}>
29+
{infoCard.value}
3730
</Typography>
3831
}
3932
description={
40-
data!.description ? (
33+
infoCard.description ? (
4134
<div className="line-clamp-3">
42-
<RichText content={data!.description} className={data!.color} />
35+
<RichText content={infoCard.description} className={infoCard.color} />
4336
</div>
4437
) : undefined
4538
}
4639
icon={
47-
data!.icon ? (
48-
<DynamicIcon name={data!.icon as DynamicIconProps['name']} className={data!.color} />
40+
infoCard.icon ? (
41+
<DynamicIcon name={infoCard.icon as DynamicIconProps['name']} className={infoCard.color} />
4942
) : undefined
5043
}
5144
/>

0 commit comments

Comments
 (0)