dhre-ui-kit 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/App.tsx

@@ -1,43 +1,11 @@
 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 {Badge} from './index';
+import {ArrowLeft, 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 CustomButton from './components/button/Button';
 
-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}}>
@@ -50,94 +18,23 @@ const App = () => {
           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
-        />
+        <CustomButton
+          title="Yes"
+          onPress={() => console.log('Yes Button Pressed')}
+          leftIcon={<ArrowLeft />}
+          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
+          titleVariant="L2_REGULAR"
+          containerStyle={[
+            {
+              borderWidth: 1,
+              borderRadius: 20,
 
-        <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}}
+              height: 40,
+            },
+          ]}
+          // iconStyle={styles.iconStyle}
+          imagePosition="left"
         />
-        <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>
   );

package/src/components/button/Button.tsx

@@ -1,53 +1,75 @@
-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';
+import React, {ReactElement} from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import CustomText from '../customText';
 
-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];
+interface CustomButtonProps {
+  title: string;
+  onPress: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: ViewStyle;
+  leftIcon?: ReactElement<SvgProps>;
+  rightIcon?: ReactElement<SvgProps>;
+  iconStyle?: ViewStyle;
+  titleColor?: string;
+  titleVariant?: string;
+  imagePosition?: 'left' | 'right';
+  testID?:string
+}
 
+const CustomButton = ({
+  title,
+  testID,
+  onPress,
+  containerStyle,
+  textStyle,
+  leftIcon,
+  rightIcon,
+  iconStyle,
+  titleColor,
+  titleVariant = 'L2_REGULAR',
+  imagePosition = 'right',
+}: CustomButtonProps) => {
   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>
-          )}
+    <TouchableOpacity testID={testID}
+      style={[styles.buttonContainer, containerStyle]}
+      onPress={onPress}>
+      {imagePosition === 'left' && leftIcon && (
+        <View style={iconStyle}>
+          {React.cloneElement(leftIcon, {width: 20, height: 20})}
         </View>
-      </Pressable>
-    </View>
+      )}
+      <CustomText
+        text={title}
+        variant={titleVariant}
+        style={[textStyle, {color: '#A7A7A7'}]}
+        textColor={titleColor}
+      />
+
+      {imagePosition === 'right' && rightIcon && (
+        <View style={iconStyle}>
+          {React.cloneElement(rightIcon, {width: 20, height: 20})}
+        </View>
+      )}
+    </TouchableOpacity>
   );
 };
 
-export default Button;
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    backgroundColor: '#000000',
+    borderRadius: 8,
+    justifyContent: 'center',
+  },
+});
+
+export default CustomButton;

package/src/components/customText/CustomText.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TextProps, TextStyle} from 'react-native';
+import {StyleProp, TextProps, TextStyle} from 'react-native';
 import {useTheme} from '../../theme/ThemeContext';
 import {withThemeProvider} from '../../theme/withThemeProvider';
 import {FONT_STYLES} from '../../theme/fonts';
@@ -8,7 +8,7 @@ import CustomTypography from '../customTypography/CustomTypography';
 interface CustomTextProps extends TextProps {
   text: string;
   variant: keyof typeof FONT_STYLES | string;
-  style?: TextStyle;
+  style?: StyleProp<TextStyle>;
   textColor?: string;
 }
 

package/src/components/swipableList/SwipableList.interface.ts

