@equinor/fusion-framework-react-components-bookmark 2.0.4 → 2.0.5

package/src/components/import-bookmark/ImportBookmarkModal.tsx

@@ -1,100 +0,0 @@
-import { Button, Dialog } from '@equinor/eds-core-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import styled from 'styled-components';
-import { useBookmarkComponentContext } from '../BookmarkProvider';
-import { filter, from, of } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-import { useObservableState } from '@equinor/fusion-observable/react';
-
-const Styled = {
-  Actions: styled.div`
-        display: flex;
-        gap: 1rem;
-    `,
-};
-
-/**
- * Modal that prompts the user to import a bookmark shared via a `bookmarkId` URL parameter.
- *
- * @returns The import bookmark modal
- */
-export const ImportBookmarkModal = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { provider, currentUser } = useBookmarkComponentContext();
-
-  // Observe changes to current bookmark and check if it is already in bookmarks or favorites
-  const newBookmark$ = useMemo(() => {
-    // Without a provider there is no bookmark data source to observe
-    if (!provider) {
-      return of(null);
-    }
-    // Watch the current bookmark and resolve whether it should prompt an import
-    return provider.currentBookmark$.pipe(
-      // filter out null values, not interested in those
-      filter((bookmark) => !!bookmark),
-      switchMap((bookmark) => {
-        const checkBookmark = bookmark && bookmark.createdBy.id !== currentUser?.id;
-        // Only prompt to import bookmarks created by someone else
-        if (!checkBookmark) {
-          return of(null);
-        }
-        // Resolve to null once the bookmark is already a favorite, otherwise pass it through
-        return from(provider.isBookmarkInFavorites(bookmark.id)).pipe(
-          map((isFavorite) => (isFavorite ? null : bookmark)),
-        );
-      }),
-    );
-  }, [provider, currentUser?.id]);
-
-  const { value: newBookmark } = useObservableState(newBookmark$);
-
-  useEffect(() => {
-    // Open the import dialog whenever a new importable bookmark is detected
-    if (newBookmark) {
-      setIsOpen(true);
-    }
-  }, [newBookmark]);
-
-  const onAddBookmarkFavorite = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      // Without a provider we cannot persist the favorite, so bail out
-      if (!provider) {
-        console.error('Provider not available');
-        return;
-      }
-      from(provider.addBookmarkToFavorites(e.currentTarget.value)).subscribe({
-        complete: () => {
-          setIsOpen(false);
-        },
-      });
-    },
-    [provider],
-  );
-
-  // Nothing to import when there is no candidate bookmark
-  if (!newBookmark) {
-    return null;
-  }
-
-  return (
-    <Dialog style={{ width: '600px' }} open={isOpen}>
-      <Dialog.Header>Import bookmark</Dialog.Header>
-      <Dialog.Content>
-        <p>This bookmark was created by {newBookmark.createdBy.name}</p>
-        <p>Would you like to import it?</p>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Styled.Actions>
-          <Button onClick={() => setIsOpen(false)} variant={'ghost'} style={{ width: '70px' }}>
-            No
-          </Button>
-          <Button value={newBookmark.id} onClick={onAddBookmarkFavorite} variant="ghost">
-            Import
-          </Button>
-        </Styled.Actions>
-      </Dialog.Actions>
-    </Dialog>
-  );
-};

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

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

package/src/components/loading/Loading.tsx

@@ -1,20 +0,0 @@
-import { CircularProgress } from '@equinor/eds-core-react';
-
-/**
- * A centered loading spinner.
- *
- * @returns The loading indicator
- */
-export const Loading = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      width: '100%',
-    }}
-  >
-    <CircularProgress />
-  </div>
-);

package/src/components/messages/Message.tsx

@@ -1,89 +0,0 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { tokens } from '@equinor/eds-tokens';
-import type { 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) => {
-  // Map each message type to its icon and color; unknown types render nothing
-  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;
-};
-
-/**
- * Displays a titled message with an icon matching its type.
- *
- * @param props - The component's props
- * @returns The message
- */
-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/row/MoreMenu.tsx

