From 003f3f8b9b0f56480363e82ff5a481c48a6c72c9 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Wed, 30 Oct 2024 14:10:25 +0100 Subject: [PATCH] fix using links components from different router systems --- .../apps/dev-wallet/src/App/Layout/Layout.tsx | 24 ++-- .../dev-wallet/src/App/Layout/SideBar.tsx | 40 +++--- .../libs/kode-ui/src/components/Link/Link.tsx | 27 +++- .../SideBarLayout/SideBarLayout.stories.tsx | 13 +- .../components/SideBarFooterItem.tsx | 21 ++- .../SideBarLayout/components/SideBarItem.tsx | 130 ++++++++++++------ .../components/SideBarTreeItem.tsx | 21 ++- .../src/patterns/SideBarLayout/index.ts | 1 + packages/libs/kode-ui/src/patterns/index.ts | 6 +- 9 files changed, 190 insertions(+), 93 deletions(-) diff --git a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx index a7f036332c..c7a2c52e2d 100644 --- a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx @@ -1,7 +1,7 @@ import { + MonoKey, MonoLightMode, MonoWifiTethering, - MonoWindow, MonoWorkspaces, } from '@kadena/kode-icons/system'; @@ -15,7 +15,7 @@ import { useSideBar, } from '@kadena/kode-ui/patterns'; import { FC, useEffect } from 'react'; -import { Outlet, useLocation, useNavigate } from 'react-router-dom'; +import { Link, Outlet, useLocation } from 'react-router-dom'; import { BetaHeader } from './../BetaHeader'; import { SideBar } from './SideBar'; @@ -23,7 +23,6 @@ export const Layout: FC = () => { const { theme, setTheme } = useTheme(); const { breadCrumbs, setBreadCrumbs, setAppContext } = useSideBar(); const location = useLocation(); - const navigate = useNavigate(); useEffect(() => { if ( @@ -48,21 +47,22 @@ export const Layout: FC = () => { footer={ } - label="" - onPress={() => {}} - /> - } label="Profile" - onPress={() => { - navigate('/profile'); - }} /> + + } + label="Keys" + /> + } label="Select network" - onPress={() => {}} > diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx index fa3cb9827a..32a54169c9 100644 --- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx @@ -28,7 +28,7 @@ import { useSideBar, } from '@kadena/kode-ui/patterns'; import { FC } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; export const SideBar: FC = () => { const { theme, setTheme } = useTheme(); @@ -47,11 +47,7 @@ export const SideBar: FC = () => { return ( } - label="Select network" - onPress={() => {}} - > + } label="Select network"> { } label="Dashboard" - onPress={() => navigate('/')} + component={Link} + href="/" /> } label="My Wallets"> navigate('/key-management/keys')} + component={Link} + href="/key-management/keys" /> } label="Transactions"> navigate('/transactions')} + component={Link} + href="/transactions" /> } label="Utilities"> navigate('/sig-builder')} + component={Link} + href="/sig-builder" /> navigate('/terminal')} + component={Link} + href="/terminal" /> navigate('/backup-recovery-phrase/write-down')} + component={Link} + href="/backup-recovery-phrase/write-down" /> } label="Transfer" - onPress={() => { - navigate('/transfer'); - }} + component={Link} + href="/transfer" /> } label="Contacts" - onPress={() => navigate('/contacts')} + component={Link} + href="/contacts" /> } context={ <> - } - label="Profile" - onPress={() => {}} - > + } label="Profile"> >; export type ILinkProps = Omit & Variants & - Pick, 'aria-label' | 'href' | 'type' | 'target'> & { + Pick< + AriaButtonProps<'button'>, + 'aria-label' | 'href' | 'type' | 'target' | 'onPress' + > & { className?: string; isLoading?: boolean; isDisabled?: boolean; @@ -32,6 +35,7 @@ export type ILinkProps = Omit & children?: string | number | ReactElement; startVisual?: ReactElement; endVisual?: ReactElement; + component?: any; }; /** @@ -49,6 +53,15 @@ export type ILinkProps = Omit & * @param title - title to be shown as HTML tooltip */ +const Anchor = forwardRef( + ({ children, ...props }, ref) => ( + + {children} + + ), +); +Anchor.displayName = 'Anchor'; + const Link = forwardRef( ( { @@ -59,6 +72,7 @@ const Link = forwardRef( loadingLabel = 'Loading', variant = 'transparent', className, + component, ...props }: ILinkProps, forwardedRef: ForwardedRef, @@ -71,6 +85,10 @@ const Link = forwardRef( const { focusProps, isFocused, isFocusVisible } = useFocusRing(props); const { isLoading, isDisabled, style, title } = props; + const LinkWrapper = useMemo(() => { + return component ?? Anchor; + }, [component]); + const iconOnly = Boolean( // check if children is a ReactElement (typeof children !== 'string' && typeof children !== 'number') || @@ -86,7 +104,8 @@ const Link = forwardRef( } loading`.trim(); return ( - )} - + ); }, ); diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx index 31ab1d55ac..04609ab108 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import type { FC, PropsWithChildren } from 'react'; import React, { useEffect } from 'react'; import { @@ -49,6 +50,13 @@ const meta: Meta = { type IStory = StoryObj; +const LinkComponent: FC> = ({ + children, + ...props +}) => { + return {children}; +}; + const InnerLayout = () => { const { setAppContext, isExpanded } = useSideBar(); @@ -86,7 +94,7 @@ const InnerLayout = () => { } label="Mainnet" - onPress={() => {}} + href="javascript:void()" /> } navigation={ @@ -139,7 +147,8 @@ const InnerLayout = () => { } - onPress={() => {}} + component={LinkComponent} + href="https://kadena.io" label="option 1" /> void; + onPress?: (e: PressEvent) => void; isAppContext?: boolean; + href?: string; + component?: any; } export const SideBarFooterItem: FC = ({ @@ -16,11 +18,22 @@ export const SideBarFooterItem: FC = ({ isAppContext = false, label, onPress, + href, + component, }) => { if (children) return children; + + const handlePress = (e: PressEvent) => { + if (onPress) onPress(e); + }; + + const Component = href ? Link : Button; + return ( - - - - {!isExpanded ? ( - - )} - - - )} + <> + {children ? ( + renderChildren() + ) : ( + <> + + {renderMobile()} + + + {!isExpanded + ? renderDeskTopNotExpanded() + : renderDeskTopExpanded()} + + + )} + ); }; diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx index 757b227724..cb7a46bd3d 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx @@ -2,6 +2,7 @@ import type { FC } from 'react'; import React from 'react'; import { useMedia } from 'react-use'; import { listItemClass } from '../sidebar.css'; +import { Link } from './../../../components'; import type { PressEvent } from './../../../components/Button'; import { Button } from './../../../components/Button'; import { breakpoints } from './../../../styles'; @@ -9,23 +10,35 @@ import { useSideBar } from './SideBarProvider'; export interface ISideBarTreeItemProps { label: string; - onPress: (e: PressEvent) => void; + onPress?: (e: PressEvent) => void; + href?: string; + component?: any; } export const SideBarTreeItem: FC = ({ label, onPress, + href, + component, }) => { const { handleSetExpanded } = useSideBar(); const isMediumDevice = useMedia(breakpoints.md, true); const handlePress = (e: PressEvent) => { if (!isMediumDevice) handleSetExpanded(false); - onPress(e); + if (onPress) onPress(e); }; + + const Component = href ? Link : Button; return (
  • - +
    • ); }; diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts index 71b52f7eb0..9eed84ff01 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts @@ -1,5 +1,6 @@ export { SideBarFooter } from './components/SideBarFooter'; export { SideBarFooterItem } from './components/SideBarFooterItem'; +export type { ISideBarFooterItemProps } from './components/SideBarFooterItem'; 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/index.ts b/packages/libs/kode-ui/src/patterns/index.ts index 2f3197648b..66eac78ae5 100644 --- a/packages/libs/kode-ui/src/patterns/index.ts +++ b/packages/libs/kode-ui/src/patterns/index.ts @@ -29,4 +29,8 @@ export { SideBarTreeItem, useSideBar, } from './SideBarLayout'; -export type { ISideBarItemProps, ISideBarProps } from './SideBarLayout'; +export type { + ISideBarFooterItemProps, + ISideBarItemProps, + ISideBarProps, +} from './SideBarLayout';