From 3bec46192bf92e82a95a43ede277a2bbc19b7b70 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sat, 6 May 2023 23:53:46 +0700 Subject: [PATCH] Support state category in meta (#1584) Ref https://github.com/webstudio-is/webstudio-builder/issues/1518 Now default states should be spread per component. And states have category with fallback to "states". --- .../style-source/style-source-input.tsx | 101 +++++++++--------- .../src/components/blockquote.ws.tsx | 10 +- packages/react-sdk/src/components/body.ws.tsx | 10 +- packages/react-sdk/src/components/bold.ws.tsx | 10 +- packages/react-sdk/src/components/box.ws.ts | 10 +- .../react-sdk/src/components/button.ws.tsx | 11 +- .../src/components/checkbox-field.ws.tsx | 10 +- .../react-sdk/src/components/checkbox.ws.tsx | 10 +- packages/react-sdk/src/components/code.ws.tsx | 10 +- .../src/components/component-meta.ts | 11 ++ packages/react-sdk/src/components/form.ws.tsx | 10 +- .../react-sdk/src/components/heading.ws.tsx | 10 +- .../react-sdk/src/components/image.ws.tsx | 10 +- .../react-sdk/src/components/input.ws.tsx | 10 +- .../react-sdk/src/components/italic.ws.tsx | 10 +- .../react-sdk/src/components/label.ws.tsx | 10 +- packages/react-sdk/src/components/link.ws.tsx | 18 +++- .../react-sdk/src/components/list-item.ws.tsx | 10 +- packages/react-sdk/src/components/list.ws.tsx | 10 +- .../react-sdk/src/components/paragraph.ws.tsx | 10 +- .../src/components/radio-button-field.ws.tsx | 10 +- .../src/components/radio-button.ws.tsx | 10 +- .../react-sdk/src/components/separator.ws.tsx | 10 +- packages/react-sdk/src/components/span.ws.tsx | 10 +- .../react-sdk/src/components/subscript.ws.tsx | 10 +- .../src/components/superscript.ws.tsx | 10 +- .../src/components/text-block.ws.tsx | 10 +- .../react-sdk/src/components/textarea.ws.tsx | 10 +- packages/react-sdk/src/index.ts | 1 + 29 files changed, 226 insertions(+), 156 deletions(-) diff --git a/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx b/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx index d3fed9033b..57014b312f 100644 --- a/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx +++ b/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx @@ -42,7 +42,7 @@ import { type ReactNode, } from "react"; import { mergeRefs } from "@react-aria/utils"; -import type { ComponentState } from "@webstudio-is/react-sdk"; +import { type ComponentState, stateCategories } from "@webstudio-is/react-sdk"; import { type ItemSource, menuCssVars, StyleSource } from "./style-source"; import { useSortable } from "./use-sortable"; import { matchSorter } from "match-sorter"; @@ -263,18 +263,10 @@ const markAddedValues = ( return items.map((item) => ({ ...item, isAdded: valueIds.has(item.id) })); }; -const userActionStates = [ - ":hover", - ":active", - ":focus", - ":focus-visible", - ":focus-within", -]; - const renderMenuItems = (props: { selectedItemSelector: undefined | ItemSelector; item: IntermediateItem; - states: { selector: string; label: string }[]; + states: ComponentState[]; onSelect?: (itemSelector: ItemSelector) => void; onEdit?: (itemId: IntermediateItem["id"]) => void; onDuplicate?: (itemId: IntermediateItem["id"]) => void; @@ -328,40 +320,55 @@ const renderMenuItems = (props: { )} - - States - {props.states.map(({ label, selector }) => ( - { + const categoryStates = props.states.filter( + ({ category }) => (category ?? "states") === currentCategory + ); + // prevent rendering empty category + if (categoryStates.length === 0) { + return; + } + return ( + <> + + + {humanizeString(currentCategory)} + + {categoryStates.map(({ label, selector }) => ( + + ) : props.item.states.includes(selector) ? ( + + ) : null } - /> - ) : props.item.states.includes(selector) ? ( - - ) : null - } - onSelect={() => - props.onSelect?.({ - styleSourceId: props.item.id, - // toggle state selection - state: - props.selectedItemSelector?.state === selector - ? undefined - : selector, - }) - } - > - {label} - - ))} + onSelect={() => + props.onSelect?.({ + styleSourceId: props.item.id, + // toggle state selection + state: + props.selectedItemSelector?.state === selector + ? undefined + : selector, + }) + } + > + {label} + + ))} + + ); + })} ); }; @@ -422,13 +429,7 @@ export const StyleSourceInput = ( let hasNewTokenItem = false; - const states = [ - ...userActionStates.map((selector) => ({ - selector, - label: humanizeString(selector), - })), - ...(props.componentStates ?? []), - ]; + const states = props.componentStates ?? []; return ( diff --git a/packages/react-sdk/src/components/blockquote.ws.tsx b/packages/react-sdk/src/components/blockquote.ws.tsx index ad12a17b29..f80fdea74b 100644 --- a/packages/react-sdk/src/components/blockquote.ws.tsx +++ b/packages/react-sdk/src/components/blockquote.ws.tsx @@ -1,9 +1,10 @@ import { BlockquoteIcon } from "@webstudio-is/icons"; import type { defaultTag } from "./blockquote"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/blockquote.props"; @@ -63,6 +64,7 @@ export const meta: WsComponentMeta = { type: "rich-text", label: "Blockquote", Icon: BlockquoteIcon, + states: defaultStates, presetStyle, children: [{ type: "text", value: "Blockquote you can edit" }], }; diff --git a/packages/react-sdk/src/components/body.ws.tsx b/packages/react-sdk/src/components/body.ws.tsx index ae67801b96..ea1be4d51b 100644 --- a/packages/react-sdk/src/components/body.ws.tsx +++ b/packages/react-sdk/src/components/body.ws.tsx @@ -1,9 +1,10 @@ import { BodyIcon } from "@webstudio-is/icons"; import { body } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/body.props"; import type { defaultTag } from "./body"; @@ -41,6 +42,7 @@ export const meta: WsComponentMeta = { type: "container", label: "Body", Icon: BodyIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/bold.ws.tsx b/packages/react-sdk/src/components/bold.ws.tsx index caa57f810a..6ebad2a492 100644 --- a/packages/react-sdk/src/components/bold.ws.tsx +++ b/packages/react-sdk/src/components/bold.ws.tsx @@ -1,8 +1,9 @@ import { BoldIcon } from "@webstudio-is/icons"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/bold.props"; import { b } from "../css/normalize"; @@ -16,6 +17,7 @@ export const meta: WsComponentMeta = { type: "rich-text-child", label: "Bold Text", Icon: BoldIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/box.ws.ts b/packages/react-sdk/src/components/box.ws.ts index 74c6594a63..9fea3c4a79 100644 --- a/packages/react-sdk/src/components/box.ws.ts +++ b/packages/react-sdk/src/components/box.ws.ts @@ -1,8 +1,9 @@ import { BoxIcon } from "@webstudio-is/icons"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/box.props"; import type { Box } from "./box"; @@ -40,6 +41,7 @@ export const meta: WsComponentMeta = { type: "container", label: "Box", Icon: BoxIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/button.ws.tsx b/packages/react-sdk/src/components/button.ws.tsx index 44946cdca7..074b7f130d 100644 --- a/packages/react-sdk/src/components/button.ws.tsx +++ b/packages/react-sdk/src/components/button.ws.tsx @@ -1,9 +1,10 @@ import { ButtonElementIcon } from "@webstudio-is/icons"; import { button } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/button.props"; import type { defaultTag } from "./button"; @@ -19,7 +20,7 @@ export const meta: WsComponentMeta = { Icon: ButtonElementIcon, presetStyle, states: [ - { selector: ":active", label: "Active" }, + ...defaultStates, { selector: ":disabled", label: "Disabled" }, { selector: ":enabled", label: "Enabled" }, ], diff --git a/packages/react-sdk/src/components/checkbox-field.ws.tsx b/packages/react-sdk/src/components/checkbox-field.ws.tsx index 9bfd62f365..d86582f3af 100644 --- a/packages/react-sdk/src/components/checkbox-field.ws.tsx +++ b/packages/react-sdk/src/components/checkbox-field.ws.tsx @@ -1,8 +1,9 @@ import { CheckboxCheckedIcon } from "@webstudio-is/icons"; -import type { - WsComponentMeta, - WsComponentPropsMeta, - PresetStyle, +import { + type WsComponentMeta, + type WsComponentPropsMeta, + type PresetStyle, + defaultStates, } from "./component-meta"; import { props } from "./__generated__/checkbox-field.props"; import type { defaultTag } from "./checkbox-field"; @@ -20,6 +21,7 @@ export const meta: WsComponentMeta = { type: "container", label: "Checkbox Field", Icon: CheckboxCheckedIcon, + states: defaultStates, presetStyle, children: [ { type: "instance", component: "Checkbox", props: [], children: [] }, diff --git a/packages/react-sdk/src/components/checkbox.ws.tsx b/packages/react-sdk/src/components/checkbox.ws.tsx index ed697649e8..dc9c70a5ed 100644 --- a/packages/react-sdk/src/components/checkbox.ws.tsx +++ b/packages/react-sdk/src/components/checkbox.ws.tsx @@ -1,8 +1,9 @@ import { CheckboxCheckedIcon } from "@webstudio-is/icons"; -import type { - WsComponentMeta, - WsComponentPropsMeta, - PresetStyle, +import { + type WsComponentMeta, + type WsComponentPropsMeta, + type PresetStyle, + defaultStates, } from "./component-meta"; import type { defaultTag } from "./checkbox"; import { input } from "../css/normalize"; @@ -24,6 +25,7 @@ export const meta: WsComponentMeta = { Icon: CheckboxCheckedIcon, presetStyle, states: [ + ...defaultStates, { selector: ":checked", label: "Checked" }, { selector: ":required", label: "Required" }, { selector: ":optional", label: "Optional" }, diff --git a/packages/react-sdk/src/components/code.ws.tsx b/packages/react-sdk/src/components/code.ws.tsx index 03548c1a3c..bae824aab9 100644 --- a/packages/react-sdk/src/components/code.ws.tsx +++ b/packages/react-sdk/src/components/code.ws.tsx @@ -1,8 +1,9 @@ import { CodeIcon } from "@webstudio-is/icons"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { type defaultTag, displayVarNamespace } from "./code"; import { props } from "./__generated__/code.props"; @@ -39,6 +40,7 @@ export const meta: WsComponentMeta = { type: "rich-text", label: "Code", Icon: CodeIcon, + states: defaultStates, presetStyle, children: [{ type: "text", value: "Code you can edit" }], }; diff --git a/packages/react-sdk/src/components/component-meta.ts b/packages/react-sdk/src/components/component-meta.ts index b91268f0d4..963fcc7b63 100644 --- a/packages/react-sdk/src/components/component-meta.ts +++ b/packages/react-sdk/src/components/component-meta.ts @@ -25,13 +25,24 @@ export const componentCategories = [ "forms", ] as const; +export const stateCategories = ["states", "component-states"] as const; + export const ComponentState = z.object({ + category: z.enum(stateCategories).optional(), selector: z.string(), label: z.string(), }); export type ComponentState = z.infer; +export const defaultStates: ComponentState[] = [ + { selector: ":hover", label: "Hover" }, + { selector: ":active", label: "Active" }, + { selector: ":focus", label: "Focus" }, + { selector: ":focus-visible", label: "Focus Visible" }, + { selector: ":focus-within", label: "Focus Within" }, +]; + const WsComponentMeta = z.object({ category: z.enum(componentCategories).optional(), // container - can accept other components with dnd diff --git a/packages/react-sdk/src/components/form.ws.tsx b/packages/react-sdk/src/components/form.ws.tsx index f720c329e8..3b3f980c1a 100644 --- a/packages/react-sdk/src/components/form.ws.tsx +++ b/packages/react-sdk/src/components/form.ws.tsx @@ -1,9 +1,10 @@ import { FormIcon } from "@webstudio-is/icons"; import { form } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./form"; import { props } from "./__generated__/form.props"; @@ -20,6 +21,7 @@ export const meta: WsComponentMeta = { type: "container", label: "Form", Icon: FormIcon, + states: defaultStates, presetStyle, children: [ { diff --git a/packages/react-sdk/src/components/heading.ws.tsx b/packages/react-sdk/src/components/heading.ws.tsx index 298d2119a7..926c223177 100644 --- a/packages/react-sdk/src/components/heading.ws.tsx +++ b/packages/react-sdk/src/components/heading.ws.tsx @@ -1,10 +1,11 @@ import { HeadingIcon } from "@webstudio-is/icons"; import type { ComponentProps } from "react"; import { h1, h2, h3, h4, h5, h6 } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { Heading } from "./heading"; import { props } from "./__generated__/heading.props"; @@ -26,6 +27,7 @@ export const meta: WsComponentMeta = { label: "Heading", Icon: HeadingIcon, children: [{ type: "text", value: "Heading you can edit" }], + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/image.ws.tsx b/packages/react-sdk/src/components/image.ws.tsx index abd17a9f15..217f6ef0c3 100644 --- a/packages/react-sdk/src/components/image.ws.tsx +++ b/packages/react-sdk/src/components/image.ws.tsx @@ -1,9 +1,10 @@ import { ImageIcon } from "@webstudio-is/icons"; import { img } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./image"; import { props } from "./__generated__/image.props"; @@ -31,6 +32,7 @@ export const meta: WsComponentMeta = { type: "embed", label: "Image", Icon: ImageIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/input.ws.tsx b/packages/react-sdk/src/components/input.ws.tsx index 55265d2a8c..a75aaabaff 100644 --- a/packages/react-sdk/src/components/input.ws.tsx +++ b/packages/react-sdk/src/components/input.ws.tsx @@ -1,9 +1,10 @@ import { FormTextFieldIcon } from "@webstudio-is/icons"; import { input } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./input"; import { props } from "./__generated__/input.props"; @@ -19,6 +20,7 @@ export const meta: WsComponentMeta = { Icon: FormTextFieldIcon, presetStyle, states: [ + ...defaultStates, { selector: "::placeholder", label: "Placeholder" }, { selector: ":valid", label: "Valid" }, { selector: ":invalid", label: "Invalid" }, diff --git a/packages/react-sdk/src/components/italic.ws.tsx b/packages/react-sdk/src/components/italic.ws.tsx index df53561b4c..3fe9a05c31 100644 --- a/packages/react-sdk/src/components/italic.ws.tsx +++ b/packages/react-sdk/src/components/italic.ws.tsx @@ -1,9 +1,10 @@ import { TextItalicIcon } from "@webstudio-is/icons"; import type { defaultTag } from "./italic"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/italic.props"; import { i } from "../css/normalize"; @@ -22,6 +23,7 @@ export const meta: WsComponentMeta = { type: "rich-text-child", label: "Italic Text", Icon: TextItalicIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/label.ws.tsx b/packages/react-sdk/src/components/label.ws.tsx index f5fc0152aa..5b25ff4d7a 100644 --- a/packages/react-sdk/src/components/label.ws.tsx +++ b/packages/react-sdk/src/components/label.ws.tsx @@ -1,8 +1,9 @@ import { TextBlockIcon } from "@webstudio-is/icons"; -import type { - WsComponentMeta, - WsComponentPropsMeta, - PresetStyle, +import { + type WsComponentMeta, + type WsComponentPropsMeta, + type PresetStyle, + defaultStates, } from "./component-meta"; import { props } from "./__generated__/label.props"; import type { defaultTag } from "./label"; @@ -20,6 +21,7 @@ export const meta: WsComponentMeta = { type: "rich-text", label: "Input Label", Icon: TextBlockIcon, + states: defaultStates, presetStyle, children: [{ type: "text", value: "Form Label" }], }; diff --git a/packages/react-sdk/src/components/link.ws.tsx b/packages/react-sdk/src/components/link.ws.tsx index fd5815ca20..29182c1dd9 100644 --- a/packages/react-sdk/src/components/link.ws.tsx +++ b/packages/react-sdk/src/components/link.ws.tsx @@ -1,9 +1,10 @@ import { LinkIcon } from "@webstudio-is/icons"; import { a } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./link"; import { props } from "./__generated__/link.props"; @@ -28,7 +29,14 @@ export const meta: WsComponentMeta = { label: "Link Text", Icon: LinkIcon, presetStyle, - states: [{ selector: "[aria-current=page]", label: "Current page" }], + states: [ + ...defaultStates, + { + category: "component-states", + selector: "[aria-current=page]", + label: "Current page", + }, + ], children: [{ type: "text", value: "Link text you can edit" }], }; diff --git a/packages/react-sdk/src/components/list-item.ws.tsx b/packages/react-sdk/src/components/list-item.ws.tsx index 02689e88a9..b5af58e418 100644 --- a/packages/react-sdk/src/components/list-item.ws.tsx +++ b/packages/react-sdk/src/components/list-item.ws.tsx @@ -1,9 +1,10 @@ import { ListItemIcon } from "@webstudio-is/icons"; import { li } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./list-item"; import { props } from "./__generated__/list-item.props"; @@ -19,6 +20,7 @@ export const meta: WsComponentMeta = { label: "List Item", Icon: ListItemIcon, children: [{ type: "text", value: "List Item you can edit" }], + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/list.ws.tsx b/packages/react-sdk/src/components/list.ws.tsx index 605735d142..672411c544 100644 --- a/packages/react-sdk/src/components/list.ws.tsx +++ b/packages/react-sdk/src/components/list.ws.tsx @@ -1,8 +1,9 @@ import { ListIcon } from "@webstudio-is/icons"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/list.props"; import type { ListTag } from "./list"; @@ -46,6 +47,7 @@ export const meta: WsComponentMeta = { type: "container", label: "List", Icon: ListIcon, + states: defaultStates, presetStyle, children: [], }; diff --git a/packages/react-sdk/src/components/paragraph.ws.tsx b/packages/react-sdk/src/components/paragraph.ws.tsx index 51866a2864..b839011802 100644 --- a/packages/react-sdk/src/components/paragraph.ws.tsx +++ b/packages/react-sdk/src/components/paragraph.ws.tsx @@ -1,9 +1,10 @@ import { TextAlignLeftIcon } from "@webstudio-is/icons"; import { p } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./paragraph"; import { props } from "./__generated__/paragraph.props"; @@ -18,6 +19,7 @@ export const meta: WsComponentMeta = { label: "Paragraph", Icon: TextAlignLeftIcon, children: [{ type: "text", value: "Pragraph you can edit" }], + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/radio-button-field.ws.tsx b/packages/react-sdk/src/components/radio-button-field.ws.tsx index 27ea7a9b6a..007ed88a1f 100644 --- a/packages/react-sdk/src/components/radio-button-field.ws.tsx +++ b/packages/react-sdk/src/components/radio-button-field.ws.tsx @@ -1,8 +1,9 @@ import { RadioCheckedIcon } from "@webstudio-is/icons"; -import type { - WsComponentMeta, - WsComponentPropsMeta, - PresetStyle, +import { + type WsComponentMeta, + type WsComponentPropsMeta, + type PresetStyle, + defaultStates, } from "./component-meta"; import { props } from "./__generated__/radio-button-field.props"; import type { defaultTag } from "./radio-button-field"; @@ -20,6 +21,7 @@ export const meta: WsComponentMeta = { type: "container", label: "Radio Button Field", Icon: RadioCheckedIcon, + states: defaultStates, presetStyle, children: [ { type: "instance", component: "RadioButton", props: [], children: [] }, diff --git a/packages/react-sdk/src/components/radio-button.ws.tsx b/packages/react-sdk/src/components/radio-button.ws.tsx index d56bc28850..4d37162231 100644 --- a/packages/react-sdk/src/components/radio-button.ws.tsx +++ b/packages/react-sdk/src/components/radio-button.ws.tsx @@ -1,8 +1,9 @@ import { RadioCheckedIcon } from "@webstudio-is/icons"; -import type { - WsComponentMeta, - WsComponentPropsMeta, - PresetStyle, +import { + type WsComponentMeta, + type WsComponentPropsMeta, + type PresetStyle, + defaultStates, } from "./component-meta"; import type { defaultTag } from "./radio-button"; import { input } from "../css/normalize"; @@ -24,6 +25,7 @@ export const meta: WsComponentMeta = { Icon: RadioCheckedIcon, presetStyle, states: [ + ...defaultStates, { selector: ":checked", label: "Checked" }, { selector: ":required", label: "Required" }, { selector: ":optional", label: "Optional" }, diff --git a/packages/react-sdk/src/components/separator.ws.tsx b/packages/react-sdk/src/components/separator.ws.tsx index 4023476fca..0bd44bd5c7 100644 --- a/packages/react-sdk/src/components/separator.ws.tsx +++ b/packages/react-sdk/src/components/separator.ws.tsx @@ -1,8 +1,9 @@ import { DashIcon } from "@webstudio-is/icons"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/separator.props"; import type { defaultTag } from "./separator"; @@ -44,6 +45,7 @@ export const meta: WsComponentMeta = { type: "embed", label: "Separator", Icon: DashIcon, + states: defaultStates, presetStyle, children: [], }; diff --git a/packages/react-sdk/src/components/span.ws.tsx b/packages/react-sdk/src/components/span.ws.tsx index f01c77c85d..0e736ba77f 100644 --- a/packages/react-sdk/src/components/span.ws.tsx +++ b/packages/react-sdk/src/components/span.ws.tsx @@ -1,9 +1,10 @@ import { PaintBrushIcon } from "@webstudio-is/icons"; import { span } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./span"; import { props } from "./__generated__/span.props"; @@ -16,6 +17,7 @@ export const meta: WsComponentMeta = { type: "rich-text-child", label: "Styled Text", Icon: PaintBrushIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/subscript.ws.tsx b/packages/react-sdk/src/components/subscript.ws.tsx index e3b2bfb3f9..35fe8b11c5 100644 --- a/packages/react-sdk/src/components/subscript.ws.tsx +++ b/packages/react-sdk/src/components/subscript.ws.tsx @@ -1,9 +1,10 @@ import { SubscriptIcon } from "@webstudio-is/icons"; import { sub } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./subscript"; import { props } from "./__generated__/subscript.props"; @@ -16,6 +17,7 @@ export const meta: WsComponentMeta = { type: "rich-text-child", label: "Subscript Text", Icon: SubscriptIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/superscript.ws.tsx b/packages/react-sdk/src/components/superscript.ws.tsx index a8c8a2601f..d6f2bee7ea 100644 --- a/packages/react-sdk/src/components/superscript.ws.tsx +++ b/packages/react-sdk/src/components/superscript.ws.tsx @@ -1,9 +1,10 @@ import { SuperscriptIcon } from "@webstudio-is/icons"; import { sup } from "../css/normalize"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import type { defaultTag } from "./superscript"; import { props } from "./__generated__/superscript.props"; @@ -16,6 +17,7 @@ export const meta: WsComponentMeta = { type: "rich-text-child", label: "Superscript Text", Icon: SuperscriptIcon, + states: defaultStates, presetStyle, }; diff --git a/packages/react-sdk/src/components/text-block.ws.tsx b/packages/react-sdk/src/components/text-block.ws.tsx index 135ba07651..49849006c7 100644 --- a/packages/react-sdk/src/components/text-block.ws.tsx +++ b/packages/react-sdk/src/components/text-block.ws.tsx @@ -1,8 +1,9 @@ import { TextBlockIcon } from "@webstudio-is/icons"; -import type { - PresetStyle, - WsComponentMeta, - WsComponentPropsMeta, +import { + defaultStates, + type PresetStyle, + type WsComponentMeta, + type WsComponentPropsMeta, } from "./component-meta"; import { props } from "./__generated__/text-block.props"; import type { defaultTag } from "./text-block"; @@ -23,6 +24,7 @@ export const meta: WsComponentMeta = { type: "rich-text", label: "Text Block", Icon: TextBlockIcon, + states: defaultStates, presetStyle, children: [{ type: "text", value: "Block of text you can edit" }], }; diff --git a/packages/react-sdk/src/components/textarea.ws.tsx b/packages/react-sdk/src/components/textarea.ws.tsx index 81f1148b37..1e7d50a61a 100644 --- a/packages/react-sdk/src/components/textarea.ws.tsx +++ b/packages/react-sdk/src/components/textarea.ws.tsx @@ -1,9 +1,10 @@ import { FormTextAreaIcon } from "@webstudio-is/icons"; import { textarea } from "../css/normalize"; -import type { - WsComponentMeta, - WsComponentPropsMeta, - PresetStyle, +import { + type WsComponentMeta, + type WsComponentPropsMeta, + type PresetStyle, + defaultStates, } from "./component-meta"; import type { defaultTag } from "./textarea"; import { props } from "./__generated__/textarea.props"; @@ -23,6 +24,7 @@ export const meta: WsComponentMeta = { Icon: FormTextAreaIcon, presetStyle, states: [ + ...defaultStates, { selector: "::placeholder", label: "Placeholder" }, { selector: ":valid", label: "Valid" }, { selector: ":invalid", label: "Invalid" }, diff --git a/packages/react-sdk/src/index.ts b/packages/react-sdk/src/index.ts index bc439268c5..0e435e6ef4 100644 --- a/packages/react-sdk/src/index.ts +++ b/packages/react-sdk/src/index.ts @@ -15,5 +15,6 @@ export { type WsComponentMeta, type ComponentState, componentCategories, + stateCategories, } from "./components/component-meta"; export * from "./embed-template";