@equinor/fusion-framework-react-components-bookmark 0.1.15 → 0.2.1

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

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

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

@@ -1,6 +1,6 @@
 import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
 import { PropsWithChildren } from 'react';
-export declare const BookmarkProvider: ({ children }: PropsWithChildren<unknown>) => JSX.Element;
+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>>;

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

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

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

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

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

@@ -1,10 +1,10 @@
 import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
 type BookmarkFilterProps = {
-    searchText: string;
-    setSearchText: (newVal: string | null) => void;
-    setGroupBy: (groupBy: GroupingKeys) => void;
-    groupingModes: string[];
-    groupBy: string;
+    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) => JSX.Element;
+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

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

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

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

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

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

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

@@ -6,12 +6,12 @@ export type MenuOption = {
     Icon?: ReactNode;
 };
 type RowProps = {
-    name: string;
-    id: string;
-    menuOpen: boolean;
-    onMenuOpen: (id: string) => void;
-    menuOptions: MenuOption[];
-    children?: ReactNode;
+    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) => JSX.Element;
+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

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

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

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

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

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

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

@@ -9,6 +9,6 @@ export declare const useBookmarkGrouping: (bookmarks?: Bookmark[]) => {
         groupingProperty: string;
         values: Bookmark<unknown>[];
     }[];
-    groupingModes: Record<GroupingKeys, (item: Bookmark) => string>;
+    groupingModes: Record<GroupingKeys, (_item: Bookmark) => string>;
     groupByKey: GroupingKeys;
 };

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.1.15";
+export declare const version = "0.2.1";

package/package.json

