diff --git a/.changeset/polite-mugs-shout.md b/.changeset/polite-mugs-shout.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/polite-mugs-shout.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx index 3d4eae82ae..a97f105a86 100644 --- a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx @@ -13,16 +13,14 @@ import { SideBarFooter, SideBarFooterItem, SideBarLayout, - useSideBar, } from '@kadena/kode-ui/patterns'; -import { FC, useEffect, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'; import { BetaHeader } from './../BetaHeader'; import { SideBar } from './SideBar'; export const Layout: FC = () => { const { theme, setTheme } = useTheme(); - const { breadCrumbs, setBreadCrumbs, setAppContext } = useSideBar(); const location = useLocation(); const navigate = useNavigate(); @@ -35,16 +33,6 @@ export const Layout: FC = () => { [location], ); - useEffect(() => { - if ( - breadCrumbs.length > 0 && - location.pathname !== breadCrumbs[breadCrumbs.length - 1].url - ) { - setBreadCrumbs([]); - setAppContext(); - } - }, [location]); - const toggleTheme = (): void => { const newTheme = theme === Themes.dark ? Themes.light : Themes.dark; setTheme(newTheme); diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx index 32a54169c9..e1abb39702 100644 --- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx @@ -2,12 +2,12 @@ import { MonoContacts, MonoContrast, MonoDashboardCustomize, - MonoDataThresholding, MonoLogout, MonoNetworkCheck, MonoSwapHoriz, MonoTableRows, MonoWallet, + MonoWindow, } from '@kadena/kode-icons/system'; import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector'; @@ -25,14 +25,14 @@ import { SideBarTree, SideBarTreeItem, SideBar as SideBarUI, - useSideBar, + useLayout, } from '@kadena/kode-ui/patterns'; import { FC } from 'react'; import { Link, useNavigate } from 'react-router-dom'; export const SideBar: FC = () => { const { theme, setTheme } = useTheme(); - const { isExpanded } = useSideBar(); + const { isExpanded } = useLayout(); const navigate = useNavigate(); const { lockProfile } = useWallet(); @@ -58,7 +58,7 @@ export const SideBar: FC = () => { navigation={ <> } + visual={} label="Dashboard" component={Link} href="/" diff --git a/packages/apps/dev-wallet/src/App/app.tsx b/packages/apps/dev-wallet/src/App/app.tsx index d26cc7b49a..eecf705a0a 100644 --- a/packages/apps/dev-wallet/src/App/app.tsx +++ b/packages/apps/dev-wallet/src/App/app.tsx @@ -1,7 +1,7 @@ import { DatabaseProvider } from '@/modules/db/db.provider'; import { WalletProvider } from '@/modules/wallet/wallet.provider'; import { MediaContextProvider } from '@kadena/kode-ui'; -import { SideBarProvider } from '@kadena/kode-ui/patterns'; +import { LayoutProvider } from '@kadena/kode-ui/patterns'; import { useEffect } from 'react'; import { PromptProvider } from '../Components/PromptProvider/Prompt'; import { Routes } from './routes'; @@ -19,10 +19,10 @@ function Providers({ children }: { children: React.ReactNode }) { - + {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */} {children} - + diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx index 633bae97ac..6eee6ac505 100644 --- a/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx +++ b/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx @@ -1,9 +1,9 @@ import { useWallet } from '@/modules/wallet/wallet.hook'; import { ContactForm } from '@/pages/contacts/Components/ContactForm'; -import { useSideBar } from '@kadena/kode-ui/patterns'; +import { useLayout } from '@kadena/kode-ui/patterns'; const AddContact = ({ contactId }: { contactId: string }) => { - const { handleSetAsideExpanded } = useSideBar(); + const { handleSetAsideExpanded } = useLayout(); const { getContact } = useWallet(); return ( <> diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx index eb51469b2b..9e81db0a98 100644 --- a/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx +++ b/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx @@ -5,11 +5,11 @@ import { useWallet } from '@/modules/wallet/wallet.hook'; import { AddKeySourceForm } from '@/pages/keys/Components/AddKeySourceForm'; import { Notification, Stack } from '@kadena/kode-ui'; -import { useSideBar } from '@kadena/kode-ui/patterns'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { useState } from 'react'; const KeySource = () => { - const { handleSetAsideExpanded } = useSideBar(); + const { handleSetAsideExpanded } = useLayout(); const { keySources, profile, askForPassword } = useWallet(); const [error, setError] = useState(null); const { createHDWallet } = useHDWallet(); diff --git a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx index d36a696843..234fbcf297 100644 --- a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx +++ b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx @@ -1,21 +1,23 @@ +import { MonoWindow } from '@kadena/kode-icons/system'; import { BreadcrumbsItem, Breadcrumbs as BreadcrumbsUI } from '@kadena/kode-ui'; -import { useSideBar } from '@kadena/kode-ui/patterns'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { FC } from 'react'; import { Link } from 'react-router-dom'; export const BreadCrumbs: FC = () => { - const { breadCrumbs } = useSideBar(); - - if (!breadCrumbs.length) return null; + const { breadCrumbs } = useLayout(); return ( - + } + > <> + + Dashboard + {breadCrumbs.map((crumb) => ( - - - {crumb.label} - + + {crumb.label} ))} diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx index ed1036b85c..71d8fde7d8 100644 --- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx +++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx @@ -1,8 +1,21 @@ import { AuthCard } from '@/Components/AuthCard/AuthCard'; +import { MonoDashboardCustomize } from '@kadena/kode-icons/system'; import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { Link } from 'react-router-dom'; export function BackupRecoveryPhrase() { + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Backup', + visual: , + url: '/backup-recovery-phrase', + }, + ], + }); + return ( <> diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx index ec7997cd30..e6af31c94f 100644 --- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx +++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx @@ -1,15 +1,32 @@ import { AuthCard } from '@/Components/AuthCard/AuthCard'; import { BackupMnemonic } from '@/Components/BackupMnemonic/BackupMnemonic'; import { useWallet } from '@/modules/wallet/wallet.hook'; +import { MonoDashboardCustomize } from '@kadena/kode-icons/system'; import { Notification } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; export function WriteDownRecoveryPhrase() { + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Backup', + visual: , + url: '/backup-recovery-phrase', + }, + { + label: 'Recovery phrase', + url: '/backup-recovery-phrase/write-down', + }, + ], + }); const { decryptSecret, askForPassword, profile } = useWallet(); const [mnemonic, setMnemonic] = useState(''); const [error, setError] = useState(''); const navigate = useNavigate(); + async function decryptMnemonic() { setError(''); try { diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx index cae216323a..ffd259e093 100644 --- a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx +++ b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx @@ -7,6 +7,7 @@ import { createAsideUrl } from '@/utils/createAsideUrl'; import { shorten } from '@/utils/helpers'; import { MonoAccountBalanceWallet, + MonoContacts, MonoMoreVert, } from '@kadena/kode-icons/system'; import { @@ -18,10 +19,21 @@ import { Stack, Text, } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { Link, useNavigate } from 'react-router-dom'; import { panelClass } from '../home/style.css'; export function Contacts() { + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Contacts', + visual: , + url: '/contacts', + }, + ], + }); const navigate = useNavigate(); const { contacts } = useWallet(); const prompt = usePrompt(); diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx index 0da71f39c8..d6d0c77738 100644 --- a/packages/apps/dev-wallet/src/pages/home/home-page.tsx +++ b/packages/apps/dev-wallet/src/pages/home/home-page.tsx @@ -1,18 +1,22 @@ +import { AssetsCard } from '@/Components/AssetsCard/AssetsCard'; +import { transactionRepository } from '@/modules/transaction/transaction.repository'; import { useWallet } from '@/modules/wallet/wallet.hook'; import { panelClass } from '@/pages/home/style.css.ts'; - -import { transactionRepository } from '@/modules/transaction/transaction.repository'; import { useAsync } from '@/utils/useAsync'; import { IPactCommand } from '@kadena/client'; - -import { AssetsCard } from '@/Components/AssetsCard/AssetsCard'; import { Box, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { Link } from 'react-router-dom'; import { linkClass } from '../select-profile/select-profile.css'; import { TransactionList } from '../transactions/transactions'; export function HomePage() { const { profile, activeNetwork } = useWallet(); + useLayout({ + breadCrumbs: [], + appContext: undefined, + }); + console.log('activeNetwork', activeNetwork); const [transactions] = useAsync( diff --git a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx index 0bc8e2cc2c..75fd5f5cc1 100644 --- a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx +++ b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx @@ -1,11 +1,29 @@ +import { createAsideUrl } from '@/utils/createAsideUrl'; import { Mono123, MonoKey } from '@kadena/kode-icons/system'; import { Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui'; -import { useParams } from 'react-router-dom'; +import { useLayout } from '@kadena/kode-ui/patterns'; +import { Link, useParams } from 'react-router-dom'; import { Keys } from './Components/Keys'; import { KeySets } from './Components/KeySets'; export function KeysPage() { const { tab = 'keys' } = useParams(); + useLayout({ + appContext: { + visual: , + label: 'Add key Source', + href: createAsideUrl('KeySource'), + component: Link, + }, + breadCrumbs: [ + { + label: 'Manage Your Keys', + visual: , + url: '/key-management/keys', + }, + ], + }); + return ( Manage Your Keys diff --git a/packages/apps/dev-wallet/src/pages/networks/networks.tsx b/packages/apps/dev-wallet/src/pages/networks/networks.tsx index 6a98b668cd..e9a0e938c2 100644 --- a/packages/apps/dev-wallet/src/pages/networks/networks.tsx +++ b/packages/apps/dev-wallet/src/pages/networks/networks.tsx @@ -1,18 +1,20 @@ import { ListItem } from '@/Components/ListItem/ListItem'; import { networkRepository } from '@/modules/network/network.repository'; import { useWallet } from '@/modules/wallet/wallet.hook'; -import { Mono123, MonoWifiTethering } from '@kadena/kode-icons/system'; +import { createAsideUrl } from '@/utils/createAsideUrl'; +import { MonoWifiTethering, MonoWorkspaces } from '@kadena/kode-icons/system'; import { Button, Dialog, DialogContent, DialogHeader, Heading, + Link, Stack, Text, } from '@kadena/kode-ui'; -import { useSideBar } from '@kadena/kode-ui/patterns'; -import { useEffect, useState } from 'react'; +import { useLayout } from '@kadena/kode-ui/patterns'; +import { useState } from 'react'; import { panelClass } from '../home/style.css'; import { INetworkWithOptionalUuid, @@ -35,22 +37,21 @@ const getNewNetwork = (): INetworkWithOptionalUuid => ({ export function Networks() { const { networks } = useWallet(); - const { setAppContext, setBreadCrumbs } = useSideBar(); const [showNetworkModal, setShowNetworkModal] = useState(false); const [selectedNetwork, setSelectedNetwork] = useState(() => getNewNetwork()); - - useEffect(() => { - setAppContext({ - visual: , - label: 'test', - onPress: () => alert(111), - }); - - setBreadCrumbs([ + useLayout({ + appContext: { + visual: , + label: 'Add Network', + href: createAsideUrl('KeySource'), + component: Link, + }, + breadCrumbs: [ { label: 'Networks', visual: , url: '/networks' }, - ]); - }, []); + ], + }); + return ( <> diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx index 4ff7b97b1d..674a823552 100644 --- a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx +++ b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx @@ -9,6 +9,7 @@ import { import { transactionRepository } from '@/modules/transaction/transaction.repository'; import * as transactionService from '@/modules/transaction/transaction.service'; import { useWallet } from '@/modules/wallet/wallet.hook'; +import { MonoDashboardCustomize } from '@kadena/kode-icons/system'; import { Box, Button, @@ -17,6 +18,7 @@ import { Stack, Text, } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { execCodeParser } from '@kadena/pactjs-generator'; import classNames from 'classnames'; import { useMemo, useState } from 'react'; @@ -83,6 +85,16 @@ export function SignatureBuilder() { >([]); const { profile, activeNetwork, networks, setActiveNetwork } = useWallet(); const navigate = useNavigate(); + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Sig Builder', + visual: , + url: '/sig-builder', + }, + ], + }); const exec = pactCommand && pactCommand.payload && 'exec' in pactCommand.payload diff --git a/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx b/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx index cd058c2760..af2fefc531 100644 --- a/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx +++ b/packages/apps/dev-wallet/src/pages/terminal/terminal.tsx @@ -16,7 +16,9 @@ import { execution, setMeta, } from '@kadena/client/fp'; +import { MonoDashboardCustomize } from '@kadena/kode-icons/system'; import { Stack } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { execCodeParser, IParsedCode } from '@kadena/pactjs-generator'; import { useMemo, useRef, useState } from 'react'; import Terminal from 'react-console-emulator'; @@ -154,6 +156,16 @@ const getCommand = ( }; export function TerminalPage() { + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Dev Console', + visual: , + url: '/terminal', + }, + ], + }); const [txStep, setTxStep] = useState< null | 'start' | 'code' | 'data' | 'signer' | 'capability' >(null); @@ -177,6 +189,7 @@ export function TerminalPage() { networkId: activeNetwork?.networkId ?? 'testnet04', chainId: '0' as ChainId, }); + const setDefaults = (patch: Partial) => { setDefaultValues((prev) => ({ ...prev, ...patch })); }; diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx index 033a7deb93..ed99dbc581 100644 --- a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx +++ b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx @@ -5,14 +5,25 @@ import { import { useWallet } from '@/modules/wallet/wallet.hook'; import { shorten } from '@/utils/helpers'; import { IPactCommand } from '@kadena/client'; -import { MonoOpenInNew } from '@kadena/kode-icons/system'; +import { MonoOpenInNew, MonoSwapHoriz } from '@kadena/kode-icons/system'; import { Box, Heading, Stack, Text } from '@kadena/kode-ui'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { useEffect, useMemo, useState } from 'react'; import { Link } from 'react-router-dom'; import { listClass, listItemClass, panelClass } from '../home/style.css'; import { hashStyle } from './style.css'; export function Transactions() { + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Transactions', + visual: , + url: '/transactions', + }, + ], + }); const { profile, activeNetwork } = useWallet(); const [transactions, setTransactions] = useState< (ITransaction & { creationDate: number })[] diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx index 7ac14ec331..e2335d44d8 100644 --- a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx +++ b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx @@ -11,6 +11,7 @@ import { ITransaction, transactionRepository, } from '@/modules/transaction/transaction.repository'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { useSearchParams } from 'react-router-dom'; import { ReviewTransaction } from '../transaction/components/ReviewTransaction'; import { TxList } from '../transaction/components/TxList'; @@ -24,9 +25,20 @@ import { import { createRedistributionTxs, createTransactions } from './utils'; export function TransferV2() { + useLayout({ + appContext: undefined, + breadCrumbs: [ + { + label: 'Transfer', + visual: , + url: '/transfer', + }, + ], + }); const [searchParams] = useSearchParams(); const accountId = searchParams.get('accountId'); const urlActivityId = searchParams.get('activityId'); + useEffect(() => { const run = async () => { if (urlActivityId) { diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts index 9fed848769..f0bb763dd7 100644 --- a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts +++ b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts @@ -1,34 +1,42 @@ -import { style, token } from '../../styles'; +import { atoms, style, token } from '../../styles'; -export const containerClass = style({ - display: 'flex', - padding: 0, - flexFlow: 'wrap', - listStyle: 'none', -}); +export const containerClass = style([ + atoms({ + display: 'flex', + padding: 'no', + }), + { + listStyle: 'none', + flexFlow: 'wrap', + }, +]); -export const itemClass = style({ - display: 'flex', - padding: 0, - whiteSpace: 'nowrap', - selectors: { - '&:not(:first-child):not(:last-child)::before': { - content: '/', - marginInline: token('spacing.sm'), - }, - '&:last-child::before': { - content: '∙', - marginInline: token('spacing.sm'), - }, - '&:first-child': { - fontWeight: token('typography.weight.primaryFont.bold'), +export const itemClass = style([ + atoms({ + fontSize: 'xxs', + }), + { + display: 'flex', + padding: 0, + whiteSpace: 'nowrap', + selectors: { + '&:not(:first-child):not(:last-child)::before': { + content: '/', + color: token('color.text.gray.default'), + marginInline: token('spacing.sm'), + }, + '&:not(:first-child):last-child::before': { + content: '/', + color: token('color.text.gray.default'), + marginInline: token('spacing.sm'), + }, }, }, -}); +]); export const linkClass = style({ display: 'flex', - color: token('color.text.base.default'), + color: token('color.text.gray.default'), textDecoration: 'none', selectors: { '&:hover': { diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/libs/kode-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 3f5e07f1ab..75cf8674c1 100644 --- a/packages/libs/kode-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/libs/kode-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -1,14 +1,16 @@ import { mergeRefs } from '@react-aria/utils'; import cn from 'classnames'; import type { FC } from 'react'; -import React from 'react'; +import React, { useMemo } from 'react'; import type { AriaBreadcrumbItemProps } from 'react-aria'; import { useBreadcrumbItem } from 'react-aria'; +import { Anchor } from '../Link/Link'; import { itemClass, linkClass } from './Breadcrumbs.css'; export interface IBreadcrumbItemProps extends AriaBreadcrumbItemProps { href?: string; asChild?: boolean; + component?: any; } export const BreadcrumbsItem: FC = (props) => { @@ -16,6 +18,10 @@ export const BreadcrumbsItem: FC = (props) => { const ref = React.useRef(null); const { itemProps } = useBreadcrumbItem(props, ref); + const LinkWrapper = useMemo(() => { + return props.component ?? Anchor; + }, [props.component]); + if (asChild && React.isValidElement(children)) { return (
  • @@ -35,16 +41,17 @@ export const BreadcrumbsItem: FC = (props) => { return (
  • - {children} - +
    • ); }; diff --git a/packages/libs/kode-ui/src/components/Link/Link.tsx b/packages/libs/kode-ui/src/components/Link/Link.tsx index 5e8b8e1f56..7ffcd6112a 100644 --- a/packages/libs/kode-ui/src/components/Link/Link.tsx +++ b/packages/libs/kode-ui/src/components/Link/Link.tsx @@ -53,7 +53,7 @@ export type ILinkProps = Omit & * @param title - title to be shown as HTML tooltip */ -const Anchor = forwardRef( +export const Anchor = forwardRef( ({ children, ...props }, ref) => ( {children} diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx index d58e169db0..bf0f6cb8ce 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx @@ -4,12 +4,12 @@ import type { FC, PropsWithChildren, ReactElement } from 'react'; import React from 'react'; import type { PressEvent } from './../../components'; import { Button, Media, Stack } from './../../components'; +import { useLayout } from './components/LayoutProvider'; import { KLogo } from './components/Logo/KLogo'; import { KadenaLogo } from './components/Logo/KadenaLogo'; import { SideBarAppContext } from './components/SideBarAppContext'; import { SideBarContext } from './components/SideBarContext'; import { SideBarNavigation } from './components/SideBarNavigation'; -import { useSideBar } from './components/SideBarProvider'; import { menuBackdropClass, menuMenuIconClass, @@ -35,7 +35,7 @@ export const SideBar: FC = ({ logo, minifiedLogo, }) => { - const { isExpanded, handleToggleExpand } = useSideBar(); + const { isExpanded, handleToggleExpand } = useLayout(); const handleExpand = (e: PressEvent) => { if (handleToggleExpand) { 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 3952925b8d..54d5492e96 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx @@ -16,13 +16,13 @@ import { Button, Stack, } from './../../components'; +import { LayoutProvider, useLayout } from './components/LayoutProvider'; import { KadenaLogo } from './components/Logo/KadenaLogo'; import { KLogo } from './components/Logo/KLogo'; import { SideBarFooter } from './components/SideBarFooter'; import { SideBarFooterItem } from './components/SideBarFooterItem'; import { SideBarItem } from './components/SideBarItem'; import { SideBarItemsInline } from './components/SideBarItemsInline'; -import { SideBarProvider, useSideBar } from './components/SideBarProvider'; import { SideBarTree } from './components/SideBarTree'; import { SideBarTreeItem } from './components/SideBarTreeItem'; import type { ISideBarProps } from './SideBar'; @@ -63,7 +63,7 @@ const LinkComponent: FC> = ({ }; const InnerLayout = () => { - const { setAppContext, isExpanded } = useSideBar(); + const { setAppContext, isExpanded } = useLayout(); useEffect(() => { setAppContext({ @@ -198,9 +198,9 @@ export const Primary: IStory = { args: {}, render: () => { return ( - + - + ); }, }; @@ -230,9 +230,9 @@ export const Full: IStory = { args: {}, render: () => { return ( - + - + ); }, }; diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx index 5ec71a9e0d..510e89e852 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx @@ -3,9 +3,9 @@ import type { FC, PropsWithChildren, ReactElement } from 'react'; import React, { useEffect } from 'react'; import { MediaContextProvider, Stack } from './../../components'; +import { useLayout } from './components/LayoutProvider'; import { SideBarAside } from './components/SideBarAside'; import { SideBarHeader } from './components/SideBarHeader'; -import { useSideBar } from './components/SideBarProvider'; import { bodyWrapperClass, layoutExpandedWrapperClass, @@ -37,7 +37,7 @@ export const SideBarLayout: FC = ({ variant = 'default', location, }) => { - const { isExpanded, setLocation } = useSideBar(); + const { isExpanded, setLocation } = useLayout(); // set the active URL in your app. //we dont know what route system is being used so the active URL will be given as a prop to the component diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx similarity index 76% rename from packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx rename to packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx index abb661c03b..f64806148f 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx @@ -1,11 +1,18 @@ import type { FC, PropsWithChildren } from 'react'; -import React, { createContext, useCallback, useContext, useState } from 'react'; +import React, { + createContext, + useCallback, + useContext, + useEffect, + useState, +} from 'react'; import type { PressEvent } from 'react-aria'; import type { ISideBarLayoutLocation } from '../types'; export interface IAppContextProps { visual: React.ReactElement; label: string; + component?: any; onPress?: () => void; href?: string; } @@ -15,7 +22,7 @@ export interface ISideBarBreadCrumb { url: string; visual?: React.ReactElement; } -export interface ISideBarContext { +export interface ILayoutContext { isAsideExpanded: boolean; isExpanded: boolean; handleToggleExpand: (e: PressEvent) => void; @@ -30,7 +37,7 @@ export interface ISideBarContext { location?: ISideBarLayoutLocation; isActiveUrl: (url?: string) => boolean; } -export const SideBarContext = createContext({ +export const LayoutContext = createContext({ isAsideExpanded: false, isExpanded: true, handleToggleExpand: () => {}, @@ -44,11 +51,34 @@ export const SideBarContext = createContext({ setLocation: () => {}, isActiveUrl: () => {}, }); -export const useSideBar = (): ISideBarContext => useContext(SideBarContext); -export interface ISideBarProvider extends PropsWithChildren {} +export interface IuseLayoutProps extends ILayoutContext { + initPage: (props: Pick) => void; +} + +export const useLayout = ( + props?: Pick, +): IuseLayoutProps => { + const context = useContext(LayoutContext); + + useEffect(() => { + if (!props) return; + + context.setAppContext(props.appContext); + }, [props?.appContext]); + + useEffect(() => { + if (!props) return; + + context.setBreadCrumbs(props.breadCrumbs); + }, [props?.breadCrumbs]); + + return { ...context }; +}; + +export interface ILayoutProvider extends PropsWithChildren {} -export const SideBarProvider: FC = ({ children }) => { +export const LayoutProvider: FC = ({ children }) => { const [isAsideExpanded, setIsAsideExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false); const [location, setLocationState] = useState< @@ -103,7 +133,7 @@ export const SideBarProvider: FC = ({ children }) => { }; return ( - = ({ children }) => { }} > {children} - + ); }; diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx index 101358b0a9..9e43874a21 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx @@ -1,13 +1,13 @@ import type { FC, PropsWithChildren } from 'react'; import React from 'react'; import { listClass } from '../sidebar.css'; +import { useLayout } from './LayoutProvider'; import { SideBarItem } from './SideBarItem'; -import { useSideBar } from './SideBarProvider'; export interface ISideBarAppContext extends PropsWithChildren {} export const SideBarAppContext: FC = ({ children }) => { - const { isExpanded, appContext } = useSideBar(); + const { isExpanded, appContext } = useLayout(); return (
    diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx index 5bc8361b56..e1e0d08d57 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx @@ -11,7 +11,7 @@ import { import type { ISideBarLayoutLocation } from '../types'; import type { PressEvent } from './../../../components'; import { Button, Heading, Stack } from './../../../components'; -import { useSideBar } from './SideBarProvider'; +import { useLayout } from './LayoutProvider'; export const SideBarAside: FC< PropsWithChildren<{ @@ -19,7 +19,7 @@ export const SideBarAside: FC< location: ISideBarLayoutLocation; }> > = ({ hasTopBanner, location, children }) => { - const { handleSetAsideExpanded, isAsideExpanded } = useSideBar(); + const { handleSetAsideExpanded, isAsideExpanded } = useLayout(); const handleExpand = (e: PressEvent) => { if (handleSetAsideExpanded) { diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarContext.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarContext.tsx index bf1e2ce86b..9e497a2e32 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarContext.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarContext.tsx @@ -1,12 +1,12 @@ import type { FC, PropsWithChildren } from 'react'; import React from 'react'; import { listClass } from '../sidebar.css'; -import { useSideBar } from './SideBarProvider'; +import { useLayout } from './LayoutProvider'; export interface ISideBarContext extends PropsWithChildren {} export const SideBarContext: FC = ({ children }) => { - const { isExpanded } = useSideBar(); + const { isExpanded } = useLayout(); return (