Merge pull request #59 from KeyValueSoftwareSystems/dev

v1.1.0

Author: bilta-keyvalue

.eslintrc.cjs

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es2021: true
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
   overrides: [
     {
       env: {

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

CHANGELOG.md

@@ -2,8 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.0.1] - 2024-03-26
+## 1.1.0
+This is an update to the package.
 
 ### Added
-
-- React UI kit for managing and displaying in-app notification
+- Added support for custom delete icon and a flag to toggle the visibility of the delete icon.
+- Added functionality to display thumbnail URL previews for media content
+- Exposed Avatar click property.
+- Implemented specific error code mapping.
+- Enhanced style and theme customizations. 

README.md

@@ -58,16 +58,17 @@ Below are optional props available for the inbox component:
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
+customStyles | Object for custom styling | CustomStyle | {} |
 loadMoreLabel | Text shown on the load more component | string | "Load More" |
 hideBadge | Toggle to hide or show the badge       |   boolean  |   false  |
 darkMode | Toggle to enable dark mode |  boolean | false |
 itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 |
 windowViewOnly | Toggle to enable fit-to-screen window or modal view |  boolean | false |
 notificationIcon | Option to use custom notification Icon |  JSX Element | null |
-inboxHeaderProps | Props for customizing the header.<br> title - Title of the notification inbox<br> hideHeader - Toggle to hide or show the header section.<br> hideClearAll - Toggle to hide or show the clear all button.<br> customHeader - Custom header component. | InboxHeaderProps| { title: 'Notifications', <br>hideHeader: false,<br> hideClearAll: false, <br>customHeader: null } |
-cardProps | Props for customizing the notification cards. <br>hideDelete - Toggle to hide or show delete icon<br> hideAvatar - Toggle to hide or show the avatar.<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click | CardProps | { hideDelete: false,<br> hideAvatar: false,<br> disableAutoMarkAsRead: false } |
-customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
-onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
+headerProps | Props for customizing the header.<br> title - Title of the notification inbox<br> hideHeader - Toggle to hide or show the header section.<br> hideClearAll - Toggle to hide or show the clear all button.<br> customHeader - Custom header component. | HeaderProps| { title: 'Notifications', <br>hideHeader: false,<br> hideClearAll: false, <br>customHeader: null } |
+cardProps | Props for customizing the notification cards. <br>hideDelete - Toggle to hide or show delete icon<br> hideAvatar - Toggle to hide or show the avatar.<br> hideMediaThumbnail - Toggle to hide or show thumbnail image<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsReadById functionality on card click.<br> deleteIcon - Custom delete icon <br> onAvatarClick - Custom click handler for avatar <br> onMediaThumbnailClick - Custom click handler for media thumbnail | CardProps | { hideDelete: false,<br> hideAvatar: false,<br> disableAutoMarkAsRead: false, <br> hideMediaThumbnail: false, <br>deleteIcon: null, <br> onAvatarClick: ()=>null,<br> onMediaThumbnailClick: () => null } |
+customCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
+onCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty notification list | JSX Element | null |
 customFooter | Custom footer component | JSX Element | null |
 customLoader | Custom loader component | JSX Element | null |
@@ -88,9 +89,6 @@ type Theme = {
 };
 
 type ThemeProps = {
-  notificationIcon?: {
-    size?: number,
-  },
   colors?: {
     primaryColor?: string,
     textColor?: string,
@@ -108,25 +106,22 @@ type ThemeProps = {
     color?: string,
     textColor?: string,
   },
-  window?: {
-    borderColor?: string,
-  },
   windowHeader?: {
     background?: string,
     titleColor?: string,
     headerActionColor?: string,
-    borderColor?: string,
   },
   windowContainer?: {
     background?: string,
   },
-  notificationCard?: {
+  customCard?: {
     borderColor?: string,
     background?: string,
     titleColor?: string,
+    subtitleColor?: string,
     descriptionColor?: string,
   },
-  loadMoreButton: {
+  loadMoreButton?: {
     color?: string,
     background?: string,
   },
@@ -153,17 +148,21 @@ Please note that the badgeStyle, window shadow and border props are only applica
     titleFontWeight?:TextStyle["fontWeight"],
     titleSize?: number,
     titlePadding?: number,
+    borderWidth?: string,
   },
   windowContainer?: {
     padding?: number,
     contentHeight?: DimensionValue,
   },
-  notificationCard?: {
+  customCard?: {
     padding?: number,
     borderWidth?: number,
     avatarSize?: number,
     titleFontWeight?: TextStyle["fontWeight"],
     titleSize?: number,
+    subtitleFontWeight?: TextStyle['fontWeight'],
+    subtitleSize?: number,
+    descriptionFontWeight?: TextStyle['fontWeight'],
     descriptionSize?: number,
     dateSize?: number,
   },
@@ -174,36 +173,40 @@ Please note that the badgeStyle, window shadow and border props are only applica
   badgeStyle?: {
     size?: number,
     textSize?: number,
-    top?: number;
-    left?: number
+    top?: number,
+    right?: number
   },
   deleteIcon?:{
     size?: number
-  }
-  dateIcon?:{
+  },
+  timerIcon?:{
     size?: number
-  }
+  },
   clearAllIcon?:{
     size?: number
-  }
+  },
 }
 ```
 
 #### CardProps
 
 ```js
     type CardProps = {
-      hideDelete?: boolean;
+      hideDelete?: boolean,
       hideAvatar?: boolean,
+      hideMediaThumbnail?: boolean,
       disableAutoMarkAsRead?: boolean,
+      deleteIcon?: JSX.Element,
+      onAvatarClick?: () => void,
+      onMediaThumbnailClick?: () => void,
     };
 ```
 
 #### InboxHeaderProps
 
 ```js
     type InboxHeaderProps = {
-      title?: string;
+      title?: string,
       hideHeader?: boolean,
       hideClearAll?: boolean,
       customHeader?: JSX.Element | null,
@@ -219,31 +222,11 @@ import { useSiren } from "@sirenapp/react-inbox";
 
 function MyComponent() {
   const {
-    markAsRead,
-    deleteNotification,
-    markAllNotificationsAsReadByDate,
-    clearAllNotificationByDate,
-    markNotificationsAsViewed,
+    markAsReadById,
   } = useSiren();
 
   function handleMarkAsRead(id) {
-    markAsRead(id);
-  }
-
-  function handleDeleteNotification(id) {
-    deleteNotification(id);
-  }
-
-  function handleMarkAllNotificationsAsReadByDate(untilDate) {
-    markNotificationsAsReadByDate(untilDate);
-  }
-
-  function handleClearAllNotificationByDate(untilDate) {
-    deleteNotificationsByDate(untilDate);
-  }
-
-  function handleMarkNotificationsAsViewed(untilDate) {
-    markNotificationsAsViewed(untilDate);
+    markAsReadById(id);
   }
 
   return {
@@ -256,24 +239,12 @@ function MyComponent() {
 
 Functions | Parameters | Type | Description |
 ----------|------------|-------|------------|
-markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
-markAsRead | id | string | Set read status of a notification to true          |
-deleteNotification |  id | string  | Delete a notification by id |
-deleteNotificationsByDate | startDate | ISO date string | Delete all notifications until given date |
-markNotificationsAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
-
-## 5. Error codes
-
-Given below are all possible error codes thrown by sdk.
+markAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
+markAsReadById | id | string | Set read status of a notification to true          |
+deleteById |  id | string  | Delete a notification by id |
+deleteByDate | startDate | ISO date string | Delete all notifications until given date |
+markAllAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
 
-Error code                | Description                                                       |
-------------------------- | ------------------------------------------------------------------|
-INVALID_TOKEN             | The token passed in the provider is invalid                       |
-INVALID_RECIPIENT_ID      | The recipient id passed in the provider is invalid                |
-TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed                       |
-GENERIC_API_ERROR         | Occurrence of an unexpected api error                             |
-OUTSIDE_SIREN_CONTEXT     | Attempting to invoke the functions outside the siren inbox context|
-MISSING_PARAMETER         | The required parameter is missing                |
 
 ## Example
 
@@ -302,7 +273,7 @@ export function MyContainer(): React.JSX.Element {
   return (
     <div>
       <SirenInbox
-        inboxHeaderProps={
+        headerProps={
           title: "Notifications",
           hideHeader: false
         }
@@ -311,6 +282,8 @@ export function MyContainer(): React.JSX.Element {
           hideDelete: false,
           hideAvatar: false,
           disableAutoMarkAsRead: false,
+          deleteIcon: null,
+          onAvatarClick: () => null,
         }}
       />
     </div>

example/package.json

@@ -6,7 +6,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
-        "@sirenapp/react-inbox": "^1.0.0"
+        "@sirenapp/react-inbox": "^1.1.0"
     },
     "scripts": {
         "dev": "PORT=9902 react-scripts start",

example/src/App.tsx

@@ -37,7 +37,7 @@ const App: React.FC = () => {
   const [showCustomNotificationCard, setShowCustomNotificationCard] =
     useState(false);
 
-    const { markNotificationsAsReadByDate } = useSiren();
+    const { markAsReadByDate } = useSiren();
 
   const renderListEmpty = () => {
     return (
@@ -84,7 +84,7 @@ const App: React.FC = () => {
           <div style={{ color: "#fff", fontWeight: "600" }}>Siren</div>
         </div>
         <div>
-          <div style={{ color: "#fff", fontWeight: "600" }} onClick={() => markNotificationsAsReadByDate(String(new Date().getTime()))}>Mark allAsRead</div>
+          <div style={{ color: "#fff", fontWeight: "600" }} onClick={() => markAsReadByDate(String(new Date().getTime()))}>Mark allAsRead</div>
         </div>
       </div>
     );
@@ -249,24 +249,24 @@ const App: React.FC = () => {
   return (
     <div>
       <SirenInbox       
-        inboxHeaderProps={{
+        headerProps={{
           title:"Siren Notifications",
           hideHeader: hideHeader,
           customHeader: showCustomHeader ? renderCustomHeader() : undefined
         }}
         darkMode={sdkDarkModeEnabled}
-        cardProps={{ hideAvatar: hideAvatar, showMedia: true }}
+        cardProps={{ hideAvatar: hideAvatar, onAvatarClick: () => console.log('avatar click') }}
         theme={windowThemes[windowThemeIndex]}
         customFooter={showCustomFooter ? renderCustomFooter() : undefined}
         listEmptyComponent={
           showCustomEmptyComponent ? renderListEmpty() : undefined
         }
-        customNotificationCard={
+        customCard={
           showCustomNotificationCard
             ? (notification: any) => renderCustomNotificationCard(notification)
             : undefined
         }
-        onNotificationCardClick={() => {
+        onCardClick={() => {
           console.log("click on notification");
         }}
         onError={(error: any) => {