dhre-ui-kit 0.0.67 → 0.0.70

package/package.json

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

package/src/components/singleSelectionTag/TagSingleSelection.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {View, Text, Pressable, FlatList, StyleSheet} from 'react-native';
+
+interface Tag {
+  value: string;
+  name: string;
+}
+
+interface TagsComponentProps {
+  tagList: Tag[];
+  selectedTag: string; // Allow null for unselected state
+  setSelectedTag: (val: string) => void; // Allow null for unselected state
+  handleTagPress?: (val: string) => void | undefined;
+}
+
+const TagsComponent: React.FC<TagsComponentProps> = ({
+  tagList,
+  selectedTag,
+  handleTagPress,
+}) => {
+  const reorderedTags = (): Tag[] => {
+    if (selectedTag) {
+      return [
+        tagList.find(tag => tag.name === selectedTag)!,
+        ...tagList.filter(tag => tag.name !== selectedTag),
+      ];
+    }
+    return tagList;
+  };
+
+  const renderTagItem = ({item}: {item: Tag}) => (
+    <Pressable
+      onPress={() => handleTagPress?.(item.name)}
+      style={[
+        styles.tagButton,
+        selectedTag === item?.name
+          ? styles.selectedTagButton
+          : styles.unselectedTagButton,
+      ]}>
+      <Text
+        style={[
+          styles.tagText,
+          selectedTag === item?.name
+            ? styles.selectedTagText
+            : styles.unselectedTagText,
+        ]}>
+        {item?.name}
+      </Text>
+      {selectedTag === item?.name && <Text style={styles.closeButton}>✕</Text>}
+    </Pressable>
+  );
+
+  return (
+    <View>
+      <FlatList
+        data={reorderedTags()}
+        renderItem={renderTagItem}
+        keyExtractor={item => item?.name}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContainer}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  listContainer: {
+    paddingHorizontal: 10,
+    alignItems: 'center',
+  },
+  tagButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    marginHorizontal: 8,
+    borderWidth: 1,
+  },
+  selectedTagButton: {
+    backgroundColor: '#FFF',
+    borderColor: '#000',
+  },
+  unselectedTagButton: {
+    backgroundColor: 'transparent',
+    borderColor: '#888',
+  },
+  tagText: {
+    fontSize: 16,
+  },
+  selectedTagText: {
+    color: '#000',
+  },
+  unselectedTagText: {
+    color: '#888',
+  },
+  closeButton: {
+    marginLeft: 10,
+    fontSize: 18,
+    color: '#000',
+  },
+});
+
+export default TagsComponent;

package/src/components/singleSelectionTag/index.ts

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

package/src/index.ts

@@ -38,6 +38,7 @@ export {default as TextInput} from './components/textInput';
 export {default as DropDown} from './components/dropDown';
 export {default as CustomSwitchBtn} from './components/customSwitchBtn';
 export {default as toastService} from './components/toast/ToastService';
+export {default as SingleSelectionTags} from './components/singleSelectionTag';
 export {FONT_STYLES} from './theme/fonts';
 export {FontStyle, Theme} from './utils/appEnum';
 
@@ -51,6 +52,4 @@ export {
 export {copyToClipboard} from './utils/deviceUtils';
 
 export {default} from './theme/themes';
-export {useToast} from './components/toast/ToastProvider';
-export {default as ToastProvider} from './components/toast/ToastProvider';
 export {default as CustomTextTest} from '../__mocks__/custom-text.mock';

package/src/theme/themes.ts

@@ -3,7 +3,7 @@ import {Theme} from '../utils/appEnum';
 const theme = {
   [Theme.SURFACE_PRIMARY]: {
     light: '#FFFFFF',
-    dark: '#404040',
+    dark: '#000000',
   },
   [Theme.SURFACE_SECONDARY]: {
     light: '#F5F5F5',
@@ -87,6 +87,23 @@ const theme = {
     light: '#282828',
     dark: '#FFFFFF',
   },
+
+  [Theme.WARNING]: {
+    light: '#B65E01',
+    dark: '#EB8425',
+  },
+  [Theme.SUCCESS]: {
+    light: '#008256',
+    dark: '#00B578',
+  },
+  [Theme.INFO]: {
+    light: '#0569C2',
+    dark: '#339ECF',
+  },
+  [Theme.ERROR]: {
+    light: '#EB0542',
+    dark: '#EB0542',
+  },
 };
 
 export default theme;

package/src/utils/appEnum.ts

@@ -95,4 +95,8 @@ export enum Theme {
   BORDER_BRAND_TRANSPARENT_STATIC = 'BORDER_BRAND_TRANSPARENT_STATIC',
   BORDER_STATIC = 'BORDER_STATIC',
   BORDER_SEPRATOR = 'BORDER_SEPRATOR',
+  WARNING = 'WARNING',
+  SUCCESS = 'SUCCESS',
+  INFO = 'INFO',
+  ERROR = 'ERROR',
 }

package/src/components/toast/ToastProvider.tsx

@@ -1,61 +0,0 @@
-import React, {
-  createContext,
-  useRef,
-  useImperativeHandle,
-  useContext,
-  forwardRef,
-} from 'react';
-import Toast from './Toast';
-import {ShowToast, ToastRef} from './Toast.interface';
-
-const ToastContext = createContext<{showToast: ShowToast} | undefined>(
-  undefined,
-);
-
-const ToastProvider = forwardRef<ToastRef, React.PropsWithChildren<object>>(
-  (props, ref) => {
-    const toastRef = useRef<ToastRef>(null);
-
-    useImperativeHandle(ref, () => ({
-      showToast: (message, duration, isSuccess, btnText, onBtnPress) => {
-        toastRef.current?.showToast(
-          message,
-          duration,
-          isSuccess,
-          btnText,
-          onBtnPress,
-        );
-      },
-    }));
-
-    return (
-      <ToastContext.Provider
-        value={{
-          showToast: (message, duration, isSuccess, btnText, onBtnPress) => {
-            toastRef.current?.showToast(
-              message,
-              duration,
-              isSuccess,
-              btnText,
-              onBtnPress,
-            );
-          },
-        }}>
-        {props.children}
-        <Toast ref={toastRef} />
-      </ToastContext.Provider>
-    );
-  },
-);
-
-ToastProvider.displayName = 'ToastProvider';
-
-export const useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error('useToast must be used within a ToastProvider');
-  }
-  return context;
-};
-
-export default ToastProvider;

package/src/components/toast/typings.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-
-export type ShowToast = (text: string, duration?: number) => void;
-
-export type Provider = React.FunctionComponent & {
-  ref: ToastRef | null;
-};
-
-export type RegisterRef = (ref: ToastRef) => void;
-
-export interface ToastRef {
-  showToast: ShowToast;
-}
-
-export interface ToastProps {
-  ref: (ref: ToastRef) => void;
-}