dhre-ui-kit 0.0.1

package/README.md

@@ -0,0 +1 @@
+## Component library for mobile

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "dhre-ui-kit",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "test": "jest",
+    "tsc": "tsc",
+    "lint": "npx eslint ./src",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:report": "eslint . --format=json --output-file=eslint-report.json",
+    "prettier": "npx prettier ./src --check",
+    "prettier:fix": "npm run prettier ./src -- --write",
+    "build": "bob build",
+    "prepublishOnly": "npm run build",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@testing-library/react-native": "^12.5.1",
+    "lint-staged": "^15.2.7",
+    "react": "18.2.0",
+    "react-native": "0.74.3",
+    "react-native-otp-verify": "^1.1.8",
+    "react-native-pdf": "^6.7.1",
+    "react-native-gesture-handler": "2.17.0",
+    "react-native-progress": "^5.0.1",
+    "react-native-svg": "^15.4.0",
+    "react-native-svg-transformer": "^1.5.0",
+    "react-native-webview": "^13.12.0",
+    "react-redux": "^9.1.2",
+    "rn-tooltip": "^3.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.20.0",
+    "@eslint/js": "^9.7.0",
+    "@react-native/babel-preset": "0.74.85",
+    "@react-native/eslint-config": "0.74.85",
+    "@react-native/metro-config": "0.74.85",
+    "@react-native/typescript-config": "0.74.85",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.6",
+    "@types/react-native": "^0.73.0",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.8.0",
+    "husky": "^9.1.1",
+    "jest": "^29.7.0",
+    "metro-runtime": "^0.80.10",
+    "prettier": "2.8.8",
+    "react-native-builder-bob": "^0.30.0",
+    "react-native-typescript-transformer": "^1.2.13",
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.0.4",
+    "typescript-eslint": "^7.17.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint ./src --fix",
+      "prettier ./src --write"
+    ]
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "yarn@3.6.4",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  }
+}

