From 6186111d7969f498bf6a5186eda476303606748f Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Mon, 4 Nov 2024 09:34:45 +0100 Subject: [PATCH 1/6] style the breadcrumbs --- .changeset/polite-mugs-shout.md | 2 + .../src/pages/BreadCrumbs/BreadCrumbs.tsx | 6 +- .../components/Breadcrumbs/Breadcrumbs.css.ts | 56 +++++++++++-------- .../Breadcrumbs/BreadcrumbsItem.tsx | 13 ++++- .../libs/kode-ui/src/components/Link/Link.tsx | 2 +- .../src/patterns/SideBarLayout/sidebar.css.ts | 3 +- 6 files changed, 49 insertions(+), 33 deletions(-) create mode 100644 .changeset/polite-mugs-shout.md 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/pages/BreadCrumbs/BreadCrumbs.tsx b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx index d36a696843..77e10f172b 100644 --- a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx +++ b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx @@ -12,10 +12,8 @@ export const BreadCrumbs: FC = () => { <> {breadCrumbs.map((crumb) => ( - - - {crumb.label} - + + {crumb.label} ))} 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..0ace9add8b 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.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts index bfeee1bf20..e49011ffe2 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts @@ -77,6 +77,7 @@ export const menuWrapperClass = recipe({ display: 'flex', width: '45px', padding: token('spacing.md'), + paddingBlockStart: token('spacing.sm'), paddingInline: token('spacing.xs'), gridArea: 'sidebarlayout-sidebar', transform: 'translateX(0%)', @@ -220,7 +221,7 @@ export const headerClass = style([ }, md: { gridTemplateColumns: '1fr', - gridTemplateRows: 'auto', + gridTemplateRows: '1fr', gridTemplateAreas: ` "header-crumbs" `, From 598df7eeb1f9f53adbe1fbe7bdc387abed7fd0b4 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Mon, 4 Nov 2024 09:46:31 +0100 Subject: [PATCH 2/6] rename the sidebar to layout --- packages/apps/dev-wallet/src/App/Layout/Layout.tsx | 4 ++-- .../apps/dev-wallet/src/App/Layout/SideBar.tsx | 4 ++-- packages/apps/dev-wallet/src/App/app.tsx | 6 +++--- .../src/Components/Aside/views/AddContact.tsx | 4 ++-- .../src/Components/Aside/views/KeySource.tsx | 4 ++-- .../src/pages/BreadCrumbs/BreadCrumbs.tsx | 7 +++++-- .../dev-wallet/src/pages/networks/networks.tsx | 4 ++-- .../src/components/Breadcrumbs/Breadcrumbs.css.ts | 2 +- .../kode-ui/src/patterns/SideBarLayout/SideBar.tsx | 7 +++---- .../SideBarLayout/SideBarLayout.stories.tsx | 12 ++++++------ .../src/patterns/SideBarLayout/SideBarLayout.tsx | 4 ++-- .../{SideBarContext.tsx => LayoutContext.tsx} | 4 ++-- .../{SideBarProvider.tsx => LayoutProvider.tsx} | 14 +++++++------- .../SideBarLayout/components/SideBarAppContext.tsx | 4 ++-- .../SideBarLayout/components/SideBarAside.tsx | 4 ++-- .../SideBarLayout/components/SideBarFooter.tsx | 4 ++-- .../SideBarLayout/components/SideBarFooterItem.tsx | 4 ++-- .../SideBarLayout/components/SideBarHeader.tsx | 4 ++-- .../SideBarLayout/components/SideBarItem.tsx | 4 ++-- .../components/SideBarItemsInline.tsx | 4 ++-- .../SideBarLayout/components/SideBarNavigation.tsx | 4 ++-- .../SideBarLayout/components/SideBarTree.tsx | 4 ++-- .../SideBarLayout/components/SideBarTreeItem.tsx | 4 ++-- .../kode-ui/src/patterns/SideBarLayout/index.ts | 2 +- packages/libs/kode-ui/src/patterns/index.ts | 4 ++-- 25 files changed, 62 insertions(+), 60 deletions(-) rename packages/libs/kode-ui/src/patterns/SideBarLayout/components/{SideBarContext.tsx => LayoutContext.tsx} (83%) rename packages/libs/kode-ui/src/patterns/SideBarLayout/components/{SideBarProvider.tsx => LayoutProvider.tsx} (89%) diff --git a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx index 3d4eae82ae..e593311560 100644 --- a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx @@ -13,7 +13,7 @@ import { SideBarFooter, SideBarFooterItem, SideBarLayout, - useSideBar, + useLayout, } from '@kadena/kode-ui/patterns'; import { FC, useEffect, useMemo } from 'react'; import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'; @@ -22,7 +22,7 @@ import { SideBar } from './SideBar'; export const Layout: FC = () => { const { theme, setTheme } = useTheme(); - const { breadCrumbs, setBreadCrumbs, setAppContext } = useSideBar(); + const { breadCrumbs, setBreadCrumbs, setAppContext } = useLayout(); const location = useLocation(); const navigate = useNavigate(); diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx index 32a54169c9..45464b5303 100644 --- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx @@ -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(); 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 77e10f172b..528e625a92 100644 --- a/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx +++ b/packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx @@ -1,16 +1,19 @@ 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(); + const { breadCrumbs } = useLayout(); if (!breadCrumbs.length) return null; return ( <> + + Dashboard + {breadCrumbs.map((crumb) => ( {crumb.label} diff --git a/packages/apps/dev-wallet/src/pages/networks/networks.tsx b/packages/apps/dev-wallet/src/pages/networks/networks.tsx index 6a98b668cd..0b8be7ce2b 100644 --- a/packages/apps/dev-wallet/src/pages/networks/networks.tsx +++ b/packages/apps/dev-wallet/src/pages/networks/networks.tsx @@ -11,7 +11,7 @@ import { Stack, Text, } from '@kadena/kode-ui'; -import { useSideBar } from '@kadena/kode-ui/patterns'; +import { useLayout } from '@kadena/kode-ui/patterns'; import { useEffect, useState } from 'react'; import { panelClass } from '../home/style.css'; import { @@ -35,7 +35,7 @@ const getNewNetwork = (): INetworkWithOptionalUuid => ({ export function Networks() { const { networks } = useWallet(); - const { setAppContext, setBreadCrumbs } = useSideBar(); + const { setAppContext, setBreadCrumbs } = useLayout(); const [showNetworkModal, setShowNetworkModal] = useState(false); const [selectedNetwork, setSelectedNetwork] = useState(() => getNewNetwork()); 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 0ace9add8b..f0bb763dd7 100644 --- a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts +++ b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts @@ -26,7 +26,7 @@ export const itemClass = style([ marginInline: token('spacing.sm'), }, '&:not(:first-child):last-child::before': { - content: '∙', + content: '/', color: token('color.text.gray.default'), marginInline: token('spacing.sm'), }, diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx index d58e169db0..1056df4898 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx @@ -4,12 +4,11 @@ import type { FC, PropsWithChildren, ReactElement } from 'react'; import React from 'react'; import type { PressEvent } from './../../components'; import { Button, Media, Stack } from './../../components'; +import { LayoutContext, 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 +34,7 @@ export const SideBar: FC = ({ logo, minifiedLogo, }) => { - const { isExpanded, handleToggleExpand } = useSideBar(); + const { isExpanded, handleToggleExpand } = useLayout(); const handleExpand = (e: PressEvent) => { if (handleToggleExpand) { @@ -77,7 +76,7 @@ export const SideBar: FC = ({ {appContext && {appContext}} {navigation && {navigation}} - {context && {context}} + {context && {context}} {children} 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/SideBarContext.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutContext.tsx similarity index 83% rename from packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarContext.tsx rename to packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutContext.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/LayoutContext.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 (