refactor chakra showcase page

toolkit/chakra/badge.tsx

@@ -2,19 +2,26 @@ import type { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
 import { Badge as ChakraBadge } from '@chakra-ui/react';
 import React from 'react';
 
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
 import { Skeleton } from './skeleton';
 
 export interface BadgeProps extends ChakraBadgeProps {
   loading?: boolean;
+  iconStart?: IconName;
 }
 
 export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   function Badge(props, ref) {
-    const { loading, ...rest } = props;
+    const { loading, iconStart, children, ...rest } = props;
 
     return (
       <Skeleton loading={ loading }>
-        <ChakraBadge ref={ ref } { ...rest }/>
+        <ChakraBadge ref={ ref } display="flex" alignItems="center" gap={ 1 } { ...rest }>
+          { iconStart && <IconSvg name={ iconStart } boxSize="10px"/> }
+          { children }
+        </ChakraBadge>
       </Skeleton>
     );
   });

toolkit/chakra/tabs.tsx

+import { Tabs as ChakraTabs } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface TabsProps extends ChakraTabs.RootProps {}
+
+export const TabsRoot = React.forwardRef<HTMLDivElement, TabsProps>(
+  function TabsRoot(props, ref) {
+    return <ChakraTabs.Root ref={ ref } { ...props }/>;
+  },
+);
+
+export const TabsList = ChakraTabs.List;
+export const TabsTrigger = ChakraTabs.Trigger;
+export const TabsContent = ChakraTabs.Content;

toolkit/theme/foundations/semanticTokens.ts

@@ -257,6 +257,10 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         bg: { value: { _light: '{colors.purple.50}', _dark: '{colors.purple.800}' } },
         fg: { value: { _light: '{colors.purple.500}', _dark: '{colors.purple.100}' } },
       },
+      purple_alt: {
+        bg: { value: { _light: '{colors.purple.100}', _dark: '{colors.purple.800}' } },
+        fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+      },
       orange: {
         bg: { value: { _light: '{colors.orange.50}', _dark: '{colors.orange.800}' } },
         fg: { value: { _light: '{colors.orange.500}', _dark: '{colors.orange.100}' } },
@@ -265,6 +269,10 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.800}' } },
         fg: { value: { _light: '{colors.blue.500}', _dark: '{colors.blue.100}' } },
       },
+      blue_alt: {
+        bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.800}' } },
+        fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+      },
       yellow: {
         bg: { value: { _light: '{colors.yellow.50}', _dark: '{colors.yellow.800}' } },
         fg: { value: { _light: '{colors.yellow.500}', _dark: '{colors.yellow.100}' } },
@@ -273,6 +281,10 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         bg: { value: { _light: '{colors.teal.50}', _dark: '{colors.teal.800}' } },
         fg: { value: { _light: '{colors.teal.500}', _dark: '{colors.teal.100}' } },
       },
+      cyan: {
+        bg: { value: { _light: '{colors.cyan.50}', _dark: '{colors.cyan.800}' } },
+        fg: { value: { _light: '{colors.cyan.500}', _dark: '{colors.cyan.100}' } },
+      },
     },
     heading: {
       DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },

toolkit/theme/recipes/badge.recipe.ts

