dhre-ui-kit 0.0.6 → 0.0.8

package/package.json

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

package/src/assets/images/caretDown.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.25 8L10 14.25L3.75 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 7.5L10 13.75L3.75 7.5" stroke="#A7A7A7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/assets/images/caretUp.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.75 13L10 6.75L16.25 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 12.5L10 6.25L16.25 12.5" stroke="#A7A7A7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/components/accordion/Accordion.interface.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import {TextStyle, ViewStyle} from 'react-native';
 
 export interface AccordionProps {
   title: string;
-  children: React.ReactNode;
   testId?: string;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  children: React.ReactNode;
 }

package/src/components/accordion/Accordion.styles.ts

@@ -21,7 +21,6 @@ const styles = StyleSheet.create({
   content: {
     overflow: 'scroll',
     marginTop: verticalScale(16),
-    marginHorizontal: horizontalScale(16),
   },
 });
 

package/src/components/accordion/Accordion.tsx

@@ -6,7 +6,13 @@ import {moderateScale} from '../../utils/stylehelper';
 import {AccordionProps} from './Accordion.interface';
 import styles from './Accordion.styles';
 
-const Accordion = ({title, testId = 'ACCORDION', children}: AccordionProps) => {
+const Accordion = ({
+  title,
+  testId = 'ACCORDION',
+  containerStyle,
+  titleStyle,
+  children,
+}: AccordionProps) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
   const [contentHeight, setContentHeight] = useState(0);
@@ -35,12 +41,12 @@ const Accordion = ({title, testId = 'ACCORDION', children}: AccordionProps) => {
   });
 
   return (
-    <View style={styles.container} testID={testId}>
+    <View style={[styles.container, containerStyle]} testID={testId}>
       <Pressable style={styles.header} onPress={toggleAccordion}>
         <CustomTypography
           variant={'B4_REGULAR'}
           text={title}
-          style={styles.title}
+          style={[styles.title, titleStyle]}
         />
         {React.cloneElement(expanded ? <CaretUp /> : <CaretDown />, {
           width: moderateScale(20),

package/src/components/customHeader/CustomHeader.styles.ts

@@ -8,7 +8,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: horizontalScale(16),
     paddingTop: verticalScale(74),
     paddingBottom: verticalScale(16),
-    backgroundColor: '#000',
+    backgroundColor: '#212121',
+    borderBottomWidth: 1,
+    borderBottomColor: '#282828',
   },
   headderContainer: {
     flexDirection: 'row',

package/src/components/customIcon/CustomIcon.interface.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import {TextStyle, ViewStyle} from 'react-native';
+
+export interface CustomIconProps {
+  icon: React.ReactElement;
+  title?: string;
+  testId?: string;
+  onPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+}

package/src/components/customIcon/CustomIcon.styles.ts

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  title: {
+    color: '#000',
+  },
+});
+
+export default styles;

package/src/components/customIcon/CustomIcon.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import {CalenderDots} from '../../assets';
+import CustomIcon from './CustomIcon';
+
+describe('Custom Icon Component', () => {
+  it('Component renders correctly', () => {
+    const {getByTestId} = render(
+      <CustomIcon icon={<CalenderDots />} title="Test Title" />,
+    );
+    expect(getByTestId('CUSTOM-ICON')).toBeTruthy();
+    fireEvent.press(getByTestId('CUSTOM-ICON'));
+  });
+});

package/src/components/customIcon/CustomIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+import CustomTypography from '../customTypography';
+import {CustomIconProps} from './CustomIcon.interface';
+import styles from './CustomIcon.styles';
+
+const CustomIcon = ({
+  icon,
+  title,
+  testId = 'CUSTOM-ICON',
+  onPress,
+  containerStyle,
+  titleStyle,
+}: CustomIconProps) => {
+  return (
+    <Pressable
+      style={[styles.container, containerStyle]}
+      onPress={onPress}
+      testID={testId}>
+      {icon}
+      {title && (
+        <CustomTypography
+          variant="L1_REGULAR"
+          text={title}
+          style={[styles.title, titleStyle]}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+export default CustomIcon;

package/src/components/customIcon/index.ts

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

package/src/components/customTypography/index.ts

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

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

@@ -1,5 +1,5 @@
 import {ReactNode} from 'react';
-import {ViewStyle} from 'react-native';
+import {TextStyle, ViewStyle} from 'react-native';
 
 export interface ListItem {
   id: string;
@@ -33,5 +33,5 @@ export interface SwipableListProps {
   rightPrimaryActionHandler?: (id: string) => void;
   rightPrimaryActionStyle?: ViewStyle;
   itemStyle?: ViewStyle;
-  titleStyle?: ViewStyle;
+  titleStyle?: TextStyle;
 }

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

@@ -5,10 +5,15 @@ export const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  swippableContainer: {paddingVertical: verticalScale(16)},
   actionButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    padding: moderateScale(24),
+    paddingHorizontal: moderateScale(24),
+    paddingVertical: moderateScale(8),
+  },
+  titleStyle: {
+    color: '#fff',
   },
   leftActions: {
     flexDirection: 'row',

package/src/components/swipableList/SwipableList.tsx

@@ -40,11 +40,15 @@ const SwipableList = (props: SwipableListProps) => {
       onPress={onPress}
       style={[styles.actionButton, style]}>
       {icon}
-      <CustomTypography variant="L1_REGULAR" style={titleStyle} text={title} />
+      <CustomTypography
+        variant="L1_REGULAR"
+        style={[styles.titleStyle, titleStyle]}
+        text={title}
+      />
     </Pressable>
   );
 
-  const leftActionHandle = item => (
+  const leftActionHandle = (item: ListItem) => (
     <View style={[styles.leftActions, leftPrimaryActionStyle]}>
       {leftPrimaryActionIcon && (
         <ActionButton
@@ -67,7 +71,7 @@ const SwipableList = (props: SwipableListProps) => {
     </View>
   );
 
-  const rightActionHandle = item => (
+  const rightActionHandle = (item: ListItem) => (
     <View style={[styles.rightActions, rightPrimaryActionStyle]}>
       {rightPrimaryActionIcon && (
         <ActionButton
@@ -85,7 +89,8 @@ const SwipableList = (props: SwipableListProps) => {
     <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
       <Swipeable
         renderLeftActions={() => leftActionHandle(item)}
-        renderRightActions={() => rightActionHandle(item)}>
+        renderRightActions={() => rightActionHandle(item)}
+        containerStyle={styles.swippableContainer}>
         {props?.renderItem(item)}
       </Swipeable>
     </GestureHandlerRootView>

package/src/index.ts

@@ -22,3 +22,6 @@ export {default as Toast} from './components/toast';
 export {default as CustomSearchBar} from './components/customSearchBar';
 export {default as CustomHeader} from './components/customHeader';
 export {default as SwipableList} from './components/swipableList';
+export {default as CustomTypography} from './components/customTypography';
+export {default as CustomIcon} from './components/customIcon';
+export * from './utils/stylehelper';

package/src/theme/themes.ts

@@ -53,33 +53,37 @@ const theme = {
     dark: '##CECECE',
   },
 
-  BODER_PRIMARY: {
+  BORDER_PRIMARY: {
     light: '#686868',
     dark: '#404040',
   },
-  BODER_SECONDRY: {
+  BORDER_SECONDRY: {
     light: '#A7A7A7',
     dark: '#686868',
   },
-  BODER_DISABLE: {
+  BORDER_DISABLE: {
     light: '#CECECE',
     dark: '#4F4F4F',
   },
-  BODER_INVERTED: {
+  BORDER_INVERTED: {
     light: '#000000',
     dark: '#FFFFFF',
   },
-  BODER_BRAND_STATIC: {
+  BORDER_BRAND_STATIC: {
     light: '#D92D27',
     dark: '#D92D27',
   },
-  BODER_BRAND_TRANSPARENT_STATIC: {
+  BORDER_BRAND_TRANSPARENT_STATIC: {
     light: '#D92D3E',
     dark: '#D92D3E',
   },
-  BODER_STATIC: {
+  BORDER_STATIC: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
+  BORDER_SEPRATOR: {
+    light: '#282828',
+    dark: '#FFFFFF',
+  },
 };
 export default theme;