Skip to content

Commit b9e2084

Browse files
TrySoundTrySound
authored
refactor: rewrite radio group and select templates with jsx (webstudio-is#4697)
- got rid of variables and expressions in template, both use defaultValue - returned back radix label in checkbox template
1 parent 517c048 commit b9e2084

6 files changed

Lines changed: 246 additions & 322 deletions

File tree

‎packages/sdk-components-react-radix/src/checkbox.template.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const meta: TemplateMeta = {
2323
"Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
2424
order: 101,
2525
template: (
26-
<$.Label
26+
<radix.Label
2727
ws:label="Checkbox Field"
2828
ws:style={css`
2929
display: flex;
@@ -72,6 +72,6 @@ export const meta: TemplateMeta = {
7272
<$.Text ws:label="Checkbox Label" tag="span">
7373
{new PlaceholderValue("Checkbox")}
7474
</$.Text>
75-
</$.Label>
75+
</radix.Label>
7676
),
7777
};

‎packages/sdk-components-react-radix/src/radio-group.template.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import {
2+
$,
3+
css,
4+
PlaceholderValue,
5+
type TemplateMeta,
6+
} from "@webstudio-is/template";
7+
import { DotIcon } from "@webstudio-is/icons/svg";
8+
import { radix } from "./shared/proxy";
9+
import {
10+
borderRadius,
11+
borderWidth,
12+
boxShadow,
13+
colors,
14+
height,
15+
opacity,
16+
spacing,
17+
width,
18+
} from "./shared/theme";
19+
20+
const createRadioGroupItem = ({
21+
value,
22+
label,
23+
}: {
24+
value: string;
25+
label: string;
26+
}) => (
27+
<radix.Label
28+
// flex items-center space-x-2
29+
ws:style={css`
30+
display: flex;
31+
align-items: center;
32+
gap: ${spacing[2]};
33+
`}
34+
>
35+
<radix.RadioGroupItem
36+
value={value}
37+
// aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
38+
// focus:outline-none
39+
// focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
40+
// disabled:cursor-not-allowed disabled:opacity-50
41+
ws:style={css`
42+
aspect-ratio: 1 / 1;
43+
height: ${height[4]};
44+
width: ${width[4]};
45+
border-radius: ${borderRadius.full};
46+
border: ${borderWidth.DEFAULT} solid ${colors.primary};
47+
color: ${colors.primary};
48+
&:focus-visible {
49+
outline: none;
50+
box-shadow: ${boxShadow.ring};
51+
}
52+
&:disabled {
53+
cursor: not-allowed;
54+
opacity: ${opacity[50]};
55+
}
56+
`}
57+
>
58+
<radix.RadioGroupIndicator>
59+
<$.HtmlEmbed ws:label="Indicator Icon" code={DotIcon} />
60+
</radix.RadioGroupIndicator>
61+
</radix.RadioGroupItem>
62+
<$.Text>{new PlaceholderValue(label)}</$.Text>
63+
</radix.Label>
64+
);
65+
66+
export const meta: TemplateMeta = {
67+
category: "radix",
68+
order: 100,
69+
description:
70+
"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
71+
template: (
72+
<radix.RadioGroup
73+
// grid gap-2
74+
ws:style={css`
75+
display: flex;
76+
flex-direction: column;
77+
gap: ${spacing[2]};
78+
`}
79+
>
80+
{createRadioGroupItem({ value: "default", label: "Default" })}
81+
{createRadioGroupItem({ value: "comfortable", label: "Comfortable" })}
82+
{createRadioGroupItem({ value: "compact", label: "Compact" })}
83+
</radix.RadioGroup>
84+
),
85+
};

‎packages/sdk-components-react-radix/src/radio-group.ws.ts‎

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,23 @@
1-
import {
2-
ItemIcon,
3-
RadioGroupIcon,
4-
DotIcon,
5-
TriggerIcon,
6-
} from "@webstudio-is/icons/svg";
1+
import { ItemIcon, RadioGroupIcon, TriggerIcon } from "@webstudio-is/icons/svg";
72
import {
83
defaultStates,
9-
WsEmbedTemplate,
104
type WsComponentMeta,
115
type WsComponentPropsMeta,
126
} from "@webstudio-is/react-sdk";
137
import { button, div, span } from "@webstudio-is/sdk/normalize.css";
14-
import * as tc from "./theme/tailwind-classes";
158
import { buttonReset } from "./theme/styles";
169
import {
1710
propsRadioGroup,
1811
propsRadioGroupIndicator,
1912
propsRadioGroupItem,
2013
} from "./__generated__/radio-group.props";
2114

22-
const createRadioGroupItem = ({
23-
value,
24-
label,
25-
}: {
26-
value: string;
27-
label: string;
28-
}): WsEmbedTemplate[number] => ({
29-
type: "instance",
30-
component: "Label",
31-
// flex items-center space-x-2
32-
styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
33-
children: [
34-
{
35-
type: "instance",
36-
component: "RadioGroupItem",
37-
props: [{ name: "value", type: "string", value }],
38-
// aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
39-
// focus:outline-none
40-
// focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
41-
// disabled:cursor-not-allowed disabled:opacity-50
42-
styles: [
43-
tc.aspect("square"),
44-
tc.h(4),
45-
tc.w(4),
46-
tc.rounded("full"),
47-
tc.border(),
48-
tc.border("primary"),
49-
tc.text("primary"),
50-
tc.focusVisible(
51-
[tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
52-
),
53-
tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
54-
].flat(),
55-
children: [
56-
{
57-
type: "instance",
58-
component: "RadioGroupIndicator",
59-
children: [
60-
{
61-
type: "instance",
62-
component: "HtmlEmbed",
63-
label: "Indicator Icon",
64-
props: [
65-
{
66-
type: "string",
67-
name: "code",
68-
value: DotIcon,
69-
},
70-
],
71-
children: [],
72-
},
73-
],
74-
},
75-
],
76-
},
77-
{
78-
type: "instance",
79-
component: "Text",
80-
children: [{ type: "text", value: label, placeholder: true }],
81-
},
82-
],
83-
});
84-
8515
export const metaRadioGroup: WsComponentMeta = {
86-
category: "radix",
87-
order: 100,
8816
type: "container",
8917
constraints: {
9018
relation: "descendant",
9119
component: { $eq: "RadioGroupItem" },
9220
},
93-
description:
94-
"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
9521
icon: RadioGroupIcon,
9622
states: [
9723
...defaultStates,
@@ -109,44 +35,9 @@ export const metaRadioGroup: WsComponentMeta = {
10935
presetStyle: {
11036
div,
11137
},
112-
template: [
113-
{
114-
type: "instance",
115-
component: "RadioGroup",
116-
variables: {
117-
radioGroupValue: { initialValue: "" },
118-
},
119-
// grid gap-2
120-
styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
121-
props: [
122-
{
123-
type: "expression",
124-
name: "value",
125-
code: "radioGroupValue",
126-
},
127-
{
128-
name: "onValueChange",
129-
type: "action",
130-
value: [
131-
{
132-
type: "execute",
133-
args: ["value"],
134-
code: `radioGroupValue = value`,
135-
},
136-
],
137-
},
138-
],
139-
children: [
140-
createRadioGroupItem({ value: "default", label: "Default" }),
141-
createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
142-
createRadioGroupItem({ value: "compact", label: "Compact" }),
143-
],
144-
},
145-
],
14638
};
14739

14840
export const metaRadioGroupItem: WsComponentMeta = {
149-
category: "hidden",
15041
type: "container",
15142
constraints: [
15243
{
@@ -166,7 +57,6 @@ export const metaRadioGroupItem: WsComponentMeta = {
16657
};
16758

16859
export const metaRadioGroupIndicator: WsComponentMeta = {
169-
category: "hidden",
17060
type: "container",
17161
icon: TriggerIcon,
17262
constraints: {

0 commit comments

Comments
 (0)