Merge pull request #37 from 1Byte-Software/feat/add-summary-card

Feat/add summary card

Author: KennethWise

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

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",

src/organisms/SummaryCard/index.tsx

@@ -0,0 +1,41 @@
+import { Typography } from '../..';
+import { Space } from '../../molecules';
+import { SummaryCardWrapper } from './styles';
+import { RdSummaryCardProps } from './types';
+
+export const SummaryCard: React.FC<RdSummaryCardProps> = props => {
+    const {
+        format = 'number',
+        value,
+        subValue = null,
+        label = 'Total',
+        subLabel = null,
+        ...cardProps
+    } = props;
+
+    return (
+        <SummaryCardWrapper {...cardProps}>
+            <Space direction="vertical" block size={0}>
+                <Typography.Text strong type="secondary">
+                    {label}
+                </Typography.Text>
+                <Space align="baseline">
+                    <Typography.Title level={1} disableMargin>
+                        {value}
+                    </Typography.Title>
+                </Space>
+
+                {(subLabel || subValue) && (
+                    <Space>
+                        {subLabel && (
+                            <Typography.Text strong type="secondary">
+                                {subLabel}
+                            </Typography.Text>
+                        )}
+                        {subValue && <Typography.Text strong>{subValue}</Typography.Text>}
+                    </Space>
+                )}
+            </Space>
+        </SummaryCardWrapper>
+    );
+};

src/organisms/SummaryCard/styles.tsx

@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Card } from '../../molecules';
+
+export const SummaryCardWrapper = styled(Card)``;

src/organisms/SummaryCard/types.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { RdCardProps } from '../../molecules';
+
+export interface RdSummaryCardProps 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;
+}

src/organisms/index.ts

@@ -1,2 +1,3 @@
 export * from './App';
 export * from './ConfigProvider';
+export * from './SummaryCard'