dhre-ui-kit 0.0.1

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

@@ -0,0 +1,78 @@
+import {
+  DHRE_COLORS_TEXT,
+  DHRE_COLORS_BG,
+  DHRE_COLORS_ALERT,
+  DHRE_COLORS_PRIMARY,
+} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    marginHorizontal: horizontalScale(16),
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    borderRadius: 50,
+    paddingVertical: verticalScale(4),
+    width: '100%',
+    paddingHorizontal: horizontalScale(8),
+    alignItems: 'center',
+  },
+  directionStyle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconStyle: {
+    height: verticalScale(24),
+    width: horizontalScale(24),
+  },
+  primary: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  secondary: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    borderColor: DHRE_COLORS_BG.DH_GREY1,
+    borderWidth: 1,
+  },
+  disable: {
+    backgroundColor: DHRE_COLORS_BG.DH_LINE_GREY_0,
+  },
+  tertiary: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  functionPrimary: {
+    backgroundColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
+  },
+  functionSecondary: {
+    backgroundColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE_0,
+    borderColor: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
+    borderWidth: 1,
+  },
+  functionNotice: {
+    backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN_900,
+  },
+  primaryText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  secondaryText: {
+    color: DHRE_COLORS_TEXT.DH_BLACK,
+  },
+  disableText: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDISABLED,
+  },
+  tertiaryText: {
+    color: DHRE_COLORS_PRIMARY.DH_RED_100,
+  },
+  functionPrimaryText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  functionSecondaryText: {
+    color: DHRE_COLORS_ALERT.DH_ALERT_ORANGE,
+  },
+  functionNoticeText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+});
+export default styles;

package/src/components/button/Button.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {render} from '@testing-library/react-native';
+import Button from './Button';
+
+const customStyle = {backgroundColor: 'red', padding: 20};
+
+const mockProps = {
+  onPress: jest.fn(),
+  title: 'Title',
+  buttonType: 'Primary',
+  buttonStyle: customStyle,
+  titleStyle: customStyle,
+  iconShown: true,
+  iconStyles: customStyle,
+  testID: 'CUSTOM-BUTTONS',
+  titleShown: true,
+  variant: 'H1bold',
+};
+
+const mockPropsDisable = {
+  onPress: jest.fn(),
+  title: 'Title',
+  buttonType: 'Primary',
+  buttonStyle: customStyle,
+  titleStyle: customStyle,
+  iconShown: false,
+  iconStyles: customStyle,
+  testID: 'CUSTOM-BUTTONS',
+  titleShown: false,
+  variant: 'H1bold',
+};
+
+describe('Button Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(<Button {...mockProps} />);
+    expect(getByTestId('CUSTOM-BUTTONS')).toBeTruthy();
+  });
+  it('Component renders correctly When title shown false', () => {
+    const {getByTestId} = render(<Button {...mockPropsDisable} />);
+    expect(getByTestId('CUSTOM-BUTTONS')).toBeTruthy();
+  });
+});

package/src/components/button/Button.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {Pressable, View} from 'react-native';
+import styles from './Button.styles';
+import {BUTTON_TYPES} from '../../utils/constants';
+import {ButtonProps} from './Button.interface';
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import CustomTypography from '../customTypography/CustomTypography';
+
+const Button: React.FC<ButtonProps> = ({
+  onPress,
+  title = '',
+  buttonType = BUTTON_TYPES.PRIMARY,
+  buttonStyle,
+  titleStyle,
+  variant,
+  iconStyles,
+  testID,
+  titleShown = true,
+  iconShown = false,
+  iconName,
+}) => {
+  const buttonStyles = [styles.button, styles[buttonType], buttonStyle];
+  const textStyle = [styles[buttonType + BUTTON_TYPES.TEXT], titleStyle];
+  const iconStyle = [styles.iconStyle, iconStyles];
+
+  return (
+    <View testID={testID} style={styles.mainContainer}>
+      <Pressable
+        disabled={buttonType === BUTTON_TYPES.DISABLE}
+        onPress={onPress}
+        style={buttonStyles}>
+        <View style={styles.directionStyle}>
+          {titleShown ? (
+            <CustomTypography
+              variant={variant}
+              style={textStyle}
+              text={title}
+            />
+          ) : null}
+          {iconShown && iconName && (
+            <View style={iconStyle}>
+              {React.cloneElement(iconName, {
+                fill: DHRE_COLORS_TEXT.DH_WHITE,
+              })}
+            </View>
+          )}
+        </View>
+      </Pressable>
+    </View>
+  );
+};
+
+export default Button;

