@webstudio-is/react-sdk 0.22.0 → 0.23.0

package/src/db/instance.ts

@@ -1,56 +0,0 @@
-import { z } from "zod";
-import { type ComponentName, getComponentNames } 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;
-};
-
-export type Instance = BaseInstance & {
-  type: "instance";
-  children: Array<Instance | Text>;
-};
-
-export const toBaseInstance = (instance: Instance): BaseInstance => {
-  return {
-    id: instance.id,
-    component: instance.component,
-  };
-};
-
-export const Text = z.object({
-  type: z.literal("text"),
-  value: z.string(),
-});
-
-export type Text = z.infer<typeof Text>;
-
-export const Id = z.object({
-  type: z.literal("id"),
-  value: z.string(),
-});
-export type Id = z.infer<typeof Id>;
-
-export const InstancesItem = z.object({
-  type: z.literal("instance"),
-  id: z.string(),
-  component: z.enum(getComponentNames() as [ComponentName]),
-  children: z.array(z.union([Id, Text])),
-});
-
-export type InstancesItem = z.infer<typeof InstancesItem>;
-
-export const Instances = z.array(InstancesItem);
-
-export type Instances = z.infer<typeof Instances>;
-
-export const Instance: z.ZodType<Instance> = z.lazy(() =>
-  z.object({
-    type: z.literal("instance"),
-    id: z.string(),
-    component: z.enum(getComponentNames() as [ComponentName]),
-    children: z.array(z.union([Instance, Text])),
-  })
-);

package/src/db/style.ts

@@ -1,63 +0,0 @@
-import { z } from "zod";
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-data";
-import { SharedStyleValue } from "@webstudio-is/css-data";
-import {
-  type ComponentName,
-  getComponentMeta,
-  getComponentNames,
-} from "../components";
-
-export const PresetStylesItem = z.object({
-  component: z.enum(getComponentNames() as [ComponentName]),
-  // @todo can't figure out how to make property to be enum
-  property: z.string() as z.ZodType<StyleProperty>,
-  value: SharedStyleValue as z.ZodType<StyleValue>,
-});
-
-export type PresetStylesItem = z.infer<typeof PresetStylesItem>;
-
-export const PresetStyles = z.array(PresetStylesItem);
-
-export type PresetStyles = z.infer<typeof PresetStyles>;
-
-export const findMissingPresetStyles = (
-  presetStyles: PresetStyles,
-  components: ComponentName[]
-) => {
-  const populatedComponents = new Set();
-  for (const style of presetStyles) {
-    populatedComponents.add(style.component);
-  }
-  const missingPresetStyles: PresetStyles = [];
-  for (const component of components) {
-    if (populatedComponents.has(component)) {
-      continue;
-    }
-    const meta = getComponentMeta(component);
-    if (meta.presetStyle === undefined) {
-      continue;
-    }
-    for (const [property, value] of Object.entries(meta.presetStyle)) {
-      missingPresetStyles.push({
-        component,
-        property: property as StyleProperty,
-        value,
-      });
-    }
-  }
-  return missingPresetStyles;
-};
-
-export const StylesItem = z.object({
-  breakpointId: z.string(),
-  instanceId: z.string(),
-  // @todo can't figure out how to make property to be enum
-  property: z.string() as z.ZodType<StyleProperty>,
-  value: SharedStyleValue as z.ZodType<StyleValue>,
-});
-
-export type StylesItem = z.infer<typeof StylesItem>;
-
-export const Styles = z.array(StylesItem);
-
-export type Styles = z.infer<typeof Styles>;

package/src/db/types.ts

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

package/src/user-props/all-user-props.ts

@@ -1,26 +0,0 @@
-import { useRef } from "react";
-import { atom } from "nanostores";
-import { useStore } from "@nanostores/react";
-import type { InstanceProps, Instance } from "../db";
-import { UserProp } from "./schema";
-
-export type AllUserProps = {
-  [id: Instance["id"]]: UserProp[];
-};
-
-export const allUserPropsContainer = atom<AllUserProps>({});
-
-export const useAllUserProps = (initialUserProps?: Array<InstanceProps>) => {
-  // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
-  const ref = useRef(false);
-  if (ref.current === false && initialUserProps !== undefined) {
-    const propsMap: AllUserProps = {};
-    for (const item of initialUserProps) {
-      propsMap[item.instanceId] = item.props;
-    }
-    //We don't need to trigger rerender when setting the initial value
-    allUserPropsContainer.set(propsMap);
-    ref.current = true;
-  }
-  return useStore(allUserPropsContainer);
-};

package/src/user-props/index.ts

@@ -1,3 +0,0 @@
-export * from "./all-user-props";
-export * from "./use-user-props";
-export * from "./schema";

package/src/user-props/schema.ts

@@ -1,35 +0,0 @@
-import { z } from "zod";
-import { Asset } from "@webstudio-is/asset-uploader";
-
-const baseUserProps = {
-  id: z.string(),
-  prop: z.string(),
-  required: z.optional(z.boolean()),
-};
-
-export const UserProp = z.discriminatedUnion("type", [
-  z.object({
-    ...baseUserProps,
-    type: z.literal("number"),
-    value: z.number(),
-  }),
-  z.object({
-    ...baseUserProps,
-    type: z.literal("string"),
-    value: z.string(),
-  }),
-  z.object({
-    ...baseUserProps,
-    type: z.literal("boolean"),
-    value: z.boolean(),
-  }),
-  z.object({
-    ...baseUserProps,
-    type: z.literal("asset"),
-    value: Asset,
-  }),
-]);
-
-export const UserProps = z.array(UserProp);
-
-export type UserProp = z.infer<typeof UserProp>;

package/src/user-props/use-user-props-asset.ts

@@ -1,35 +0,0 @@
-import { useMemo } from "react";
-import { type Instance } from "../db";
-import { type UserProp } from "./schema";
-import { useAllUserProps } from "./all-user-props";
-import type { Asset } from "@webstudio-is/asset-uploader";
-
-/**
- * Get asset for prop, like src on the Image component
- */
-export const useUserPropsAsset = (
-  instanceId: Instance["id"],
-  propName: UserProp["prop"]
-): Asset | undefined => {
-  const allUserProps = useAllUserProps();
-
-  const propsData = allUserProps[instanceId];
-  const asset = useMemo(() => {
-    if (propsData == null) {
-      return undefined;
-    }
-    const prop = propsData.find((prop) => prop.prop === propName);
-
-    if (prop == null) {
-      return undefined;
-    }
-
-    if (prop.type === "asset") {
-      return prop.value;
-    }
-
-    return undefined;
-  }, [propName, propsData]);
-
-  return asset;
-};

package/src/user-props/use-user-props.ts

@@ -1,32 +0,0 @@
-import { useMemo } from "react";
-import { type Instance } from "../db";
-import { type UserProp } from "./schema";
-import { useAllUserProps } from "./all-user-props";
-
-type UserProps = { [prop: UserProp["prop"]]: string | number | boolean };
-
-/**
- * User props mapped in prop:value format,
- * up to date with props panel.
- */
-export const useUserProps = (instanceId: Instance["id"]) => {
-  const allUserProps = useAllUserProps();
-
-  const propsData = allUserProps[instanceId];
-  const props = useMemo(() => {
-    if (propsData == null) {
-      return {};
-    }
-    const result: UserProps = {};
-
-    for (const userProp of propsData) {
-      if (userProp.type !== "asset") {
-        result[userProp.prop] = userProp.value;
-      }
-    }
-
-    return result;
-  }, [propsData]);
-
-  return props;
-};