Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit423eb07

Browse files
docs: extend Component Explorer coverage across component docs (#10365)
* feat(docs): add interactive Component Explorer for anatomy parts- Introduced ComponentExplorer and ComponentExplorerWrapper to render component anatomy previews alongside an interactive sidebar- Simplified border styles, radius, and colors for a cleaner look- Sidebar lists available anatomy parts (from @chakra-ui/react/anatomy) and highlights them in the preview on hover or click- Integrated into MDX as Explorer so it can be used in docs pages (e.g. Avatar component page)- Ensures consistent layout: preview on the left, anatomy sidebar on the right* refactor(docs): simplify ComponentExplorer color handling with Chakra props- Removed borderColor prop drilling from ComponentExplorerSidebar- Now using Chakras borderColor and _dark props for light/dark mode styling- Keeps sidebar and preview layout consistent while reducing complexity- No change to functionality; only improves maintainability* style: improve component explorer UI and styling- Remove card wrapper for cleaner page integration- Replace hard-coded colors with semantic tokens- Update part names to use flex-wrap layout for better space utilization- Simplify color scheme using bg semantic tokens* fix: highlight all matching elements in component explorer* fix: use kebabCase conversion for anatomy part selectors* refactor: cleanup unused components, add visual toggle to parts on select* style: improve styling on the sidebar and visualize selection* fix: avatar explorer demo component* docs: update coponents to use explorer* docs: add Explorer sections to all component documentation files- Add interactive Explorer components to 87 component docs- Follow consistent naming pattern using {component-name}-basic- Ensure all 105 component files now have Explorer sections- Enable users to interactively explore component parts in sidebar* fix: reverts limit on file run* docs: update coponents to use explorer* docs: update absolute centre* refactor: improve component name normalization function* feat: add checkbox, code block, color picker, and editable explorers* feat: add fieldexplorer and fieldsetexplorer components* feat: add file upload, number input, pin input & radio card examples* fix: add null check for undefined anatomy in ComponentExplorerSidebarPrevents TypeError when processing components like Theme that don't haveanatomy definitions during Next.js build.* feat: add combobox, hover card, menu, slider, tree view explorers* feat: add component explorers for alert, card, clipboard, progress, qr code, stat, tooltip* feat: add stepsexplorer component for onboarding steps* feat: add checkboxcardexplorer and initial items to listboxexplorer* feat: add blockquote explorer and enhance fileuploadexplorer* feat: add EditableLabel component for editable input areas* style: add styling to Editable.Textarea and include data-part* feat: remove CodeBlockExplorer component* style: improve sidebar layout and scrolling functionality
1 parent83c1641 commit423eb07

File tree

72 files changed

+1852
-98
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+1852
-98
lines changed
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use client"
2+
3+
import{Alert,Stack}from"@chakra-ui/react"
4+
5+
exportconstAlertExplorer=()=>{
6+
return(
7+
<Stackgap="6"maxW="400px">
8+
<Alert.Rootstatus="info"variant="subtle">
9+
<Alert.Indicator/>
10+
<Alert.Content>
11+
<Alert.Title>Information</Alert.Title>
12+
<Alert.Description>
13+
This is an info alert with a description.
14+
</Alert.Description>
15+
</Alert.Content>
16+
</Alert.Root>
17+
18+
<Alert.Rootstatus="success"variant="solid">
19+
<Alert.Indicator/>
20+
<Alert.Content>
21+
<Alert.Title>Success</Alert.Title>
22+
<Alert.Description>
23+
Your action was successful and everything worked as expected.
24+
</Alert.Description>
25+
</Alert.Content>
26+
</Alert.Root>
27+
28+
<Alert.Rootstatus="error">
29+
<Alert.Indicator/>
30+
<Alert.Content>
31+
<Alert.Title>Error</Alert.Title>
32+
<Alert.Description>
33+
Something went wrong. Please try again.
34+
</Alert.Description>
35+
</Alert.Content>
36+
</Alert.Root>
37+
</Stack>
38+
)
39+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import{Avatar,HStack}from"@chakra-ui/react"
2+
3+
exportconstAvatarExplorerDemo=()=>{
4+
return(
5+
<HStackgap={2}>
6+
<Avatar.Root>
7+
<Avatar.Fallbackname="Segun Adebayo"/>
8+
<Avatar.Imagesrc="https://bit.ly/sage-adebayo"/>
9+
</Avatar.Root>
10+
<Avatar.Root>
11+
<Avatar.Fallbackname="Segun Adebayo"/>
12+
<Avatar.Imagesrc="https://bit.ly/broken-link"/>
13+
</Avatar.Root>
14+
</HStack>
15+
)
16+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
"use client"
2+
3+
import{Blockquote}from"@chakra-ui/react"
4+
import{Box,Flex}from"@chakra-ui/react"
5+
import{RiQuoteText}from"react-icons/ri"
6+
7+
exportconstBlockquoteExplorer=()=>{
8+
return(
9+
<BoxmaxW="400px"p="4">
10+
<Blockquote.Rootpl="4"py="2">
11+
<Flexalign="flex-start"gap="2">
12+
<Blockquote.Icon>
13+
<RiQuoteTextsize={20}/>
14+
</Blockquote.Icon>
15+
16+
<Boxflex="1">
17+
<Blockquote.Content>
18+
If anyone thinks he is something when he is nothing, he deceives
19+
himself. Each one should test his own actions. Then he can take
20+
pride in himself, without comparing himself to anyone else.
21+
</Blockquote.Content>
22+
23+
<Flexmt="2"align="center"gap="2">
24+
<Blockquote.Caption>— Marcus Aurelius</Blockquote.Caption>
25+
</Flex>
26+
</Box>
27+
</Flex>
28+
</Blockquote.Root>
29+
</Box>
30+
)
31+
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import{Avatar,Button,Card,Heading}from"@chakra-ui/react"
2+
3+
exportconstCardExplorer=()=>{
4+
return(
5+
<Card.Rootwidth="320px"borderWidth="1px"rounded="md">
6+
<Card.HeaderborderBottomWidth="1px"px="4"py="3">
7+
<Headingsize="sm">Profile</Heading>
8+
</Card.Header>
9+
10+
<Card.Bodygap="3"px="4"pt="4"pb="4">
11+
<Avatar.Rootsize="lg"shape="rounded">
12+
<Avatar.Imagesrc="https://picsum.photos/200/300"/>
13+
<Avatar.Fallbackname="Nue Camp"/>
14+
</Avatar.Root>
15+
<Card.Title>Nue Camp</Card.Title>
16+
<Card.DescriptionfontSize="sm"color="gray.600">
17+
This is the card body. Lorem ipsum dolor sit amet, consectetur
18+
adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
19+
</Card.Description>
20+
</Card.Body>
21+
22+
<Card.FooterjustifyContent="flex-end"gap="2"px="4"pb="4">
23+
<Buttonvariant="outline"size="sm">
24+
View
25+
</Button>
26+
<Buttonsize="sm">Join</Button>
27+
</Card.Footer>
28+
</Card.Root>
29+
)
30+
}
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client"
2+
3+
import{Box,Button,CheckboxCard,Text}from"@chakra-ui/react"
4+
5+
exportconstCheckboxCardExplorer=()=>{
6+
return(
7+
<CheckboxCard.Root
8+
defaultChecked
9+
maxW="280px"
10+
border="none"
11+
shadow="none"
12+
rounded="lg"
13+
px="3"
14+
py="2"
15+
_checked={{border:"1px solid",borderColor:"fg.subtle"}}
16+
>
17+
<CheckboxCard.HiddenInput/>
18+
19+
<CheckboxCard.Control>
20+
<CheckboxCard.Addonborder="none">
21+
<Box
22+
bg="blue.500"
23+
color="white"
24+
fontWeight="bold"
25+
rounded="full"
26+
w="6"
27+
h="6"
28+
display="flex"
29+
alignItems="center"
30+
justifyContent="center"
31+
fontSize="xs"
32+
>
33+
N
34+
</Box>
35+
</CheckboxCard.Addon>
36+
37+
<Boxflex="1">
38+
<CheckboxCard.LabelfontWeight="medium">Next.js</CheckboxCard.Label>
39+
<CheckboxCard.DescriptionfontSize="sm"color="fg.muted">
40+
A React framework for building web apps.
41+
</CheckboxCard.Description>
42+
</Box>
43+
44+
<CheckboxCard.Indicator/>
45+
</CheckboxCard.Control>
46+
47+
<CheckboxCard.Content>
48+
<TextfontSize="sm"color="fg.muted"mb="2">
49+
Includes features like server-side rendering, API routes, and
50+
internationalization.
51+
</Text>
52+
<Buttonsize="sm"variant="outline"colorScheme="blue">
53+
Learn More
54+
</Button>
55+
</CheckboxCard.Content>
56+
</CheckboxCard.Root>
57+
)
58+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import{Checkbox}from"@chakra-ui/react"
2+
3+
exportconstCheckboxExplorer=()=>{
4+
return(
5+
<Checkbox.GroupdefaultValue={["terms"]}gap="4"flexDirection="column">
6+
<Checkbox.Rootvalue="terms">
7+
<Checkbox.HiddenInput/>
8+
<Checkbox.Control>
9+
<Checkbox.Indicator/>
10+
</Checkbox.Control>
11+
<Checkbox.Label>Accept terms and conditions</Checkbox.Label>
12+
</Checkbox.Root>
13+
14+
<Checkbox.Rootvalue="newsletter">
15+
<Checkbox.HiddenInput/>
16+
<Checkbox.Control>
17+
<Checkbox.Indicator/>
18+
</Checkbox.Control>
19+
<Checkbox.Label>Subscribe to newsletter</Checkbox.Label>
20+
</Checkbox.Root>
21+
22+
<Checkbox.Rootvalue="updates">
23+
<Checkbox.HiddenInput/>
24+
<Checkbox.Control>
25+
<Checkbox.Indicator/>
26+
</Checkbox.Control>
27+
<Checkbox.Label>Receive product updates</Checkbox.Label>
28+
</Checkbox.Root>
29+
</Checkbox.Group>
30+
)
31+
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use client"
2+
3+
import{Button,Clipboard,Input,Stack,Text}from"@chakra-ui/react"
4+
5+
exportconstClipboardExplorer=()=>{
6+
return(
7+
<Stackgap="6"maxW="sm">
8+
<Clipboard.Rootvalue="https://chakra-ui.com">
9+
<Clipboard.Labelmb="2">Copy link</Clipboard.Label>
10+
11+
<Stackdirection="row"gap="2"mt="2"align="center">
12+
<Clipboard.InputasChild>
13+
<InputreadOnly/>
14+
</Clipboard.Input>
15+
16+
<Clipboard.Control>
17+
<Clipboard.TriggerasChild>
18+
<Buttonsize="sm"variant="outline">
19+
Copy
20+
<Clipboard.Indicatorml="2"/>
21+
</Button>
22+
</Clipboard.Trigger>
23+
</Clipboard.Control>
24+
</Stack>
25+
26+
<Clipboard.ValueTextas={Text}fontSize="sm"color="gray.600"/>
27+
</Clipboard.Root>
28+
</Stack>
29+
)
30+
}
Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
"use client"
2+
3+
import{
4+
ColorPicker,
5+
ColorPickerEyeDropper,
6+
For,
7+
HStack,
8+
IconButton,
9+
Square,
10+
VStack,
11+
getColorChannels,
12+
parseColor,
13+
}from"@chakra-ui/react"
14+
import{LuCheck,LuPlus}from"react-icons/lu"
15+
16+
constswatches=[
17+
"#000000",
18+
"#4A5568",
19+
"#F56565",
20+
"#ED64A6",
21+
"#9F7AEA",
22+
"#6B46C1",
23+
"#4299E1",
24+
"#0BC5EA",
25+
"#00B5D8",
26+
"#38B2AC",
27+
"#48BB78",
28+
"#68D391",
29+
"#ECC94B",
30+
"#DD6B20",
31+
]
32+
33+
constChannelInputs=(props:{format:ColorPicker.ColorFormat})=>{
34+
constchannels=getColorChannels(props.format)
35+
36+
return(
37+
<ColorPicker.Viewformat={props.format}>
38+
<HStackwrap="wrap"gap="2"w="full">
39+
<Foreach={channels}>
40+
{(channel)=>(
41+
<VStack
42+
key={channel}
43+
gap="1"
44+
flex="0 0 auto"
45+
minW="60px"
46+
align="stretch"
47+
>
48+
<ColorPicker.ChannelInput
49+
channel={channel}
50+
px="0"
51+
height="7"
52+
textStyle="xs"
53+
textAlign="center"
54+
/>
55+
<ColorPicker.ChannelTexttextAlign="center">
56+
{channel.charAt(0).toUpperCase()+channel.slice(1)}
57+
</ColorPicker.ChannelText>
58+
</VStack>
59+
)}
60+
</For>
61+
</HStack>
62+
</ColorPicker.View>
63+
)
64+
}
65+
66+
exportconstColorPickerExplorer=()=>{
67+
return(
68+
<ColorPicker.Root
69+
defaultValue={parseColor("#eb5e41")}
70+
open
71+
maxW="400px"
72+
alignItems="flex-start"
73+
>
74+
<ColorPicker.HiddenInput/>
75+
76+
<ColorPicker.Label>
77+
Pick a color:<ColorPicker.ValueText/>
78+
</ColorPicker.Label>
79+
80+
<ColorPicker.Control>
81+
<ColorPicker.Input/>
82+
<ColorPicker.Trigger>
83+
<ColorPicker.ValueSwatchboxSize="6"/>
84+
</ColorPicker.Trigger>
85+
</ColorPicker.Control>
86+
87+
<ColorPicker.Positioner>
88+
<ColorPicker.Content
89+
animation="none"
90+
shadow="md"
91+
padding="4"
92+
borderRadius="md"
93+
w="full"
94+
maxW="400px"
95+
bg="bg.subtle"
96+
>
97+
<VStackgap="4"w="full"align="stretch">
98+
<VStackgap="2"align="stretch">
99+
<ColorPicker.AreamaxH="150px">
100+
<ColorPicker.AreaBackground/>
101+
<ColorPicker.AreaThumb/>
102+
</ColorPicker.Area>
103+
</VStack>
104+
<ColorPicker.SlidersmaxH="120px"/>
105+
<HStackgap="3"wrap="wrap">
106+
<ColorPickerEyeDroppersize="xs"/>
107+
108+
<ColorPicker.FormatTriggerasChild>
109+
<IconButtonsize="xs"aria-label="Format"variant="outline">
110+
F
111+
</IconButton>
112+
</ColorPicker.FormatTrigger>
113+
114+
<ColorPicker.FormatSelect/>
115+
</HStack>
116+
117+
<HStackgap="2"w="full"flexWrap="wrap">
118+
<ChannelInputsformat="rgba"/>
119+
<ChannelInputsformat="hsla"/>
120+
<ChannelInputsformat="hsba"/>
121+
</HStack>
122+
<ColorPicker.SwatchGroup>
123+
<HStackgap="2"wrap="wrap">
124+
{swatches.map((color)=>(
125+
<ColorPicker.SwatchTriggerkey={color}value={color}>
126+
<ColorPicker.Swatchvalue={color}>
127+
<ColorPicker.SwatchIndicator>
128+
<LuCheck/>
129+
</ColorPicker.SwatchIndicator>
130+
</ColorPicker.Swatch>
131+
</ColorPicker.SwatchTrigger>
132+
))}
133+
134+
<ColorPicker.Trigger>
135+
<Square
136+
size="7"
137+
bgSize="cover"
138+
overflow="hidden"
139+
border="4px solid"
140+
borderImage="conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red) 1"
141+
>
142+
<LuPlus/>
143+
</Square>
144+
</ColorPicker.Trigger>
145+
</HStack>
146+
</ColorPicker.SwatchGroup>
147+
</VStack>
148+
</ColorPicker.Content>
149+
</ColorPicker.Positioner>
150+
</ColorPicker.Root>
151+
)
152+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp