Skip to content

Commit 854ba39

Browse files
cschroetercschroeter
committed
feat(fieldset): add preview of fieldset
1 parent ab9e0b5 commit 854ba39

File tree

16 files changed

+378
-12
lines changed

16 files changed

+378
-12
lines changed

‎components/react/src/components/stories/fieldset.stories.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import type { Meta } from '@storybook/react'
2+
import { OctagonAlertIcon } from 'lucide-react'
3+
import { Field } from '~/components/ui/field'
4+
import { Fieldset } from '~/components/ui/fieldset'
5+
import { Icon } from '~/components/ui/icon'
6+
import { Switch } from '~/components/ui/switch'
7+
8+
const meta: Meta = {
9+
title: 'Components/Fieldset',
10+
}
11+
12+
export default meta
13+
14+
export const Basic = () => {
15+
return (
16+
<Fieldset.Root>
17+
<Fieldset.Legend>Notifiations</Fieldset.Legend>
18+
<Fieldset.HelperText>Get notifcations when your are not online</Fieldset.HelperText>
19+
<Fieldset.Control>
20+
<Field.Root>
21+
<Switch size="sm">Comments</Switch>
22+
<Field.HelperText>
23+
Get notified when someone posts a comment on a posting.
24+
</Field.HelperText>
25+
</Field.Root>
26+
<Field.Root>
27+
<Switch size="sm">Candidates</Switch>
28+
<Field.HelperText>Get notified when a candidate applies for a job.</Field.HelperText>
29+
</Field.Root>
30+
</Fieldset.Control>
31+
<Fieldset.ErrorText>
32+
<Icon size="sm">
33+
<OctagonAlertIcon />
34+
</Icon>
35+
Something went wrong
36+
</Fieldset.ErrorText>
37+
</Fieldset.Root>
38+
)
39+
}
40+
41+
export const Invalid = () => {
42+
return (
43+
<Fieldset.Root invalid>
44+
<Fieldset.Legend>Notifiations</Fieldset.Legend>
45+
<Fieldset.HelperText>Get notifcations when your are not online</Fieldset.HelperText>
46+
<Fieldset.Control>
47+
<Field.Root>
48+
<Switch size="sm">Comments</Switch>
49+
<Field.HelperText>
50+
Get notified when someone posts a comment on a posting.
51+
</Field.HelperText>
52+
</Field.Root>
53+
<Field.Root>
54+
<Switch size="sm">Candidates</Switch>
55+
<Field.HelperText>Get notified when a candidate applies for a job.</Field.HelperText>
56+
</Field.Root>
57+
</Fieldset.Control>
58+
<Fieldset.ErrorText>
59+
<Icon size="sm">
60+
<OctagonAlertIcon />
61+
</Icon>
62+
Something went wrong
63+
</Fieldset.ErrorText>
64+
</Fieldset.Root>
65+
)
66+
}

‎components/react/src/components/ui/fieldset.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * as Fieldset from './styled/fieldset'

‎components/react/src/components/ui/styled/fieldset.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
'use client'
2+
import type { Assign, PolymorphicProps } from '@ark-ui/react'
3+
import { ark } from '@ark-ui/react/factory'
4+
import { Fieldset } from '@ark-ui/react/fieldset'
5+
import { type FieldsetVariantProps, fieldset } from 'styled-system/recipes'
6+
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
7+
import { createStyleContext } from './utils/create-style-context'
8+
9+
const { withProvider, withContext } = createStyleContext(fieldset)
10+
11+
export type RootProviderProps = ComponentProps<typeof RootProvider>
12+
export const RootProvider = withProvider<
13+
HTMLFieldSetElement,
14+
Assign<Assign<HTMLStyledProps<'fieldset'>, Fieldset.RootProviderBaseProps>, FieldsetVariantProps>
15+
>(Fieldset.Root, 'root')
16+
17+
export type RootProps = ComponentProps<typeof Root>
18+
export const Root = withProvider<
19+
HTMLFieldSetElement,
20+
Assign<Assign<HTMLStyledProps<'fieldset'>, Fieldset.RootBaseProps>, FieldsetVariantProps>
21+
>(Fieldset.Root, 'root')
22+
23+
export const ErrorText = withContext<
24+
HTMLSpanElement,
25+
Assign<HTMLStyledProps<'span'>, Fieldset.ErrorTextBaseProps>
26+
>(Fieldset.ErrorText, 'errorText')
27+
28+
export const HelperText = withContext<
29+
HTMLSpanElement,
30+
Assign<HTMLStyledProps<'span'>, Fieldset.HelperTextBaseProps>
31+
>(Fieldset.HelperText, 'helperText')
32+
33+
export const Legend = withContext<
34+
HTMLLegendElement,
35+
Assign<HTMLStyledProps<'legend'>, Fieldset.LegendBaseProps>
36+
>(Fieldset.Legend, 'legend')
37+
38+
export const Control = withContext<
39+
HTMLDivElement,
40+
Assign<HTMLStyledProps<'div'>, PolymorphicProps>
41+
>(ark.div, 'control')
42+
43+
export { FieldsetContext as Context } from '@ark-ui/react/fieldset'

‎components/react/src/demos/fieldset.demo.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { OctagonAlertIcon } from 'lucide-react'
2+
import { Field } from '~/components/ui/field'
3+
import { Fieldset } from '~/components/ui/fieldset'
4+
import { Icon } from '~/components/ui/icon'
5+
import { Switch } from '~/components/ui/switch'
6+
7+
export const Demo = (props: Fieldset.RootProps) => {
8+
return (
9+
<Fieldset.Root {...props}>
10+
<Fieldset.Legend>Notifiations</Fieldset.Legend>
11+
<Fieldset.HelperText>Get notifcations when your are not online</Fieldset.HelperText>
12+
<Fieldset.Control>
13+
<Field.Root>
14+
<Switch size="sm" defaultChecked>
15+
Comments
16+
</Switch>
17+
<Field.HelperText>When someone posts a comment</Field.HelperText>
18+
</Field.Root>
19+
<Field.Root>
20+
<Switch size="sm" defaultChecked>
21+
Candidates
22+
</Switch>
23+
<Field.HelperText>When someone applies for a job</Field.HelperText>
24+
</Field.Root>
25+
</Fieldset.Control>
26+
<Fieldset.ErrorText>
27+
<Icon size="sm">
28+
<OctagonAlertIcon />
29+
</Icon>
30+
Something went wrong
31+
</Fieldset.ErrorText>
32+
</Fieldset.Root>
33+
)
34+
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"lint": "turbo run lint",
1616
"typecheck": "turbo run typecheck",
1717
"sync:components": "rsync -av ./components/react/src/components/ui ./website/src/components",
18-
"sync:demos": "rsync -av --delte ./components/react/src/demos ./website/src/",
18+
"sync:demos": "rsync -av --delete ./components/react/src/demos ./website/src/",
1919
"sync:blocks": "rsync -av --delete ./components/react/src/plus/blocks ./website/src/components",
2020
"setup": "vc link -p park-ui -y && vc env pull --environment development website/.env"
2121
},

‎packages/panda/src/theme/recipes/field.ts