package/src/App.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {ThemeProvider} from './theme/ThemeContext';
+import {
+  Badge,
+  Button,
+  CustomDropdown,
+  CustomTextInput,
+  FileUpload,
+  StarRating,
+  Tabs,
+  Tags,
+} from './index';
+import {CalenderDots} from './assets';
+import {View} from 'react-native';
+import {BUTTON_TYPES} from './utils/constants';
+import Checkbox from './components/checkBox';
+import {Text} from 'react-native-svg';
+
+import {DHRE_COLORS_PRIMARY, DHRE_COLORS_TEXT} from './theme/colors';
+import {moderateScale} from './utils/stylehelper';
+import CustomTooltip from './components/customTooltip';
+const App = () => {
+  const options = [
+    {id: '1', value: 'user1', label: 'User 1'},
+    {id: '2', value: 'user2', label: 'User 2'},
+    {id: '3', value: 'user3', label: 'User 3'},
+  ];
+  const handleTabPress = (index: number) => {
+    console.log('Tab pressed:', index);
+  };
+
+  const handleSetSelectedTagsOptions = (tags: string[]) => {
+    console.log('Selected tags:', tags);
+  };
+  const handleTagsChange = (tag: string) => {
+    console.log('Tag removed:', tag);
+  };
+  const handleSelect = (option: {id: string; value: string; label: string}) => {
+    console.log('Selected:', option);
+  };
+  return (
+    <ThemeProvider>
+      <View style={{marginTop: 50}}>
+        <Badge
+          handleIconPress={function (): void {}}
+          text="gggsdfghjhgf"
+          style={{margin: 20}}
+          iconName={<CalenderDots width={20} height={20} />}
+          textStyle={{color: 'black'}}
+          iconStyle={{}}
+        />
+
+        <Button
+          onPress={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+          title={'dfghj'}
+          buttonType={BUTTON_TYPES.PRIMARY}
+          variant={'H6bold'}
+          iconShown={true}
+          iconName={<CalenderDots width={20} height={20} />}
+        />
+
+        <Checkbox
+          isChecked={false}
+          labelName={'circle'}
+          checkedIcon={<CalenderDots width={20} height={20} />}
+          uncheckedIcon={<CalenderDots width={20} height={20} />}
+        />
+        <CustomDropdown
+          label="Select User"
+          placeholder="Choose Option"
+          options={options}
+          oneSelect={handleSelect}
+          selectedValue={options[0]} // Initially selected value
+          iconName={<CalenderDots />} // Dynamic icon for the dropdown
+          upArrowIcon={<CalenderDots />} // Up arrow icon
+          downArrowIcon={<CalenderDots />} // Down arrow icon
+          testId="CUSTOM-DROPDOWN"
+          iconStyle={{marginRight: 10}}
+        />
+        <CustomTextInput
+          label="Search"
+          placeholder="Type here"
+          isSearchBar={true}
+          searchIcon={<CalenderDots />}
+          rightIcon1={<CalenderDots />}
+          rightIcon2={<CalenderDots />}
+          secureTextEntry={true}
+          errorMessage="This field is required."
+          handleOnChangeText={text => console.log(text)}
+        />
+        <FileUpload
+          onUpload={() => console.log('Upload clicked')}
+          title="Upload Files"
+          btnText="Browse"
+          containerStyle={{width: 200}}
+          uploadImageStyling={{width: 10, height: 10}} // Example styling
+          icon={<CalenderDots />} // Pass your icon here
+          iconStyle={{}} // Optional styling for the icon
+        />
+        <Tags
+          tags={['Tag1', 'Tag2', 'Tag3']}
+          handleSetSelectedTagsOptions={handleSetSelectedTagsOptions}
+          handleTagsChange={handleTagsChange}
+          testID="tags-component"
+          icon={<CalenderDots />} // Pass your icon here
+          iconStyle={{backgroundColor: DHRE_COLORS_TEXT.DH_WHITE}} // Optional styling for the icon
+        />
+
+        <Tabs
+          tabs={[{label: 'Tab 1'}, {label: 'Tab 2'}, {label: 'Tab 3'}]}
+          onTabPress={handleTabPress}
+          testID="tabs-component"
+          icon={<CalenderDots />}
+          iconStyle={{width: 24, height: 24}}
+        />
+        <StarRating
+          rating={3.5}
+          count={5}
+          size={24}
+          fullStarIcon={<CalenderDots />}
+          halfStarIcon={<CalenderDots />}
+          fullStarColor="gold"
+          emptyStarColor="gray"
+          starStyle={{marginHorizontal: 2}}
+        />
+        <CustomTooltip
+          message="This is a tooltip"
+          icon={
+            <CalenderDots
+              width={moderateScale(16)}
+              height={moderateScale(16)}
+            />
+          }
+          iconStyle={{width: moderateScale(16), height: moderateScale(16)}} // Optional styling for the icon
+          iconColor={DHRE_COLORS_PRIMARY.DH_RED_100} // Example icon color
+        >
+          <Text>Hover over me</Text>
+        </CustomTooltip>
+      </View>
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/src/assets/images/calenderDots.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Zm-70-78a10,10,0,1,1-10-10A10,10,0,0,1,138,132Zm44,0a10,10,0,1,1-10-10A10,10,0,0,1,182,132ZM94,172a10,10,0,1,1-10-10A10,10,0,0,1,94,172Zm44,0a10,10,0,1,1-10-10A10,10,0,0,1,138,172Zm44,0a10,10,0,1,1-10-10A10,10,0,0,1,182,172Z"></path></svg>

package/src/assets/index.ts

@@ -0,0 +1,2 @@
+import CalenderDots from './images/calenderDots.svg';
+export {CalenderDots};

package/src/components/autoOtpReader/AutoOtpReader.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import AutoOtpReader from './AutoOtpReader';
+import RNOtpVerify from 'react-native-otp-verify';
+import {isAndroid} from '../../utils/deviceUtils';
+
+jest.mock('../../utils/deviceUtils', () => ({
+  isAndroid: jest.fn(),
+}));
+
+const mockOnOtpDetected = jest.fn();
+const mockOnHashGenerated = jest.fn();
+
+describe('AutoOtpReader', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (isAndroid as jest.Mock).mockReturnValue(true);
+  });
+
+  it('should start listening for OTP on mount and generate hash', async () => {
+    const otpMessage = 'Your OTP is 123456. Hash: xyz123';
+    const generatedHash = 'hash123';
+
+    (RNOtpVerify.getOtp as jest.Mock).mockResolvedValueOnce(undefined);
+    (RNOtpVerify.getHash as jest.Mock).mockResolvedValueOnce(generatedHash);
+    (RNOtpVerify.addListener as jest.Mock).mockImplementation(callback => {
+      callback(otpMessage);
+    });
+    render(
+      <AutoOtpReader
+        onOtpDetected={mockOnOtpDetected}
+        onHashGenerated={mockOnHashGenerated}
+      />,
+    );
+    await new Promise(r => setTimeout(r, 0));
+    expect(RNOtpVerify.getOtp).toHaveBeenCalled();
+    expect(RNOtpVerify.addListener).toHaveBeenCalled();
+    expect(mockOnOtpDetected).toHaveBeenCalledWith('123456');
+  });
+
+  it('should not call onHashGenerated if hash generation fails', async () => {
+    (RNOtpVerify.getOtp as jest.Mock).mockResolvedValueOnce(undefined);
+    (RNOtpVerify.getHash as jest.Mock).mockRejectedValueOnce(
+      new Error('Hash generation error'),
+    );
+
+    render(
+      <AutoOtpReader
+        onOtpDetected={mockOnOtpDetected}
+        onHashGenerated={mockOnHashGenerated}
+      />,
+    );
+    await new Promise(r => setTimeout(r, 0));
+    expect(mockOnHashGenerated).not.toHaveBeenCalled();
+  });
+});

