Skip to content

F
frontend
Commit df39f27f authored by tom's avatar tom
Browse files
Options

refactor chakra showcase page

parent ea01511b
Show whitespace changes
Inline Side-by-side
Showing with 484 additions and 225 deletions
toolkit/chakra/badge.tsx
View file @ df39f27f
......@@ -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 0 → 100644
View file @ df39f27f
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
View file @ df39f27f
......@@ -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
View file @ df39f27f
......@@ -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/pages/Chakra.tsx
View file @ df39f27f
/* eslint-disable max-len */
/* eslint-disable react/jsx-no-bind */
import { createListCollection, HStack, Link, Spinner, Tabs, VStack } from '@chakra-ui/react';
import { createListCollection, HStack, Link, Spinner, VStack } from '@chakra-ui/react';
import React from 'react';
import { Alert } from 'toolkit/chakra/alert';
import { Badge } from 'toolkit/chakra/badge';
import { Button } from 'toolkit/chakra/button';
import { useColorMode } from 'toolkit/chakra/color-mode';
import { Field } from 'toolkit/chakra/field';
......@@ -17,12 +15,15 @@ import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-
import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValueText } from 'toolkit/chakra/select';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Switch } from 'toolkit/chakra/switch';
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
import { Textarea } from 'toolkit/chakra/textarea';
import { toaster } from 'toolkit/chakra/toaster';
import { Tooltip } from 'toolkit/chakra/tooltip';
import ContentLoader from 'ui/shared/ContentLoader';
import IconSvg from 'ui/shared/IconSvg';
import PageTitle from 'ui/shared/Page/PageTitle';
import AlertsShowcase from 'ui/showcases/Alerts';
import BadgesShowcase from 'ui/showcases/Badges';
const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
......@@ -45,6 +46,16 @@ const ChakraShowcases = () => {
Color mode: { colorMode.colorMode }
</Switch>
<TabsRoot defaultValue="alerts">
<TabsList>
<TabsTrigger value="alerts">Alerts</TabsTrigger>
<TabsTrigger value="badges">Badges</TabsTrigger>
<TabsTrigger value="unsorted">Unsorted</TabsTrigger>
</TabsList>
<AlertsShowcase/>
<BadgesShowcase/>
<TabsContent value="unsorted">
<VStack align="flex-start" gap={ 6 }>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Buttons</Heading>
......@@ -196,47 +207,22 @@ const ChakraShowcases = () => {
<section>
<Heading textStyle="heading.md" mb={ 2 }>Tabs</Heading>
<HStack gap={ 4 }>
<Tabs.Root defaultValue="tab1" variant="solid">
<Tabs.List>
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="tab1">Content 1</Tabs.Content>
<Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>
<Tabs.Root defaultValue="tab1" variant="secondary" size="sm">
<Tabs.List>
<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="tab1">Content 1</Tabs.Content>
<Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Alerts</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<Alert visual="info" title="Info" maxWidth="300px"> Alert content </Alert>
<Alert visual="neutral" title="Neutral" maxWidth="300px"> Alert content </Alert>
<Alert visual="warning" title="Warning" maxWidth="300px"> Alert content </Alert>
<Alert visual="success" title="Success" maxWidth="300px"> Alert content </Alert>
<Alert visual="error" title="Error" startElement={ null } maxWidth="300px"> Alert content </Alert>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Badges</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<Badge colorPalette="gray">Gray</Badge>
<Badge colorPalette="green">Green</Badge>
<Badge colorPalette="red">Red</Badge>
<Badge colorPalette="purple">Purple</Badge>
<Badge colorPalette="orange">Orange</Badge>
<Badge colorPalette="blue">Blue</Badge>
<Badge colorPalette="yellow">Yellow</Badge>
<Badge colorPalette="teal">Teal</Badge>
<TabsRoot defaultValue="tab1" variant="solid">
<TabsList>
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Content 1</TabsContent>
<TabsContent value="tab2">Content 2</TabsContent>
</TabsRoot>
<TabsRoot defaultValue="tab1" variant="secondary" size="sm">
<TabsList>
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Content 1</TabsContent>
<TabsContent value="tab2">Content 2</TabsContent>
</TabsRoot>
</HStack>
</section>
......@@ -271,6 +257,8 @@ const ChakraShowcases = () => {
</HStack>
</section>
</VStack>
</TabsContent>
</TabsRoot>
</>
);
};
......
ui/shared/statusTag/StatusTag.tsx
View file @ df39f27f
......@@ -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 0 → 100644
View file @ df39f27f
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 0 → 100644
View file @ df39f27f
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 0 → 100644
View file @ df39f27f
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>
</>
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment