From c0938c5ed3155a8be6f3735c063c474f4cf540c2 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 18 Sep 2025 15:36:49 +0700 Subject: [PATCH 1/3] feat: add summary card component --- src/organisms/SummaryCard/index.tsx | 43 ++++++++++++++++++++++++++++ src/organisms/SummaryCard/styles.tsx | 4 +++ src/organisms/SummaryCard/types.ts | 40 ++++++++++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 src/organisms/SummaryCard/index.tsx create mode 100644 src/organisms/SummaryCard/styles.tsx create mode 100644 src/organisms/SummaryCard/types.ts diff --git a/src/organisms/SummaryCard/index.tsx b/src/organisms/SummaryCard/index.tsx new file mode 100644 index 0000000..ae7b995 --- /dev/null +++ b/src/organisms/SummaryCard/index.tsx @@ -0,0 +1,43 @@ +import { Typography } from '../..'; +import { Space } from '../../molecules'; +import { SummaryCardWrapper } from './styles'; +import { SummaryCardProps } from './types'; + +const SummaryCard = (props: SummaryCardProps) => { + const { + format = 'number', + value, + subValue, + label = 'Total', + subLabel = 'Today total', + ...cardProps + } = props; + + return ( + + + + {label} + + + + {value} + + + + {(subLabel || subValue) && ( + + {subLabel && ( + + {subLabel} + + )} + {subValue && {subValue}} + + )} + + + ); +}; + +export default SummaryCard; diff --git a/src/organisms/SummaryCard/styles.tsx b/src/organisms/SummaryCard/styles.tsx new file mode 100644 index 0000000..58b827b --- /dev/null +++ b/src/organisms/SummaryCard/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Card } from '../../molecules'; + +export const SummaryCardWrapper = styled(Card)``; diff --git a/src/organisms/SummaryCard/types.ts b/src/organisms/SummaryCard/types.ts new file mode 100644 index 0000000..4c5d2b0 --- /dev/null +++ b/src/organisms/SummaryCard/types.ts @@ -0,0 +1,40 @@ +import { ReactNode } from 'react'; +import { RdCardProps } from '../../molecules'; + +export interface SummaryCardProps extends RdCardProps { + /** + * Determines the display format of values. + * + * - `"number"` → renders plain number format. + * - `"currency"` → renders values as currency. + * + * @default "number" + */ + format?: 'number' | 'currency'; + + /** + * The main numeric value to display. + * Usually represents the total amount or main KPI. + */ + value: ReactNode; + + /** + * The secondary numeric value to display. + * Typically represents today's or a breakdown value. + */ + subValue?: ReactNode; + + /** + * Label displayed above the main value. + * + * @default "Total" + */ + label?: string; + + /** + * Label displayed next to the sub value. + * + * @default "Today total" + */ + subLabel?: string; +} From d2c0eaf072b5a3bc5c3717adb2236c574344ed4c Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 18 Sep 2025 15:50:27 +0700 Subject: [PATCH 2/3] feat: add SummaryCard component --- CHANGELOG.md | 6 ++++++ package.json | 2 +- src/organisms/SummaryCard/index.tsx | 8 +++----- src/organisms/index.ts | 1 + 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e03b208..6aa8ae1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.7.0] + +### Added + +- Added `SummaryCard` component. + ## [1.6.7] ### Refactor diff --git a/package.json b/package.json index 0496536..ae7da5c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.7", + "version": "1.7.0", "description": "A simple React UI library", "main": "dist/index.js", "module": "dist/index.js", diff --git a/src/organisms/SummaryCard/index.tsx b/src/organisms/SummaryCard/index.tsx index ae7b995..72c8611 100644 --- a/src/organisms/SummaryCard/index.tsx +++ b/src/organisms/SummaryCard/index.tsx @@ -3,13 +3,13 @@ import { Space } from '../../molecules'; import { SummaryCardWrapper } from './styles'; import { SummaryCardProps } from './types'; -const SummaryCard = (props: SummaryCardProps) => { +export const SummaryCard = (props: SummaryCardProps) => { const { format = 'number', value, - subValue, + subValue = null, label = 'Total', - subLabel = 'Today total', + subLabel = null, ...cardProps } = props; @@ -39,5 +39,3 @@ const SummaryCard = (props: SummaryCardProps) => { ); }; - -export default SummaryCard; diff --git a/src/organisms/index.ts b/src/organisms/index.ts index 022f736..eb821cb 100644 --- a/src/organisms/index.ts +++ b/src/organisms/index.ts @@ -1,2 +1,3 @@ export * from './App'; export * from './ConfigProvider'; +export * from './SummaryCard' \ No newline at end of file From 4bda8a278ab534fcd4733866e8d6df930e03bdc8 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 18 Sep 2025 15:51:58 +0700 Subject: [PATCH 3/3] fix: change RdSummaryCardProps --- src/organisms/SummaryCard/index.tsx | 4 ++-- src/organisms/SummaryCard/types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/organisms/SummaryCard/index.tsx b/src/organisms/SummaryCard/index.tsx index 72c8611..b6883b1 100644 --- a/src/organisms/SummaryCard/index.tsx +++ b/src/organisms/SummaryCard/index.tsx @@ -1,9 +1,9 @@ import { Typography } from '../..'; import { Space } from '../../molecules'; import { SummaryCardWrapper } from './styles'; -import { SummaryCardProps } from './types'; +import { RdSummaryCardProps } from './types'; -export const SummaryCard = (props: SummaryCardProps) => { +export const SummaryCard: React.FC = props => { const { format = 'number', value, diff --git a/src/organisms/SummaryCard/types.ts b/src/organisms/SummaryCard/types.ts index 4c5d2b0..1238ebc 100644 --- a/src/organisms/SummaryCard/types.ts +++ b/src/organisms/SummaryCard/types.ts @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { RdCardProps } from '../../molecules'; -export interface SummaryCardProps extends RdCardProps { +export interface RdSummaryCardProps extends RdCardProps { /** * Determines the display format of values. *