@sonhero/sapp-notification 1.3.1

package/README.md

@@ -0,0 +1,84 @@
+# sapp-notification-package
+
+> Made with create-react-library
+
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm i @sapp-fe/sapp-notification
+```
+
+## Development
+
+- Sử dụng Node.js từ version 20 trở lên, khuyến nghị v22.14.0.
+- Cài đặt dependencies:
+
+```bash
+yarn install
+```
+
+- Chạy package ở chế độ watch:
+
+```bash
+yarn start
+```
+
+- Build package:
+
+```bash
+yarn build
+```
+
+## Usage
+
+Import component trong project sử dụng package:
+
+```tsx
+import SappNotificationComponent from '@sapp-fe/sapp-notification'
+```
+
+Không cần import CSS riêng như `@sapp-fe/sapp-notification/dist/index.css`. Package sẽ tự nhúng CSS khi component được import.
+
+Ví dụ:
+
+```tsx
+{openNotification && (
+  <SappNotificationComponent
+    notifyDetail={notifyDetail}
+    tabs={tabs}
+    selectedTab={selectedTab}
+    setSelectedTab={setSelectedTab}
+    handleMarkAll={handleMarkAll}
+    handleMarkById={handleMarkById}
+    handleUnMarkById={handleUnMarkById}
+    handleBack={handleBack}
+    isViewDetail={isViewDetail}
+    setOpenNotification={setOpenNotification}
+    openNotification={openNotification}
+    handleViewDetail={handleViewDetail}
+    notifyLists={notifyLists}
+    notificationUnread={notificationUnread}
+    scrollRef={scrollRef}
+  />
+)}
+```
+
+## Local link
+
+Trong thư mục package:
+
+```bash
+yarn link
+```
+
+Trong project sử dụng package:
+
+```bash
+yarn link @sapp-fe/sapp-notification
+```
+
+## License
+
+MIT © 2025 sapp

package/dist/assets/icons/index.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+declare const CloseIconV2: FC<React.SVGProps<SVGSVGElement>>;
+declare const ArrowLeftIcon: FC<React.SVGProps<SVGSVGElement>>;
+declare const MarkIconV2: FC<React.SVGProps<SVGSVGElement>>;
+declare const NotificationDots: FC<React.SVGProps<SVGSVGElement>>;
+declare const MarkIcon: FC<React.SVGProps<SVGSVGElement>>;
+declare const EllipseIcon: FC<React.SVGProps<SVGSVGElement>>;
+declare const DotIcon: FC<React.SVGProps<SVGSVGElement>>;
+declare const NoDataIcon: FC<React.SVGProps<SVGSVGElement>>;
+export { ArrowLeftIcon, EllipseIcon, CloseIconV2, MarkIcon, MarkIconV2, NotificationDots, DotIcon, NoDataIcon };

package/dist/common/base/FooterDrawer.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+interface IProps {
+    content: ReactNode;
+    icon: ReactNode;
+    action: () => void;
+    classNameText?: string;
+    classNameBg?: string;
+}
+declare const FooterDrawer: ({ content, icon, action, classNameText, classNameBg, }: IProps) => React.JSX.Element;
+export default FooterDrawer;

package/dist/common/base/NoData.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NoData: () => React.JSX.Element;
+export default NoData;

package/dist/common/base/SappDrawer.d.ts

@@ -0,0 +1,16 @@
+import { DrawerProps } from 'antd';
+import React, { ReactNode } from 'react';
+interface IProps extends DrawerProps {
+    open: boolean;
+    handleCancel?: () => void;
+    handleBack?: () => void;
+    width?: number | string;
+    title: string;
+    isShowBtnClose?: boolean;
+    isShowFooter?: boolean;
+    children: ReactNode;
+    loading?: boolean;
+    isDesktopView?: boolean;
+}
+declare const SappDrawer: ({ open, handleBack, handleCancel, width, title, children, isShowBtnClose, isShowFooter, loading, className, isDesktopView, ...props }: IProps) => React.JSX.Element;
+export default SappDrawer;

package/dist/common/base/SappTabs.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ITabsTeacher {
+    id: number;
+    title: string;
+}
+interface SappTabsProps {
+    tabs: ITabsTeacher[];
+    selected: number;
+    setSelected: React.Dispatch<React.SetStateAction<number>>;
+    bordered?: boolean;
+}
+declare const SappTabs: React.FC<SappTabsProps>;
+export default SappTabs;

package/dist/components/notification/ItemNotification.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { INotifications } from '../../types/Notification';
+interface IProps {
+    notifyLists: INotifications[];
+    notificationUnread: number;
+    handleViewDetail: (id: string, redirect: string, content: string, tag: string) => Promise<void>;
+    handleMarkById: (ids: string[]) => void;
+    handleUnMarkById: (ids: string[]) => void;
+    scrollRef: React.RefObject<HTMLDivElement>;
+    handleViewNotification: (link: string) => void;
+    isDesktopView?: boolean;
+    currentTabKey?: string | number;
+    isLoading?: boolean;
+    isFirstLoad?: boolean;
+    textMainColor?: string;
+    isMobileView?: boolean;
+}
+declare const ItemNotification: React.MemoExoticComponent<({ notifyLists, notificationUnread, handleViewDetail, handleMarkById, handleUnMarkById, scrollRef, handleViewNotification, isDesktopView, currentTabKey, isLoading, isFirstLoad, textMainColor, isMobileView, }: IProps) => React.JSX.Element>;
+export default ItemNotification;

package/dist/components/notification/MarkNotification.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { INotifications } from '../../types/Notification';
+interface MarkNotificationProps {
+    notifyItem: INotifications;
+    handleMarkById: (ids: string[]) => void;
+    handleUnMarkById: (ids: string[]) => void;
+    colorBgTooltip?: string;
+}
+declare const MarkNotification: React.FC<MarkNotificationProps>;
+export default MarkNotification;

package/dist/components/notification/NotifyDetail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NotificationState } from '../../types/Notification';
+interface NotifyDetailProps {
+    notifyDetail: NotificationState;
+    isMobileView: boolean;
+}
+declare const NotifyDetail: React.FC<NotifyDetailProps>;
+export default NotifyDetail;

package/dist/constants/index.d.ts

@@ -0,0 +1,13 @@
+export declare const ANIMATION_NOTIFICATION: {
+    DURATION: number;
+    DATA_AOS: string;
+};
+export declare enum DATE_FORMAT {
+    DATE_TIME = "HH:mm | DD/MM/YYYY",
+    DATE_TIME_DASH = "HH:mm - DD/MM/YYYY",
+    DATE = "DD/MM/YYYY"
+}
+export declare const ANIMATION: {
+    DURATION: number;
+    DATA_AOS: string;
+};