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

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,42 +33,25 @@ 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,
 });
 
 type SectionProps = {
-    name: string;
-    children: ReactNode;
+    readonly name: string;
+    readonly children: ReactNode;
 };
 export const Section = ({ children, name }: SectionProps) => {
     const [isExpanded, setIsExpanded] = useState(true);
 
     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/sectionList/SectionList.tsx

@@ -23,7 +23,7 @@ Icon.add({
 });
 
 type SectionListProps = {
-    bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
+    readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
 };
 
 export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
@@ -47,7 +47,7 @@ export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
         (bookmarkId: string) => {
             event.dispatchEvent('onBookmarkEdit', { detail: { bookmarkId } });
         },
-        [event]
+        [event],
     );
 
     const shareBookmark = useCallback(
@@ -59,14 +59,14 @@ export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
             }
             updateBookmark({ ...bookmark, isShared: !bookmark.isShared });
         },
-        [event, updateBookmark]
+        [event, updateBookmark],
     );
 
     const updateBookmarkWithCurrentView = useCallback(
         (bookmark: Bookmark) => {
             updateBookmark({ ...bookmark }, { updatePayload: true });
         },
-        [updateBookmark]
+        [updateBookmark],
     );
 
     const createMenuOptions = (bookmark: Bookmark) =>
@@ -78,7 +78,7 @@ export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
             removeBookmarkFavorite,
             updateBookmarkWithCurrentView,
             getCurrentAppKey(),
-            user?.localAccountId
+            user?.localAccountId,
         );
 
     if (loading) return <Loading />;
@@ -120,7 +120,7 @@ function createBookmarkActions(
     removeBookmarkFavorite: (bookmarkId: string) => void,
     updateBookmarkWithCurrentView: (bookmark: Bookmark) => void,
     appKey?: string,
-    localAccountId?: string
+    localAccountId?: string,
 ) {
     if (bookmark.createdBy.azureUniqueId === localAccountId) {
         return [

package/src/components/shared/SharedIcon.tsx

@@ -1,11 +1,27 @@
-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 = {
-    createdBy: string;
-    createdById: string;
+    readonly createdBy: string;
+    readonly createdById: string;
 };
 
 export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
@@ -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/hooks/useBookmarkGrouping.ts

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
 
-const groupingModes: Record<GroupingKeys, (item: Bookmark) => string> = {
+const groupingModes: Record<GroupingKeys, (_item: Bookmark) => string> = {
     'Group by app': (item: Bookmark) => item.appKey,
     'Created by': (item: Bookmark) => item.createdBy.name,
     'Group by Context': (item: Bookmark) => item?.context?.name ?? 'Unknown',
@@ -31,7 +31,7 @@ const groupBy = <T>(
     array: T[],
     getKey: (item: T) => string,
     searchText: string | null,
-    field: keyof T
+    field: keyof T,
 ) => {
     return (
         array

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.1.15';
+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": [
     {