@equinor/fusion-framework-react-components-bookmark 0.1.0

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Bookmark: () => JSX.Element;
+export default Bookmark;

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

@@ -0,0 +1,14 @@
+import { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+import { PropsWithChildren } from 'react';
+export declare const BookmarkProvider: ({ children }: PropsWithChildren<unknown>) => 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,5 @@
+/// <reference types="react" />
+export declare const CreateBookmarkModal: ({ isOpen, onClose, }: {
+    isOpen: boolean;
+    onClose: (b: boolean) => void;
+}) => 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,6 @@
+/// <reference types="react" />
+export declare const EditBookmarkModal: ({ isOpen, onClose, bookmarkId, }: {
+    isOpen: boolean;
+    onClose: (b: boolean) => void;
+    bookmarkId?: string | undefined;
+}) => 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,11 @@
+/// <reference types="react" />
+import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
+type BookmarkFilterProps = {
+    searchText: string;
+    setSearchText: (newVal: string | null) => void;
+    setGroupBy: (groupBy: GroupingKeys) => void;
+    groupingModes: string[];
+    groupBy: string;
+};
+export declare const BookmarkFilter: ({ searchText, setGroupBy, setSearchText, groupingModes, groupBy, }: BookmarkFilterProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ImportBookmarkModal: () => 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,2 @@
+/// <reference types="react" />
+export declare const Loading: () => JSX.Element;

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

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+import { MenuOption } from './Row';
+type MenuProps = {
+    pRef: MutableRefObject<HTMLElement | null>;
+    onClose: VoidFunction;
+    open: boolean;
+    options: MenuOption[];
+};
+export declare const MoreMenu: ({ pRef, onClose, open, options }: MenuProps) => 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 = {
+    name: string;
+    id: string;
+    menuOpen: boolean;
+    onMenuOpen: (id: string) => void;
+    menuOptions: MenuOption[];
+    children?: ReactNode;
+};
+export declare const Row: ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => JSX.Element;
+export {};

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

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

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type SharedIconProps = {
+    createdBy: string;
+    createdById: string;
+};
+export declare const SharedIcon: ({ createdBy, createdById }: SharedIconProps) => 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/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@equinor/fusion-framework-react-components-bookmark",
+    "version": "0.1.0",
+    "description": "",
+    "main": "dist/esm/index.js",
+    "exports": {
+        ".": "./dist/esm/index.js"
+    },
+    "types": "./dist/types/index.d.ts",
+    "scripts": {
+        "build": "tsc -b",
+        "prepack": "yarn build"
+    },
+    "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/eds-utils": "^0.7.0",
+        "@equinor/fusion-framework-react-module-bookmark": "^1.0.5"
+    },
+    "devDependencies": {
+        "@emotion/css": "^11.10.6",
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@equinor/eds-core-react": "^0.30.0",
+        "@equinor/eds-icons": "^0.19.1",
+        "@equinor/eds-tokens": "^0.9.0",
+        "@types/react": "^17.0.11",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^5.3.9",
+        "typescript": "^4.9.3"
+    },
+    "peerDependencies": {
+        "@emotion/css": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@equinor/eds-core-react": "^0.30.0",
+        "@equinor/eds-icons": "^0.19.1",
+        "@equinor/eds-tokens": "^0.9.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "styled-components": "^5.3.9"
+    },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        }
+    },
+    "gitHead": "6983a4f2bf1fb24c086abcba53c2349d39f34a21"
+}

package/src/components/Bookmark.tsx