+5
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,12 @@ export const field = defineSlotRecipe({
2626
},
2727
},
2828
errorText: {
29+
alignItems: 'center',
2930
color: 'fg.error',
31+
display: 'inline-flex',
32+
gap: '2',
33+
gridArea: 'errorText',
34+
mt: '4',
3035
textStyle: 'sm',
3136
_disabled: {
3237
color: 'fg.disabled',

‎packages/panda/src/theme/recipes/fieldset.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { fieldsetAnatomy } from '@ark-ui/anatomy'
2+
import { defineSlotRecipe } from '@pandacss/dev'
3+
4+
export const fieldset = defineSlotRecipe({
5+
className: 'fieldset',
6+
slots: [...fieldsetAnatomy.keys(), 'control'],
7+
base: {
8+
root: {
9+
display: 'grid',
10+
borderTopWidth: '1px',
11+
py: '6',
12+
columnGap: '8',
13+
rowGap: '1.5',
14+
gridTemplateAreas: {
15+
base: `
16+
"legend legend"
17+
"helperText helperText"
18+
"control control"
19+
"errorText errorText"
20+
`,
21+
md: `
22+
"legend control"
23+
"helperText control"
24+
"errorText errorText"`,
25+
},
26+
gridTemplateRows: 'auto 1fr',
27+
gridTemplateColumns: '1fr auto',
28+
width: 'full',
29+
},
30+
control: {
31+
gridArea: 'control',
32+
display: 'grid',
33+
gap: '4',
34+
},
35+
legend: {
36+
color: 'fg.default',
37+
fontWeight: 'medium',
38+
gridArea: 'legend',
39+
textStyle: 'sm',
40+
float: 'left',
41+
'+ *': {
42+
clear: 'both',
43+
},
44+
_disabled: {
45+
color: 'fg.disabled',
46+
},
47+
},
48+
helperText: {
49+
color: 'fg.muted',
50+
gridArea: 'helperText',
51+
textStyle: 'sm',
52+
_disabled: {
53+
color: 'fg.disabled',
54+
},
55+
},
56+
errorText: {
57+
alignItems: 'center',
58+
color: 'fg.error',
59+
display: 'inline-flex',
60+
gap: '2',
61+
gridArea: 'errorText',
62+
mt: '4',
63+
textStyle: 'sm',
64+
_disabled: {
65+
color: 'fg.disabled',
66+
},
67+
},
68+
},
69+
})

‎packages/panda/src/theme/recipes/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { dialog } from './dialog'
1717
import { drawer } from './drawer'
1818
import { editable } from './editable'
1919
import { field } from './field'
20+
import { fieldset } from './fieldset'
2021
import { fileUpload } from './file-upload'
2122
import { formLabel } from './form-label'
2223
import { hoverCard } from './hover-card'
@@ -83,6 +84,7 @@ export const slotRecipes: Record<string, Partial<SlotRecipeConfig>> = {
8384
drawer,
8485
editable,
8586
field,
87+
fieldset,
8688
fileUpload,
8789
hoverCard,
8890
menu,

‎website/public/registry/latest/react/components/fieldset.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"id": "fieldset",
3+
"name": "Fieldset",
4+
"variants": [
5+
{
6+
"file": "styled/fieldset.tsx",
7+
"content": "'use client'\nimport type { Assign, PolymorphicProps } from '@ark-ui/react'\nimport { ark } from '@ark-ui/react/factory'\nimport { Fieldset } from '@ark-ui/react/fieldset'\nimport { type FieldsetVariantProps, fieldset } from 'styled-system/recipes'\nimport type { ComponentProps, HTMLStyledProps } from 'styled-system/types'\nimport { createStyleContext } from './utils/create-style-context'\n\nconst { withProvider, withContext } = createStyleContext(fieldset)\n\nexport type RootProviderProps = ComponentProps<typeof RootProvider>\nexport const RootProvider = withProvider<\n HTMLFieldSetElement,\n Assign<Assign<HTMLStyledProps<'fieldset'>, Fieldset.RootProviderBaseProps>, FieldsetVariantProps>\n>(Fieldset.Root, 'root')\n\nexport type RootProps = ComponentProps<typeof Root>\nexport const Root = withProvider<\n HTMLFieldSetElement,\n Assign<Assign<HTMLStyledProps<'fieldset'>, Fieldset.RootBaseProps>, FieldsetVariantProps>\n>(Fieldset.Root, 'root')\n\nexport const ErrorText = withContext<\n HTMLSpanElement,\n Assign<HTMLStyledProps<'span'>, Fieldset.ErrorTextBaseProps>\n>(Fieldset.ErrorText, 'errorText')\n\nexport const HelperText = withContext<\n HTMLSpanElement,\n Assign<HTMLStyledProps<'span'>, Fieldset.HelperTextBaseProps>\n>(Fieldset.HelperText, 'helperText')\n\nexport const Legend = withContext<\n HTMLLegendElement,\n Assign<HTMLStyledProps<'legend'>, Fieldset.LegendBaseProps>\n>(Fieldset.Legend, 'legend')\n\nexport const Control = withContext<\n HTMLDivElement,\n Assign<HTMLStyledProps<'div'>, PolymorphicProps>\n>(ark.div, 'control')\n\nexport { FieldsetContext as Context } from '@ark-ui/react/fieldset'\n"
8+
},
9+
{ "file": "fieldset.tsx", "content": "export * as Fieldset from './styled/fieldset'\n" }
10+
]
11+
}

‎website/public/registry/latest/react/components/index.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
{ "id": "drawer", "name": "Drawer" },
1818
{ "id": "editable", "name": "Editable" },
1919
{ "id": "field", "name": "Field" },
20+
{ "id": "fieldset", "name": "Fieldset" },
2021
{ "id": "file-upload", "name": "File Upload" },
2122
{ "id": "form-label", "name": "Form Label" },
2223
{ "id": "heading", "name": "Heading" },

‎website/src/components/live-preview.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client'
2-
import { ExternalLinkIcon, InfoIcon } from 'lucide-react'
2+
import { ExternalLinkIcon, InfoIcon, OctagonAlertIcon } from 'lucide-react'
33
import { Runner } from 'react-runner'
44
import { Box, Flex, HStack, Stack } from 'styled-system/jsx'
55
import { Alert } from '~/components/ui/alert'
@@ -8,16 +8,19 @@ import { Button } from '~/components/ui/button'
88
import { Checkbox } from '~/components/ui/checkbox'
99
import { Code } from '~/components/ui/code'
1010
import { Field } from '~/components/ui/field'
11+
import { Fieldset } from '~/components/ui/fieldset'
1112
import { Heading } from '~/components/ui/heading'
13+
import { Icon } from '~/components/ui/icon'
1214
import { Input } from '~/components/ui/input'
1315
import { Link } from '~/components/ui/link'
1416
import { Skeleton } from '~/components/ui/skeleton'
1517
import { Slider } from '~/components/ui/slider'
1618
import { Spinner } from '~/components/ui/spinner'
19+
import { Switch } from '~/components/ui/switch'
1720
import { Text } from '~/components/ui/text'
1821
import { Textarea } from '~/components/ui/textarea'
1922

20-
const icons = { InfoIcon, ExternalLinkIcon }
23+
const icons = { InfoIcon, ExternalLinkIcon, OctagonAlertIcon }
2124
const scope = {
2225
Alert,
2326
Avatar,
@@ -27,14 +30,17 @@ const scope = {
2730
Code,
2831
Flex,
2932
Field,
33+
Fieldset,
3034
Heading,
3135
HStack,
36+
Icon,
3237
Input,
3338
Link,
3439
Skeleton,
3540
Slider,
3641
Spinner,
3742
Stack,
43+
Switch,
3844
Text,
3945
Textarea,
4046
...icons,

‎website/src/components/ui/fieldset.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * as Fieldset from './styled/fieldset'

‎website/src/components/ui/styled/fieldset.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
'use client'
2+
import type { Assign, PolymorphicProps } from '@ark-ui/react'
3+
import { ark } from '@ark-ui/react/factory'
4+
import { Fieldset } from '@ark-ui/react/fieldset'
5+
import { type FieldsetVariantProps, fieldset } from 'styled-system/recipes'
6+
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
7+
import { createStyleContext } from './utils/create-style-context'
8+
9+
const { withProvider, withContext } = createStyleContext(fieldset)
10+
11+
export type RootProviderProps = ComponentProps<typeof RootProvider>
12+
export const RootProvider = withProvider<
13+
HTMLFieldSetElement,
14+
Assign<Assign<HTMLStyledProps<'fieldset'>, Fieldset.RootProviderBaseProps>, FieldsetVariantProps>
15+
>(Fieldset.Root, 'root')
16+
17+
export type RootProps = ComponentProps<typeof Root>
18+
export const Root = withProvider<
19+
HTMLFieldSetElement,
20+
Assign<Assign<HTMLStyledProps<'fieldset'>, Fieldset.RootBaseProps>, FieldsetVariantProps>
21+
>(Fieldset.Root, 'root')
22+
23+
export const ErrorText = withContext<
24+
HTMLSpanElement,
25+
Assign<HTMLStyledProps<'span'>, Fieldset.ErrorTextBaseProps>
26+
>(Fieldset.ErrorText, 'errorText')
27+
28+
export const HelperText = withContext<
29+
HTMLSpanElement,
30+
Assign<HTMLStyledProps<'span'>, Fieldset.HelperTextBaseProps>
31+
>(Fieldset.HelperText, 'helperText')
32+
33+
export const Legend = withContext<
34+
HTMLLegendElement,
35+
Assign<HTMLStyledProps<'legend'>, Fieldset.LegendBaseProps>
36+
>(Fieldset.Legend, 'legend')
37+
38+
export const Control = withContext<
39+
HTMLDivElement,
40+
Assign<HTMLStyledProps<'div'>, PolymorphicProps>
41+
>(ark.div, 'control')
42+
43+
export { FieldsetContext as Context } from '@ark-ui/react/fieldset'

0 commit comments

Comments
 (0)