package/src/components/autoOtpReader/AutoOtpReader.tsx

@@ -0,0 +1,79 @@
+import React, {useCallback, useEffect} from 'react';
+import {Keyboard} from 'react-native';
+import RNOtpVerify from 'react-native-otp-verify';
+import {isAndroid} from '../../utils/deviceUtils';
+import {stringLengthRegex} from '../../utils/regex';
+
+/**
+ * Interface for the props of the AutoOtpReader component.
+ */
+interface AutoOtpReaderProps {
+  onOtpDetected: (otp: string) => void;
+  onHashGenerated?: (hash: string) => void;
+}
+
+/**
+ * AutoOtpReader component to automatically fetch OTP from the message for Android devices.
+ *
+ * - Generates a Hash using RNOtpVerify.getHash().
+ * - Shares this Hash using an API request with OTP API.
+ * - Appends this hash to the OTP message.
+ * - Once the OTP message is received on the device, based on the matching hash, contents of the message will be copied to the OTP boxes.
+ *
+ * In iOS, use textContentType="oneTimeCode" for OTP autofill.
+ *
+ * @param props The props for the component.
+ * @returns A null component as it only handles side effects.
+ */
+const AutoOtpReader: React.FC<AutoOtpReaderProps> = ({
+  onOtpDetected,
+  onHashGenerated,
+}) => {
+  const otpHandler = useCallback(
+    (message: string) => {
+      if (message) {
+        try {
+          const code = message.match(stringLengthRegex);
+          if (code) {
+            onOtpDetected(code[0]);
+          }
+        } catch (error) {
+          console.log('ERROR::', error);
+        } finally {
+          RNOtpVerify.removeListener();
+          Keyboard.dismiss();
+        }
+      }
+    },
+    [onOtpDetected],
+  );
+
+  const startListeningForOtp = useCallback(() => {
+    RNOtpVerify.getOtp()
+      .then(() => RNOtpVerify.addListener(otpHandler))
+      .catch(error => console.log(error));
+  }, [otpHandler]);
+
+  useEffect(() => {
+    if (isAndroid()) {
+      startListeningForOtp();
+    }
+    return () => RNOtpVerify.removeListener();
+  }, [startListeningForOtp]);
+
+  useEffect(() => {
+    if (isAndroid()) {
+      RNOtpVerify.getHash()
+        .then(hash => {
+          if (hash && hash.length > 0 && onHashGenerated) {
+            onHashGenerated(hash[0]);
+          }
+        })
+        .catch(error => console.log(error));
+    }
+  }, [onHashGenerated]);
+
+  return null;
+};
+
+export default AutoOtpReader;

package/src/components/autoOtpReader/index.ts

@@ -0,0 +1 @@
+export {default} from './AutoOtpReader';

package/src/components/badge/Badge.styles.ts

@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {DHRE_COLORS_ALERT, DHRE_COLORS_TEXT} from '../../theme/colors';
+const styles = StyleSheet.create({
+  badge: {
+    backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
+    borderRadius: 15,
+    padding: verticalScale(4),
+  },
+  icon: {
+    marginHorizontal: horizontalScale(4),
+    height: verticalScale(16),
+    width: horizontalScale(16),
+  },
+  text: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+});
+
+export default styles;

