add the sidebarheader context component

kadena-community · Nov 26, 2024 · eaf296e · eaf296e
1 parent 26db24d
commit eaf296e
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 18 deletions.
diff --git a/.changeset/afraid-parents-sparkle.md b/.changeset/afraid-parents-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': minor
+---
+
+add context section in the sidebar layout header
diff --git a/packages/apps/rwa-demo/src/app/(app)/page.tsx b/packages/apps/rwa-demo/src/app/(app)/page.tsx
@@ -4,12 +4,11 @@ import { AgentRootPage } from '@/components/HomePage/AgentRootPage';
 import { InvestorRootPage } from '@/components/HomePage/InvestorRootPage';
 import { OwnerRootPage } from '@/components/HomePage/OwnerRootPage';
 import { useAccount } from '@/hooks/account';
-import { getAsset } from '@/utils/getAsset';
 
 const Home = () => {
   const { isAgent, isInvestor } = useAccount();
 
-  console.log('asset', getAsset());
+  console.log('asset', isAgent);
   return (
     <>
       {!isAgent && <OwnerRootPage />}

diff --git a/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx b/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx
@@ -96,9 +96,9 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
       .filter((val) => val.type === type);
   };
 
-  const addTransaction = (
+  const addTransaction = async (
     request: Omit<ITransaction, 'uuid'>,
-  ): ITransaction => {
+  ): Promise<ITransaction> => {
     if (transactions[request.requestKey]) {
       console.error('requestKey already exists', request.requestKey);
       return transactions[request.requestKey];
@@ -110,7 +110,7 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
       return { ...v, [request.requestKey]: { ...data } };
     });
 
-    store.addTransaction(data);
+    await store.addTransaction(data);
 
     return data;
   };
@@ -126,6 +126,7 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
   };
   useEffect(() => {
     if (!account) return;
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     init();
   }, [account]);
 

