@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/src/components/paragraph.tsx

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

package/src/components/paragraph.ws.tsx

@@ -0,0 +1,13 @@
+import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/paragraph.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "Paragraph",
+  Icon: TextAlignLeftIcon,
+  children: ["Pragraph you can edit"],
+  props: props as MetaProps,
+};
+
+export default meta;

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

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { RichTextLink as LinkPrimitive } from "./rich-text-link";
+
+export default {
+  title: "Components/RichTextLink",
+  component: LinkPrimitive,
+} as ComponentMeta<typeof LinkPrimitive>;
+
+const Template: ComponentStory<typeof LinkPrimitive> = (args) => (
+  <LinkPrimitive {...args} />
+);
+
+export const RichTextLink = Template.bind({});
+RichTextLink.args = {
+  children: "RichTextLink",
+};

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

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

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

@@ -0,0 +1,12 @@
+import { Link2Icon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/rich-text-link.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text-child",
+  label: "Link",
+  Icon: Link2Icon,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/span.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Span as SpanPrimitive } from "./span";
+
+export default {
+  title: "Components/Span",
+  component: SpanPrimitive,
+} as ComponentMeta<typeof SpanPrimitive>;
+
+const Template: ComponentStory<typeof SpanPrimitive> = (args) => (
+  <SpanPrimitive {...args} />
+);
+
+export const Span = Template.bind({});
+Span.args = {
+  children: "some span text",
+};

package/src/components/span.tsx

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

package/src/components/span.ws.tsx

@@ -0,0 +1,12 @@
+import { BrushIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/span.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text-child",
+  label: "Styled Text",
+  Icon: BrushIcon,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/subscript.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Bold as BoldPrimitive } from "./bold";
+
+export default {
+  title: "Components/Bold",
+  component: BoldPrimitive,
+} as ComponentMeta<typeof BoldPrimitive>;
+
+const Template: ComponentStory<typeof BoldPrimitive> = (args) => (
+  <BoldPrimitive {...args} />
+);
+
+export const Bold = Template.bind({});
+Bold.args = {
+  children: "some bold text",
+};

package/src/components/subscript.tsx

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

package/src/components/subscript.ws.tsx

@@ -0,0 +1,12 @@
+import { SubscriptIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/subscript.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text-child",
+  label: "Subscript Text",
+  Icon: SubscriptIcon,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/superscript.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Superscript as SuperscriptPrimitive } from "./superscript";
+
+export default {
+  title: "Components/Superscript",
+  component: SuperscriptPrimitive,
+} as ComponentMeta<typeof SuperscriptPrimitive>;
+
+const Template: ComponentStory<typeof SuperscriptPrimitive> = (args) => (
+  <SuperscriptPrimitive {...args} />
+);
+
+export const Superscript = Template.bind({});
+Superscript.args = {
+  children: "some superscript text",
+};

package/src/components/superscript.tsx

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

package/src/components/superscript.ws.tsx

