@equinor/fusion-framework-react-components-bookmark 0.0.0-context-error-20240131144633

package/dist/types/components/Bookmark.d.ts

@@ -0,0 +1,2 @@
+export declare const Bookmark: () => import("react/jsx-runtime").JSX.Element;
+export default Bookmark;

package/dist/types/components/BookmarkProvider.d.ts

@@ -0,0 +1,14 @@
+import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+import { PropsWithChildren } from 'react';
+export declare const BookmarkProvider: ({ children }: PropsWithChildren<unknown>) => import("react/jsx-runtime").JSX.Element;
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onBookmarkOpen: FrameworkEvent<FrameworkEventInit<boolean, unknown>>;
+        onBookmarkEdit: FrameworkEvent<FrameworkEventInit<{
+            bookmarkId: string;
+        }, unknown>>;
+        onBookmarkUrlCopy: FrameworkEvent<FrameworkEventInit<{
+            url: string;
+        }, unknown>>;
+    }
+}

package/dist/types/components/create-bookmark/CreateBookmark.d.ts

@@ -0,0 +1,4 @@
+export declare const CreateBookmarkModal: ({ isOpen, onClose, }: {
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/create-bookmark/index.d.ts

@@ -0,0 +1 @@
+export * from './CreateBookmark';

package/dist/types/components/edit-bookmark/EditBookmark.d.ts

@@ -0,0 +1,5 @@
+export declare const EditBookmarkModal: ({ isOpen, onClose, bookmarkId, }: {
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+    readonly bookmarkId?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/edit-bookmark/index.d.ts

@@ -0,0 +1 @@
+export * from './EditBookmark';

package/dist/types/components/filter/Filter.d.ts

@@ -0,0 +1,10 @@
+import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
+type BookmarkFilterProps = {
+    readonly searchText: string;
+    readonly setSearchText: (newVal: string | null) => void;
+    readonly setGroupBy: (groupBy: GroupingKeys) => void;
+    readonly groupingModes: string[];
+    readonly groupBy: string;
+};
+export declare const BookmarkFilter: ({ searchText, setGroupBy, setSearchText, groupingModes, groupBy, }: BookmarkFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/import-bookmark/ImportBookmark.d.ts

@@ -0,0 +1 @@
+export declare const ImportBookmarkModal: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/import-bookmark/index.d.ts

@@ -0,0 +1 @@
+export * from './ImportBookmark';

package/dist/types/components/loading/Loading.d.ts

@@ -0,0 +1 @@
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;

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/components/row/MoreMenu.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+import { MenuOption } from './Row';
+type MenuProps = {
+    readonly pRef: MutableRefObject<HTMLElement | null>;
+    readonly onClose: VoidFunction;
+    readonly open: boolean;
+    readonly options: MenuOption[];
+};
+export declare const MoreMenu: ({ pRef, onClose, open, options }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/row/Row.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type MenuOption = {
+    name: string;
+    disabled: boolean;
+    onClick: VoidFunction;
+    Icon?: ReactNode;
+};
+type RowProps = {
+    readonly name: string;
+    readonly id: string;
+    readonly menuOpen: boolean;
+    readonly onMenuOpen: (id: string) => void;
+    readonly menuOptions: MenuOption[];
+    readonly children?: ReactNode;
+};
+export declare const Row: ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/section/Section.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type SectionProps = {
+    readonly name: string;
+    readonly children: ReactNode;
+};
+export declare const Section: ({ children, name }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/sectionList/SectionList.d.ts

@@ -0,0 +1,6 @@
+import { useBookmarkGrouping } from '../../hooks';
+type SectionListProps = {
+    readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
+};
+export declare const SectionList: ({ bookmarkGroups }: SectionListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/shared/SharedIcon.d.ts

@@ -0,0 +1,6 @@
+type SharedIconProps = {
+    readonly createdBy: string;
+    readonly createdById: string;
+};
+export declare const SharedIcon: ({ createdBy, createdById }: SharedIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useBookmarkGrouping';

package/dist/types/hooks/useBookmarkGrouping.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
+export declare const useBookmarkGrouping: (bookmarks?: Bookmark[]) => {
+    setGroupBy: import("react").Dispatch<import("react").SetStateAction<GroupingKeys>>;
+    setSearchText: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    searchText: string | null;
+    bookmarkGroups: {
+        groupingProperty: string;
+        values: Bookmark<unknown>[];
+    }[];
+    groupingModes: Record<GroupingKeys, (_item: Bookmark) => string>;
+    groupByKey: GroupingKeys;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Bookmark } from './components/Bookmark';
+export { BookmarkProvider } from './components/BookmarkProvider';

package/dist/types/utils/append-bookmark-to-uri.d.ts

@@ -0,0 +1 @@
+export declare const appendBookmarkIdToUrl: (id: string) => string;

package/dist/types/utils/utils.d.ts

@@ -0,0 +1,6 @@
+import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+export declare const filterEmptyGroups: (i: {
+    values: Bookmark[];
+}) => number;
+export declare const sortByName: (a: Bookmark, b: Bookmark) => number;
+export declare const toHumanReadable: (val: string) => string;

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "0.3.5";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@equinor/fusion-framework-react-components-bookmark",
+  "version": "0.0.0-context-error-20240131144633",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "exports": {
+    ".": "./dist/esm/index.js"
+  },
+  "types": "./dist/types/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/equinor/fusion-framework.git",
+    "directory": "packages/react/components/bookmark"
+  },
+  "dependencies": {
+    "@equinor/fusion-framework-react": "^0.0.0-context-error-20240131144633",
+    "@equinor/fusion-framework-react-module-bookmark": "^0.0.0-context-error-20240131144633"
+  },
+  "devDependencies": {
+    "@equinor/eds-core-react": "^0.35.1",
+    "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/eds-utils": "^0.8.3",
+    "@types/react": "^18.2.20",
+    "react": "^18.2.0",
+    "styled-components": "^6.0.7",
+    "typescript": "^5.1.3",
+    "@equinor/fusion-framework-module-bookmark": "^1.1.0",
+    "@equinor/fusion-framework-module-app": "^5.2.12",
+    "@equinor/fusion-framework-module-event": "^4.0.7"
+  },
+  "peerDependencies": {
+    "@equinor/eds-core-react": "^0.35.1",
+    "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/eds-utils": "^0.8.3",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "styled-components": "^6.0.7"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}

package/src/components/Bookmark.tsx

@@ -0,0 +1,95 @@
+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, 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,
+    chevron_right,
+    share,
+    more_vertical,
+    add,
+});
+
+const Styled = {
+    Wrapper: styled.div`
+        padding-right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    `,
+    List: styled.div`
+        overflow-y: auto;
+        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();
+    }, [getAllBookmarks]);
+
+    const { bookmarkGroups, groupingModes, searchText, setGroupBy, setSearchText, groupByKey } =
+        useBookmarkGrouping(bookmarks);
+
+    return (
+        <Styled.Wrapper>
+            <BookmarkFilter
+                groupBy={groupByKey}
+                groupingModes={Object.keys(groupingModes)}
+                searchText={searchText ?? ''}
+                setGroupBy={setGroupBy}
+                setSearchText={setSearchText}
+            />
+            <Styled.List>
+                {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>
+    );
+};
+
+export default Bookmark;

package/src/components/BookmarkProvider.tsx

@@ -0,0 +1,65 @@
+import { Snackbar } from '@equinor/eds-core-react';
+import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { CreateBookmarkModal } from './create-bookmark';
+import { EditBookmarkModal } from './edit-bookmark';
+import { ImportBookmarkModal } from './import-bookmark';
+
+export const BookmarkProvider = ({ children }: PropsWithChildren<unknown>) => {
+    const [isCreateBookmarkOpen, setIsCreateBookmarkOpen] = useState(false);
+    const [isEditBookmarkOpen, setIsEditBookmarkOpen] = useState(false);
+    const [editBookmarkId, setEditBookmarkId] = useState<string | undefined>();
+    const [isBookmarkCopy, setIsBookmarkCopy] = useState(false);
+
+    const { event } = useFramework().modules;
+
+    useEffect(() => {
+        const subOnBookmarkOpen = event.addEventListener('onBookmarkOpen', (e) => {
+            setIsCreateBookmarkOpen(e.detail);
+        });
+
+        const subOnBookmarkEdit = event.addEventListener('onBookmarkEdit', (e) => {
+            setEditBookmarkId(e.detail.bookmarkId);
+            setIsEditBookmarkOpen(true);
+        });
+
+        const subOnBookmarkUrlCopy = event.addEventListener('onBookmarkUrlCopy', () => {
+            setIsBookmarkCopy(true);
+        });
+
+        return () => {
+            subOnBookmarkEdit();
+            subOnBookmarkOpen();
+            subOnBookmarkUrlCopy();
+        };
+    }, [event]);
+
+    return (
+        <>
+            <CreateBookmarkModal isOpen={isCreateBookmarkOpen} onClose={setIsCreateBookmarkOpen} />
+            <EditBookmarkModal
+                isOpen={isEditBookmarkOpen}
+                onClose={setIsEditBookmarkOpen}
+                bookmarkId={editBookmarkId}
+            />
+            <ImportBookmarkModal />
+            <Snackbar
+                autoHideDuration={2000}
+                onClose={() => setIsBookmarkCopy(false)}
+                open={isBookmarkCopy}
+            >
+                Bookmark url copied to clipboard
+            </Snackbar>
+            {children}
+        </>
+    );
+};
+
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onBookmarkOpen: FrameworkEvent<FrameworkEventInit<boolean, unknown>>;
+        onBookmarkEdit: FrameworkEvent<FrameworkEventInit<{ bookmarkId: string }, unknown>>;
+        onBookmarkUrlCopy: FrameworkEvent<FrameworkEventInit<{ url: string }, unknown>>;
+    }
+}

package/src/components/create-bookmark/CreateBookmark.tsx

@@ -0,0 +1,93 @@
+import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { ChangeEvent, useState } from 'react';
+
+import styled from 'styled-components';
+// TODO
+const StyledContent = styled(Dialog.Content)`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+`;
+
+export const CreateBookmarkModal = ({
+    isOpen,
+    onClose,
+}: {
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+}) => {
+    const [state, setState] = useState<{ name: string; description: string; isShared: boolean }>({
+        name: '',
+        description: '',
+        isShared: false,
+    });
+
+    const { current } = useFramework<[AppModule]>().modules.app;
+
+    const { createBookmark } = useBookmark();
+
+    return (
+        <Dialog style={{ width: '400px' }} open={isOpen}>
+            <Dialog.Header>Create bookmark</Dialog.Header>
+            <StyledContent>
+                <div>
+                    <Label htmlFor="name" label="Name" />
+                    <Input
+                        id="name"
+                        autoComplete="off"
+                        value={state?.name}
+                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                            setState((s) => ({ ...s, name: event.target.value }));
+                        }}
+                    />
+                </div>
+                <div>
+                    <TextField
+                        id="storybook-multiline-three"
+                        label="Description"
+                        multiline
+                        rows={3}
+                        rowsMax={10}
+                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                            setState((s) => ({ ...s, description: event.target.value }));
+                        }}
+                    />
+                </div>
+                <div>
+                    <Label htmlFor="app" label="App" />
+                    <Input readOnly={true} value={current?.manifest?.name || ''} />
+                </div>
+
+                <div>
+                    <Checkbox
+                        label="Is Shared"
+                        checked={state.isShared}
+                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                            setState((s) => ({ ...s, isShared: event.target.checked }));
+                        }}
+                    />
+                </div>
+            </StyledContent>
+            <Dialog.Actions>
+                <div style={{ display: 'flex', gap: '0.2em' }}>
+                    <Button onClick={() => onClose(false)} variant="ghost">
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            state &&
+                                createBookmark(state).then(() => {
+                                    onClose(false);
+                                });
+                        }}
+                    >
+                        Create
+                    </Button>
+                </div>
+            </Dialog.Actions>
+        </Dialog>
+    );
+};

package/src/components/create-bookmark/index.ts

@@ -0,0 +1 @@
+export * from './CreateBookmark';

package/src/components/edit-bookmark/EditBookmark.tsx

@@ -0,0 +1,137 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
+// TODO - export from `@equinor/fusion-framework-react-module-bookmark`
+import type { PatchBookmark } from '@equinor/fusion-framework-module-bookmark';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
+
+import styled from 'styled-components';
+
+const Styled = {
+    Dialog: styled(Dialog)`
+        width: 500px;
+    `,
+    DialogContent: styled(Dialog.Content)`
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    `,
+    CheckboxWrapper: styled.div`
+        display: flex;
+        gap: 1rem;
+    `,
+    Actions: styled.div`
+        display: flex;
+        gap: 0.2em;
+    `,
+};
+
+export const EditBookmarkModal = ({
+    isOpen,
+    onClose,
+    bookmarkId,
+}: {
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+    readonly bookmarkId?: string;
+}) => {
+    const [state, setState] = useState<PatchBookmark>({
+        id: '',
+        appKey: '',
+        name: '',
+        description: '',
+        isShared: false,
+    });
+
+    const [updatePayload, setUpdatePayload] = useState(false);
+
+    const { app, event } = useFramework<[AppModule]>().modules;
+    const { current } = app;
+
+    const { updateBookmark, bookmarks } = useBookmark();
+
+    useEffect(() => {
+        const bookmark = bookmarks.find((b) => b.id === bookmarkId);
+        if (bookmark) {
+            setState(bookmark);
+        }
+    }, [bookmarkId, bookmarks]);
+
+    return (
+        <Styled.Dialog open={isOpen}>
+            <Dialog.Header>Edit bookmark</Dialog.Header>
+            <Styled.DialogContent>
+                <div>
+                    <Label htmlFor="name" label="Name" />
+                    <Input
+                        id="name"
+                        autoComplete="off"
+                        value={state?.name}
+                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                            setState((s) => ({ ...s, name: event.target.value }));
+                        }}
+                    />
+                </div>
+                <div>
+                    <TextField
+                        id="storybook-multiline-three"
+                        label="Description"
+                        value={state?.description}
+                        multiline
+                        rows={3}
+                        rowsMax={10}
+                        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                            setState((s) => ({ ...s, description: event.target.value }));
+                        }}
+                    />
+                </div>
+                <div>
+                    <Label htmlFor="app" label="App" />
+                    <Input readOnly={true} value={current?.manifest?.name || ''} />
+                </div>
+
+                <Styled.CheckboxWrapper>
+                    <Checkbox
+                        label="Is Shared"
+                        checked={state.isShared}
+                        onChange={(changeEvent: ChangeEvent<HTMLInputElement>) => {
+                            if (changeEvent.target.checked) {
+                                const url = appendBookmarkIdToUrl(state.id);
+                                navigator.clipboard.writeText(url);
+                                event.dispatchEvent('onBookmarkUrlCopy', { detail: { url } });
+                            }
+                            setState((s) => ({ ...s, isShared: changeEvent.target.checked }));
+                        }}
+                    />
+                    <Checkbox
+                        label="Update bookmark with current view"
+                        checked={updatePayload}
+                        onChange={() => {
+                            setUpdatePayload((s) => !s);
+                        }}
+                    />
+                </Styled.CheckboxWrapper>
+            </Styled.DialogContent>
+            <Dialog.Actions>
+                <Styled.Actions>
+                    <Button onClick={() => onClose(false)} variant="ghost">
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            state &&
+                                updateBookmark(state, { updatePayload }).then(() => {
+                                    onClose(false);
+                                });
+                        }}
+                    >
+                        Save
+                    </Button>
+                </Styled.Actions>
+            </Dialog.Actions>
+        </Styled.Dialog>
+    );
+};

package/src/components/edit-bookmark/index.ts

@@ -0,0 +1 @@
+export * from './EditBookmark';