Skip to content

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

clean up showcase page

parent 1822bf68
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 109 deletions
toolkit/theme/recipes/textarea.recipe.ts
View file @ 1bf8899f
...@@ -45,7 +45,6 @@ export const recipe = defineRecipe({ ...@@ -45,7 +45,6 @@ export const recipe = defineRecipe({
}, },
_readOnly: { _readOnly: {
userSelect: 'all', userSelect: 'all',
pointerEvents: 'none',
bg: 'input.bg.readOnly', bg: 'input.bg.readOnly',
borderColor: 'input.border.readOnly', borderColor: 'input.border.readOnly',
_focus: { _focus: {
...@@ -56,6 +55,7 @@ export const recipe = defineRecipe({ ...@@ -56,6 +55,7 @@ export const recipe = defineRecipe({
}, },
}, },
_disabled: { _disabled: {
pointerEvents: 'none',
bg: 'input.bg.disabled', bg: 'input.bg.disabled',
borderColor: 'input.border.disabled', borderColor: 'input.border.disabled',
}, },
......
ui/pages/Chakra.tsx
View file @ 1bf8899f
/* eslint-disable max-len */
import { HStack, Spinner, VStack } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import { useColorMode } from 'toolkit/chakra/color-mode'; import { useColorMode } from 'toolkit/chakra/color-mode';
import { Field } from 'toolkit/chakra/field';
import { Heading } from 'toolkit/chakra/heading';
import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
import { PinInput } from 'toolkit/chakra/pin-input';
import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-circle';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Switch } from 'toolkit/chakra/switch'; import { Switch } from 'toolkit/chakra/switch';
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs'; import { TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
import { Textarea } from 'toolkit/chakra/textarea';
import ContentLoader from 'ui/shared/ContentLoader';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import AccordionsShowcase from 'ui/showcases/Accordion'; import AccordionsShowcase from 'ui/showcases/Accordion';
import AlertShowcase from 'ui/showcases/Alert'; import AlertShowcase from 'ui/showcases/Alert';
...@@ -25,16 +14,42 @@ import ClipboardShowcase from 'ui/showcases/Clipboard'; ...@@ -25,16 +14,42 @@ import ClipboardShowcase from 'ui/showcases/Clipboard';
import DialogShowcase from 'ui/showcases/Dialog'; import DialogShowcase from 'ui/showcases/Dialog';
import InputShowcase from 'ui/showcases/Input'; import InputShowcase from 'ui/showcases/Input';
import LinkShowcase from 'ui/showcases/Link'; import LinkShowcase from 'ui/showcases/Link';
import LoadersShowcase from 'ui/showcases/Loaders';
import MenuShowcase from 'ui/showcases/Menu'; import MenuShowcase from 'ui/showcases/Menu';
import PaginationShowcase from 'ui/showcases/Pagination'; import PaginationShowcase from 'ui/showcases/Pagination';
import PinInputShowcase from 'ui/showcases/PinInput';
import ProgressCircleShowcase from 'ui/showcases/ProgressCircle';
import RadioShowcase from 'ui/showcases/Radio'; import RadioShowcase from 'ui/showcases/Radio';
import SelectShowcase from 'ui/showcases/Select'; import SelectShowcase from 'ui/showcases/Select';
import TabsShowcase from 'ui/showcases/Tabs'; import TabsShowcase from 'ui/showcases/Tabs';
import TagShowcase from 'ui/showcases/Tag'; import TagShowcase from 'ui/showcases/Tag';
import TextareaShowcase from 'ui/showcases/Textarea';
import ToastShowcase from 'ui/showcases/Toast'; import ToastShowcase from 'ui/showcases/Toast';
import TooltipShowcase from 'ui/showcases/Tooltip'; import TooltipShowcase from 'ui/showcases/Tooltip';
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.'; const tabs = [
{ label: 'Accordion', value: 'accordion', component: <AccordionsShowcase/> },
{ label: 'Alert', value: 'alert', component: <AlertShowcase/> },
{ label: 'Badge', value: 'badge', component: <BadgeShowcase/> },
{ label: 'Button', value: 'button', component: <ButtonShowcase/> },
{ label: 'Checkbox', value: 'checkbox', component: <CheckboxShowcase/> },
{ label: 'Clipboard', value: 'clipboard', component: <ClipboardShowcase/> },
{ label: 'Dialog', value: 'dialog', component: <DialogShowcase/> },
{ label: 'Input', value: 'input', component: <InputShowcase/> },
{ label: 'Link', value: 'link', component: <LinkShowcase/> },
{ label: 'Loaders', value: 'loaders', component: <LoadersShowcase/> },
{ label: 'Menu', value: 'menu', component: <MenuShowcase/> },
{ label: 'Pagination', value: 'pagination', component: <PaginationShowcase/> },
{ label: 'Progress Circle', value: 'progress-circle', component: <ProgressCircleShowcase/> },
{ label: 'Radio', value: 'radio', component: <RadioShowcase/> },
{ label: 'Pin input', value: 'pin-input', component: <PinInputShowcase/> },
{ label: 'Select', value: 'select', component: <SelectShowcase/> },
{ label: 'Tabs', value: 'tabs', component: <TabsShowcase/> },
{ label: 'Tag', value: 'tag', component: <TagShowcase/> },
{ label: 'Textarea', value: 'textarea', component: <TextareaShowcase/> },
{ label: 'Toast', value: 'toast', component: <ToastShowcase/> },
{ label: 'Tooltip', value: 'tooltip', component: <TooltipShowcase/> },
];
const ChakraShowcases = () => { const ChakraShowcases = () => {
const colorMode = useColorMode(); const colorMode = useColorMode();
...@@ -48,102 +63,12 @@ const ChakraShowcases = () => { ...@@ -48,102 +63,12 @@ const ChakraShowcases = () => {
</Switch> </Switch>
<TabsRoot defaultValue="accordion" orientation={ isMobile ? 'horizontal' : 'vertical' }> <TabsRoot defaultValue="accordion" orientation={ isMobile ? 'horizontal' : 'vertical' }>
<TabsList flexWrap="wrap" w="fit-content"> <TabsList flexWrap="wrap" w="fit-content" whiteSpace="nowrap">
<TabsTrigger value="accordion">Accordion</TabsTrigger> { tabs.map((tab) => (
<TabsTrigger value="alert">Alert</TabsTrigger> <TabsTrigger key={ tab.value } value={ tab.value }>{ tab.label }</TabsTrigger>
<TabsTrigger value="badge">Badge</TabsTrigger> )) }
<TabsTrigger value="button">Button</TabsTrigger>
<TabsTrigger value="checkbox">Checkbox</TabsTrigger>
<TabsTrigger value="clipboard">Clipboard</TabsTrigger>
<TabsTrigger value="dialog">Dialog</TabsTrigger>
<TabsTrigger value="input">Input</TabsTrigger>
<TabsTrigger value="link">Link</TabsTrigger>
<TabsTrigger value="menu">Menu</TabsTrigger>
<TabsTrigger value="pagination">Pagination</TabsTrigger>
<TabsTrigger value="radio">Radio</TabsTrigger>
<TabsTrigger value="select">Select</TabsTrigger>
<TabsTrigger value="tabs">Tabs</TabsTrigger>
<TabsTrigger value="tag">Tag</TabsTrigger>
<TabsTrigger value="toast">Toast</TabsTrigger>
<TabsTrigger value="tooltip">Tooltip</TabsTrigger>
<TabsTrigger value="unsorted">Unsorted</TabsTrigger>
</TabsList> </TabsList>
<AccordionsShowcase/> { tabs.map((tab) => tab.component) }
<AlertShowcase/>
<BadgeShowcase/>
<ButtonShowcase/>
<CheckboxShowcase/>
<ClipboardShowcase/>
<DialogShowcase/>
<InputShowcase/>
<LinkShowcase/>
<MenuShowcase/>
<PaginationShowcase/>
<RadioShowcase/>
<SelectShowcase/>
<TabsShowcase/>
<TagShowcase/>
<ToastShowcase/>
<TooltipShowcase/>
<TabsContent value="unsorted">
<VStack align="flex-start" gap={ 6 }>
<section>
<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 }>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 }>Progress Circle</Heading>
<HStack gap={ 4 }>
<ProgressCircleRoot
value={ 45 }
colorPalette="blue"
>
<ProgressCircleRing/>
</ProgressCircleRoot>
</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 }>Select</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<NativeSelectRoot w="350px">
<NativeSelectField>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelectField>
</NativeSelectRoot>
</HStack>
</section>
</VStack>
</TabsContent>
</TabsRoot> </TabsRoot>
</> </>
); );
......
ui/showcases/Loaders.tsx 0 → 100644
View file @ 1bf8899f
import { Spinner } from '@chakra-ui/react';
import React from 'react';
import { Skeleton } from 'toolkit/chakra/skeleton';
import ContentLoader from 'ui/shared/ContentLoader';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const LoadersShowcase = () => {
return (
<Container value="loaders">
<Section>
<SectionHeader>Skeleton</SectionHeader>
<SamplesStack >
<Sample>
<Skeleton loading>
<span>Skeleton</span>
</Skeleton>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Content loader</SectionHeader>
<SamplesStack >
<Sample>
<ContentLoader/>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Spinner</SectionHeader>
<SectionSubHeader>Sizes</SectionSubHeader>
<SamplesStack>
{ ([ 'xs', 'sm', 'md', 'lg', 'xl' ] as const).map((size) => (
<Sample key={ size } label={ `size: ${ size }` }>
<Spinner size={ size }/>
</Sample>
)) }
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(LoadersShowcase);
ui/showcases/PinInput.tsx 0 → 100644
View file @ 1bf8899f
import { Box } from '@chakra-ui/react';
import React from 'react';
import { PinInput } from 'toolkit/chakra/pin-input';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const PinInputShowcase = () => {
return (
<Container value="pin-input">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack >
<Sample label="variant: outline">
<PinInput otp count={ 3 }/>
<Box bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} p={ 2 } borderRadius="base" w="100%">
<PinInput otp count={ 3 } value={ [ '1', '2', '3' ] }/>
</Box>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Disabled</SectionHeader>
<SamplesStack >
<Sample label="disabled: true">
<PinInput otp count={ 3 } disabled value={ [ '1', '2', '3' ] }/>
<Box bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} p={ 2 } borderRadius="base" w="100%">
<PinInput otp count={ 3 } disabled value={ [ '1', '2', '3' ] }/>
</Box>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(PinInputShowcase);
ui/showcases/ProgressCircle.tsx 0 → 100644
View file @ 1bf8899f
import React from 'react';
import { ProgressCircleRoot, ProgressCircleRing } from 'toolkit/chakra/progress-circle';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const ProgressCircleShowcase = () => {
return (
<Container value="progress-circle">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack >
<Sample label="colorPalette: blue">
<ProgressCircleRoot
value={ 45 }
colorPalette="blue"
>
<ProgressCircleRing/>
</ProgressCircleRoot>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack >
{ ([ 'sm', 'md' ] as const).map((size) => (
<Sample key={ size } label={ `size: ${ size }` }>
<ProgressCircleRoot
value={ 45 }
colorPalette="blue"
size={ size }
>
<ProgressCircleRing/>
</ProgressCircleRoot>
</Sample>
)) }
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(ProgressCircleShowcase);
ui/showcases/Select.tsx
View file @ 1bf8899f
...@@ -2,6 +2,7 @@ import { createListCollection } from '@chakra-ui/react'; ...@@ -2,6 +2,7 @@ import { createListCollection } from '@chakra-ui/react';
import { noop } from 'es-toolkit'; import { noop } from 'es-toolkit';
import React from 'react'; import React from 'react';
import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
import { SelectContent, SelectItem, SelectRoot, SelectControl, SelectValueText } from 'toolkit/chakra/select'; import { SelectContent, SelectItem, SelectRoot, SelectControl, SelectValueText } from 'toolkit/chakra/select';
import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio'; import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
import Sort from 'ui/shared/sort/Sort'; import Sort from 'ui/shared/sort/Sort';
...@@ -69,6 +70,18 @@ const SelectShowcase = () => { ...@@ -69,6 +70,18 @@ const SelectShowcase = () => {
<Section> <Section>
<SectionHeader>Examples</SectionHeader> <SectionHeader>Examples</SectionHeader>
<SectionSubHeader>Native select</SectionSubHeader>
<SamplesStack>
<Sample>
<NativeSelectRoot>
<NativeSelectField>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelectField>
</NativeSelectRoot>
</Sample>
</SamplesStack>
<SectionSubHeader>Sort</SectionSubHeader> <SectionSubHeader>Sort</SectionSubHeader>
<SamplesStack> <SamplesStack>
<Sample> <Sample>
......
ui/showcases/Textarea.tsx 0 → 100644
View file @ 1bf8899f
/* eslint-disable max-len */
import { Box } from '@chakra-ui/react';
import React from 'react';
import { Field } from 'toolkit/chakra/field';
import { Textarea } from 'toolkit/chakra/textarea';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
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.';
const TextareaShowcase = () => {
return (
<Container value="textarea">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack >
<Sample label="variant: outline" w="360px">
<Field label="Description" required floating size="2xl">
<Textarea/>
</Field>
<Field label="Description" required floating size="2xl">
<Textarea value={ TEXT }/>
</Field>
<Field label="Description (invalid)" required floating invalid size="2xl">
<Textarea value={ TEXT }/>
</Field>
<Field label="Description (readOnly)" required floating readOnly size="2xl">
<Textarea value={ TEXT }/>
</Field>
<Field label="Description (disabled)" required floating disabled size="2xl">
<Textarea value={ TEXT }/>
</Field>
<Box bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} p={ 4 } borderRadius="base" w="100%">
<Field label="Description" required floating size="2xl">
<Textarea value={ TEXT }/>
</Field>
</Box>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(TextareaShowcase);
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