Merge pull request #1434 from kadena-community/refactor/breadcrumbs-i…

…con-and-composition used starticon in Breadcrumbs and exposed individual components for composing
kadena-community · Jan 8, 2024 · 16e815a · 16e815a · vercel · Jan 8, 2024
2 parents 9d3aab7 + f98db2f
commit 16e815a
Show file tree

Hide file tree

Showing 28 changed files with 156 additions and 148 deletions.
diff --git a/.changeset/plenty-otters-yell.md b/.changeset/plenty-otters-yell.md
@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': minor
+---
+
+Breadcrumbs accepts an icon element to be rendered and exposed the components in
+order to compose.
diff --git a/packages/apps/docs/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/apps/docs/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,5 +1,9 @@
 import type { IMenuItem } from '@kadena/docs-tools';
-import { Box, Breadcrumbs as StyledBreadcrumbs } from '@kadena/react-ui';
+import {
+  Box,
+  BreadcrumbsItem,
+  Breadcrumbs as StyledBreadcrumbs,
+} from '@kadena/react-ui';
 import Link from 'next/link';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
@@ -50,19 +54,19 @@ export const Breadcrumbs: FC<IProps> = ({ menuItems }) => {
 
   return (
     <Box data-cy="breadcrumbs" marginBlockStart="xxxl" marginBlockEnd="md">
-      <StyledBreadcrumbs.Root>
+      <StyledBreadcrumbs>
         {items.map((item, idx) =>
           idx < items.length - 1 ? (
-            <StyledBreadcrumbs.Item key={`${item.root}${idx}`} asChild>
+            <BreadcrumbsItem key={`${item.root}${idx}`} asChild>
               <Link href={`${item.root}`}>{item.title}</Link>
-            </StyledBreadcrumbs.Item>
+            </BreadcrumbsItem>
           ) : (
-            <StyledBreadcrumbs.Item key={`${item.root}${idx}`}>
+            <BreadcrumbsItem key={`${item.root}${idx}`}>
               {item.title}
-            </StyledBreadcrumbs.Item>
+            </BreadcrumbsItem>
           ),
         )}
-      </StyledBreadcrumbs.Root>
+      </StyledBreadcrumbs>
     </Box>
   );
 };
diff --git a/packages/apps/graph-client/src/pages/account/overview/[fungible]/[account].tsx b/packages/apps/graph-client/src/pages/account/overview/[fungible]/[account].tsx
@@ -14,6 +14,7 @@ import routes from '@constants/routes';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Notification,
   Stack,
   TabItem,
@@ -36,10 +37,10 @@ const Account: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item>Account Overview</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem>Account Overview</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[{ query: getNonFungibleAccount, variables }]}
         />

diff --git a/packages/apps/graph-client/src/pages/account/overview/[fungible]/[account]/[chain].tsx b/packages/apps/graph-client/src/pages/account/overview/[fungible]/[account]/[chain].tsx
@@ -12,6 +12,7 @@ import routes from '@constants/routes';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Grid,
   GridItem,
   Stack,
@@ -36,17 +37,17 @@ const ChainAccount: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem
             href={`${routes.ACCOUNT}/${router.query.fungible as string}/${
               router.query.account as string
             }`}
           >
             Account Overview
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>Chain</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+          </BreadcrumbsItem>
+          <BreadcrumbsItem>Chain</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[{ query: getFungibleChainAccount, variables }]}
         />

diff --git a/packages/apps/graph-client/src/pages/account/overview/non-fungible/[account].tsx b/packages/apps/graph-client/src/pages/account/overview/non-fungible/[account].tsx
@@ -10,6 +10,7 @@ import { getNonFungibleAccount } from '@/graphql/queries.graph';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Link,
   Notification,
   Stack,
@@ -33,10 +34,10 @@ const NonFungibleAccount: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item>Account Overview</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem>Account Overview</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[{ query: getNonFungibleAccount, variables }]}
         />

diff --git a/packages/apps/graph-client/src/pages/account/overview/non-fungible/[account]/[chain].tsx b/packages/apps/graph-client/src/pages/account/overview/non-fungible/[account]/[chain].tsx
@@ -10,6 +10,7 @@ import { getChainNonFungibleAccount } from '@/graphql/queries.graph';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Grid,
   GridItem,
   Stack,