package/src/components/button/index.ts

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

package/src/components/cards/Cards.interface.ts

@@ -0,0 +1,13 @@
+import {ReactNode} from 'react';
+
+export interface CardsProps {
+  topLeftTitle?: string;
+  subtitle?: string;
+  iconTitle?: string;
+  iconSource?: ReactNode;
+  buttonText?: string;
+  title?: string;
+  buttonShown?: boolean;
+  testID?: string;
+  onButtonPress?: () => void;
+}

package/src/components/cards/Cards.styles.ts

@@ -0,0 +1,59 @@
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: horizontalScale(20),
+    marginHorizontal: horizontalScale(16),
+    justifyContent: 'space-between',
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+  topLeft: {
+    alignSelf: 'flex-start',
+    paddingVertical: verticalScale(4),
+    paddingHorizontal: horizontalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_TEXT.DH_LIGHTGREEN,
+    borderRadius: 50,
+  },
+  title: {
+    color: DHRE_COLORS_TEXT.DH_LIGHTGREEN,
+  },
+  subTitleBelow: {
+    marginTop: verticalScale(12),
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
+  },
+  subtitle: {
+    letterSpacing: 0.5,
+    marginTop: verticalScale(8),
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+  },
+  leftBottomView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: verticalScale(8),
+  },
+  subTitleLeftBelow: {
+    letterSpacing: 0.5,
+    marginTop: verticalScale(4),
+    marginBottom: verticalScale(4),
+    marginLeft: horizontalScale(4),
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+  },
+  button: {
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    paddingVertical: verticalScale(6),
+    paddingHorizontal: horizontalScale(34),
+    borderRadius: 50,
+    position: 'absolute',
+    bottom: verticalScale(20),
+    right: horizontalScale(20),
+  },
+  buttonText: {
+    color: DHRE_COLORS_TEXT.DH_WHITE,
+  },
+});
+
+export default styles;

package/src/components/cards/Cards.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {fireEvent, render} from '@testing-library/react-native';
+import {CalenderDots} from '../../assets';
+import Cards from './Cards';
+
+const mockProps = {
+  topLeftTitle: 'LeftTitle',
+  subtitle: 'SubTitle',
+  iconTitle: 'IconTitle',
+  iconSource: <CalenderDots />,
+  buttonText: 'Button',
+  title: 'Title',
+  buttonShown: true,
+  testID: 'CARDS-COMPONENT',
+  onButtonPress: jest.fn(),
+};
+
+const mockDisableProps = {
+  topLeftTitle: undefined,
+  subtitle: undefined,
+  iconTitle: undefined,
+  iconSource: <CalenderDots />,
+  buttonText: 'Button',
+  title: undefined,
+  buttonShown: false,
+  testID: 'CARDS-COMPONENT',
+  onButtonPress: jest.fn(),
+};
+
+describe('Cards Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(<Cards {...mockProps} />);
+    expect(getByTestId('CARDS-COMPONENT')).toBeTruthy();
+    fireEvent.press(getByTestId('Button-Press'));
+  });
+  it('Component renders correctly when title, subTitle and other props are not passed', () => {
+    const {getByTestId} = render(<Cards {...mockDisableProps} />);
+    expect(getByTestId('CARDS-COMPONENT')).toBeTruthy();
+  });
+});

