@webstudio-is/react-sdk 0.35.0 → 0.40.0

package/src/components/code.ws.tsx

@@ -0,0 +1,46 @@
+import { CodeIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import { displayVarNamespace } from "./code";
+import { props } from "./__generated__/code.props";
+
+const presetStyle: WsComponentMeta["presetStyle"] = {
+  display: {
+    type: "var",
+    value: displayVarNamespace,
+    fallbacks: [
+      {
+        type: "keyword",
+        value: "inline-block",
+      },
+    ],
+  },
+  paddingLeft: {
+    type: "keyword",
+    value: "0.2em",
+  },
+  paddingRight: {
+    type: "keyword",
+    value: "0.2em",
+  },
+  backgroundColor: {
+    type: "keyword",
+    value: "#eee",
+  },
+  fontFamily: {
+    type: "keyword",
+    value: "monospace",
+  },
+};
+
+export const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "Code",
+  Icon: CodeIcon,
+  presetStyle,
+  children: ["Code you can edit"],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["inline", "lang", "meta"],
+};

package/src/components/components-utils.ts

@@ -0,0 +1,75 @@
+import * as components from "./components";
+import { registeredComponents } from "./index";
+
+export type ComponentName = keyof typeof components;
+
+/**
+ * We need to define component names manually here, instead of using Object.keys(components)
+ * Otherwise every component would be included in the bundle, even if it is not used
+ */
+const componentNames = Object.keys({
+  Box: 1,
+  Body: 1,
+  TextBlock: 1,
+  Heading: 1,
+  Paragraph: 1,
+  Link: 1,
+  RichTextLink: 1,
+  Span: 1,
+  Bold: 1,
+  Italic: 1,
+  Superscript: 1,
+  Subscript: 1,
+  Button: 1,
+  Input: 1,
+  Form: 1,
+  Image: 1,
+  Blockquote: 1,
+  List: 1,
+  ListItem: 1,
+  Separator: 1,
+  Code: 1,
+} satisfies { [K in keyof typeof components]: 1 }) as Array<
+  keyof typeof components
+>;
+
+export const getComponentNames = (): ComponentName[] => {
+  const uniqueNames = new Set([
+    ...componentNames,
+    ...Object.keys(registeredComponents || {}),
+  ]);
+
+  return Array.from(uniqueNames) as ComponentName[];
+};
+
+/**
+ * Now used only in builder app
+ * @todo Consider using the same approach in the builder app as in the published apps . A dynamic import is needed
+ */
+export const getComponent = (
+  name: string
+): undefined | (typeof components)[ComponentName] => {
+  return registeredComponents != null && name in registeredComponents
+    ? (registeredComponents[
+        name as ComponentName
+      ] as (typeof components)[ComponentName])
+    : components[name as ComponentName];
+};
+
+/**
+ * The application imports only the components it uses, then pass them to createGetComponent i.e.
+ * getComponent = createGetComponent({ Box, BlaBla })
+ * <RootInstance data={data} getComponent={getComponent} />
+ * see example /packages/sdk-size-test/app/routes/$.tsx
+ **/
+export const createGetComponent = (comps: Partial<typeof components>) => {
+  return (name: string) => {
+    return registeredComponents != null && name in registeredComponents
+      ? (registeredComponents[
+          name as ComponentName
+        ] as (typeof components)[ComponentName])
+      : comps[name as ComponentName];
+  };
+};
+
+export type GetComponent = typeof getComponent;

package/src/components/components.ts

@@ -0,0 +1,28 @@
+/**
+ * This file should contain all the components that we use in the builder/production app
+ *
+ * The application imports only the components it uses and uses
+ * getComponent = createGetComponent({ Box, BlaBla })to pass them to RootInstance
+ * see example /packages/sdk-size-test/app/routes/$.tsx
+ */
+export { Body } from "./body";
+export { Box } from "./box";
+export { TextBlock } from "./text-block";
+export { Heading } from "./heading";
+export { Paragraph } from "./paragraph";
+export { Link } from "./link";
+export { RichTextLink } from "./rich-text-link";
+export { Span } from "./span";
+export { Bold } from "./bold";
+export { Italic } from "./italic";
+export { Superscript } from "./superscript";
+export { Subscript } from "./subscript";
+export { Button } from "./button";
+export { Input } from "./input";
+export { Form } from "./form";
+export { Image } from "./image";
+export { Blockquote } from "./blockquote";
+export { List } from "./list";
+export { ListItem } from "./list-item";
+export { Separator } from "./separator";
+export { Code } from "./code";