@@ -34,17 +35,17 @@ const FungibleChainAccount: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem
             href={`${routes.ACCOUNT}/${router.query.fungible as string}/${
               router.query.account as string
             }`}
           >
             Account Overview
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>Chain</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+          </BreadcrumbsItem>
+          <BreadcrumbsItem>Chain</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[{ query: getChainNonFungibleAccount, variables }]}
         />

diff --git a/packages/apps/graph-client/src/pages/account/transactions/[fungible]/[account].tsx b/packages/apps/graph-client/src/pages/account/transactions/[fungible]/[account].tsx
@@ -5,7 +5,7 @@ import LoaderAndError from '@/components/loader-and-error/loader-and-error';
 import { NON_FUNGIBLE_TRANSACTION } from '@/constants/non-fungible';
 import routes from '@/constants/routes';
 import { getTransactions } from '@/graphql/queries.graph';
-import { Box, Breadcrumbs, Stack } from '@kadena/react-ui';
+import { Box, Breadcrumbs, BreadcrumbsItem, Stack } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -33,13 +33,13 @@ const AccountTransactions: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item href={accountOverviewUrl}>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem href={accountOverviewUrl}>
             Account Overview
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>Transactions</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+          </BreadcrumbsItem>
+          <BreadcrumbsItem>Transactions</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog queries={[{ query: getTransactions, variables }]} />
       </Stack>
 

diff --git a/packages/apps/graph-client/src/pages/account/transfers/[fungible]/[account].tsx b/packages/apps/graph-client/src/pages/account/transfers/[fungible]/[account].tsx
@@ -4,7 +4,7 @@ import { GraphQLQueryDialog } from '@/components/graphql-query-dialog/graphql-qu
 import LoaderAndError from '@/components/loader-and-error/loader-and-error';
 import { getTransfers } from '@/graphql/queries.graph';
 import routes from '@constants/routes';
-import { Box, Breadcrumbs, Stack } from '@kadena/react-ui';
+import { Box, Breadcrumbs, BreadcrumbsItem, Stack } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -25,17 +25,17 @@ const AccountTransfers: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem
             href={`${routes.ACCOUNT}/${router.query.fungible as string}/${
               router.query.account as string
             }`}
           >
             Account Overview
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>Transfers</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+          </BreadcrumbsItem>
+          <BreadcrumbsItem>Transfers</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog queries={[{ query: getTransfers, variables }]} />
       </Stack>
 