@@ -1,41 +0,0 @@
-import { Menu } from '@equinor/eds-core-react';
-import type { MutableRefObject } from 'react';
-import type { MenuOption } from './Row';
-
-type MenuProps = {
-  readonly pRef: MutableRefObject<HTMLElement | null>;
-  readonly onClose: VoidFunction;
-  readonly open: boolean;
-  readonly options: MenuOption[];
-};
-
-/**
- * A dropdown menu of row actions anchored to a reference element.
- *
- * @param props - The component's props
- * @returns The menu
- */
-export const MoreMenu = ({ pRef, onClose, open, options }: MenuProps) => {
-  // Render one menu item per configured row action
-  const items = options.map(({ onClick, name, disabled, Icon }) => (
-    <Menu.Item
-      disabled={disabled}
-      onClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onClick();
-        onClose();
-      }}
-      key={name}
-    >
-      {Icon && Icon}
-      {name}
-    </Menu.Item>
-  ));
-
-  return (
-    <Menu open={open} anchorEl={pRef.current}>
-      {items}
-    </Menu>
-  );
-};

package/src/components/row/Row.tsx

@@ -1,105 +0,0 @@
-import { Icon, Typography } from '@equinor/eds-core-react';
-import { tokens } from '@equinor/eds-tokens';
-import { useOutsideClick } from '@equinor/eds-utils';
-import { type MutableRefObject, type ReactNode, useCallback, useRef } from 'react';
-import { MoreMenu } from './MoreMenu';
-
-import styled from 'styled-components';
-import { useBookmarkComponentContext } from '../BookmarkProvider';
-import { from } from 'rxjs';
-
-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;
-};
-
-const Styled = {
-  Icons: styled.div`
-        display: flex;
-        flex-direction: row;
-        gap: 0.2em;
-        align-items: center;
-    `,
-  ListItem: styled.div`
-        cursor: pointer;
-        &:hover {
-            background-color: ${tokens.colors.ui.background__light.hex};
-        }
-
-        display: flex;
-        align-items: center;
-        height: 32px;
-        min-height: 32px;
-        max-height: 32px;
-        justify-content: space-between;
-        border-bottom: 1px solid ${tokens.colors.ui.background__medium.hex};
-    `,
-};
-
-/**
- * A single bookmark row, with actions and click-to-set-current behavior.
- *
- * @param props - The component's props
- * @returns The row
- */
-export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => {
-  const pRef = useRef<HTMLElement | null>(null);
-  const { provider } = useBookmarkComponentContext();
-
-  const onListItemClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      // Only attempt to set the current bookmark when a provider is available
-      if (provider) {
-        from(provider.setCurrentBookmark(id)).subscribe();
-      }
-    },
-    [provider, id],
-  );
-
-  useOutsideClick(pRef.current, () => onMenuOpen(''));
-
-  // TODO(#5093): fix accessibility (keyboard support) for this click handler
-  return (
-    /* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions*/
-    <Styled.ListItem onClick={onListItemClick}>
-      <Typography>{name}</Typography>
-      <Styled.Icons>
-        {children}
-        {!!menuOptions?.length && (
-          <Icon
-            name="more_vertical"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onMenuOpen(id);
-            }}
-            color={tokens.colors.interactive.primary__resting.hex}
-            ref={pRef as unknown as MutableRefObject<SVGSVGElement>}
-          />
-        )}
-
-        <MoreMenu
-          open={menuOpen}
-          options={menuOptions}
-          onClose={() => {
-            onMenuOpen('');
-          }}
-          pRef={pRef}
-        />
-      </Styled.Icons>
-    </Styled.ListItem>
-  );
-};

package/src/components/section/Section.tsx