@@ -0,0 +1,12 @@
+import { SuperscriptIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/superscript.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text-child",
+  label: "Superscript Text",
+  Icon: SuperscriptIcon,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/text-block.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { TextBlock as TextBlockPrimitive } from "./text-block";
+
+export default {
+  title: "Components/TextBlock",
+  component: TextBlockPrimitive,
+} as ComponentMeta<typeof TextBlockPrimitive>;
+
+const Template: ComponentStory<typeof TextBlockPrimitive> = (args) => (
+  <TextBlockPrimitive {...args} />
+);
+
+export const TextBlock = Template.bind({});
+TextBlock.args = {
+  children: "text",
+};

package/src/components/text-block.tsx

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

package/src/components/text-block.ws.tsx

@@ -0,0 +1,22 @@
+import { TextIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/text-block.props.json";
+
+const defaultStyle = {
+  minHeight: {
+    type: "unit",
+    unit: "em",
+    value: 1,
+  },
+} as const;
+
+const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "Text Block",
+  Icon: TextIcon,
+  defaultStyle,
+  children: ["Block of text you can edit"],
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/css/breakpoints.ts

@@ -0,0 +1,10 @@
+import type { Breakpoint } from "@webstudio-is/css-data";
+
+export type BaseBreakpoint = Pick<Breakpoint, "label" | "minWidth">;
+
+export const initialBreakpoints: Array<BaseBreakpoint> = [
+  { label: "Mobile", minWidth: 360 },
+  { label: "Tablet", minWidth: 768 },
+  { label: "Laptop", minWidth: 1024 },
+  { label: "Desktop", minWidth: 1280 },
+];

package/src/css/categories.ts

@@ -0,0 +1,254 @@
+import type { StyleProperty } from "@webstudio-is/css-data";
+
+const layout = [
+  "display",
+  // Flex
+  "flexDirection",
+  "flexWrap",
+  // Flex or grid
+  "alignItems",
+  "justifyContent",
+  "alignContent",
+  // Grid
+  "placeContent",
+  "justifyItems",
+  "rowGap",
+  "columnGap",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridAutoColumns",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas",
+] as const;
+
+const flexChild = [
+  "flexShrink",
+  "flexGrow",
+  "flexBasis",
+  "alignSelf",
+  "order",
+] as const;
+
+const gridChild = [
+  "gridRowEnd",
+  "gridRowStart",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "alignSelf",
+  "justifySelf",
+  "order",
+] as const;
+
+const spacing = [
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+] as const;
+
+const size = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "overflow",
+  "objectFit",
+  "aspectRatio",
+] as const;
+
+const position = [
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "zIndex",
+  "float",
+  "clear",
+] as const;
+
+const typography = [
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "color",
+  "textAlign",
+  "fontStyle",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+
+  "letterSpacing",
+  "textIndent",
+
+  "columnCount",
+  "columnGap",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "columnRuleColor",
+
+  "textTransform",
+  "direction",
+  "whiteSpace",
+  "textShadow",
+
+  // More
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontVariant",
+  "textAlignLast",
+  "textJustify",
+  "textOverflow",
+  "textSizeAdjust",
+  "verticalAlign",
+  "wordSpacing",
+  "wordBreak",
+  "wordWrap",
+] as const;
+
+const backgrounds = [
+  "backgroundAttachment",
+  "backgroundClip",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundOrigin",
+  "backgroundPositionX",
+  "backgroundPositionY",
+  "backgroundRepeat",
+  "backgroundSize",
+] as const;
+
+const borders = [
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+
+  // More
+  "borderImageSlice",
+  "borderImageWidth",
+  "borderImageOutset",
+  "borderImageRepeat",
+  "borderImageSource",
+] as const;
+
+const effects = [
+  "mixBlendMode",
+  "opacity",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "boxShadow",
+  "transform",
+  "filter",
+  "backdropFilter",
+  "cursor",
+  // More
+  "animationDelay",
+  "animationDirection",
+  "animationDuration",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationName",
+  "animationPlayState",
+  "animationTimingFunction",
+  "transitionDelay",
+  "transitionDuration",
+  "transitionProperty",
+  "transitionTimingFunction",
+] as const;
+
+const other = [
+  "resize",
+  "clip",
+  "visibility",
+  "boxSizing",
+  "content",
+  "quotes",
+  "counterReset",
+  "counterIncrement",
+  "inlineSize",
+  "blockSize",
+  "minInlineSize",
+  "minBlockSize",
+  "maxInlineSize",
+  "maxBlockSize",
+  "userSelect",
+  "pointerEvents",
+] as const;
+
+export const categories = {
+  layout: {
+    label: "Layout",
+    properties: layout,
+    moreFrom: "",
+  },
+  flexChild: {
+    label: "Flex Child",
+    properties: flexChild,
+    moreFrom: "",
+  },
+  gridChild: {
+    label: "Grid Child",
+    properties: gridChild,
+    moreFrom: "",
+  },
+  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  size: { label: "Size", properties: size, moreFrom: "" },
+  position: { label: "Position", properties: position, moreFrom: "" },
+  typography: {
+    label: "Typography",
+    properties: typography,
+    moreFrom: "fontSizeAdjust",
+  },
+  backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
+  borders: {
+    label: "Borders",
+    properties: borders,
+    moreFrom: "borderImageSlice",
+  },
+  effects: {
+    label: "Effects",
+    properties: effects,
+    moreFrom: "animationDelay",
+  },
+  other: { label: "Other", properties: other, moreFrom: "" },
+};
+
+export const propertyCategoryMap = {} as {
+  [property in StyleProperty]: Category;
+};
+
+let category: Category;
+for (category in categories) {
+  for (const property of categories[category].properties) {
+    // We are widening the type here
+    propertyCategoryMap[property as StyleProperty] = category;
+  }
+}
+
+export type Category = keyof typeof categories;

package/src/css/get-browser-style.ts

@@ -0,0 +1,50 @@
+import { detectFont } from "detect-font";
+import type { Style, StyleValue, Unit } from "@webstudio-is/css-data";
+import { properties, units } from "@webstudio-is/css-data";
+
+const unitRegex = new RegExp(`${units.join("|")}`);
+
+// @todo use a parser
+const parseValue = (
+  property: keyof typeof properties,
+  value: string
+): StyleValue => {
+  const number = parseFloat(value);
+  const parsedUnit = unitRegex.exec(value);
+  if (value === "rgba(0, 0, 0, 0)") value = "transparent";
+  if (isNaN(number) || parsedUnit === null) {
+    return {
+      type: "keyword",
+      value,
+    };
+  }
+
+  if (number === 0 && property in properties) {
+    return properties[property].initial;
+  }
+
+  return {
+    type: "unit",
+    unit: parsedUnit[0] as Unit,
+    value: number,
+  };
+};
+
+export const getBrowserStyle = (element?: Element): Style => {
+  const browserStyle: Style = {};
+  if (element === undefined) return browserStyle;
+  let knownProperty: keyof typeof properties;
+  const computedStyle = getComputedStyle(element);
+  for (knownProperty in properties) {
+    if (knownProperty in computedStyle === false) continue;
+    // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
+    const computedValue = computedStyle[knownProperty as unknown as number];
+    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
+  }
+  // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
+  browserStyle.fontFamily = {
+    type: "fontFamily",
+    value: [detectFont(element)],
+  };
+  return browserStyle;
+};

package/{lib/cjs/css/index.d.ts → src/css/index.ts}

@@ -1,4 +1,3 @@
 export * from "./get-browser-style";
 export * from "./categories";
 export * from "./breakpoints";
-//# sourceMappingURL=index.d.ts.map

package/{lib/cjs/db/index.d.ts → src/db/index.ts}

@@ -1,3 +1,2 @@
 export * from "./types";
 export * from "./instance";
-//# sourceMappingURL=index.d.ts.map

package/src/db/instance.ts

@@ -0,0 +1,34 @@
+import { CssRule } from "@webstudio-is/css-data";
+import { z } from "zod";
+import { ComponentName } from "../components";
+
+// This should be used when passing a lot of data is potentially costly.
+// For example, when passing data from an iframe.
+export type BaseInstance = {
+  id: string;
+  component: ComponentName;
+  cssRules: Array<CssRule>;
+};
+
+export type Instance = BaseInstance & {
+  children: Array<Instance | string>;
+};
+
+export const toBaseInstance = (instance: Instance): BaseInstance => {
+  return {
+    id: instance.id,
+    component: instance.component,
+    cssRules: instance.cssRules,
+  };
+};
+
+export const Instance = z.lazy(
+  () =>
+    z.object({
+      id: z.string(),
+      component: z.string(),
+      children: z.array(z.union([Instance, z.string()])),
+      cssRules: z.array(CssRule),
+    })
+  // @todo can't figure out how to make component to be z.enum(Object.keys(components))
+) as z.ZodType<Instance>;

package/src/db/types.ts

@@ -0,0 +1,18 @@
+import type { InstanceProps as DbInstanceProps } from "@webstudio-is/prisma-client";
+import type { UserProp } from "../user-props";
+import type { Instance } from "./instance";
+
+export type Tree = {
+  id: string;
+  root: Instance;
+};
+
+export type Props = {
+  props: string;
+  id: string;
+  instanceId: string;
+  treeId: string;
+};
+export type InstanceProps = Omit<DbInstanceProps, "props"> & {
+  props: Array<UserProp>;
+};

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from "./css";
+export * from "./tree";
+export * from "./components";
+export * from "./user-props";
+export * from "./pubsub";
+export * from "./db";
+export * from "./app";
+export {
+  customComponents,
+  customComponentsMeta,
+} from "./app/custom-components";
+export type { MetaProps } from "./components/component-type";