@equinor/fusion-framework-react-components-bookmark 0.2.13 → 0.3.0

package/dist/types/components/messages/Message.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export type PortalMessageType = 'Error' | 'Info' | 'Warning' | 'NoContent';
+type MessageProps = {
+    readonly title: string;
+    readonly body?: React.FC | string;
+    readonly type?: PortalMessageType;
+    readonly color?: string;
+};
+export declare const Message: ({ title, type, color, children, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.2.13";
+export declare const version = "0.3.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-components-bookmark",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -19,8 +19,8 @@
     "directory": "packages/react/components/bookmark"
   },
   "dependencies": {
-    "@equinor/fusion-framework-react": "^5.3.4",
-    "@equinor/fusion-framework-react-module-bookmark": "^2.0.23"
+    "@equinor/fusion-framework-react": "^5.3.6",
+    "@equinor/fusion-framework-react-module-bookmark": "^2.0.25"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^0.34.0",
@@ -31,8 +31,8 @@
     "react": "^18.2.0",
     "styled-components": "^6.0.7",
     "typescript": "^5.1.3",
-    "@equinor/fusion-framework-module-app": "^5.2.11",
-    "@equinor/fusion-framework-module-bookmark": "^1.0.16",
+    "@equinor/fusion-framework-module-app": "^5.2.12",
+    "@equinor/fusion-framework-module-bookmark": "^1.0.17",
     "@equinor/fusion-framework-module-event": "^4.0.7"
   },
   "peerDependencies": {

package/src/components/Bookmark.tsx

@@ -2,12 +2,15 @@ import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import { useBookmarkGrouping } from '../hooks';
 import { BookmarkFilter } from './filter/Filter';
 import { SectionList } from './sectionList/SectionList';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Icon } from '@equinor/eds-core-react';
 import { chevron_down, chevron_right, share, more_vertical, add } from '@equinor/eds-icons';
 
 import styled from 'styled-components';
+import { Message } from './messages/Message';
+import { Loading } from './loading/Loading';
+import { useFramework } from '@equinor/fusion-framework-react';
 
 Icon.add({
     chevron_down,
@@ -29,10 +32,32 @@ const Styled = {
         overflow-x: hidden;
         height: calc((100vh - 85px) - 3rem);
     `,
+    NoContentWrapper: styled.div`
+        position: absolute;
+        top: 150px;
+        bottom: 200px;
+        left: 0px;
+        right: 0px;
+    `,
 };
 
 export const Bookmark = () => {
     const { bookmarks, getAllBookmarks } = useBookmark();
+    const [loading, setLoading] = useState(true);
+
+    const { event } = useFramework().modules;
+
+    useEffect(() => {
+        return event.addEventListener('onBookmarksChanged', () => {
+            setLoading(false);
+        });
+    }, [event]);
+
+    useEffect(() => {
+        if (bookmarks.length > 0) {
+            setLoading(false);
+        }
+    }, [bookmarks]);
 
     useEffect(() => {
         getAllBookmarks();
@@ -51,7 +76,17 @@ export const Bookmark = () => {
                 setSearchText={setSearchText}
             />
             <Styled.List>
-                <SectionList bookmarkGroups={bookmarkGroups} />
+                {bookmarkGroups.length > 0 ? (
+                    <SectionList bookmarkGroups={bookmarkGroups} />
+                ) : loading ? (
+                    <Loading />
+                ) : (
+                    <Styled.NoContentWrapper>
+                        <Message title="No Bookmarks" type="NoContent">
+                            You have not created any bookmarks yet.
+                        </Message>
+                    </Styled.NoContentWrapper>
+                )}
             </Styled.List>
         </Styled.Wrapper>
     );

package/src/components/messages/Message.tsx

@@ -0,0 +1,82 @@
+import { Icon, Typography } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+import { error_outlined, file_description } from '@equinor/eds-icons';
+
+export type PortalMessageType = 'Error' | 'Info' | 'Warning' | 'NoContent';
+
+const getMessageType = (type?: PortalMessageType) => {
+    switch (type) {
+        case 'Error':
+            return { color: tokens.colors.interactive.danger__resting.hex, icon: error_outlined };
+        case 'Info':
+            return { color: tokens.colors.interactive.primary__resting.hex, icon: error_outlined };
+        case 'Warning':
+            return { color: tokens.colors.interactive.warning__resting.hex, icon: error_outlined };
+        case 'NoContent':
+            return {
+                color: tokens.colors.interactive.primary__resting.hex,
+                icon: file_description,
+            };
+        default:
+            return undefined;
+    }
+};
+
+const Styles = {
+    Wrapper: styled.div`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        justify-content: center;
+    `,
+    Content: styled.div`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        justify-content: center;
+    `,
+};
+
+type MessageProps = {
+    readonly title: string;
+    readonly body?: React.FC | string;
+    readonly type?: PortalMessageType;
+    readonly color?: string;
+};
+
+export const Message = ({
+    title,
+    type = 'Info',
+    color,
+    children,
+}: PropsWithChildren<MessageProps>) => {
+    const currentType = getMessageType(type);
+    return (
+        <Styles.Wrapper>
+            <Icon
+                data-testid="icon"
+                size={40}
+                color={currentType?.color || color || tokens.colors.text.static_icons__tertiary.hex}
+                data={currentType?.icon || error_outlined}
+            />
+            <Styles.Content>
+                <Typography
+                    color={tokens.colors.text.static_icons__default.hex}
+                    variant={'h3'}
+                    aria-label={`Title for ${type} message`}
+                >
+                    {title}
+                </Typography>
+
+                <Typography>{children && children}</Typography>
+            </Styles.Content>
+        </Styles.Wrapper>
+    );
+};

package/src/components/sectionList/SectionList.tsx

@@ -7,12 +7,11 @@ import { SharedIcon } from '../shared/SharedIcon';
 import type { Bookmark } from '@equinor/fusion-framework-module-bookmark';
 import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { delete_to_trash, share, edit, close, update } from '@equinor/eds-icons';
 import { useFramework } from '@equinor/fusion-framework-react';
 import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
 import { filterEmptyGroups, sortByName, toHumanReadable } from '../../utils/utils';
-import { Loading } from '../loading/Loading';
 
 Icon.add({
     delete_to_trash,
@@ -30,19 +29,11 @@ export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
     const { deleteBookmarkById, getCurrentAppKey, updateBookmark, removeBookmarkFavorite } =
         useBookmark();
 
-    const [loading, setLoading] = useState(true);
-
     const user = useCurrentUser();
     const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
 
     const { event } = useFramework().modules;
 
-    useEffect(() => {
-        return event.addEventListener('onBookmarksChanged', () => {
-            setLoading(false);
-        });
-    }, [event]);
-
     const editBookmark = useCallback(
         (bookmarkId: string) => {
             event.dispatchEvent('onBookmarkEdit', { detail: { bookmarkId } });
@@ -81,8 +72,6 @@ export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
             user?.localAccountId,
         );
 
-    if (loading) return <Loading />;
-
     return (
         <>
             {bookmarkGroups.filter(filterEmptyGroups).map(({ groupingProperty, values }) => (

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.2.13';
+export const version = '0.3.0';