Skip to content

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

refactor chakra showcase page

parent ea01511b
Hide 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,232 +46,219 @@ const ChakraShowcases = () => {
Color mode: { colorMode.colorMode }
</Switch>
<VStack align="flex-start" gap={ 6 }>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Buttons</Heading>
<HStack gap={ 4 } flexWrap="wrap">
<Button>Solid</Button>
<Button visual="outline">Outline</Button>
<Button visual="dropdown">Dropdown</Button>
<Button visual="dropdown" selected>Dropdown selected</Button>
<Button visual="header">Header</Button>
<Button visual="header" selected>Header selected</Button>
<Button visual="header" selected highlighted>Header highlighted</Button>
<Button visual="link">Link</Button>
<Button loading loadingText="Solid">Solid</Button>
<Button loading loadingText="Outline" visual="outline">Outline</Button>
<Button loading>Loading</Button>
</HStack>
</section>
<TabsRoot defaultValue="alerts">
<TabsList>
<TabsTrigger value="alerts">Alerts</TabsTrigger>
<TabsTrigger value="badges">Badges</TabsTrigger>
<TabsTrigger value="unsorted">Unsorted</TabsTrigger>
</TabsList>
<AlertsShowcase/>
<BadgesShowcase/>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Inputs</Heading>
<Heading textStyle="heading.sm" mb={ 2 }>Regular</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<Field label="Email" required maxWidth="300px">
<Input type="email"/>
</Field>
<Field label="Email" maxWidth="300px">
<Input value="me@example.com"/>
</Field>
<Field label="Email" invalid maxWidth="300px">
<Input value="duck"/>
</Field>
<Field label="Email" readOnly maxWidth="300px">
<Input value="duck"/>
</Field>
<Field label="Email" disabled maxWidth="300px">
<Input value="duck"/>
</Field>
</HStack>
<HStack gap={ 4 } whiteSpace="nowrap" mt={ 4 } alignItems="flex-start" flexWrap="wrap">
<Field label="Email" required size="sm" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="md" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="lg" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="xl" maxWidth="300px">
<Input/>
</Field>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Floating (only XL size)</Heading>
<HStack gap={ 4 } mt={ 4 } alignItems="flex-start" flexWrap="wrap">
<Field label="Email" required floating size="xl" helperText="Helper text" w="300px">
<Input type="email"/>
</Field>
<Field label="Email" required floating invalid errorText="Something went wrong" size="xl" w="300px">
<Input type="email"/>
</Field>
</HStack>
<HStack p={ 6 } mt={ 4 } gap={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} flexWrap="wrap">
<Field label="Email" required floating size="xl" w="300px">
<Input type="email"/>
</Field>
<Field label="Email" required floating disabled size="xl" w="300px">
<Input type="email" value="me@example.com"/>
</Field>
<Field label="Email" required floating readOnly size="xl" w="300px">
<Input type="email" value="me@example.com"/>
</Field>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Input group</Heading>
<HStack gap={ 4 } mt={ 4 } alignItems="flex-start" w="fit-content" flexWrap="wrap">
<Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 } helperText="Helper text">
<InputGroup endElement={ <IconSvg name="copy" boxSize={ 5 }/> }>
<Input/>
</InputGroup>
</Field>
<InputGroup startElement={ <IconSvg name="search" boxSize={ 5 }/> }>
<Input placeholder="Search"/>
</InputGroup>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Pin input</Heading>
<HStack mt={ 4 }>
<PinInput otp count={ 3 }/>
<PinInput otp count={ 3 } value={ [ '1', '2', '3' ] } disabled bgColor="dialog.bg"/>
</HStack>
</section>
<TabsContent value="unsorted">
<VStack align="flex-start" gap={ 6 }>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Buttons</Heading>
<HStack gap={ 4 } flexWrap="wrap">
<Button>Solid</Button>
<Button visual="outline">Outline</Button>
<Button visual="dropdown">Dropdown</Button>
<Button visual="dropdown" selected>Dropdown selected</Button>
<Button visual="header">Header</Button>
<Button visual="header" selected>Header selected</Button>
<Button visual="header" selected highlighted>Header highlighted</Button>
<Button visual="link">Link</Button>
<Button loading loadingText="Solid">Solid</Button>
<Button loading loadingText="Outline" visual="outline">Outline</Button>
<Button loading>Loading</Button>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Textarea</Heading>
<HStack gap={ 4 } flexWrap="wrap">
<Field label="Description" required floating size="2xl" w="360px">
<Textarea/>
</Field>
<Field label="Description" required floating size="2xl" w="360px">
<Textarea value={ TEXT }/>
</Field>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Inputs</Heading>
<Heading textStyle="heading.sm" mb={ 2 }>Regular</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<Field label="Email" required maxWidth="300px">
<Input type="email"/>
</Field>
<Field label="Email" maxWidth="300px">
<Input value="me@example.com"/>
</Field>
<Field label="Email" invalid maxWidth="300px">
<Input value="duck"/>
</Field>
<Field label="Email" readOnly maxWidth="300px">
<Input value="duck"/>
</Field>
<Field label="Email" disabled maxWidth="300px">
<Input value="duck"/>
</Field>
</HStack>
<HStack gap={ 4 } whiteSpace="nowrap" mt={ 4 } alignItems="flex-start" flexWrap="wrap">
<Field label="Email" required size="sm" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="md" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="lg" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="xl" maxWidth="300px">
<Input/>
</Field>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Floating (only XL size)</Heading>
<HStack gap={ 4 } mt={ 4 } alignItems="flex-start" flexWrap="wrap">
<Field label="Email" required floating size="xl" helperText="Helper text" w="300px">
<Input type="email"/>
</Field>
<Field label="Email" required floating invalid errorText="Something went wrong" size="xl" w="300px">
<Input type="email"/>
</Field>
</HStack>
<HStack p={ 6 } mt={ 4 } gap={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} flexWrap="wrap">
<Field label="Email" required floating size="xl" w="300px">
<Input type="email"/>
</Field>
<Field label="Email" required floating disabled size="xl" w="300px">
<Input type="email" value="me@example.com"/>
</Field>
<Field label="Email" required floating readOnly size="xl" w="300px">
<Input type="email" value="me@example.com"/>
</Field>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Input group</Heading>
<HStack gap={ 4 } mt={ 4 } alignItems="flex-start" w="fit-content" flexWrap="wrap">
<Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 } helperText="Helper text">
<InputGroup endElement={ <IconSvg name="copy" boxSize={ 5 }/> }>
<Input/>
</InputGroup>
</Field>
<InputGroup startElement={ <IconSvg name="search" boxSize={ 5 }/> }>
<Input placeholder="Search"/>
</InputGroup>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Pin input</Heading>
<HStack mt={ 4 }>
<PinInput otp count={ 3 }/>
<PinInput otp count={ 3 } value={ [ '1', '2', '3' ] } disabled bgColor="dialog.bg"/>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Links</Heading>
<HStack gap={ 4 } flexWrap="wrap">
<Link>Primary</Link>
<Link visual="secondary">Secondary</Link>
<Link visual="subtle">Subtle</Link>
<Link visual="navigation">Navigation</Link>
<Link visual="navigation" data-selected p={ 3 } borderRadius="base">Navigation selected</Link>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Textarea</Heading>
<HStack gap={ 4 } flexWrap="wrap">
<Field label="Description" required floating size="2xl" w="360px">
<Textarea/>
</Field>
<Field label="Description" required floating size="2xl" w="360px">
<Textarea value={ TEXT }/>
</Field>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Tooltips</Heading>
<HStack gap={ 4 }>
<Tooltip content="Tooltip content">
<span>Default</span>
</Tooltip>
<Tooltip content="Tooltip content" visual="navigation">
<span>Navigation</span>
</Tooltip>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Links</Heading>
<HStack gap={ 4 } flexWrap="wrap">
<Link>Primary</Link>
<Link visual="secondary">Secondary</Link>
<Link visual="subtle">Subtle</Link>
<Link visual="navigation">Navigation</Link>
<Link visual="navigation" data-selected p={ 3 } borderRadius="base">Navigation selected</Link>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Progress Circle</Heading>
<HStack gap={ 4 }>
<ProgressCircleRoot
value={ 45 }
colorPalette="blue"
>
<ProgressCircleRing/>
</ProgressCircleRoot>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Tooltips</Heading>
<HStack gap={ 4 }>
<Tooltip content="Tooltip content">
<span>Default</span>
</Tooltip>
<Tooltip content="Tooltip content" visual="navigation">
<span>Navigation</span>
</Tooltip>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Skeleton & Loaders</Heading>
<HStack gap={ 4 }>
<Skeleton loading>
<span>Skeleton</span>
</Skeleton>
<ContentLoader/>
<Spinner/>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Progress Circle</Heading>
<HStack gap={ 4 }>
<ProgressCircleRoot
value={ 45 }
colorPalette="blue"
>
<ProgressCircleRing/>
</ProgressCircleRoot>
</HStack>
</section>
<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 }>Skeleton & Loaders</Heading>
<HStack gap={ 4 }>
<Skeleton loading>
<span>Skeleton</span>
</Skeleton>
<ContentLoader/>
<Spinner/>
</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 }>Tabs</Heading>
<HStack gap={ 4 }>
<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>
<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>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Toasts</Heading>
<HStack gap={ 4 } whiteSpace="nowrap">
<Button onClick={ () => toaster.success({ title: 'Success', description: 'Toast content' }) }>Success</Button>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Toasts</Heading>
<HStack gap={ 4 } whiteSpace="nowrap">
<Button onClick={ () => toaster.success({ title: 'Success', description: 'Toast content' }) }>Success</Button>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Select</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<SelectRoot collection={ frameworks }>
<SelectTrigger w="350px">
<SelectValueText placeholder="Select framework"/>
</SelectTrigger>
<SelectContent>
{ frameworks.items.map((framework) => (
<SelectItem item={ framework } key={ framework.value }>
{ framework.label }
</SelectItem>
)) }
</SelectContent>
</SelectRoot>
<NativeSelectRoot w="350px">
<NativeSelectField>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelectField>
</NativeSelectRoot>
</HStack>
</section>
</VStack>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Select</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<SelectRoot collection={ frameworks }>
<SelectTrigger w="350px">
<SelectValueText placeholder="Select framework"/>
</SelectTrigger>
<SelectContent>
{ frameworks.items.map((framework) => (
<SelectItem item={ framework } key={ framework.value }>
{ framework.label }
</SelectItem>
)) }
</SelectContent>
</SelectRoot>
<NativeSelectRoot w="350px">
<NativeSelectField>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelectField>
</NativeSelectRoot>
</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