@@ -1,63 +0,0 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
-import { Button, Icon, Typography } from '@equinor/eds-core-react';
-import { chevron_down, chevron_right } from '@equinor/eds-icons';
-
-import { tokens } from '@equinor/eds-tokens';
-import styled from 'styled-components';
-
-const Styled = {
-  Button: styled(Button)`
-        width: 100%;
-        padding: 0;
-        padding-top: 0.5rem;
-        margin-bottom: 0.5rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: none;
-        border: none;
-        color: ${tokens.colors.infographic.primary__moss_green_100.hex};
-        cursor: pointer;
-        :hover {
-            background: none;
-        }
-    `,
-  List: styled.ol`
-        margin-left: 0.7rem;
-        padding-left: 1rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        border-left: 1px solid ${tokens.colors.infographic.primary__moss_green_100.hex};
-    `,
-};
-
-Icon.add({
-  chevron_down,
-  chevron_right,
-});
-
-type SectionProps = {
-  readonly name: string;
-  readonly children: ReactNode;
-};
-/**
- * A collapsible section with a named header and its contents.
- *
- * @param props - The component's props
- * @returns The section
- */
-export const Section = ({ children, name }: SectionProps) => {
-  const [isExpanded, setIsExpanded] = useState(true);
-
-  return (
-    <div>
-      <Styled.Button variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
-        <Icon name={isExpanded ? chevron_down.name : chevron_right.name} />
-        <Typography variant="h6">{name}</Typography>
-      </Styled.Button>
-      {isExpanded && <Styled.List>{children}</Styled.List>}
-    </div>
-  );
-};

package/src/components/sectionList/SectionList.tsx

@@ -1,186 +0,0 @@
-import { Icon } from '@equinor/eds-core-react';
-import type { useBookmarkGrouping } from '../../hooks';
-import { type MenuOption, Row } from '../row/Row';
-import { Section } from '../section/Section';
-import { SharedIcon } from '../shared/SharedIcon';
-// TODO(#5094): export from `@equinor/fusion-framework-react-module-bookmark`
-import type { BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
-import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
-import { useCallback, useState } from 'react';
-import { delete_to_trash, share, edit, close, update } from '@equinor/eds-icons';
-import { filterEmptyGroups } from '../../utils/filter-empty-groups';
-import { sortByName } from '../../utils/sort-by-name';
-import { toHumanReadable } from '../../utils/to-human-readable';
-import { useBookmarkComponentContext } from '../BookmarkProvider';
-import { from } from 'rxjs';
-
-Icon.add({
-  delete_to_trash,
-  edit,
-  share,
-  close,
-  update,
-});
-
-type SectionListProps = {
-  readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
-};
-
-/**
- * Renders bookmark groups as sections of rows with edit/share/delete actions.
- *
- * @param props - The component's props
- * @returns The section list
- */
-export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
-  // const { deleteBookmarkById, updateBookmark, removeBookmarkFavorite } = useBookmark();
-
-  const { provider, currentApp, showEditBookmark, addBookmarkToClipboard } =
-    useBookmarkComponentContext();
-
-  // TODO(#5095): should be removed when bookmark has property for isOwner
-  const user = useCurrentUser();
-
-  const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
-
-  const createMenuOptions = useCallback(
-    (bookmark: BookmarkWithoutData) => {
-      // Without a provider there are no actions that can be performed on the bookmark
-      if (!provider) return [];
-      const appKey = currentApp?.appKey;
-      const bookmarkId = bookmark.id;
-      const isOwner = bookmark.createdBy.id === user?.localAccountId;
-
-      const copyUrl = {
-        name: 'Copy URL',
-        disabled: false,
-        onClick: async () => {
-          addBookmarkToClipboard(bookmark.id);
-        },
-        Icon: <Icon name="share" />,
-      };
-
-      // Only the bookmark owner is allowed to edit, update, remove, or share it
-      if (isOwner) {
-        const ownerOptions = [
-          {
-            name: 'Edit',
-            disabled: appKey !== bookmark.appKey,
-            onClick: () => {
-              showEditBookmark(bookmarkId);
-            },
-            Icon: <Icon name="edit" />,
-          },
-          {
-            name: 'Update with current view',
-            disabled: appKey !== bookmark.appKey,
-            onClick: () => {
-              // TODO(#5089): add success and failure message
-              from(
-                provider.updateBookmark(bookmark.id, undefined, {
-                  excludePayloadGeneration: false,
-                }),
-              ).subscribe({
-                error(err) {
-                  console.error('Failed to update bookmark with current view', err);
-                },
-                complete() {
-                  console.debug('Bookmark updated with current view');
-                },
-              });
-            },
-            Icon: <Icon name="update" />,
-          },
-          {
-            name: 'Remove',
-            disabled: false,
-            onClick: () => {
-              // TODO(#5089): add success and failure message
-              from(provider.deleteBookmark(bookmark.id)).subscribe({
-                error(err) {
-                  console.error('Failed to remove bookmark', err);
-                },
-                complete() {
-                  console.debug('Bookmark removed');
-                },
-              });
-            },
-            Icon: <Icon name="delete_to_trash" />,
-          },
-          {
-            name: bookmark.isShared ? 'Unshare' : 'Share',
-            disabled: false,
-            onClick: async () => {
-              from(
-                provider.updateBookmark(bookmark.id, {
-                  isShared: !bookmark.isShared,
-                }),
-              ).subscribe({
-                next(value) {
-                  // Copy the bookmark URL to the clipboard once it becomes shared
-                  if (value.isShared) {
-                    addBookmarkToClipboard(value.id);
-                  }
-                },
-                error(err) {
-                  console.error('Failed to update bookmark', err);
-                },
-                complete() {
-                  console.debug('Bookmark updated');
-                },
-              });
-            },
-            Icon: <Icon name="share" />,
-          },
-        ] as MenuOption[];
-
-        return bookmark.isShared ? [...ownerOptions, copyUrl] : ownerOptions;
-      }
-
-      return [
-        copyUrl,
-        {
-          name: 'Unfavourite',
-          disabled: false,
-          onClick: () => {
-            from(provider.removeBookmarkAsFavorite(bookmark.id)).subscribe({
-              error(err) {
-                console.error('Failed to remove bookmark from favorites', err);
-              },
-              complete() {
-                console.debug('Bookmark removed from favorites');
-              },
-            });
-          },
-          Icon: <Icon name="close" />,
-        },
-      ];
-    },
-    [provider, showEditBookmark, addBookmarkToClipboard, user, currentApp?.appKey],
-  );
-
-  return (
-    <>
-      {bookmarkGroups.filter(filterEmptyGroups).map(({ groupingProperty, values }) => (
-        <Section key={groupingProperty} name={toHumanReadable(groupingProperty)}>
-          {values.sort(sortByName).map((b) => (
-            <Row
-              menuOptions={createMenuOptions(b)}
-              key={b.id}
-              name={b.name}
-              id={b.id}
-              menuOpen={isMenuByIdOpen === b.id}
-              onMenuOpen={(id: string) => {
-                setIsMenuByIdOpen(id);
-              }}
-            >
-              {b.isShared && (
-                <SharedIcon createdById={b.createdBy.id} createdBy={b.createdBy.name} />
-              )}
-            </Row>
-          ))}
-        </Section>
-      ))}
-    </>
-  );
-};