@@ -0,0 +1,59 @@
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { useBookmarkGrouping } from '../hooks';
+import { BookmarkFilter } from './filter/Filter';
+import { SectionList } from './sectionList/SectionList';
+import { css } from '@emotion/css';
+import { useEffect } from 'react';
+
+import { Icon } from '@equinor/eds-core-react';
+import { chevron_down, chevron_right, share, more_vertical, add } from '@equinor/eds-icons';
+
+Icon.add({
+    chevron_down,
+    chevron_right,
+    share,
+    more_vertical,
+    add,
+});
+
+const style = {
+    wrapper: css`
+        padding-right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    `,
+    list: css`
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc((100vh - 85px) - 3rem);
+    `,
+};
+
+export const Bookmark = () => {
+    const { bookmarks, getAllBookmarks } = useBookmark();
+
+    useEffect(() => {
+        getAllBookmarks();
+    }, [getAllBookmarks]);
+
+    const { bookmarkGroups, groupingModes, searchText, setGroupBy, setSearchText, groupByKey } =
+        useBookmarkGrouping(bookmarks);
+
+    return (
+        <div className={style.wrapper}>
+            <BookmarkFilter
+                groupBy={groupByKey}
+                groupingModes={Object.keys(groupingModes)}
+                searchText={searchText ?? ''}
+                setGroupBy={setGroupBy}
+                setSearchText={setSearchText}
+            />
+            <div className={style.list}>
+                <SectionList bookmarkGroups={bookmarkGroups} />
+            </div>
+        </div>
+    );
+};
+
+export default Bookmark;

package/src/components/BookmarkProvider.tsx

@@ -0,0 +1,65 @@
+import { Snackbar } from '@equinor/eds-core-react';
+import { 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,92 @@
+import styled from '@emotion/styled';
+import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
+import { 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';
+
+const StyledContent = styled(Dialog.Content)`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+`;
+
+export const CreateBookmarkModal = ({
+    isOpen,
+    onClose,
+}: {
+    isOpen: boolean;
+    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,136 @@
+import { css } from '@emotion/css';
+import styled from '@emotion/styled';
+import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
+import { AppModule } from '@equinor/fusion-framework-module-app';
+import { PatchBookmark } from '@equinor/fusion-framework-module-bookmark';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
+
+const StyledContent = styled(Dialog.Content)`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+`;
+const StyledDialog = styled(Dialog)`
+    width: 500px;
+`;
+
+const styles = {
+    checkboxWrapper: css`
+        display: flex;
+        gap: 1rem;
+    `,
+    actions: css`
+        display: 'flex';
+        gap: 0.2em;
+    `,
+};
+
+export const EditBookmarkModal = ({
+    isOpen,
+    onClose,
+    bookmarkId,
+}: {
+    isOpen: boolean;
+    onClose: (b: boolean) => void;
+    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 (
+        <StyledDialog open={isOpen}>
+            <Dialog.Header>Edit 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"
+                        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>
+
+                <div className={styles.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);
+                        }}
+                    />
+                </div>
+            </StyledContent>
+            <Dialog.Actions>
+                <div className={styles.actions}>
+                    <Button onClick={() => onClose(false)} variant="ghost">
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            state &&
+                                updateBookmark(state, { updatePayload }).then(() => {
+                                    onClose(false);
+                                });
+                        }}
+                    >
+                        Save
+                    </Button>
+                </div>
+            </Dialog.Actions>
+        </StyledDialog>
+    );
+};

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

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

package/src/components/filter/Filter.tsx

@@ -0,0 +1,48 @@
+import { css } from '@emotion/css';
+import { Search, Autocomplete } from '@equinor/eds-core-react';
+import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
+
+type BookmarkFilterProps = {
+    searchText: string;
+    setSearchText: (newVal: string | null) => void;
+    setGroupBy: (groupBy: GroupingKeys) => void;
+    groupingModes: string[];
+    groupBy: string;
+};
+
+const styles = {
+    row: css`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    `,
+};
+
+export const BookmarkFilter = ({
+    searchText,
+    setGroupBy,
+    setSearchText,
+    groupingModes,
+    groupBy,
+}: BookmarkFilterProps) => {
+    return (
+        <div className={styles.row}>
+            <Search
+                placeholder="Search in my bookmarks"
+                value={searchText ?? ''}
+                onChange={(e) => {
+                    setSearchText(e.currentTarget.value.length ? e.currentTarget.value : null);
+                }}
+            />
+            <Autocomplete
+                options={groupingModes}
+                selectedOptions={[groupBy]}
+                multiple={false}
+                hideClearButton
+                autoWidth
+                onOptionsChange={(changes) => setGroupBy(changes.selectedItems[0] as GroupingKeys)}
+                label={''}
+            />
+        </div>
+    );
+};