package/src/components/badge/Badge.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react-native';
+import Badge from './Badge';
+
+describe('Badge component', () => {
+  it('renders text correctly', () => {
+    const text = 'Test Badge';
+    render(
+      <Badge
+        text={text}
+        handleIconPress={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />,
+    );
+
+    const badgeText = screen.getByText(text);
+    expect(badgeText).toBeDefined();
+  });
+
+  it('renders icon correctly', () => {
+    render(
+      <Badge
+        handleIconPress={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />,
+    );
+  });
+
+  it('renders with custom style', () => {
+    const customStyle = {backgroundColor: 'red'};
+    render(
+      <Badge
+        style={customStyle}
+        handleIconPress={function (): void {
+          throw new Error('Function not implemented.');
+        }}
+      />,
+    );
+
+    const badge = screen.getByTestId('BADGE');
+    expect(badge).toBeDefined();
+  });
+});

package/src/components/badge/Badge.tsx

@@ -0,0 +1,47 @@
+import React, {ReactElement} from 'react';
+import {View, ViewStyle, TextStyle, Pressable} from 'react-native';
+import commonStyles from '../../utils/commonStyles';
+import styles from './Badge.styles';
+import {SvgProps} from 'react-native-svg';
+import CustomTypography from '../customTypography/CustomTypography';
+
+interface BadgeProps {
+  text?: string;
+  style?: ViewStyle;
+  iconName?: ReactElement<SvgProps>;
+  textStyle?: TextStyle;
+  iconStyle?: ViewStyle;
+  handleIconPress: () => void;
+}
+
+const Badge: React.FC<BadgeProps> = ({
+  text,
+  style,
+  iconName,
+  textStyle,
+  iconStyle,
+  handleIconPress,
+}) => {
+  return (
+    <Pressable
+      style={[styles.badge, commonStyles.centerRow, style]}
+      testID="BADGE"
+      onPress={handleIconPress}>
+      {iconName && (
+        <View style={[styles.icon, iconStyle]}>
+          {React.cloneElement(iconName)}
+        </View>
+      )}
+
+      {text && (
+        <CustomTypography
+          variant="B3semiBold"
+          style={[styles.text, textStyle]}
+          text={text}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+export default Badge;

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export {default} from './Badge';

package/src/components/bottomDrawer/BottomDrawer.interface.ts

@@ -0,0 +1,12 @@
+import {ViewStyle} from 'react-native';
+
+export interface BottomDrawerProps {
+  isModalVisible: boolean;
+  toggleModal: () => void;
+  isFullScreen?: boolean;
+  children: React.ReactNode;
+  title: string;
+  testID?: string;
+  style?: ViewStyle;
+  modalContainerStyle?: ViewStyle;
+}

package/src/components/bottomDrawer/BottomDrawer.styles.ts

@@ -0,0 +1,31 @@
+import {DHRE_COLORS_TEXT, DHRE_COLORS_BG} from '../../theme/colors';
+import {
+  horizontalScale,
+  moderateScale,
+  verticalScale,
+} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    justifyContent: 'flex-end',
+  },
+  modalContainer: {padding: moderateScale(16)},
+  separator: {
+    height: verticalScale(2),
+    width: horizontalScale(40),
+    alignSelf: 'center',
+    backgroundColor: DHRE_COLORS_BG.DH_GREY1,
+    marginBottom: verticalScale(16),
+    borderRadius: moderateScale(25),
+  },
+  headderContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginVertical: verticalScale(4),
+  },
+});
+
+export default styles;

package/src/components/bottomDrawer/BottomDrawer.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Text} from 'react-native';
+import {it} from '@jest/globals';
+import {render} from '@testing-library/react-native';
+import BottomDrawer from './BottomDrawer';
+
+const mockProps = {
+  isModalVisible: true,
+  toggleModal: jest.fn(),
+  children: <Text>Mock Child</Text>,
+  title: 'Test Title',
+};
+
+describe('Bottom Drawer Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(<BottomDrawer {...mockProps} />);
+    expect(getByTestId('BOTTOM-DRAWER')).toBeTruthy();
+  });
+});

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {View, Modal} from 'react-native';
+import {BottomDrawerProps} from './BottomDrawer.interface';
+import styles from './BottomDrawer.styles';
+import CustomTypography from '../customTypography/CustomTypography';
+
+const BottomDrawer: React.FC<BottomDrawerProps> = ({
+  isModalVisible,
+  toggleModal,
+  isFullScreen = true,
+  children,
+  title,
+  testID = 'BOTTOM-DRAWER',
+  style,
+  modalContainerStyle,
+}) => {
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={isModalVisible}
+      onRequestClose={toggleModal}>
+      <View style={[styles.mainContainer, style]} testID={testID}>
+        <View
+          style={[
+            {
+              flex: isFullScreen ? 1 : 0.5,
+            },
+            styles.modalContainer,
+            modalContainerStyle,
+          ]}>
+          <View style={styles.separator} />
+          <View style={styles.headderContainer}>
+            <CustomTypography variant="H7bold" text={title} />
+          </View>
+          <View>{children}</View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default BottomDrawer;

package/src/components/bottomDrawer/index.ts

@@ -0,0 +1 @@
+export {default} from './BottomDrawer';

package/src/components/button/Button.interface.ts

@@ -0,0 +1,18 @@
+import {ReactElement} from 'react';
+import {FONT_STYLES} from '../../theme/fonts';
+import {ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+
+export interface ButtonProps {
+  onPress: () => void;
+  title: string;
+  buttonType: string;
+  buttonStyle?: ViewStyle;
+  titleStyle?: ViewStyle;
+  iconShown?: boolean;
+  iconStyles?: ViewStyle;
+  testID?: string;
+  titleShown?: boolean;
+  variant: keyof typeof FONT_STYLES | string;
+  iconName?: ReactElement<SvgProps>;
+}