package/src/components/form.ws.tsx

@@ -1,6 +1,6 @@
 import { FormIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/form.props.json";
+import { props } from "./__generated__/form.props";
 
 const presetStyle = {
   minHeight: {
@@ -21,6 +21,6 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/heading.ws.tsx

@@ -1,6 +1,6 @@
 import { HeadingIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/heading.props.json";
+import { props } from "./__generated__/heading.props";
 
 export const meta: WsComponentMeta = {
   type: "rich-text",
@@ -9,7 +9,7 @@ export const meta: WsComponentMeta = {
   children: ["Heading you can edit"],
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
   initialProps: ["tag"],
-} as WsComponentPropsMeta;
+};

package/src/components/image.ws.tsx

@@ -1,6 +1,6 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/image.props.json";
+import { props } from "./__generated__/image.props";
 
 const presetStyle = {
   // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -24,10 +24,15 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props: {
     ...props,
-    src: { ...props.src, control: "file-image", name: "Source" },
+    src: {
+      type: "string",
+      control: "file-image",
+      label: "Source",
+      required: false,
+    },
   },
   initialProps: ["src", "width", "height", "alt", "loading"],
-} as WsComponentPropsMeta;
+};

package/src/components/index.ts

@@ -1,6 +1,6 @@
 import { PropMeta } from "@webstudio-is/generate-arg-types";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-
+import type { ComponentName } from "./components-utils";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -17,6 +17,11 @@ import { meta as ButtonMeta } from "./button.ws";
 import { meta as InputMeta } from "./input.ws";
 import { meta as FormMeta } from "./form.ws";
 import { meta as ImageMeta } from "./image.ws";
+import { meta as BlockquoteMeta } from "./blockquote.ws";
+import { meta as ListMeta } from "./list.ws";
+import { meta as ListItemMeta } from "./list-item.ws";
+import { meta as SeparatorMeta } from "./separator.ws";
+import { meta as CodeMeta } from "./code.ws";
 
 // these are huge JSON objects that we want to be tree-shaken when not used!
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
@@ -35,23 +40,11 @@ import { propsMeta as ButtonMetaPropsMeta } from "./button.ws";
 import { propsMeta as InputMetaPropsMeta } from "./input.ws";
 import { propsMeta as FormMetaPropsMeta } from "./form.ws";
 import { propsMeta as ImageMetaPropsMeta } from "./image.ws";
-
-import { Body } from "./body";
-import { Box } from "./box";
-import { TextBlock } from "./text-block";
-import { Heading } from "./heading";
-import { Paragraph } from "./paragraph";
-import { Link } from "./link";
-import { RichTextLink } from "./rich-text-link";
-import { Span } from "./span";
-import { Bold } from "./bold";
-import { Italic } from "./italic";
-import { Superscript } from "./superscript";
-import { Subscript } from "./subscript";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Form } from "./form";
-import { Image } from "./image";
+import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
+import { propsMeta as ListPropsMeta } from "./list.ws";
+import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
+import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
+import { propsMeta as CodePropsMeta } from "./code.ws";
 
 const defaultMetas: Record<string, WsComponentMeta> = {
   Box: BoxMeta,
@@ -70,6 +63,11 @@ const defaultMetas: Record<string, WsComponentMeta> = {
   Input: InputMeta,
   Form: FormMeta,
   Image: ImageMeta,
+  Blockquote: BlockquoteMeta,
+  List: ListMeta,
+  ListItem: ListItemMeta,
+  Separator: SeparatorMeta,
+  Code: CodeMeta,
 };
 
 let currentMetas = defaultMetas;
@@ -88,7 +86,7 @@ export const registerComponentMetas = (
   currentMetas = result;
 };
 
-const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
+const defaultPropsMetasRaw = {
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -105,7 +103,15 @@ const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   Input: InputMetaPropsMeta,
   Form: FormMetaPropsMeta,
   Image: ImageMetaPropsMeta,
-};
+  Blockquote: BlockquotePropsMeta,
+  List: ListPropsMeta,
+  ListItem: ListItemPropsMeta,
+  Separator: SeparatorPropsMeta,
+  Code: CodePropsMeta,
+} as const;
+
+const defaultPropsMetas: Record<string, WsComponentPropsMeta> =
+  defaultPropsMetasRaw;
 
 let registeredPropsMetas: Record<string, Partial<WsComponentPropsMeta>> = {};
 
@@ -142,53 +148,12 @@ export const registerComponentPropsMetas = (
   currentPropsMetas = undefined;
 };
 
-const defaultComponents = {
-  Box,
-  Body,
-  TextBlock,
-  Heading,
-  Paragraph,
-  Link,
-  RichTextLink,
-  Span,
-  Bold,
-  Italic,
-  Superscript,
-  Subscript,
-  Button,
-  Input,
-  Form,
-  Image,
-} as const;
-
-export type ComponentName = keyof typeof defaultComponents;
 type RegisteredComponents = Partial<{
   // eslint-disable-next-line @typescript-eslint/ban-types
   [name in ComponentName]: {};
 }>;
 
-let registeredComponents: RegisteredComponents | null = null;
-
-const componentNames = Object.keys(defaultComponents) as ComponentName[];
-
-export const getComponentNames = (): ComponentName[] => {
-  const uniqueNames = new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {}),
-  ]);
-
-  return [...uniqueNames.values()] as ComponentName[];
-};
-
-export const getComponent = (
-  name: string
-): undefined | typeof defaultComponents[ComponentName] => {
-  return registeredComponents != null && name in registeredComponents
-    ? (registeredComponents[
-        name as ComponentName
-      ] as typeof defaultComponents[ComponentName])
-    : defaultComponents[name as ComponentName];
-};
+export let registeredComponents: RegisteredComponents | undefined;
 
 /**
  *  @todo: Allow register any component.
@@ -232,7 +197,7 @@ const computeInitialProps = (
     ? Object.entries(props)
         .filter(
           ([name, value]) =>
-            value?.type.required && initialProps.includes(name) === false
+            value?.required && initialProps.includes(name) === false
         )
         .map(([name]) => name)
     : [];

package/src/components/input.ws.tsx

@@ -1,6 +1,6 @@
 import { InputIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/input.props.json";
+import { props } from "./__generated__/input.props";
 
 export const meta: WsComponentMeta = {
   type: "control",
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: InputIcon,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/italic.ws.tsx

@@ -1,6 +1,6 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/italic.props.json";
+import { props } from "./__generated__/italic.props";
 
 const presetStyle = {
   fontStyle: {
@@ -16,6 +16,6 @@ export const meta: WsComponentMeta = {
   presetStyle,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/link.tsx

@@ -1,9 +1,18 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+// @todo props that come from remix link, shouldn't be here at all
+// - prefetch should be only on remix component and it already is
+// - props meta should be generated from Remix link
+type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
+  href?: string;
+  target?: "self" | "blank" | "parent" | "top";
+  prefetch?: "none" | "intent" | "render";
+};
 
 export const Link = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", ...props }, ref) => <a {...props} href={href} ref={ref} />
+  ({ href = "", target = "self", ...props }, ref) => {
+    return <a {...props} target={`_${target}`} href={href} ref={ref} />;
+  }
 );
 
 Link.displayName = "Link";

package/src/components/link.ws.tsx

@@ -1,6 +1,6 @@
 import { Link2Icon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/link.props.json";
+import { props } from "./__generated__/link.props";
 
 const presetStyle = {
   minHeight: {
@@ -22,7 +22,7 @@ export const meta: WsComponentMeta = {
   children: ["Link text you can edit"],
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["href"],
-} as WsComponentPropsMeta;
+  initialProps: ["href", "target", "prefetch"],
+};

package/src/components/list-item.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ListItem as ListItemPrimitive } from "./list-item";
+
+export default {
+  title: "Components/List Item",
+  component: ListItemPrimitive,
+} as ComponentMeta<typeof ListItemPrimitive>;
+
+const Template: ComponentStory<typeof ListItemPrimitive> = (args) => (
+  <ListItemPrimitive {...args} />
+);
+
+export const ListItem = Template.bind({});
+ListItem.args = {
+  children: "ListItem",
+};

package/src/components/list-item.tsx

@@ -0,0 +1,18 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+const defaultTag = "li";
+
+type Props = ComponentProps<typeof defaultTag>;
+
+export const ListItem = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+
+ListItem.displayName = "ListItem";

package/src/components/list-item.ws.tsx

@@ -0,0 +1,14 @@
+import { ListItemIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import { props } from "./__generated__/list-item.props";
+
+export const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "List Item",
+  Icon: ListItemIcon,
+  children: ["List Item you can edit"],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

package/src/components/list.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { List as ListPrimitive } from "./list";
+import { ListItem } from "./list-item";
+
+export default {
+  title: "Components/List",
+  component: ListPrimitive,
+} as ComponentMeta<typeof ListPrimitive>;
+
+const Template: ComponentStory<typeof ListPrimitive> = (args) => (
+  <ListPrimitive {...args} />
+);
+
+export const List = Template.bind({});
+List.args = {
+  children: <ListItem />,
+};

package/src/components/list.tsx

@@ -0,0 +1,24 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+const unorderedTag = "ul";
+const orderedTag = "ol";
+
+type Props = ComponentProps<typeof unorderedTag> &
+  ComponentProps<typeof orderedTag> & {
+    ordered?: boolean;
+  };
+
+export const List = forwardRef<
+  ElementRef<typeof unorderedTag | typeof orderedTag>,
+  Props
+>(({ ordered = false, ...props }, ref) => {
+  const tag = ordered ? orderedTag : unorderedTag;
+  return createElement(tag, { ...props, ref });
+});
+
+List.displayName = "List";

package/src/components/list.ws.tsx

@@ -0,0 +1,31 @@
+import { ListIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import { props } from "./__generated__/list.props";
+
+const presetStyle = {
+  marginTop: {
+    type: "keyword",
+    value: "0",
+  },
+  marginBottom: {
+    type: "keyword",
+    value: "10px",
+  },
+  paddingLeft: {
+    type: "keyword",
+    value: "40px",
+  },
+} as const;
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  label: "List",
+  Icon: ListIcon,
+  presetStyle,
+  children: [],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["ordered", "type", "starts", "reversed"],
+};

package/src/components/paragraph.ws.tsx

@@ -1,6 +1,6 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/paragraph.props.json";
+import { props } from "./__generated__/paragraph.props";
 
 export const meta: WsComponentMeta = {
   type: "rich-text",
@@ -9,6 +9,6 @@ export const meta: WsComponentMeta = {
   children: ["Pragraph you can edit"],
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/rich-text-link.tsx

@@ -1,9 +1,10 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { Link } from "./link";
 
-type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+type Props = ComponentProps<typeof Link>;
 
-export const RichTextLink = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", ...props }, ref) => <a {...props} href={href} ref={ref} />
-);
+export const RichTextLink = forwardRef<ElementRef<"a">, Props>((props, ref) => (
+  <Link {...props} ref={ref} />
+));
 
 RichTextLink.displayName = "RichTextLink";

package/src/components/rich-text-link.ws.tsx

@@ -1,6 +1,6 @@
 import { Link2Icon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
-import props from "./__generated__/rich-text-link.props.json";
+import { props } from "./__generated__/rich-text-link.props";
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
@@ -8,6 +8,6 @@ export const meta: WsComponentMeta = {
   Icon: Link2Icon,
 };
 
-export const propsMeta = {
+export const propsMeta: WsComponentPropsMeta = {
   props,
-} as WsComponentPropsMeta;
+};

package/src/components/separator.stories.tsx

@@ -0,0 +1,14 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Separator as SeparatorPrimitive } from "./separator";
+
+export default {
+  title: "Components/Separator",
+  component: SeparatorPrimitive,
+} as ComponentMeta<typeof SeparatorPrimitive>;
+
+const Template: ComponentStory<typeof SeparatorPrimitive> = (args) => (
+  <SeparatorPrimitive {...args} />
+);
+
+export const Separator = Template.bind({});
+Separator.args = {};

package/src/components/separator.tsx

@@ -0,0 +1,18 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+const defaultTag = "hr";
+
+type Props = ComponentProps<typeof defaultTag>;
+
+export const Separator = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+
+Separator.displayName = "Separator";