@webstudio-is/react-sdk 0.61.0 → 0.63.0

package/src/components/radio-button.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "input";
+
+export const RadioButton = forwardRef<
+  ElementRef<typeof defaultTag>,
+  Omit<ComponentProps<typeof defaultTag>, "type">
+  // Make sure children are not passed down to an input, because this will result in error.
+>(({ children: _children, ...props }, ref) => (
+  <input {...props} type="radio" ref={ref} />
+));
+
+RadioButton.displayName = "RadioButton";

package/src/components/radio-button.ws.tsx

@@ -0,0 +1,42 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "./component-meta";
+import type { defaultTag } from "./radio-button";
+import { input } from "../css/normalize";
+import { props } from "./__generated__/radio-button.props";
+
+const presetStyle = {
+  input: [
+    ...input,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  type: "control",
+  label: "Radio Button",
+  Icon: RadioCheckedIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":checked", label: "Checked" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["name"],
+};

package/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: [],
 };

package/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,
 };
 

package/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,
 };
 

package/src/components/success-message.tsx

@@ -0,0 +1,10 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "div";
+
+export const SuccessMessage = forwardRef<
+  ElementRef<typeof defaultTag>,
+  ComponentProps<typeof defaultTag>
+>((props, ref) => <div {...props} ref={ref} />);
+
+SuccessMessage.displayName = "SuccessMessage";

package/src/components/success-message.ws.tsx

@@ -0,0 +1,24 @@
+import { BoxIcon } from "@webstudio-is/icons";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+  PresetStyle,
+} from "./component-meta";
+import { props } from "./__generated__/success-message.props";
+import { div } from "../css/normalize";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  label: "Success Message",
+  Icon: BoxIcon,
+  presetStyle,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/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,
 };
 

package/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" }],
 };

package/src/components/textarea.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "textarea";
+
+export const Textarea = forwardRef<
+  ElementRef<typeof defaultTag>,
+  ComponentProps<typeof defaultTag>
+  // Make sure children are not passed down to an textarea, because this will result in error.
+>(({ children: _children, ...props }, ref) => (
+  <textarea {...props} ref={ref} />
+));
+
+Textarea.displayName = "Textarea";

package/src/components/textarea.ws.tsx

@@ -0,0 +1,43 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { textarea } from "../css/normalize";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "./component-meta";
+import type { defaultTag } from "./textarea";
+import { props } from "./__generated__/textarea.props";
+
+const presetStyle = {
+  textarea: [
+    ...textarea,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "forms",
+  type: "control",
+  label: "Text Area",
+  Icon: FormTextAreaIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["name", "placeholder", "required", "autoFocus"],
+};

package/src/css/normalize.ts

@@ -16,9 +16,11 @@
  */
 
 // webstudio custom opinionated presets
-import { borders } from "./presets";
+import { borders, linkColors } from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
+export type Styles = EmbedTemplateStyleDecl[];
+
 /**
 Use a better box model (opinionated).
 */
@@ -35,7 +37,7 @@ const boxSizing = {
  *   box-sizing: border-box;
   }
 */
-const baseStyle = [boxSizing, ...borders] satisfies EmbedTemplateStyleDecl[];
+const baseStyle = [boxSizing, ...borders] satisfies Styles;
 
 export const div = baseStyle;
 export const address = baseStyle;
@@ -48,6 +50,7 @@ export const main = baseStyle;
 export const nav = baseStyle;
 export const section = baseStyle;
 export const form = baseStyle;
+export const label = baseStyle;
 
 export const h1 = baseStyle;
 export const h2 = baseStyle;
@@ -60,7 +63,7 @@ export const i = baseStyle;
 
 export const img = baseStyle;
 
-export const a = baseStyle;
+export const a = [boxSizing, ...borders, ...linkColors];
 export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;
@@ -92,7 +95,7 @@ export const html = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /**
 1. Remove the margin in all browsers.
@@ -126,7 +129,7 @@ export const body = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /**
 1. Add the correct height in Firefox.
@@ -145,7 +148,7 @@ export const hr = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /**
 Add the correct text decoration in Chrome, Edge, and Safari.
@@ -167,7 +170,7 @@ export const b = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 export const strong = b;
 
 /**
@@ -190,7 +193,7 @@ export const code = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 export const kbd = code;
 export const samp = code;
@@ -207,7 +210,7 @@ export const small = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /**
 Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
@@ -232,7 +235,7 @@ const subSupBase = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 export const sub = [
   ...subSupBase,
@@ -240,7 +243,7 @@ export const sub = [
     property: "bottom",
     value: { type: "unit", value: -0.25, unit: "em" },
   },
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 export const sup = [
   ...subSupBase,
@@ -248,7 +251,7 @@ export const sup = [
     property: "top",
     value: { type: "unit", value: -0.5, unit: "em" },
   },
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /*
 Tabular data
@@ -285,7 +288,7 @@ export const table = [
     value: { type: "keyword", value: "inherit" },
   },
   boxSizing,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /*
 Forms
@@ -330,7 +333,7 @@ const buttonBase = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 export const input = buttonBase;
 export const optgroup = buttonBase;
@@ -345,7 +348,7 @@ export const button = [
     property: "textTransform",
     value: { type: "keyword", value: "none" },
   },
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 export const select = button;
 
@@ -417,7 +420,7 @@ export const legend = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /**
 Add the correct vertical alignment in Chrome and Firefox.
@@ -430,7 +433,7 @@ export const progress = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;
 
 /**
 Correct the cursor style of increment and decrement buttons in Safari.
@@ -493,4 +496,4 @@ export const summary = [
   },
   boxSizing,
   ...borders,
-] satisfies EmbedTemplateStyleDecl[];
+] satisfies Styles;

package/src/css/presets.ts

@@ -1,6 +1,6 @@
-import type { EmbedTemplateStyleDecl } from "../embed-template";
+import type { Styles } from "./normalize";
 
-export const borders: EmbedTemplateStyleDecl[] = [
+export const borders: Styles = [
   {
     property: "borderTopWidth",
     value: { type: "unit", value: 1, unit: "px" },
@@ -18,3 +18,21 @@ export const borders: EmbedTemplateStyleDecl[] = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
+
+export const linkColors: Styles = [
+  {
+    property: "color",
+    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
+  },
+  {
+    state: ":active",
+    property: "color",
+    // chrome and safari use rgb(255, 0, 0)
+    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 },
+  },
+  {
+    state: ":visited",
+    property: "color",
+    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
+  },
+];

package/src/index.ts

@@ -15,5 +15,6 @@ export {
   type WsComponentMeta,
   type ComponentState,
   componentCategories,
+  stateCategories,
 } from "./components/component-meta";
 export * from "./embed-template";