Merge pull request #131 from ZeroGachis/task/add-badge-component

Task/add badge component
ZeroGachis · Dec 4, 2023 · c50bf2f · c50bf2f
2 parents 34e2fba + c6a9310
commit c50bf2f
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 21 deletions.
diff --git a/Storybook/.ondevice/storybook.requires.js b/Storybook/.ondevice/storybook.requires.js
@@ -50,6 +50,7 @@ try {
 const getStories = () => {
   return {
     "./components/ActionCard/ActionCard.stories.tsx": require("../components/ActionCard/ActionCard.stories.tsx"),
+    "./components/Badge/Badge.stories.tsx": require("../components/Badge/Badge.stories.tsx"),
     "./components/BottomSheet/BottomSheet.stories.tsx": require("../components/BottomSheet/BottomSheet.stories.tsx"),
     "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
     "./components/Card/Card.stories.tsx": require("../components/Card/Card.stories.tsx"),

diff --git a/Storybook/components/Badge/Badge.stories.tsx b/Storybook/components/Badge/Badge.stories.tsx
@@ -0,0 +1,31 @@
+import { Badge } from 'smartway-react-native-ui';
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export default {
+    title: 'components/Badge',
+    component: Badge,
+    decorators: [
+        (Story) => {
+            const styles = StyleSheet.create({
+                container: { paddingTop: 16 },
+            });
+            return (
+                <View style={styles.container}>
+                    <Story />
+                </View>
+            );
+        },
+    ],
+} as ComponentMeta<typeof Badge>;
+
+export const Base: ComponentStory<typeof Badge> = () => <Badge number={1500} />;
+
+export const NotTruncated: ComponentStory<typeof Badge> = () => (
+    <Badge number={1500} maxDigits={4} />
+);
+
+export const Truncated: ComponentStory<typeof Badge> = () => (
+    <Badge number={1500} maxDigits={3} />
+);
diff --git a/src/__tests__/components/Badge.test.tsx b/src/__tests__/components/Badge.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../styles/themes';
+import { Badge } from '../../components/badge/Badge';
+
+describe('MODULE | Badge', () => {
+    describe('Given a `number`', () => {
+        it('should display it', () => {
+            render(
+                <ThemeProvider>
+                    <Badge number={100} />
+                </ThemeProvider>,
+            );
+
+            expect(screen.getByText('100')).toBeDefined();
+        });
+    });
+    describe("Given a `number` and a `maxDigits` greater than number's total digit", () => {
+        it('should display a truncated `number`', () => {
+            render(
+                <ThemeProvider>
+                    <Badge number={100} maxDigits={2} />
+                </ThemeProvider>,
+            );
+
+            expect(screen.getByText('99+')).toBeDefined();
+        });
+    });
+    describe("Given a `number` and a `maxDigits` smaller or equal than number's total digit'", () => {
+        it('should display the entire `number`', () => {
+            render(
+                <ThemeProvider>
+                    <Badge number={88} maxDigits={2} />
+                </ThemeProvider>,
+            );
+
+            expect(screen.getByText('88')).toBeDefined();
+        });
+    });
+});
diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { SafeAreaView, ViewStyle, StatusBar, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../styles/themes';
+import type { WithTestID } from 'src/shared/type';
 
-type Props = {
+type Props = WithTestID<{
     children?: React.ReactNode;
     style?: ViewStyle;
-    testID?: string;
     statusBarColor?: string;
-};
+}>;
 
 export const Screen = ({ children, style, testID, statusBarColor }: Props) => {
     const theme = useTheme();
@@ -29,8 +29,12 @@ export const Screen = ({ children, style, testID, statusBarColor }: Props) => {
         <SafeAreaView style={styles.screen} testID={testID}>
             <StatusBar
                 translucent
-                backgroundColor={statusBarColor ? statusBarColor : theme.sw.colors.neutral[50]}
-                barStyle="dark-content"
+                backgroundColor={
+                    statusBarColor
+                        ? statusBarColor
+                        : theme.sw.colors.neutral[50]
+                }
+                barStyle='dark-content'
             />
             {children}
         </SafeAreaView>

diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+
+import { Body } from '../typography/Body';
+import { ThemType, useTheme } from '../../styles/themes';
+import type { WithTestID } from 'src/shared/type';
+
+type BadgeProps = WithTestID<{
+    number: number;
+    maxDigits?: number;
+    style?: ViewStyle;
+}>;
+
+const createStyle = (theme: ThemType, style?: ViewStyle) => {
+    return StyleSheet.create({
+        badge: {
+            backgroundColor: theme.sw.colors.neutral[700],
+            color: theme.sw.colors.neutral[50],
+            paddingHorizontal: theme.sw.spacing.xs,
+            paddingVertical: theme.sw.spacing.xxs,
+            alignSelf: 'flex-start',
+            borderRadius: 8,
+            ...style,
+        },
+    });
+};
+
+export const Badge = ({ number, maxDigits, testID, style }: BadgeProps) => {
+    const theme = useTheme();
+
+    const displayText = maxDigits
+        ? getTruncatedNumber(number, maxDigits)
+        : number;
+
+    const badgeStyle = createStyle(theme, style).badge;
+
+    return (
+        <Body size='B2' weight='semi-bold' style={badgeStyle} testID={testID}>
+            {displayText}
+        </Body>
+    );
+};
+
+function getTruncatedNumber(number: number, maxDigits: number): string {
+    const maxNumber = Math.pow(10, maxDigits) - 1;
+    const isTruncated = number > maxNumber;
+    return isTruncated ? `${maxNumber}+` : `${number}`;
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -26,6 +26,7 @@ import { Label } from './label/Label';
 import { Product } from './product/Product';
 import { Divider } from './divider/Divider';
 import { LineChart } from './charts/LineChart';
+import { Badge } from './badge/Badge';
 
 export {
     Body,
@@ -56,4 +57,5 @@ export {
     Product,
     Divider,
     LineChart,
+    Badge,
 };
diff --git a/src/components/keyboard/DeleteButton.tsx b/src/components/keyboard/DeleteButton.tsx
@@ -3,11 +3,11 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../../styles/themes';
 import { Icon } from '../icons/Icon';
 import type { KeyboardActions } from './Keyboard';
+import type { WithTestID } from 'src/shared/type';
 
-interface Props {
+type Props = WithTestID<{
     onPress: (action: KeyboardActions) => void;
-    testID?: string;
-}
+}>;
 
 export const DeleteButton = ({ onPress, testID }: Props) => {
     const theme = useTheme();
@@ -25,9 +25,17 @@ export const DeleteButton = ({ onPress, testID }: Props) => {
     });
 
     return (
-        <Pressable testID={testID} style={[styles.button]} onPress={() => onPress('delete')}>
+        <Pressable
+            testID={testID}
+            style={[styles.button]}
+            onPress={() => onPress('delete')}
+        >
             <View style={styles.icon}>
-                <Icon name={'backspace'} color={theme.sw.colors.neutral[500]} size={24} />
+                <Icon
+                    name={'backspace'}
+                    color={theme.sw.colors.neutral[500]}
+                    size={24}
+                />
             </View>
         </Pressable>
     );

diff --git a/src/components/keyboard/SubmitButton.tsx b/src/components/keyboard/SubmitButton.tsx
@@ -3,11 +3,11 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../../styles/themes';
 import { Icon } from '../icons/Icon';
 import type { KeyboardActions } from './Keyboard';
+import type { WithTestID } from 'src/shared/type';
 
-interface Props {
+type Props = WithTestID<{
     onPress: (action: KeyboardActions) => void;
-    testID?: string;
-}
+}>;
 
 export const SubmitButton = ({ onPress, testID }: Props) => {
     const theme = useTheme();
@@ -26,9 +26,17 @@ export const SubmitButton = ({ onPress, testID }: Props) => {
     });
 
     return (
-        <Pressable testID={testID} style={[styles.button]} onPress={() => onPress('submit')}>
+        <Pressable
+            testID={testID}
+            style={[styles.button]}
+            onPress={() => onPress('submit')}
+        >
             <View style={styles.icon}>
-                <Icon name={'validate'} color={theme.sw.colors.primary.main} size={24} />
+                <Icon
+                    name={'validate'}
+                    color={theme.sw.colors.primary.main}
+                    size={24}
+                />
             </View>
         </Pressable>
     );

diff --git a/src/components/topAppBar/TopAppBar.tsx b/src/components/topAppBar/TopAppBar.tsx
@@ -4,6 +4,7 @@ import { useTheme } from '../../styles/themes';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { Headline } from '../typography/Headline';
 import type { IconSource } from 'react-native-paper/lib/typescript/components/Icon';
+import type { WithTestID } from 'src/shared/type';
 
 interface Icon {
     name: IconSource;
@@ -15,16 +16,22 @@ export interface Title {
     onPress?: () => void;
 }
 
-export interface Props {
+export type Props = WithTestID<{
     size?: 'small' | 'medium' | 'large' | 'center-aligned';
     title: Title;
     icon?: Icon;
     onBack?: () => void;
     style?: ViewStyle;
-    testID?: string;
-}
+}>;
 
-export const TopAppBar = ({ size = 'small', title, icon, onBack, style, testID }: Props) => {
+export const TopAppBar = ({
+    size = 'small',
+    title,
+    icon,
+    onBack,
+    style,
+    testID,
+}: Props) => {
     const theme = useTheme();
     const styles = StyleSheet.create({
         button: {
@@ -47,7 +54,12 @@ export const TopAppBar = ({ size = 'small', title, icon, onBack, style, testID }
         return theme.sw.colors.neutral[600];
     };
     return (
-        <Appbar.Header mode={size} style={styles.header} statusBarHeight={0} testID={testID}>
+        <Appbar.Header
+            mode={size}
+            style={styles.header}
+            statusBarHeight={0}
+            testID={testID}
+        >
             {onBack !== undefined && (
                 <Appbar.BackAction
                     style={styles.button}
@@ -58,7 +70,7 @@ export const TopAppBar = ({ size = 'small', title, icon, onBack, style, testID }
             <Appbar.Content
                 title={
                     typeof title.value === 'string' ? (
-                        <Headline size="h2">{title.value}</Headline>
+                        <Headline size='h2'>{title.value}</Headline>
                     ) : (
                         title.value
                     )

diff --git a/src/index.tsx b/src/index.tsx
@@ -27,6 +27,7 @@ import {
     Product,
     Divider,
     LineChart,
+    Badge,
 } from './components';
 
 import { ThemeProvider, useTheme } from './styles/themes';
@@ -61,4 +62,5 @@ export {
     Product,
     Divider,
     LineChart,
+    Badge
 };
diff --git a/src/shared/type.ts b/src/shared/type.ts
@@ -0,0 +1 @@
+export type WithTestID<Props> = Props & { testID?: string };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type WithTestID<Props> = Props & { testID?: string };