diff --git a/packages/apps/rwa-demo/src/utils/store/index.ts b/packages/apps/rwa-demo/src/utils/store/index.ts
@@ -1,15 +1,18 @@
-import { IWalletAccount } from '@/components/AccountProvider/utils';
-import { ITransaction } from '@/components/TransactionsProvider/TransactionsProvider';
+import type { IWalletAccount } from '@/components/AccountProvider/utils';
+import type { ITransaction } from '@/components/TransactionsProvider/TransactionsProvider';
 import { get, off, onValue, ref, set } from 'firebase/database';
 import { database } from './firebase';
 
 const RWAStore = () => {
   const addTransaction = async (data: ITransaction) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { listener, ...newTransaction } = data;
     const tx = { ...newTransaction.tx };
 
     const promises = tx.sigs.map((sig) => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       set(ref(database, `signees/${tx.hash}/${sig.pubKey}`), sig);
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       set(ref(database, `accounts/${sig.pubKey}/${tx.hash}`), tx);
     });
     await Promise.all(promises);

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -1,6 +1,7 @@
 import {
   MonoAccountTree,
   MonoControlPointDuplicate,
+  MonoInsertDriveFile,
   MonoLightMode,
   MonoWallet,
   MonoWifiTethering,
@@ -26,6 +27,7 @@ import {
 } from './components/RightAside';
 import { SideBarFooter } from './components/SideBarFooter';
 import { SideBarFooterItem } from './components/SideBarFooterItem';
+import { SideBarHeaderContext } from './components/SideBarHeaderContext/SideBarHeaderContext';
 import { SideBarItem } from './components/SideBarItem';
 import { SideBarItemsInline } from './components/SideBarItemsInline';
 import { SideBarTree } from './components/SideBarTree';
@@ -350,6 +352,9 @@ export const Primary: IStory = {
   render: () => {
     return (
       <LayoutProvider>
+        <SideBarHeaderContext>
+          <Button variant="transparent" startVisual={<MonoInsertDriveFile />} />
+        </SideBarHeaderContext>
         <SideBarBreadcrumbs icon={<MonoAccountTree />}>
           <SideBarBreadcrumbsItem href="/accounts">
             He-man

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -81,13 +81,12 @@ export const asideWrapperClass = recipe({
       },
       xxl: {
         position: 'fixed',
-        top: minHeaderHeight,
         width: '370px',
         minWidth: '370px',
         transform: 'translateX(0%)',
         marginInlineEnd: token('spacing.md'),
-        zIndex: 0,
-        height: `calc(100dvh - ${minHeaderHeight})`,
+        zIndex: token('zIndex.overlay'),
+        height: `100dvh`,
       },
     }),
   ],
@@ -155,7 +154,7 @@ export const asideHeaderClass = style([
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    minHeight: '50px',
+    minHeight: minHeaderHeight,
   },
 ]);
 export const asideHeaderCloseButtonWrapperClass = style(responsiveStyle({}));

diff --git a/...bs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/SideBarLayoutProvider.tsx b/...bs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/SideBarLayoutProvider.tsx
@@ -44,6 +44,8 @@ export interface ILayoutContext {
   setRightAsideOnClose: (value: () => void) => void;
   breadcrumbsRef?: HTMLDivElement | null;
   setBreadcrumbsRef: (value?: HTMLDivElement | null) => void;
+  headerContextRef?: HTMLDivElement | null;
+  setHeaderContextRef: (value?: HTMLDivElement | null) => void;
 }
 export const LayoutContext = createContext<ILayoutContext>({
   isExpanded: true,
@@ -73,6 +75,8 @@ export const SideBarLayoutProvider: FC<ILayoutProvider> = ({ children }) => {
 
   const [breadcrumbsRef, setBreadcrumbsRefState] =
     useState<HTMLDivElement | null>(null);
+  const [headerContextRef, setHeaderContextRefState] =
+    useState<HTMLDivElement | null>(null);
   const [isRightAsideExpanded, setIsRightAsideExpanded] = useState(false);
   const rightAsideOnCloseRef = useRef();
   const [rightAsideTitle, setRightAsideTitleState] = useState<
@@ -136,6 +140,9 @@ export const SideBarLayoutProvider: FC<ILayoutProvider> = ({ children }) => {
   const setBreadcrumbsRef = (value?: HTMLDivElement | null) => {
     setBreadcrumbsRefState(value ? value : null);
   };
+  const setHeaderContextRef = (value?: HTMLDivElement | null) => {
+    setHeaderContextRefState(value ? value : null);
+  };
   const setRightAsideOnClose = (value?: any) => {
     rightAsideOnCloseRef.current = value;
   };
@@ -166,6 +173,8 @@ export const SideBarLayoutProvider: FC<ILayoutProvider> = ({ children }) => {
         setIsRightAsideExpanded: handleSetRightAsideExpanded,
         breadcrumbsRef,
         setBreadcrumbsRef,
+        headerContextRef,
+        setHeaderContextRef,
         rightAsideOnClose: rightAsideOnCloseRef.current,
         setRightAsideOnClose,
       }}

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
@@ -9,6 +9,7 @@ import {
   headerExpandedClass,
   headerWrapperClass,
   menuMenuIconClass,
+  rightsideWrapperClass,
 } from '../sidebar.css';
 import { Button } from './../../../components/Button';
 import { Stack } from './../../../components/Layout';
@@ -22,7 +23,13 @@ interface IProps extends PropsWithChildren {
 
 export const SideBarHeader: FC<IProps> = ({ logo }) => {
   const ref = useRef<HTMLDivElement | null>(null);
-  const { isExpanded, handleToggleExpand, setBreadcrumbsRef } = useLayout();
+  const contextRef = useRef<HTMLDivElement | null>(null);
+  const {
+    isExpanded,
+    handleToggleExpand,
+    setBreadcrumbsRef,
+    setHeaderContextRef,
+  } = useLayout();
   const handleExpand = (e: PressEvent) => {
     if (handleToggleExpand) {
       handleToggleExpand(e);
@@ -34,9 +41,10 @@ export const SideBarHeader: FC<IProps> = ({ logo }) => {
   };
 
   useEffect(() => {
-    if (!ref.current) return;
+    if (!ref.current || !contextRef.current) return;
     setBreadcrumbsRef(ref.current);
-  }, [ref.current]);
+    setHeaderContextRef(contextRef.current);
+  }, [ref.current, contextRef.current]);
 
   return (
     <header className={headerWrapperClass({ sideBarExpanded: isExpanded })}>
@@ -62,6 +70,7 @@ export const SideBarHeader: FC<IProps> = ({ logo }) => {
           </Stack>
         </Media>
         <Stack className={crumbsWrapperClass} ref={ref}></Stack>
+        <Stack className={rightsideWrapperClass} ref={contextRef}></Stack>
       </Stack>
     </header>
   );

diff --git a/...de-ui/src/patterns/SideBarLayout/components/SideBarHeaderContext/SideBarHeaderContext.tsx b/...de-ui/src/patterns/SideBarLayout/components/SideBarHeaderContext/SideBarHeaderContext.tsx
@@ -0,0 +1,13 @@
+import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Stack } from './../../../../components';
+import { useLayout } from './../LayoutProvider';
+
+export const SideBarHeaderContext: FC<PropsWithChildren> = ({ children }) => {
+  const { headerContextRef } = useLayout();
+
+  if (!headerContextRef || React.Children.count(children) === 0) return null;
+
+  return createPortal(<Stack>{children}</Stack>, headerContextRef);
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts
@@ -6,6 +6,7 @@ export {
 export { SideBarFooter } from './components/SideBarFooter';
 export { SideBarFooterItem } from './components/SideBarFooterItem';
 export type { ISideBarFooterItemProps } from './components/SideBarFooterItem';
+export { SideBarHeaderContext } from './components/SideBarHeaderContext/SideBarHeaderContext';
 export { SideBarItem } from './components/SideBarItem';
 export type { ISideBarItemProps } from './components/SideBarItem';
 export { SideBarItemsInline } from './components/SideBarItemsInline';

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -296,20 +296,21 @@ export const headerWrapperClass = recipe({
 export const headerClass = style([
   atoms({
     display: 'grid',
+    marginInlineEnd: 'sm',
   }),
 
   responsiveStyle({
     xs: {
-      gridTemplateColumns: `50px 1fr 50px`,
+      gridTemplateColumns: `50px 1fr 100px 50px`,
       gridTemplateAreas: `
-    "header-logo header-crumbs header-toggle"
+    "header-logo header-crumbs  header-rightside header-toggle"
   `,
     },
     md: {
-      gridTemplateColumns: '1fr',
+      gridTemplateColumns: '1fr 100px',
       gridTemplateRows: '1fr',
       gridTemplateAreas: `
-    "header-crumbs"
+    "header-crumbs header-rightside"
   `,
     },
   }),
@@ -320,6 +321,12 @@ export const crumbsWrapperClass = style([
     gridArea: 'header-crumbs',
   },
 ]);
+export const rightsideWrapperClass = style([
+  {
+    gridArea: 'header-rightside',
+    justifyContent: 'flex-end',
+  },
+]);
 
 globalStyle(`${crumbsWrapperClass} > *`, {
   ...responsiveStyle({

diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts
@@ -22,6 +22,7 @@ export {
   SideBar,
   SideBarFooter,
   SideBarFooterItem,
+  SideBarHeaderContext,
   SideBarItem,
   SideBarItemsInline,
   SideBarLayout,