package/src/components/cards/Cards.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {View, Pressable} from 'react-native';
+import {CardsProps} from './Cards.interface';
+import CustomTypography from '../customTypography/CustomTypography';
+import styles from './Cards.styles';
+
+const Cards: React.FC<CardsProps> = ({
+  topLeftTitle,
+  subtitle,
+  title,
+  iconSource,
+  buttonText,
+  iconTitle,
+  buttonShown,
+  testID,
+  onButtonPress,
+}) => {
+  return (
+    <View testID={testID} style={styles.container}>
+      {topLeftTitle ? (
+        <View style={styles.topLeft}>
+          <CustomTypography
+            variant="P2regular"
+            style={styles.title}
+            text={topLeftTitle}
+          />
+        </View>
+      ) : null}
+      {title ? (
+        <CustomTypography
+          variant="H6bold"
+          style={styles.subTitleBelow}
+          text={title}
+        />
+      ) : null}
+      {subtitle ? (
+        <CustomTypography
+          variant="P3regular"
+          style={styles.subtitle}
+          text={subtitle}
+        />
+      ) : null}
+      <View style={styles.leftBottomView}>
+        {iconSource ? iconSource : null}
+        {iconTitle ? (
+          <CustomTypography
+            variant="P3regular"
+            style={styles.subTitleLeftBelow}
+            text={iconTitle}
+          />
+        ) : null}
+      </View>
+      {buttonShown ? (
+        <Pressable
+          testID="Button-Press"
+          style={styles.button}
+          onPress={onButtonPress}>
+          <CustomTypography
+            variant="B2semiBold"
+            style={styles.buttonText}
+            text={buttonText}
+          />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+};
+
+export default Cards;

package/src/components/cards/index.ts

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

package/src/components/checkBox/CheckBox.interface.ts

@@ -0,0 +1,10 @@
+export interface CheckBoxProps {
+  isChecked: boolean;
+  onCheck?: (checked: boolean) => void;
+  labelName: string;
+  disable?: boolean;
+  isCircle?: boolean;
+  testID?: string;
+  checkedIcon: React.ReactElement;
+  uncheckedIcon: React.ReactElement;
+}

package/src/components/checkBox/CheckBox.styles.ts

@@ -0,0 +1,36 @@
+import {StyleSheet} from 'react-native';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
+import {DHRE_COLORS_TEXT} from '../../theme/colors';
+
+const styles = StyleSheet.create({
+  checkboxContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxImage: {
+    width: horizontalScale(18),
+    height: verticalScale(18),
+    backgroundColor: DHRE_COLORS_TEXT.DH_BLACK,
+    resizeMode: 'contain',
+  },
+  uncheckedCheckbox: {
+    width: horizontalScale(18),
+    height: verticalScale(18),
+    overflow: 'hidden',
+    borderRadius: 1,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
+  },
+  directionStyle: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: horizontalScale(8),
+    marginTop: verticalScale(18),
+  },
+  labelStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
+  },
+});
+
+export default styles;

package/src/components/checkBox/CheckBox.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {fireEvent, render} from '@testing-library/react-native';
+import CheckBox from './CheckBox';
+import {CalenderDots} from '../../assets';
+
+const mockProps = {
+  isChecked: true,
+  onCheck: jest.fn(),
+  labelName: 'Label',
+  disable: false,
+  isCircle: false,
+  testID: 'CHECKBOX-COMPONENT',
+};
+const mockCircleProps = {
+  isChecked: false,
+  onCheck: jest.fn(),
+  labelName: 'Label',
+  disable: true,
+  isCircle: true,
+  testID: 'CHECKBOX-COMPONENT',
+};
+
+describe('CheckBox Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(
+      <CheckBox
+        checkedIcon={<CalenderDots />}
+        uncheckedIcon={<CalenderDots />}
+        {...mockProps}
+      />,
+    );
+    expect(getByTestId('CHECKBOX-COMPONENT')).toBeTruthy();
+    fireEvent.press(getByTestId('Checkbox-Press'));
+  });
+  it('Component renders correctly when checkbox type is circle', () => {
+    const {getByTestId} = render(
+      <CheckBox
+        checkedIcon={<CalenderDots />}
+        uncheckedIcon={<CalenderDots />}
+        {...mockCircleProps}
+      />,
+    );
+    expect(getByTestId('CHECKBOX-COMPONENT')).toBeTruthy();
+  });
+});

package/src/components/checkBox/CheckBox.tsx