@@ -1,59 +1,55 @@
 {
-    "name": "@equinor/fusion-framework-react-components-bookmark",
-    "version": "0.1.15",
-    "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": "^5.2.2",
-        "@equinor/fusion-framework-react-module-bookmark": "^2.0.12"
-    },
-    "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",
-        "@equinor/fusion-framework-module-app": "^5.2.1",
-        "@equinor/fusion-framework-module-event": "^4.0.2",
-        "@types/react": "^17.0.11",
-        "react": "^17.0.2",
-        "styled-components": "^5.3.9",
-        "typescript": "^5.1.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
-        }
+  "name": "@equinor/fusion-framework-react-components-bookmark",
+  "version": "0.2.1",
+  "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": "^5.2.5",
+    "@equinor/fusion-framework-react-module-bookmark": "^2.0.15"
+  },
+  "devDependencies": {
+    "@equinor/eds-core-react": "^0.32.4",
+    "@equinor/eds-icons": "^0.19.3",
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/eds-utils": "^0.8.1",
+    "@types/react": "^18.2.20",
+    "react": "^18.2.0",
+    "styled-components": "^6.0.7",
+    "typescript": "^5.1.3",
+    "@equinor/fusion-framework-module-app": "^5.2.3",
+    "@equinor/fusion-framework-module-bookmark": "^1.0.9",
+    "@equinor/fusion-framework-module-event": "^4.0.4"
+  },
+  "peerDependencies": {
+    "@equinor/eds-core-react": "^0.30.0",
+    "@equinor/eds-icons": "^0.19.3",
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/eds-utils": "^0.8.1",
+    "@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

@@ -2,12 +2,13 @@ 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';
 
+import styled from 'styled-components';
+
 Icon.add({
     chevron_down,
     chevron_right,
@@ -16,14 +17,14 @@ Icon.add({
     add,
 });
 
-const style = {
-    wrapper: css`
+const Styled = {
+    Wrapper: styled.div`
         padding-right: 1rem;
         display: flex;
         flex-direction: column;
         gap: 1rem;
     `,
-    list: css`
+    List: styled.div`
         overflow-y: auto;
         overflow-x: hidden;
         height: calc((100vh - 85px) - 3rem);
@@ -41,7 +42,7 @@ export const Bookmark = () => {
         useBookmarkGrouping(bookmarks);
 
     return (
-        <div className={style.wrapper}>
+        <Styled.Wrapper>
             <BookmarkFilter
                 groupBy={groupByKey}
                 groupingModes={Object.keys(groupingModes)}
@@ -49,10 +50,10 @@ export const Bookmark = () => {
                 setGroupBy={setGroupBy}
                 setSearchText={setSearchText}
             />
-            <div className={style.list}>
+            <Styled.List>
                 <SectionList bookmarkGroups={bookmarkGroups} />
-            </div>
-        </div>
+            </Styled.List>
+        </Styled.Wrapper>
     );
 };
 

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

@@ -1,10 +1,11 @@
-import styled from '@emotion/styled';
 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;
@@ -15,8 +16,8 @@ export const CreateBookmarkModal = ({
     isOpen,
     onClose,
 }: {
-    isOpen: boolean;
-    onClose: (b: boolean) => void;
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
 }) => {
     const [state, setState] = useState<{ name: string; description: string; isShared: boolean }>({
         name: '',

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

@@ -1,30 +1,30 @@
-import { css } from '@emotion/css';
-import styled from '@emotion/styled';
+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 { 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;
-`;
+import styled from 'styled-components';
 
-const styles = {
-    checkboxWrapper: css`
+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: css`
-        display: 'flex';
+    Actions: styled.div`
+        display: flex;
         gap: 0.2em;
     `,
 };
@@ -34,9 +34,9 @@ export const EditBookmarkModal = ({
     onClose,
     bookmarkId,
 }: {
-    isOpen: boolean;
-    onClose: (b: boolean) => void;
-    bookmarkId?: string;
+    readonly isOpen: boolean;
+    readonly onClose: (b: boolean) => void;
+    readonly bookmarkId?: string;
 }) => {
     const [state, setState] = useState<PatchBookmark>({
         id: '',
@@ -61,9 +61,9 @@ export const EditBookmarkModal = ({
     }, [bookmarkId, bookmarks]);
 
     return (
-        <StyledDialog open={isOpen}>
+        <Styled.Dialog open={isOpen}>
             <Dialog.Header>Edit bookmark</Dialog.Header>
-            <StyledContent>
+            <Styled.DialogContent>
                 <div>
                     <Label htmlFor="name" label="Name" />
                     <Input
@@ -93,7 +93,7 @@ export const EditBookmarkModal = ({
                     <Input readOnly={true} value={current?.manifest?.name || ''} />
                 </div>
 
-                <div className={styles.checkboxWrapper}>
+                <Styled.CheckboxWrapper>
                     <Checkbox
                         label="Is Shared"
                         checked={state.isShared}
@@ -113,10 +113,10 @@ export const EditBookmarkModal = ({
                             setUpdatePayload((s) => !s);
                         }}
                     />
-                </div>
-            </StyledContent>
+                </Styled.CheckboxWrapper>
+            </Styled.DialogContent>
             <Dialog.Actions>
-                <div className={styles.actions}>
+                <Styled.Actions>
                     <Button onClick={() => onClose(false)} variant="ghost">
                         Cancel
                     </Button>
@@ -130,8 +130,8 @@ export const EditBookmarkModal = ({
                     >
                         Save
                     </Button>
-                </div>
+                </Styled.Actions>
             </Dialog.Actions>
-        </StyledDialog>
+        </Styled.Dialog>
     );
 };

package/src/components/filter/Filter.tsx

@@ -1,17 +1,18 @@
-import { css } from '@emotion/css';
 import { Search, Autocomplete } from '@equinor/eds-core-react';
 import { GroupingKeys } from '../../hooks/useBookmarkGrouping';
 
+import styled from 'styled-components';
+
 type BookmarkFilterProps = {
-    searchText: string;
-    setSearchText: (newVal: string | null) => void;
-    setGroupBy: (groupBy: GroupingKeys) => void;
-    groupingModes: string[];
-    groupBy: string;
+    readonly searchText: string;
+    readonly setSearchText: (newVal: string | null) => void;
+    readonly setGroupBy: (groupBy: GroupingKeys) => void;
+    readonly groupingModes: string[];
+    readonly groupBy: string;
 };
 
-const styles = {
-    row: css`
+const Styled = {
+    Root: styled.div`
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -26,7 +27,16 @@ export const BookmarkFilter = ({
     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);
+            }}
+        />
+    );
+    return (
+        <Styled.Root>
             <Search
                 placeholder="Search in my bookmarks"
                 value={searchText ?? ''}
@@ -43,6 +53,6 @@ export const BookmarkFilter = ({
                 onOptionsChange={(changes) => setGroupBy(changes.selectedItems[0] as GroupingKeys)}
                 label={''}
             />
-        </div>
+        </Styled.Root>
     );
 };

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

@@ -1,10 +1,11 @@
-import { css } from '@emotion/css';
 import { Button, Dialog } from '@equinor/eds-core-react';
 import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import { useEffect, useState } from 'react';
 
-const styles = {
-    actionWrapper: css`
+import styled from 'styled-components';
+
+const Styled = {
+    Actions: styled.div`
         display: flex;
         gap: 1rem;
     `,
@@ -31,7 +32,7 @@ export const ImportBookmarkModal = () => {
                 <p>Would you like to import it?</p>
             </Dialog.Content>
             <Dialog.Actions>
-                <div className={styles.actionWrapper}>
+                <Styled.Actions>
                     <Button
                         onClick={() => setIsOpen(false)}
                         variant={'ghost'}
@@ -49,7 +50,7 @@ export const ImportBookmarkModal = () => {
                     >
                         Import
                     </Button>
-                </div>
+                </Styled.Actions>
             </Dialog.Actions>
         </Dialog>
     );

package/src/components/row/MoreMenu.tsx

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

package/src/components/row/Row.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
 import { useOutsideClick } from '@equinor/eds-utils';
@@ -6,6 +5,8 @@ import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import { MutableRefObject, ReactNode, useRef } from 'react';
 import { MoreMenu } from './MoreMenu';
 
+import styled from 'styled-components';
+
 export type MenuOption = {
     name: string;
     disabled: boolean;
@@ -14,22 +15,22 @@ export type MenuOption = {
 };
 
 type RowProps = {
-    name: string;
-    id: string;
-    menuOpen: boolean;
-    onMenuOpen: (id: string) => void;
-    menuOptions: MenuOption[];
-    children?: ReactNode;
+    readonly name: string;
+    readonly id: string;
+    readonly menuOpen: boolean;
+    readonly onMenuOpen: (id: string) => void;
+    readonly menuOptions: MenuOption[];
+    readonly children?: ReactNode;
 };
 
-const styles = {
-    iconRow: css`
+const Styled = {
+    Icons: styled.div`
         display: flex;
         flex-direction: row;
         gap: 0.2em;
         align-items: center;
     `,
-    row: css`
+    ListItem: styled.div`
         cursor: pointer;
         &:hover {
             background-color: ${tokens.colors.ui.background__light.hex};
@@ -51,9 +52,10 @@ export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: R
 
     useOutsideClick(pRef.current, () => onMenuOpen(''));
 
+    // TODO: @noggling fix this
     return (
-        <li
-            className={styles.row}
+        /* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions*/
+        <Styled.ListItem
             onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -61,7 +63,7 @@ export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: R
             }}
         >
             <Typography>{name}</Typography>
-            <div className={styles.iconRow}>
+            <Styled.Icons>
                 {children}
                 {!!menuOptions?.length && (
                     <Icon
@@ -84,7 +86,7 @@ export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: R
                     }}
                     pRef={pRef}
                 />
-            </div>
-        </li>
+            </Styled.Icons>
+        </Styled.ListItem>
     );
 };