@makeswift/runtime 0.20.3 → 0.20.4-canary.1

package/dist/esm/runtimes/react/controls.js

@@ -1,24 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import * as ReactPage from "../../state/react-page";
-import {
-  useBoxShadow,
-  useBorder as useBorderData,
-  useLinkPropControllerData,
-  useCheckboxPropControllerData,
-  useDatePropControllerData,
-  useFontPropControllerData,
-  useVideoPropControllerData,
-  useTablePropControllerData
-} from "../../components/hooks";
-import {
-  useResponsiveBorder,
-  useResponsiveBorderRadius,
-  useResponsiveMargin,
-  useResponsivePadding,
-  useResponsiveShadow,
-  useResponsiveWidth
-} from "../../components/utils/responsive-style";
 import {
   CheckboxDefinition,
   NumberDefinition,
@@ -39,77 +21,17 @@ import {
   TextInputDefinition,
   unstable_TypographyDefinition
 } from "../../controls";
+import { isLegacyDescriptor } from "../../prop-controllers/descriptors";
 import { useFormattedStyle } from "./controls/style";
 import { ControlValue } from "./controls/control";
-import { RenderHook } from "./components";
 import { useSlot } from "./controls/slot";
-import { useStyle } from "./use-style";
 import { useRichText } from "./controls/rich-text/rich-text";
 import { useRichTextV2 } from "./controls/rich-text-v2";
 import { useStore } from "./hooks/use-store";
 import { useDocumentKey } from "./hooks/use-document-key";
 import { useSelector } from "./hooks/use-selector";
-import {
-  Types as PropControllerTypes,
-  getShadowsPropControllerDataResponsiveShadowsData,
-  Shadows,
-  BorderPropControllerFormat,
-  getBorderPropControllerDataResponsiveBorderData,
-  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,
-  BorderRadiusPropControllerFormat,
-  MarginPropControllerFormat,
-  getMarginPropControllerDataResponsiveMarginData,
-  getPaddingPropControllerDataResponsivePaddingData,
-  PaddingPropControllerFormat,
-  getWidthPropControllerDataResponsiveLengthData,
-  WidthPropControllerFormat,
-  GapX,
-  ResponsiveNumber,
-  ResponsiveIconRadioGroup,
-  ResponsiveSelect,
-  ResponsiveOpacity,
-  getSocialLinksPropControllerDataSocialLinksData
-} from "@makeswift/prop-controllers";
-import { isLegacyDescriptor } from "../../prop-controllers/descriptors";
-import { useResponsiveLengthPropControllerData } from "../../components/hooks/useResponsiveLengthPropControllerData";
-import { useNumberPropControllerData } from "../../components/hooks/useNumberPropControllerData";
-import { useResponsiveColorPropControllerData } from "../../components/hooks/useResponsiveColorPropControllerData";
-import { useTextStylePropControllerData } from "../../components/hooks/useTextStylePropControllerData";
-import { useNavigationLinksPropControllerData } from "../../components/hooks/useNavigationLinksPropControllerData";
-import { useTextAreaPropControllerData } from "../../components/hooks/useTextAreaPropControllerData";
-import { usePropValue } from "../../components/hooks/usePropValue";
-import { useGapYPropControllerData } from "../../components/hooks/useGapYPropControllerData";
-import { useElementIDPropControllerData } from "../../components/hooks/useElementIDPropControllerData";
-import { useTableFormFieldsPropControllerData } from "../../components/hooks/useTableFormFieldsPropControllerData";
-import { useGridPropControllerData } from "../../components/hooks/useGridPropControllerData";
-import { useImagePropControllerData } from "../../components/hooks/useImagePropControllerData";
-import { useImagesPropControllerData } from "../../components/hooks/useImagesPropControllerData";
-import { useBackgroundsPropControllerData } from "../../components/hooks/useBackgroundsPropControllerData";
-import { useTextInputPropControllerData } from "../../components/hooks/useTextInputPropControllerData";
-function useWidthStyle(data, descriptor) {
-  const value = getWidthPropControllerDataResponsiveLengthData(data);
-  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
-}
-function usePaddingStyle(data) {
-  const value = getPaddingPropControllerDataResponsivePaddingData(data);
-  return useStyle(useResponsivePadding(value));
-}
-function useMarginStyle(data) {
-  const value = getMarginPropControllerDataResponsiveMarginData(data);
-  return useStyle(useResponsiveMargin(value));
-}
-function useBorderRadiusStyle(data) {
-  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data);
-  return useStyle(useResponsiveBorderRadius(value));
-}
-function useShadowsStyle(data) {
-  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? void 0));
-}
-function useBorderStyle(data) {
-  const value = getBorderPropControllerDataResponsiveBorderData(data);
-  const borderData = useBorderData(value);
-  return useStyle(useResponsiveBorder(borderData ?? void 0));
-}
+import { RenderHook } from "./components";
+import { resolveLegacyDescriptorProp } from "./legacy-controls";
 function PropsValue({ element, children }) {
   const store = useStore();
   const propControllerDescriptorsRef = useRef(
@@ -124,466 +46,95 @@ function PropsValue({ element, children }) {
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight(
     (renderFn, [propName, descriptor]) => (propsValue) => {
-      if (!isLegacyDescriptor(descriptor)) {
-        switch (descriptor.controlType) {
-          case CheckboxDefinition.type:
-          case NumberDefinition.type:
-          case TextInputDefinition.type:
-          case TextAreaDefinition.type:
-          case SelectDefinition.type:
-          case ColorDefinition.type:
-          case IconRadioGroupDefinition.type:
-          case ImageDefinition.type:
-          case ComboboxDefinition.type:
-          case ShapeDefinition.type:
-          case ListDefinition.type:
-          case LinkDefinition.type:
-          case StyleV2Definition.type:
-          case unstable_TypographyDefinition.type:
-            return /* @__PURE__ */ jsx(
-              ControlValue,
-              {
-                definition: descriptor,
-                data: props[propName],
-                control: propControllers?.[propName],
-                children: (value) => renderFn({ ...propsValue, [propName]: value })
-              }
-            );
-          case StyleDefinition.type: {
-            const control = propControllers?.[propName] ?? null;
-            return /* @__PURE__ */ jsx(
-              RenderHook,
-              {
-                hook: useFormattedStyle,
-                parameters: [props[propName], descriptor, control],
-                children: (value) => renderFn({ ...propsValue, [propName]: value })
-              },
-              descriptor.controlType
-            );
-          }
-          case RichTextV1Definition.type: {
-            const control = propControllers?.[propName] ?? null;
-            return /* @__PURE__ */ jsx(
-              RenderHook,
-              {
-                hook: useRichText,
-                parameters: [props[propName], control],
-                children: (value) => renderFn({ ...propsValue, [propName]: value })
-              },
-              descriptor.controlType
-            );
-          }
-          case RichTextV2Definition.type: {
-            const control = propControllers?.[propName] ?? null;
-            return /* @__PURE__ */ jsx(
-              RenderHook,
-              {
-                hook: useRichTextV2,
-                parameters: [props[propName], descriptor, control],
-                children: (value) => renderFn({ ...propsValue, [propName]: value })
-              },
-              descriptor.controlType
-            );
-          }
-          case SlotDefinition.type: {
-            const control = propControllers?.[propName] ?? null;
-            return /* @__PURE__ */ jsx(
-              RenderHook,
-              {
-                hook: useSlot,
-                parameters: [props[propName], control],
-                children: (value) => renderFn({ ...propsValue, [propName]: value })
-              },
-              descriptor.controlType
-            );
-          }
-        }
-        console.error(`Unknown control type: ${descriptor.controlType}`);
-        return renderFn({ ...propsValue, [propName]: props[propName] });
+      if (isLegacyDescriptor(descriptor)) {
+        return resolveLegacyDescriptorProp(
+          descriptor,
+          propName,
+          props[propName],
+          propsValue,
+          renderFn
+        );
       }
-      switch (descriptor.type) {
-        case PropControllerTypes.Width:
-          switch (descriptor.options.format) {
-            case WidthPropControllerFormat.ClassName:
-              return /* @__PURE__ */ jsx(
-                RenderHook,
-                {
-                  hook: useWidthStyle,
-                  parameters: [props[propName], descriptor],
-                  children: (value) => renderFn({ ...propsValue, [propName]: value })
-                },
-                descriptor.type
-              );
-            case WidthPropControllerFormat.ResponsiveValue:
-            default:
-              return renderFn({
-                ...propsValue,
-                [propName]: getWidthPropControllerDataResponsiveLengthData(props[propName])
-              });
-          }
-        case PropControllerTypes.Padding:
-          switch (descriptor.options.format) {
-            case PaddingPropControllerFormat.ClassName:
-              return /* @__PURE__ */ jsx(
-                RenderHook,
-                {
-                  hook: usePaddingStyle,
-                  parameters: [props[propName]],
-                  children: (value) => renderFn({ ...propsValue, [propName]: value })
-                },
-                descriptor.type
-              );
-            case PaddingPropControllerFormat.ResponsiveValue:
-            default:
-              return renderFn({
-                ...propsValue,
-                [propName]: getPaddingPropControllerDataResponsivePaddingData(props[propName])
-              });
-          }
-        case PropControllerTypes.Margin:
-          switch (descriptor.options.format) {
-            case MarginPropControllerFormat.ClassName:
-              return /* @__PURE__ */ jsx(
-                RenderHook,
-                {
-                  hook: useMarginStyle,
-                  parameters: [props[propName]],
-                  children: (value) => renderFn({ ...propsValue, [propName]: value })
-                },
-                descriptor.type
-              );
-            case MarginPropControllerFormat.ResponsiveValue:
-            default:
-              return renderFn({
-                ...propsValue,
-                [propName]: getMarginPropControllerDataResponsiveMarginData(props[propName])
-              });
-          }
-        case PropControllerTypes.BorderRadius:
-          switch (descriptor.options.format) {
-            case BorderRadiusPropControllerFormat.ClassName:
-              return /* @__PURE__ */ jsx(
-                RenderHook,
-                {
-                  hook: useBorderRadiusStyle,
-                  parameters: [props[propName]],
-                  children: (value) => renderFn({ ...propsValue, [propName]: value })
-                },
-                descriptor.type
-              );
-            case BorderRadiusPropControllerFormat.ResponsiveValue:
-            default:
-              return renderFn({
-                ...propsValue,
-                [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(
-                  props[propName]
-                )
-              });
-          }
-        case PropControllerTypes.Backgrounds:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useBackgroundsPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Image:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useImagePropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Images:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useImagesPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Number:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useNumberPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.ResponsiveNumber:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: (data) => usePropValue(ResponsiveNumber, data),
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.ResponsiveIconRadioGroup:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: (data) => usePropValue(ResponsiveIconRadioGroup, data),
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.ResponsiveSelect:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: (data) => usePropValue(ResponsiveSelect, data),
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.ResponsiveOpacity:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: (data) => usePropValue(ResponsiveOpacity, data),
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.ResponsiveLength:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useResponsiveLengthPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Shadows:
-          switch (descriptor.options.format) {
-            case Shadows.Format.ClassName:
-              return /* @__PURE__ */ jsx(
-                RenderHook,
-                {
-                  hook: useShadowsStyle,
-                  parameters: [props[propName]],
-                  children: (value) => renderFn({ ...propsValue, [propName]: value })
-                },
-                descriptor.type
-              );
-            case Shadows.Format.ResponsiveValue:
-            default:
-              return renderFn({
-                ...propsValue,
-                [propName]: getShadowsPropControllerDataResponsiveShadowsData(props[propName])
-              });
-          }
-        case PropControllerTypes.Border:
-          switch (descriptor.options.format) {
-            case BorderPropControllerFormat.ClassName:
-              return /* @__PURE__ */ jsx(
-                RenderHook,
-                {
-                  hook: useBorderStyle,
-                  parameters: [props[propName]],
-                  children: (value) => renderFn({ ...propsValue, [propName]: value })
-                },
-                descriptor.type
-              );
-            case BorderPropControllerFormat.ResponsiveValue:
-            default:
-              return renderFn({
-                ...propsValue,
-                [propName]: getBorderPropControllerDataResponsiveBorderData(props[propName])
-              });
-          }
-        case PropControllerTypes.ResponsiveColor:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useResponsiveColorPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Link:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useLinkPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Checkbox:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useCheckboxPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Date:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useDatePropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Font:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useFontPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Video:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useVideoPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.Table:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useTablePropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.TextStyle:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useTextStylePropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.NavigationLinks:
+      switch (descriptor.controlType) {
+        case CheckboxDefinition.type:
+        case NumberDefinition.type:
+        case TextInputDefinition.type:
+        case TextAreaDefinition.type:
+        case SelectDefinition.type:
+        case ColorDefinition.type:
+        case IconRadioGroupDefinition.type:
+        case ImageDefinition.type:
+        case ComboboxDefinition.type:
+        case ShapeDefinition.type:
+        case ListDefinition.type:
+        case LinkDefinition.type:
+        case StyleV2Definition.type:
+        case unstable_TypographyDefinition.type:
           return /* @__PURE__ */ jsx(
-            RenderHook,
+            ControlValue,
             {
-              hook: useNavigationLinksPropControllerData,
-              parameters: [props[propName]],
+              definition: descriptor,
+              data: props[propName],
+              control: propControllers?.[propName],
               children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
+            }
           );
-        case PropControllerTypes.TextInput:
+        case StyleDefinition.type: {
+          const control = propControllers?.[propName] ?? null;
           return /* @__PURE__ */ jsx(
             RenderHook,
             {
-              hook: useTextInputPropControllerData,
-              parameters: [props[propName]],
+              hook: useFormattedStyle,
+              parameters: [props[propName], descriptor, control],
               children: (value) => renderFn({ ...propsValue, [propName]: value })
             },
-            descriptor.type
+            descriptor.controlType
           );
-        case PropControllerTypes.TextArea:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useTextAreaPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.GapX:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: (data) => usePropValue(GapX, data),
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.GapY:
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useGapYPropControllerData,
-              parameters: [props[propName]],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        case PropControllerTypes.ElementID:
+        }
+        case RichTextV1Definition.type: {
+          const control = propControllers?.[propName] ?? null;
           return /* @__PURE__ */ jsx(
             RenderHook,
             {
-              hook: useElementIDPropControllerData,
-              parameters: [props[propName]],
+              hook: useRichText,
+              parameters: [props[propName], control],
               children: (value) => renderFn({ ...propsValue, [propName]: value })
             },
-            descriptor.type
+            descriptor.controlType
           );
-        case PropControllerTypes.TableFormFields:
+        }
+        case RichTextV2Definition.type: {
+          const control = propControllers?.[propName] ?? null;
           return /* @__PURE__ */ jsx(
             RenderHook,
             {
-              hook: useTableFormFieldsPropControllerData,
-              parameters: [props[propName]],
+              hook: useRichTextV2,
+              parameters: [props[propName], descriptor, control],
               children: (value) => renderFn({ ...propsValue, [propName]: value })
             },
-            descriptor.type
+            descriptor.controlType
           );
-        case PropControllerTypes.SocialLinks:
-          return renderFn({
-            ...propsValue,
-            [propName]: getSocialLinksPropControllerDataSocialLinksData(props[propName])
-          });
-        case PropControllerTypes.Grid:
+        }
+        case SlotDefinition.type: {
+          const control = propControllers?.[propName] ?? null;
           return /* @__PURE__ */ jsx(
             RenderHook,
             {
-              hook: useGridPropControllerData,
-              parameters: [props[propName]],
+              hook: useSlot,
+              parameters: [props[propName], control],
               children: (value) => renderFn({ ...propsValue, [propName]: value })
             },
-            descriptor.type
+            descriptor.controlType
           );
-        default:
-          return renderFn({ ...propsValue, [propName]: props[propName] });
+        }
       }
+      console.error(`Unknown control type: ${descriptor.controlType}`);
+      return renderFn({ ...propsValue, [propName]: props[propName] });
     },
     children
   )({});
 }
 export {
-  PropsValue,
-  useBorderRadiusStyle,
-  useBorderStyle,
-  useShadowsStyle
+  PropsValue
 };
 //# sourceMappingURL=controls.js.map