@@ -47,6 +47,18 @@ export const recipe = defineRecipe({
         bg: 'badge.teal.bg',
         color: 'badge.teal.fg',
       },
+      cyan: {
+        bg: 'badge.cyan.bg',
+        color: 'badge.cyan.fg',
+      },
+      purple_alt: {
+        bg: 'badge.purple_alt.bg',
+        color: 'badge.purple_alt.fg',
+      },
+      blue_alt: {
+        bg: 'badge.blue_alt.bg',
+        color: 'badge.blue_alt.fg',
+      },
     },
     size: {
       md: {

ui/shared/statusTag/StatusTag.tsx

@@ -6,7 +6,6 @@ import type { BadgeProps } from 'toolkit/chakra/badge';
 import { Badge } from 'toolkit/chakra/badge';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
 
 export type StatusTagType = 'ok' | 'error' | 'pending';
 
@@ -41,9 +40,8 @@ const StatusTag = ({ type, text, errorText, isLoading, className }: Props) => {
 
   return (
     <Tooltip content={ errorText } disabled={ !errorText }>
-      <Badge colorPalette={ colorPalette } loading={ isLoading } className={ className }>
-        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 1 } flexShrink={ 0 }/>
-        <span>{ capitalizedText }</span>
+      <Badge colorPalette={ colorPalette } loading={ isLoading } className={ className } iconStart={ icon }>
+        { capitalizedText }
       </Badge>
     </Tooltip>
   );

ui/showcases/Alerts.tsx

+import { Box, Table } from '@chakra-ui/react';
+import React from 'react';
+
+import { Alert } from 'toolkit/chakra/alert';
+import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
+
+const AlertsShowcase = () => {
+  return (
+    <Container value="alerts">
+      <Section>
+        <SectionHeader>Status</SectionHeader>
+        <SamplesStack>
+          <Sample label="visual: info">
+            <Alert visual="info" title="Info"> Alert content </Alert>
+          </Sample>
+          <Sample label="visual: neutral">
+            <Alert visual="neutral" title="Neutral"> Alert content </Alert>
+          </Sample>
+          <Sample label="visual: warning">
+            <Alert visual="warning" title="Warning"> Alert content </Alert>
+          </Sample>
+          <Sample label="visual: success">
+            <Alert visual="success" title="Success"> Alert content </Alert>
+          </Sample>
+          <Sample label="visual: error">
+            <Alert visual="error" title="Error"> Alert content </Alert>
+          </Sample>
+        </SamplesStack>
+      </Section>
+      <Section>
+        <SectionHeader>Variant</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: subtle">
+            <Alert visual="info" title="Info"> Alert content </Alert>
+          </Sample>
+        </SamplesStack>
+      </Section>
+      <Section>
+        <SectionHeader>Examples</SectionHeader>
+        <SectionSubHeader>Inside table (SocketNewItemsNotice)</SectionSubHeader>
+        <SamplesStack>
+          <Sample label="loading">
+            <Table.Root>
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeader w="100px">Block</Table.ColumnHeader>
+                  <Table.ColumnHeader w="100px">Age</Table.ColumnHeader>
+                  <Table.ColumnHeader w="100px">Gas used</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                <SocketNewItemsNotice.Desktop
+                  url={ window.location.href }
+                  num={ 1234 }
+                  type="block"
+                  isLoading
+                />
+              </Table.Body>
+            </Table.Root>
+          </Sample>
+          <Sample label="success">
+            <Table.Root>
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeader w="100px">Block</Table.ColumnHeader>
+                  <Table.ColumnHeader w="100px">Age</Table.ColumnHeader>
+                  <Table.ColumnHeader w="100px">Gas used</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                <SocketNewItemsNotice.Desktop
+                  url={ window.location.href }
+                  num={ 1234 }
+                  type="block"
+                  isLoading={ false }
+                />
+              </Table.Body>
+            </Table.Root>
+          </Sample>
+        </SamplesStack>
+
+        <SectionSubHeader>Multiple lines</SectionSubHeader>
+        <SamplesStack>
+          <Sample label="multiple lines, with title, inline=false">
+            <Alert visual="warning" title="Warning" inline={ false } maxWidth="500px">
+              <Box>
+                Participated in our recent Blockscout activities? Check your eligibility and claim your NFT Scout badges. More exciting things are coming soon!
+              </Box>
+            </Alert>
+          </Sample>
+          <Sample label="multiple lines, no title">
+            <Alert visual="warning" maxWidth="500px">
+              <Box>
+                Participated in our recent Blockscout activities? Check your eligibility and claim your NFT Scout badges. More exciting things are coming soon!
+              </Box>
+            </Alert>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(AlertsShowcase);

ui/showcases/Badges.tsx

+import React from 'react';
+
+import { Badge } from 'toolkit/chakra/badge';
+import StatusTag from 'ui/shared/statusTag/StatusTag';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
+
+const BadgesShowcase = () => {
+  return (
+    <Container value="badges">
+      <Section>
+        <SectionHeader>Color palette</SectionHeader>
+        <SamplesStack>
+          <Sample label="colorPalette: gray">
+            <Badge colorPalette="gray">Pending</Badge>
+          </Sample>
+          <Sample label="colorPalette: green">
+            <Badge colorPalette="green">Success</Badge>
+          </Sample>
+          <Sample label="colorPalette: red">
+            <Badge colorPalette="red">Failed</Badge>
+          </Sample>
+          <Sample label="colorPalette: purple">
+            <Badge colorPalette="purple">Transaction</Badge>
+          </Sample>
+          <Sample label="colorPalette: orange">
+            <Badge colorPalette="orange">Token transfer</Badge>
+          </Sample>
+          <Sample label="colorPalette: blue">
+            <Badge colorPalette="blue">Contract call</Badge>
+          </Sample>
+          <Sample label="colorPalette: yellow">
+            <Badge colorPalette="yellow">Blob txn</Badge>
+          </Sample>
+          <Sample label="colorPalette: teal">
+            <Badge colorPalette="teal">Multicall</Badge>
+          </Sample>
+          <Sample label="colorPalette: cyan">
+            <Badge colorPalette="cyan">Internal txn</Badge>
+          </Sample>
+          <Sample label="colorPalette: purple_alt">
+            <Badge colorPalette="purple_alt">read</Badge>
+          </Sample>
+          <Sample label="colorPalette: blue_alt">
+            <Badge colorPalette="blue_alt">write</Badge>
+          </Sample>
+        </SamplesStack>
+      </Section>
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: md">
+            <Badge size="md">Content</Badge>
+          </Sample>
+        </SamplesStack>
+      </Section>
+      <Section>
+        <SectionHeader>Variant</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: subtle">
+            <Badge variant="subtle">Content</Badge>
+          </Sample>
+        </SamplesStack>
+      </Section>
+      <Section>
+        <SectionHeader>Icon</SectionHeader>
+        <SamplesStack>
+          <Sample label="iconStart: status/success">
+            <Badge iconStart="status/success">
+              Content
+            </Badge>
+          </Sample>
+        </SamplesStack>
+      </Section>
+      <Section>
+        <SectionHeader>Examples</SectionHeader>
+        <SectionSubHeader>Status tag (StatusTag)</SectionSubHeader>
+        <SamplesStack>
+          <Sample label="status: ok">
+            <StatusTag type="ok" text="Text"/>
+          </Sample>
+          <Sample label="status: error">
+            <StatusTag type="error" text="Text"/>
+          </Sample>
+          <Sample label="status: pending">
+            <StatusTag type="pending" text="Text"/>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(BadgesShowcase);

ui/showcases/parts.tsx

+import type { TabsContentProps } from '@chakra-ui/react';
+import { Code, Grid, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import { Heading } from 'toolkit/chakra/heading';
+import { TabsContent } from 'toolkit/chakra/tabs';
+
+export const Container = (props: TabsContentProps) => <TabsContent display="flex" flexDirection="column" gap={ 6 } { ...props }/>;
+export const Section = ({ children }: { children: React.ReactNode }) => <section>{ children }</section>;
+export const SectionHeader = ({ children }: { children: React.ReactNode }) => <Heading level="2" mb={ 4 }>{ children }</Heading>;
+export const SectionSubHeader = ({ children }: { children: React.ReactNode }) => <Heading level="3" mb={ 3 } _notFirst={{ mt: 4 }}>{ children }</Heading>;
+export const SamplesStack = ({ children }: { children: React.ReactNode }) => (
+  <Grid
+    rowGap={ 4 }
+    columnGap={ 8 }
+    gridTemplateColumns="fit-content(100%) fit-content(100%)"
+    justifyItems="flex-start"
+    alignItems="flex-start"
+  >
+    { children }
+  </Grid>
+);
+export const Sample = ({ children, label }: { children: React.ReactNode; label: string }) => (
+  <>
+    <Code w="fit-content">{ label }</Code>
+    <HStack gap={ 3 } whiteSpace="pre-wrap" flexWrap="wrap">{ children }</HStack>
+  </>
+);