@equinor/fusion-framework-react-components-bookmark 0.1.16 → 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, }: {
     readonly isOpen: boolean;
     readonly onClose: (b: boolean) => void;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -6,5 +6,5 @@ type BookmarkFilterProps = {
     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

@@ -6,5 +6,5 @@ type MenuProps = {
     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

@@ -13,5 +13,5 @@ type RowProps = {
     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

@@ -3,5 +3,5 @@ type SectionProps = {
     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

@@ -2,5 +2,5 @@ import { useBookmarkGrouping } from '../../hooks';
 type SectionListProps = {
     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

@@ -2,5 +2,5 @@ type SharedIconProps = {
     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/version.d.ts

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

package/package.json

@@ -1,59 +1,55 @@
 {
-    "name": "@equinor/fusion-framework-react-components-bookmark",
-    "version": "0.1.16",
-    "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.8.1",
-        "@equinor/fusion-framework-react": "^5.2.3",
-        "@equinor/fusion-framework-react-module-bookmark": "^2.0.13"
-    },
-    "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.3",
-        "@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;

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;
     `,
 };
@@ -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,7 +1,8 @@
-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 = {
     readonly searchText: string;
     readonly setSearchText: (newVal: string | null) => void;
@@ -10,8 +11,8 @@ type BookmarkFilterProps = {
     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/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;
@@ -22,14 +23,14 @@ type RowProps = {
     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};
@@ -53,9 +54,8 @@ export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: R
 
     // TODO: @noggling fix this
     return (
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-        <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();
@@ -63,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
@@ -86,7 +86,7 @@ export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: R
                     }}
                     pRef={pRef}
                 />
-            </div>
-        </li>
+            </Styled.Icons>
+        </Styled.ListItem>
     );
 };

package/src/components/section/Section.tsx

@@ -3,12 +3,27 @@ import { ReactNode } from 'react';
 import { Button, Icon, Typography } from '@equinor/eds-core-react';
 import { chevron_down, chevron_right } from '@equinor/eds-icons';
 
-import { css } from '@emotion/css';
 import { tokens } from '@equinor/eds-tokens';
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 
-const styles = {
-    childrenFlex: css`
+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;
@@ -18,23 +33,6 @@ const styles = {
     `,
 };
 
-const StyledButton = 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;
-    }
-`;
-
 Icon.add({
     chevron_down,
     chevron_right,
@@ -49,11 +47,11 @@ export const Section = ({ children, name }: SectionProps) => {
 
     return (
         <div>
-            <StyledButton variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
+            <Styled.Button variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
                 <Icon name={isExpanded ? chevron_down.name : chevron_right.name} />
                 <Typography variant="h6">{name}</Typography>
-            </StyledButton>
-            {isExpanded && <ol className={styles.childrenFlex}>{children}</ol>}
+            </Styled.Button>
+            {isExpanded && <Styled.List>{children}</Styled.List>}
         </div>
     );
 };

package/src/components/shared/SharedIcon.tsx

@@ -1,8 +1,24 @@
-import styled from '@emotion/styled';
 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;
@@ -14,8 +30,8 @@ export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
     const isMe = createdById === myId;
 
     return (
-        <StyledRow>
-            {!isMe && <StyledCreatedBy>shared by {createdBy}</StyledCreatedBy>}
+        <Styled.Row>
+            {!isMe && <Styled.CreatedBy>shared by {createdBy}</Styled.CreatedBy>}
             <Icon
                 name="share"
                 color={
@@ -24,20 +40,6 @@ export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
                         : tokens.colors.interactive.disabled__border.hex
                 }
             />
-        </StyledRow>
+        </Styled.Row>
     );
 };
-
-const StyledRow = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 0.2em;
-`;
-
-const StyledCreatedBy = styled.p`
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    letter-spacing: 0em;
-    text-align: right;
-`;

package/src/version.ts

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

package/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "outDir": "dist/esm",
     "rootDir": "src",
-    "declarationDir": "./dist/types",
-    "baseUrl": "src",
+    "declarationDir": "./dist/types"
   },
   "references": [
     {