package/src/components/shared/SharedIcon.tsx

@@ -1,51 +0,0 @@
-import { Icon } from '@equinor/eds-core-react';
-import { tokens } from '@equinor/eds-tokens';
-import { useFramework } from '@equinor/fusion-framework-react';
-
-import styled from 'styled-components';
-
-const Styled = {
-  Row: styled.div`
-        display: flex;
-        align-items: center;
-        gap: 0.2em;
-    `,
-  CreatedBy: styled.p`
-        font-size: 12px;
-        font-weight: 500;
-        line-height: 16px;
-        letter-spacing: 0em;
-        text-align: right;
-    `,
-};
-
-type SharedIconProps = {
-  readonly createdBy: string;
-  readonly createdById: string;
-};
-
-/**
- * Displays a "shared by" indicator when a bookmark was created by another user.
- *
- * @param props - The component's props
- * @returns The shared icon, or nothing when the current user created the bookmark
- */
-export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
-  const myId = useFramework().modules.auth.account?.localAccountId;
-
-  const isMe = createdById === myId;
-
-  return (
-    <Styled.Row>
-      {!isMe && <Styled.CreatedBy>shared by {createdBy}</Styled.CreatedBy>}
-      <Icon
-        name="share"
-        color={
-          isMe
-            ? tokens.colors.interactive.primary__resting.hex
-            : tokens.colors.interactive.disabled__border.hex
-        }
-      />
-    </Styled.Row>
-  );
-};

package/src/hooks/index.ts

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