diff --git a/packages/apps/graph-client/src/pages/block/overview/[hash].tsx b/packages/apps/graph-client/src/pages/block/overview/[hash].tsx
@@ -17,6 +17,7 @@ import {
   Accordion,
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Link,
   Stack,
   Table,
@@ -47,10 +48,10 @@ const Block: React.FC = () => {
     <div className={centerBlockStyle}>
       <div style={{ maxWidth: '1000px' }}>
         <Stack justifyContent="space-between">
-          <Breadcrumbs.Root>
-            <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-            <Breadcrumbs.Item>Block Overview</Breadcrumbs.Item>
-          </Breadcrumbs.Root>
+          <Breadcrumbs>
+            <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+            <BreadcrumbsItem>Block Overview</BreadcrumbsItem>
+          </Breadcrumbs>
           <GraphQLQueryDialog
             queries={[
               { query: getBlockFromHash, variables: getBlockFromHashVariables },

diff --git a/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx b/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx
@@ -4,7 +4,7 @@ import { GraphQLQueryDialog } from '@/components/graphql-query-dialog/graphql-qu
 import LoaderAndError from '@/components/loader-and-error/loader-and-error';
 import routes from '@/constants/routes';
 import { getTransactions } from '@/graphql/queries.graph';
-import { Box, Breadcrumbs, Stack } from '@kadena/react-ui';
+import { Box, Breadcrumbs, BreadcrumbsItem, Stack } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -20,15 +20,15 @@ const BlockTransactions: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem
             href={`${routes.BLOCK_OVERVIEW}/${router.query.hash as string}`}
           >
             Block Overview
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>Transactions</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+          </BreadcrumbsItem>
+          <BreadcrumbsItem>Transactions</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog queries={[{ query: getTransactions, variables }]} />
       </Stack>
 

diff --git a/packages/apps/graph-client/src/pages/event/[key].tsx b/packages/apps/graph-client/src/pages/event/[key].tsx
@@ -14,6 +14,7 @@ import routes from '@constants/routes';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Grid,
   GridItem,
   Heading,
@@ -186,10 +187,10 @@ const Event: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item>Events</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem>Events</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[
             {

diff --git a/packages/apps/graph-client/src/pages/gas/estimation/index.tsx b/packages/apps/graph-client/src/pages/gas/estimation/index.tsx
@@ -3,7 +3,13 @@ import { GraphQLQueryDialog } from '@/components/graphql-query-dialog/graphql-qu
 import LoaderAndError from '@/components/loader-and-error/loader-and-error';
 import routes from '@/constants/routes';
 import { estimateGasLimit } from '@/graphql/queries.graph';
-import { Box, Breadcrumbs, Stack, Table } from '@kadena/react-ui';
+import {
+  Box,
+  Breadcrumbs,
+  BreadcrumbsItem,
+  Stack,
+  Table,
+} from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -25,10 +31,10 @@ const GasEstimation: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item>Gas Estimation</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem>Gas Estimation</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[{ query: estimateGasLimit, variables }]}
         />

diff --git a/packages/apps/graph-client/src/pages/transactions/[key].tsx b/packages/apps/graph-client/src/pages/transactions/[key].tsx
@@ -7,6 +7,7 @@ import { formatCode, formatLisp } from '@/utils/formatter';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Link,
   Notification,
   Stack,
@@ -28,13 +29,13 @@ const RequestKey: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item href={`${routes.TRANSACTIONS}`}>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem href={`${routes.TRANSACTIONS}`}>
             Transactions
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item>Transaction</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+          </BreadcrumbsItem>
+          <BreadcrumbsItem>Transaction</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog
           queries={[{ query: getTransactionByRequestKey, variables }]}
         />

diff --git a/packages/apps/graph-client/src/pages/transactions/index.tsx b/packages/apps/graph-client/src/pages/transactions/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Breadcrumbs, Stack } from '@kadena/react-ui';
+import { Box, Breadcrumbs, BreadcrumbsItem, Stack } from '@kadena/react-ui';
 
 import { useGetTransactionsQuery } from '@/__generated__/sdk';
 import { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table';
@@ -18,10 +18,10 @@ const Transactions: React.FC = () => {
   return (
     <>
       <Stack justifyContent="space-between">
-        <Breadcrumbs.Root>
-          <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
-          <Breadcrumbs.Item>Transactions</Breadcrumbs.Item>
-        </Breadcrumbs.Root>
+        <Breadcrumbs>
+          <BreadcrumbsItem href={`${routes.HOME}`}>Home</BreadcrumbsItem>
+          <BreadcrumbsItem>Transactions</BreadcrumbsItem>
+        </Breadcrumbs>
         <GraphQLQueryDialog queries={[{ query: getTransactions, variables }]} />
       </Stack>
 

diff --git a/packages/apps/tools/src/pages/account/account-transactions/filters/index.tsx b/packages/apps/tools/src/pages/account/account-transactions/filters/index.tsx
@@ -11,6 +11,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Box,
   Breadcrumbs,
+  BreadcrumbsItem,
   Button,
   Card,
   Grid,
@@ -72,11 +73,11 @@ const CheckTransactions: FC = () => {
 
   return (
     <div>
-      <Breadcrumbs.Root>
-        <Breadcrumbs.Item>{t('Account')}</Breadcrumbs.Item>
-        <Breadcrumbs.Item>{t('Transactions')}</Breadcrumbs.Item>
-        <Breadcrumbs.Item>{t('Filters')}</Breadcrumbs.Item>
-      </Breadcrumbs.Root>
+      <Breadcrumbs>
+        <BreadcrumbsItem>{t('Account')}</BreadcrumbsItem>
+        <BreadcrumbsItem>{t('Transactions')}</BreadcrumbsItem>
+        <BreadcrumbsItem>{t('Filters')}</BreadcrumbsItem>
+      </Breadcrumbs>
       <Box marginBlockEnd="sm" />
       <Heading bold={false} as="h5">
         {t('Account Transaction Filters')}