@@ -0,0 +1,42 @@
+import React, {useState} from 'react';
+import {View, Pressable} from 'react-native';
+import {CheckBoxProps} from './CheckBox.interface';
+import styles from './CheckBox.styles';
+import CustomTypography from '../customTypography/CustomTypography';
+
+const Checkbox: React.FC<CheckBoxProps> = ({
+  isChecked,
+  onCheck,
+  labelName,
+  disable,
+  testID,
+  checkedIcon,
+  uncheckedIcon,
+}) => {
+  const [checked, setChecked] = useState(isChecked || false);
+
+  const handlePress = () => {
+    setChecked(!checked);
+    onCheck && onCheck(!checked);
+  };
+
+  return (
+    <View testID={testID}>
+      <Pressable
+        testID={'Checkbox-Press'}
+        onPress={handlePress}
+        disabled={disable}
+        style={({pressed}) => [
+          styles.directionStyle,
+          {opacity: pressed ? 0.5 : 1},
+        ]}>
+        <View style={styles.checkboxContainer}>
+          {React.cloneElement(checked ? checkedIcon : uncheckedIcon)}
+        </View>
+        <CustomTypography variant="H8medium" text={labelName} />
+      </Pressable>
+    </View>
+  );
+};
+
+export default Checkbox;

package/src/components/checkBox/index.ts

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

package/src/components/customDropdown/CustomDropdown.interface.ts

@@ -0,0 +1,15 @@
+import {ReactElement} from 'react';
+import {ViewStyle} from 'react-native';
+
+export interface CustomDropdownProps {
+  label: string;
+  placeholder?: string;
+  options: Array<{id: string; value: string; label: string}>;
+  selectedValue?: {id: string; value: string; label: string};
+  oneSelect: (option: {id: string; value: string; label: string}) => void;
+  testId?: string;
+  iconName?: ReactElement;
+  iconStyle?: ViewStyle;
+  upArrowIcon: ReactElement;
+  downArrowIcon: ReactElement;
+}

package/src/components/customDropdown/CustomDropdown.styles.tsx

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {DHRE_COLORS_TEXT, DHRE_COLORS_BG} from '../../theme/colors';
+import {
+  horizontalScale,
+  moderateScale,
+  verticalScale,
+} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  labelStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTLIGHT,
+  },
+  dropDownStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: verticalScale(48),
+    marginTop: verticalScale(8),
+    paddingHorizontal: horizontalScale(20),
+    paddingVertical: verticalScale(12),
+    backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_BG.DH_LINE_GREY_700,
+    borderRadius: moderateScale(24),
+  },
+  selectedValueStyle: {
+    color: DHRE_COLORS_TEXT.DH_TEXTDARK,
+  },
+  optionContainer: {
+    marginTop: verticalScale(4),
+    borderRadius: moderateScale(24),
+    borderWidth: 1,
+    borderColor: DHRE_COLORS_BG.DH_GREY1,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: horizontalScale(20),
+  },
+  iconStyle: {
+    marginRight: horizontalScale(12),
+  },
+});
+
+export default styles;

package/src/components/customDropdown/CustomDropdown.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {it} from '@jest/globals';
+import {fireEvent, render} from '@testing-library/react-native';
+import CustomDropdown from './CustomDropdown';
+import {CalenderDots} from '../../assets';
+
+const mockProps = {
+  label: 'Dropdown',
+  options: [
+    {id: '1', value: 'option1', label: 'Option 1'},
+    {id: '2', value: 'option2', label: 'Option 2'},
+  ],
+  selectedValue: undefined,
+  oneSelect: jest.fn(),
+};
+
+describe('Custom Dropdown Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(
+      <CustomDropdown
+        upArrowIcon={<CalenderDots />}
+        downArrowIcon={<CalenderDots />}
+        {...mockProps}
+      />,
+    );
+    expect(getByTestId('CUSTOM-DROPDOWN')).toBeTruthy();
+    fireEvent.press(getByTestId('CUSTOM-DROPDOWN-BTN'));
+    fireEvent.press(getByTestId('CUSTOM-DROPDOWN-Option 1-BTN'));
+  });
+});