@@ -21,7 +21,7 @@ export interface ListItem {
 
 export interface ActionButtonProps {
   icon: ReactNode;
-  title: string;
+  title?: string;
   onPress: () => void;
   style?: object;
   testID: string;
@@ -31,17 +31,21 @@ export interface SwipableListProps {
   data: ListItem[];
   testId?: string;
   renderItem: (item: ListItem) => ReactNode;
-  leftPrimaryActionIcon?: ReactNode;
-  leftPrimaryActionTitle?: string;
-  leftPrimaryActionHandler?: (id: string) => void;
+  leftPrimaryActionActiveIcon?: ReactNode;
+  leftPrimaryActionActiveTitle?: string;
+  leftPrimaryActionInActiveIcon?: ReactNode;
+  leftPrimaryActionInActiveTitle?: string;
+  leftPrimaryActionHandler?: (item: ListItem) => void;
   leftPrimaryActionStyle?: ViewStyle;
-  leftSecondaryActionIcon?: ReactNode;
-  leftSecondaryActionTitle?: string;
-  leftSecondaryActionHandler?: (id: string) => void;
+  leftSecondaryActionActiveIcon?: ReactNode;
+  leftSecondaryActionActiveTitle?: string;
+  leftSecondaryActionInActiveIcon?: ReactNode;
+  leftSecondaryActionInActiveTitle?: string;
+  leftSecondaryActionHandler?: (item: ListItem) => void;
   leftSecondaryActionStyle?: ViewStyle;
   rightPrimaryActionIcon?: ReactNode;
   rightPrimaryActionTitle?: string;
-  rightPrimaryActionHandler?: (id: string) => void;
+  rightPrimaryActionHandler?: (item: ListItem) => void;
   rightPrimaryActionStyle?: ViewStyle;
   itemStyle?: ViewStyle;
   titleStyle?: TextStyle;

package/src/components/swipableList/SwipableList.styles.ts

@@ -15,8 +15,10 @@ export const styles = StyleSheet.create({
   },
   leftActions: {
     flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: horizontalScale(150),
     gap: horizontalScale(24),
-    paddingHorizontal: horizontalScale(24),
   },
   rightActions: {
     flexDirection: 'row',

package/src/components/swipableList/SwipableList.test.tsx

@@ -191,8 +191,6 @@ describe('Notification Component', () => {
       <SwipableList {...props} renderItem={() => <Text>Title</Text>} />,
     );
     expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
-    fireEvent.press(getByTestId('SWIPABLE-LIST-LEFT-PRIMARY-1'));
-    fireEvent.press(getByTestId('SWIPABLE-LIST-LEFT-SECONDARY-1'));
     fireEvent.press(getByTestId('SWIPABLE-LIST-RIGHT-PRIMARY-1'));
   });
 

package/src/components/swipableList/SwipableList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {FlatList, View, Pressable} from 'react-native';
 import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
 import {
@@ -13,12 +13,16 @@ const SwipableList = (props: SwipableListProps) => {
   const {
     data,
     testId = 'SWIPABLE-LIST',
-    leftPrimaryActionIcon,
-    leftPrimaryActionTitle,
+    leftPrimaryActionActiveIcon,
+    leftPrimaryActionInActiveIcon,
+    leftPrimaryActionActiveTitle,
+    leftPrimaryActionInActiveTitle,
+    leftSecondaryActionActiveIcon,
+    leftSecondaryActionInActiveIcon,
+    leftSecondaryActionActiveTitle,
+    leftSecondaryActionInActiveTitle,
     leftPrimaryActionHandler,
     leftPrimaryActionStyle,
-    leftSecondaryActionIcon,
-    leftSecondaryActionTitle,
     leftSecondaryActionHandler,
     leftSecondaryActionStyle,
     rightPrimaryActionIcon,
@@ -48,13 +52,19 @@ const SwipableList = (props: SwipableListProps) => {
     </Pressable>
   );
 
-  const leftActionHandle = (item: ListItem) => (
+  const leftActionHandle = (
+    item: ListItem,
+    leftPrimaryActionIcon: ReactNode,
+    leftPrimaryActionTitle: string | undefined,
+    leftSecondaryActionIcon: ReactNode,
+    leftSecondaryActionTitle: string | undefined,
+  ) => (
     <View style={[styles.leftActions, leftPrimaryActionStyle]}>
       {leftPrimaryActionIcon && (
         <ActionButton
           icon={leftPrimaryActionIcon}
-          title={leftPrimaryActionTitle || ''}
-          onPress={() => leftPrimaryActionHandler?.(item.id)}
+          title={leftPrimaryActionTitle}
+          onPress={() => leftPrimaryActionHandler?.(item)}
           style={leftPrimaryActionStyle}
           testID={`${testId}-LEFT-PRIMARY-${item.id}`}
         />
@@ -62,8 +72,8 @@ const SwipableList = (props: SwipableListProps) => {
       {leftSecondaryActionIcon && (
         <ActionButton
           icon={leftSecondaryActionIcon}
-          title={leftSecondaryActionTitle || ''}
-          onPress={() => leftSecondaryActionHandler?.(item.id)}
+          title={leftSecondaryActionTitle}
+          onPress={() => leftSecondaryActionHandler?.(item)}
           style={leftSecondaryActionStyle}
           testID={`${testId}-LEFT-SECONDARY-${item.id}`}
         />
@@ -77,7 +87,7 @@ const SwipableList = (props: SwipableListProps) => {
         <ActionButton
           icon={rightPrimaryActionIcon}
           title={rightPrimaryActionTitle || ''}
-          onPress={() => rightPrimaryActionHandler?.(item.id)}
+          onPress={() => rightPrimaryActionHandler?.(item)}
           style={rightPrimaryActionStyle}
           testID={`${testId}-RIGHT-PRIMARY-${item.id}`}
         />
@@ -88,7 +98,23 @@ const SwipableList = (props: SwipableListProps) => {
   const renderItem = ({item}: {item: ListItem}) => (
     <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
       <Swipeable
-        renderLeftActions={() => leftActionHandle(item)}
+        renderLeftActions={() =>
+          leftActionHandle(
+            item,
+            item.isPinned
+              ? leftPrimaryActionInActiveIcon
+              : leftPrimaryActionActiveIcon,
+            item.isPinned
+              ? leftPrimaryActionInActiveTitle
+              : leftPrimaryActionActiveTitle,
+            item.isRead
+              ? leftSecondaryActionInActiveIcon
+              : leftSecondaryActionActiveIcon,
+            item.isRead
+              ? leftSecondaryActionInActiveTitle
+              : leftSecondaryActionActiveTitle,
+          )
+        }
         renderRightActions={() => rightActionHandle(item)}
         containerStyle={styles.swippableContainer}>
         {props?.renderItem(item)}

package/src/theme/colors.ts

@@ -143,6 +143,31 @@ export const DHRE_COLORS_BG = {
   DH_BG_GREY_900: '#6F7387',
   DH_BG_GREY: '#F2F3F8',
 };
+export const DHRE_DEFAULT = {
+  DH_LINE_GREY_0: '#FAFAFA',
+  DH_LINE_GREY_100: '#F6F6F6',
+  DH_LINE_GREY_200: '#F1F1F1',
+  DH_LINE_GREY_300: '#EDEDED',
+  DH_LINE_GREY_400: '#EDEDED',
+  DH_LINE_GREY_500: '#CCCACA',
+  DH_LINE_GREY_600: '#B4B2B2',
+  DH_LINE_GREY_700: '#959494',
+  DH_LINE_GREY_800: '#727171',
+  DH_LINE_GREY_900: '#4D4C4C',
+  DH_BLUE: '#007AFF',
+
+  DH_BG_GREY_0: '#F5F7FF',
+  DH_BG_GREY_100: '#F2F4FD',
+  DH_BG_GREY_200: '#EDEFF9',
+  DH_BG_GREY_300: '#E5E7F2',
+  DH_BG_GREY_400: '#D9DCE9',
+  DH_BG_GREY_500: '#CACDDD',
+  DH_BG_GREY_600: '#B7BBCD',
+  DH_BG_GREY_700: '#A0A4B8',
+  DH_BG_GREY_800: '#878BA0',
+  DH_BG_GREY_900: '#6F7387',
+  DH_BG_GREY: '#F2F3F8',
+};
 
 export const DHRE_COLORS_TEXT = {
   //Black

package/src/theme/themes.ts

@@ -50,7 +50,7 @@ const theme = {
   },
   CONTENT_SECONDRY_STATIC: {
     light: '#CECECE',
-    dark: '##CECECE',
+    dark: '#CECECE',
   },
 
   BORDER_PRIMARY: {