@makeswift/runtime 0.13.1 → 0.14.1

package/dist/cjs/runtimes/react/controls/style.js

@@ -0,0 +1,151 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_exports = {};
+__export(style_exports, {
+  useFormattedStyle: () => useFormattedStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_react = require("react");
+var import_hooks = require("../../../components/hooks");
+var import_colorToString = require("../../../components/utils/colorToString");
+var import_responsive_style = require("../../../components/utils/responsive-style");
+var import_controls = require("../../../controls");
+var import_use_style = require("../use-style");
+var import_length_percentage = require("../../../css/length-percentage");
+var import_margin = require("../../../css/margin");
+var import_padding = require("../../../css/padding");
+var import_box_model = require("../../../box-model");
+var import_deepEqual = __toESM(require("../../../utils/deepEqual"));
+const defaultMargin = {
+  marginTop: 0,
+  marginRight: "auto",
+  marginBottom: 0,
+  marginLeft: "auto"
+};
+const defaultPadding = {
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0
+};
+function useStyleControlCssObject(style, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return {
+    ...properties.includes(import_controls.StyleControlProperty.Width) && {
+      maxWidth: "100%"
+    },
+    ...(0, import_responsive_style.useResponsiveStyle)(
+      [
+        style?.width,
+        style?.margin,
+        style?.padding,
+        (0, import_hooks.useBorder)(style?.border),
+        style?.borderRadius,
+        style?.textStyle
+      ],
+      ([width, margin, padding, border, borderRadius, textStyle]) => ({
+        ...properties.includes(import_controls.StyleControlProperty.Width) && {
+          width: widthToString(width) ?? "100%"
+        },
+        ...properties.includes(import_controls.StyleControlProperty.Margin) && (0, import_margin.marginPropertyDataToStyle)(margin ?? defaultMargin, defaultMargin),
+        ...properties.includes(import_controls.StyleControlProperty.Padding) && (0, import_padding.paddingPropertyDataToStyle)(padding ?? defaultPadding, defaultPadding),
+        ...properties.includes(import_controls.StyleControlProperty.Border) && {
+          borderTop: borderSideToString(border?.borderTop) ?? "0 solid black",
+          borderRight: borderSideToString(border?.borderRight) ?? "0 solid black",
+          borderBottom: borderSideToString(border?.borderBottom) ?? "0 solid black",
+          borderLeft: borderSideToString(border?.borderLeft) ?? "0 solid black"
+        },
+        ...properties.includes(import_controls.StyleControlProperty.BorderRadius) && {
+          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,
+          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,
+          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,
+          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0
+        },
+        ...properties.includes(import_controls.StyleControlProperty.TextStyle) && {
+          ...textStyle?.fontFamily && { fontFamily: `"${textStyle.fontFamily}"` },
+          ...textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing },
+          ...textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) },
+          ...textStyle?.fontWeight && { fontWeight: textStyle.fontWeight },
+          textTransform: textStyle?.textTransform ?? [],
+          fontStyle: textStyle?.fontStyle ?? []
+        }
+      })
+    )
+  };
+  function widthToString(widthProperty) {
+    if (widthProperty == null)
+      return null;
+    return (0, import_length_percentage.lengthPercentageDataToString)(widthProperty);
+  }
+  function borderSideToString(borderSide) {
+    if (borderSide == null)
+      return null;
+    const { width, color, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? (0, import_colorToString.colorToString)(color) : "black"}`;
+  }
+  function borderRadiusToString(borderRadius) {
+    if (borderRadius == null)
+      return null;
+    return (0, import_length_percentage.lengthPercentageDataToString)(borderRadius);
+  }
+  function fontSizeToString(fontSize) {
+    return `${fontSize.value}${fontSize.unit}`;
+  }
+}
+function useFormattedStyle(styleControlData, controlDefinition, control) {
+  const style = useStyleControlCssObject(styleControlData, controlDefinition);
+  const guid = (0, import_react.useId)().replaceAll(":", "");
+  const styleClassName = (0, import_use_style.useStyle)(style);
+  const classNames = `${styleClassName} ${guid}`;
+  (0, import_react.useEffect)(() => {
+    let currentBoxModel = null;
+    const handleAnimationFrameRequest = () => {
+      if (control == null)
+        return;
+      const element = document.querySelector(`.${guid}`);
+      const measuredBoxModel = element == null ? null : (0, import_box_model.getBox)(element);
+      if (!(0, import_deepEqual.default)(currentBoxModel, measuredBoxModel)) {
+        currentBoxModel = measuredBoxModel;
+        control.changeBoxModel(currentBoxModel);
+      }
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    };
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+      control?.changeBoxModel(null);
+    };
+  }, [guid, control]);
+  return classNames;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFormattedStyle
+});
+//# sourceMappingURL=style.js.map

package/dist/cjs/runtimes/react/controls/style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport { useEffect, useId } from 'react'\n\nimport { useBorder, BorderSide } from '../../../components/hooks'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\n\nimport {\n  FontSizePropertyData,\n  StyleControl,\n  StyleControlData,\n  StyleControlDefinition,\n  StyleControlProperty,\n  WidthPropertyData,\n} from '../../../controls'\nimport { useStyle } from '../use-style'\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { BoxModel, getBox } from '../../../box-model'\nimport deepEqual from '../../../utils/deepEqual'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nfunction useStyleControlCssObject(\n  style: StyleControlData | undefined,\n  controlDefinition: StyleControlDefinition,\n): CSSObject {\n  const { properties } = controlDefinition.config\n\n  return {\n    ...(properties.includes(StyleControlProperty.Width) && {\n      maxWidth: '100%',\n    }),\n    ...useResponsiveStyle(\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        useBorder(style?.border),\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(StyleControlProperty.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(StyleControlProperty.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(StyleControlProperty.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(StyleControlProperty.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(StyleControlProperty.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(StyleControlProperty.TextStyle) && {\n          ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(borderSide: BorderSide | null | undefined): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n\nexport type StyleControlFormattedValue = string\n\nexport function useFormattedStyle(\n  styleControlData: StyleControlData | undefined,\n  controlDefinition: StyleControlDefinition,\n  control: StyleControl | null,\n): StyleControlFormattedValue {\n  const style = useStyleControlCssObject(styleControlData, controlDefinition)\n  // We're removing the colons because useId returns a string wrapped with colons, e.g. \":R3d5sm:\",\n  // and we cannot use colons in a class name.\n  const guid = useId().replaceAll(':', '')\n  const styleClassName = useStyle(style)\n  const classNames = `${styleClassName} ${guid}`\n\n  useEffect(() => {\n    let currentBoxModel: BoxModel | null = null\n\n    const handleAnimationFrameRequest = () => {\n      if (control == null) return\n\n      const element = document.querySelector(`.${guid}`)\n\n      const measuredBoxModel = element == null ? null : getBox(element)\n\n      if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n        currentBoxModel = measuredBoxModel\n\n        control.changeBoxModel(currentBoxModel)\n      }\n\n      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n    }\n\n    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n    return () => {\n      cancelAnimationFrame(animationFrameHandle)\n\n      control?.changeBoxModel(null)\n    }\n  }, [guid, control])\n\n  return classNames\n}\n"],"mappings":"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","names":["style","deepEqual"]}

package/dist/cjs/runtimes/react/controls/text-area.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var text_area_exports = {};
+__export(text_area_exports, {
+  useTextAreaValue: () => useTextAreaValue
+});
+module.exports = __toCommonJS(text_area_exports);
+var import_ts_pattern = require("ts-pattern");
+var import_controls = require("../../../controls");
+function useTextAreaValue(data, definition) {
+  const value = (0, import_ts_pattern.match)(data).with({ [import_controls.TextAreaControlDataTypeKey]: import_controls.TextAreaControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTextAreaValue
+});
+//# sourceMappingURL=text-area.js.map

package/dist/cjs/runtimes/react/controls/text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-area.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextAreaControlData,\n  TextAreaControlDataTypeKey,\n  TextAreaControlDataTypeValueV1,\n  TextAreaControlDefinition,\n} from '../../../controls'\n\nexport type TextAreaControlValue<T extends TextAreaControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextAreaValue<T extends TextAreaControlDefinition>(\n  data: TextAreaControlData | undefined,\n  definition: T,\n): TextAreaControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextAreaControlDataTypeKey]: TextAreaControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextAreaControlValue<T>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAsB;AACtB,sBAKO;AAKA,SAAS,iBACd,MACA,YACyB;AACzB,QAAM,YACJ,yBAAM,IAAI,EACP,KAAK,EAAE,CAAC,0CAA0B,GAAG,+CAA+B,GAAG,SAAO,IAAI,KAAK,EACvF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/cjs/runtimes/react/controls/text-input.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var text_input_exports = {};
+__export(text_input_exports, {
+  useTextInputValue: () => useTextInputValue
+});
+module.exports = __toCommonJS(text_input_exports);
+var import_ts_pattern = require("ts-pattern");
+var import_controls = require("../../../controls");
+function useTextInputValue(data, definition) {
+  const value = (0, import_ts_pattern.match)(data).with({ [import_controls.TextInputControlDataTypeKey]: import_controls.TextInputControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTextInputValue
+});
+//# sourceMappingURL=text-input.js.map

package/dist/cjs/runtimes/react/controls/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-input.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextInputControlData,\n  TextInputControlDataTypeKey,\n  TextInputControlDataTypeValueV1,\n  TextInputControlDefinition,\n} from '../../../controls'\n\nexport type TextInputControlValue<T extends TextInputControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextInputValue<T extends TextInputControlDefinition>(\n  data: TextInputControlData | undefined,\n  definition: T,\n): TextInputControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextInputControlDataTypeKey]: TextInputControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextInputControlValue<T>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAsB;AACtB,sBAKO;AAKA,SAAS,kBACd,MACA,YAC0B;AAC1B,QAAM,YACJ,yBAAM,IAAI,EACP,KAAK,EAAE,CAAC,2CAA2B,GAAG,gDAAgC,GAAG,SAAO,IAAI,KAAK,EACzF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/cjs/runtimes/react/controls/typography.js

@@ -0,0 +1,170 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var typography_exports = {};
+__export(typography_exports, {
+  default: () => useEnhancedTypography,
+  getTypographyStyleSwatchIds: () => getTypographyStyleSwatchIds,
+  typographyFragementToTypographyControlData: () => typographyFragementToTypographyControlData,
+  useTypographyClassName: () => useTypographyClassName,
+  useTypographyValue: () => useTypographyValue
+});
+module.exports = __toCommonJS(typography_exports);
+var import_makeswift_api = require("../hooks/makeswift-api");
+var import_colorToString = require("../../../components/utils/colorToString");
+var import_responsive_style = require("../../../components/utils/responsive-style");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_isNonNullable = require("../../../utils/isNonNullable");
+var import_use_style = require("../use-style");
+var import_use_breakpoints = require("../hooks/use-breakpoints");
+function typographyFragementToTypographyControlData(typography) {
+  if (typography == null)
+    return void 0;
+  return {
+    id: typography.id,
+    style: typography.style.map(({ deviceId, value }) => ({
+      deviceId,
+      value: {
+        fontFamily: value.fontFamily ?? void 0,
+        lineHeight: value.lineHeight ?? void 0,
+        letterSpacing: value.letterSpacing ?? void 0,
+        fontWeight: value.fontWeight ?? void 0,
+        textAlign: value.textAlign ?? void 0,
+        uppercase: value.uppercase ?? void 0,
+        underline: value.underline ?? void 0,
+        strikethrough: value.strikethrough ?? void 0,
+        italic: value.italic ?? void 0,
+        fontSize: value.fontSize ?? void 0,
+        color: value.color ?? void 0
+      }
+    }))
+  };
+}
+function getTypographyStyleSwatchIds(style) {
+  return style?.map((override) => override.value).flatMap((typographyStyle) => typographyStyle.color?.swatchId).filter(import_isNonNullable.isNonNullable) ?? [];
+}
+const withColor = (swatches) => (deviceRawTypographyValue) => {
+  const { value, deviceId } = deviceRawTypographyValue;
+  if (value.color == null) {
+    const { color, ...nextValue } = value;
+    return {
+      deviceId,
+      value: nextValue
+    };
+  }
+  return {
+    deviceId,
+    value: {
+      ...value,
+      color: {
+        swatch: swatches.find((s) => s && s.id === value.color?.swatchId),
+        alpha: value.color?.alpha ?? void 0
+      }
+    }
+  };
+};
+const getDeviceId = ({ deviceId }) => deviceId;
+function useEnhancedTypography(value) {
+  const typography = typographyFragementToTypographyControlData((0, import_makeswift_api.useTypography)(value?.id ?? null));
+  const source = typography?.style ?? [];
+  const override = value?.style ?? [];
+  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
+  const swatchIds = [
+    ...getTypographyStyleSwatchIds(value?.style),
+    ...getTypographyStyleSwatchIds(typography?.style)
+  ];
+  const swatches = (0, import_makeswift_api.useSwatches)(swatchIds).filter(import_isNonNullable.isNonNullable);
+  const enhancedSource = source.map(withColor(swatches));
+  const enhancedOverride = override.map(withColor(swatches));
+  const devices = [
+    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId)))
+  ];
+  return devices.map((deviceId) => {
+    const deviceSource = (0, import_breakpoints.findBreakpointOverride)(breakpoints, enhancedSource, deviceId)?.value;
+    const deviceOverride = (0, import_breakpoints.findBreakpointOverride)(
+      breakpoints,
+      enhancedOverride,
+      deviceId,
+      (v) => v
+    )?.value;
+    if (deviceSource && deviceOverride) {
+      return {
+        deviceId,
+        value: { ...deviceSource, ...deviceOverride }
+      };
+    } else if (deviceOverride) {
+      return {
+        deviceId,
+        value: deviceOverride
+      };
+    } else if (deviceSource) {
+      return {
+        deviceId,
+        value: deviceSource
+      };
+    }
+    return null;
+  }).filter(import_isNonNullable.isNonNullable);
+}
+function useTypographyClassName(value) {
+  return (0, import_use_style.useStyle)(
+    (0, import_responsive_style.useResponsiveStyle)(
+      [value],
+      ([value2]) => {
+        if (value2 === void 0)
+          return {};
+        let styles = {};
+        if (value2.color != null)
+          styles.color = (0, import_colorToString.colorToString)(value2.color);
+        if (value2.fontFamily != null)
+          styles.fontFamily = value2.fontFamily;
+        if (value2.fontSize != null && value2.fontSize.value != null && value2.fontSize.unit != null)
+          styles.fontSize = `${value2.fontSize.value}${value2.fontSize.unit}`;
+        if (value2.fontWeight != null)
+          styles.fontWeight = value2.fontWeight;
+        if (value2.lineHeight != null)
+          styles.lineHeight = value2.lineHeight;
+        if (value2.letterSpacing != null)
+          styles.letterSpacing = `${value2.letterSpacing / 10}em`;
+        if (value2.uppercase != null)
+          styles.textTransform = value2.uppercase === true ? "uppercase" : "initial";
+        if (value2.underline != null || value2.strikethrough != null)
+          styles.textDecoration = [
+            Boolean(value2.underline) && "underline",
+            Boolean(value2.strikethrough) && "line-through"
+          ].filter(Boolean).join(" ");
+        if (value2.italic != null)
+          styles.fontStyle = value2.italic === true ? "italic" : "initial";
+        return styles;
+      },
+      import_breakpoints.shallowMergeFallbacks
+    )
+  );
+}
+function useTypographyValue(data) {
+  const enhancedTypography = useEnhancedTypography(data);
+  return useTypographyClassName(enhancedTypography);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getTypographyStyleSwatchIds,
+  typographyFragementToTypographyControlData,
+  useTypographyClassName,
+  useTypographyValue
+});
+//# sourceMappingURL=typography.js.map

package/dist/cjs/runtimes/react/controls/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { TypographyControlData } from '../../../controls/typography'\nimport { useSwatches, useTypography } from '../hooks/makeswift-api'\nimport { Typography, Swatch } from '../../../api'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { ColorValue } from '../../../components/utils/types'\nimport { DeviceOverride, ResponsiveValue } from '../../../prop-controllers'\nimport { findBreakpointOverride, shallowMergeFallbacks } from '../../../state/modules/breakpoints'\nimport { isNonNullable } from '../../../utils/isNonNullable'\nimport { useStyle } from '../use-style'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nexport function typographyFragementToTypographyControlData(\n  typography: Typography | null,\n): TypographyControlData[number] | undefined {\n  if (typography == null) return undefined\n  return {\n    id: typography.id,\n    style: typography.style.map(({ deviceId, value }) => ({\n      deviceId,\n      value: {\n        fontFamily: value.fontFamily ?? undefined,\n        lineHeight: value.lineHeight ?? undefined,\n        letterSpacing: value.letterSpacing ?? undefined,\n        fontWeight: value.fontWeight ?? undefined,\n        textAlign: value.textAlign ?? undefined,\n        uppercase: value.uppercase ?? undefined,\n        underline: value.underline ?? undefined,\n        strikethrough: value.strikethrough ?? undefined,\n        italic: value.italic ?? undefined,\n        fontSize: value.fontSize ?? undefined,\n        color: value.color ?? undefined,\n      },\n    })),\n  }\n}\n\ntype EnhancedColor = {\n  color?: ColorValue\n}\n\nexport type TypographyControlDataValue = Exclude<\n  TypographyControlData[number],\n  undefined\n>['style'][number]['value']\n\ntype EnhancedTypographyValue = Omit<TypographyControlDataValue, keyof EnhancedColor> & EnhancedColor\n\nexport type EnhancedTypography = Array<DeviceOverride<EnhancedTypographyValue>>\n\nexport function getTypographyStyleSwatchIds(\n  style:\n    | Exclude<TypographyControlData[number], undefined>['style']\n    | Typography['style']\n    | null\n    | undefined,\n): string[] {\n  return (\n    style\n      ?.map(override => override.value)\n      .flatMap(typographyStyle => typographyStyle.color?.swatchId)\n      .filter(isNonNullable) ?? []\n  )\n}\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  (\n    deviceRawTypographyValue: DeviceOverride<TypographyControlDataValue>,\n  ): DeviceOverride<EnhancedTypographyValue> => {\n    const { value, deviceId } = deviceRawTypographyValue\n\n    if (value.color == null) {\n      const { color, ...nextValue } = value\n      return {\n        deviceId,\n        value: nextValue,\n      }\n    }\n    return {\n      deviceId,\n      value: {\n        ...value,\n        color: {\n          swatch: swatches.find(s => s && s.id === value.color?.swatchId),\n          alpha: value.color?.alpha ?? undefined,\n        },\n      },\n    }\n  }\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\n/**\n * `enhanced` here just means typography ids have been replaced with the related entity.\n */\nexport default function useEnhancedTypography(\n  value?: TypographyControlData[number] | null,\n): EnhancedTypography {\n  const typography = typographyFragementToTypographyControlData(useTypography(value?.id ?? null))\n  const source = typography?.style ?? []\n  const override = value?.style ?? []\n  const breakpoints = useBreakpoints()\n\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(value?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds).filter(isNonNullable)\n\n  const enhancedSource = source.map(withColor(swatches))\n  const enhancedOverride = override.map(withColor(swatches))\n\n  const devices = [\n    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId))),\n  ]\n\n  return devices\n    .map(deviceId => {\n      const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value\n      const deviceOverride = findBreakpointOverride(\n        breakpoints,\n        enhancedOverride,\n        deviceId,\n        v => v,\n      )?.value\n\n      if (deviceSource && deviceOverride) {\n        return {\n          deviceId,\n          value: { ...deviceSource, ...deviceOverride },\n        }\n      } else if (deviceOverride) {\n        return {\n          deviceId,\n          value: deviceOverride,\n        }\n      } else if (deviceSource) {\n        return {\n          deviceId,\n          value: deviceSource,\n        }\n      }\n      return null\n    })\n    .filter(isNonNullable)\n}\n\nexport function useTypographyClassName(value: EnhancedTypography): string {\n  return useStyle(\n    useResponsiveStyle<\n      EnhancedTypographyValue,\n      [ResponsiveValue<EnhancedTypographyValue> | null | undefined]\n    >(\n      [value],\n      ([value]) => {\n        if (value === undefined) return {}\n\n        let styles: CSSObject = {}\n        if (value.color != null) styles.color = colorToString(value.color)\n        if (value.fontFamily != null) styles.fontFamily = value.fontFamily\n        if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)\n          styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`\n        if (value.fontWeight != null) styles.fontWeight = value.fontWeight\n        if (value.lineHeight != null) styles.lineHeight = value.lineHeight\n        if (value.letterSpacing != null) styles.letterSpacing = `${value.letterSpacing / 10}em`\n        if (value.uppercase != null)\n          styles.textTransform = value.uppercase === true ? 'uppercase' : 'initial'\n        if (value.underline != null || value.strikethrough != null)\n          styles.textDecoration = [\n            Boolean(value.underline) && 'underline',\n            Boolean(value.strikethrough) && 'line-through',\n          ]\n            .filter(Boolean)\n            .join(' ')\n        if (value.italic != null) styles.fontStyle = value.italic === true ? 'italic' : 'initial'\n\n        return styles\n      },\n      shallowMergeFallbacks,\n    ),\n  )\n}\n\nexport type TypographyControlValue = string\n\nexport function useTypographyValue(\n  data: TypographyControlData[number] | undefined,\n): TypographyControlValue {\n  // for each breakpoint fetch related resources and merge its value with its override\n  const enhancedTypography = useEnhancedTypography(data)\n\n  // for each breakpoint shallow merge back up through the breakpoints and create a className\n  return useTypographyClassName(enhancedTypography)\n}\n"],"mappings":"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","names":["value"]}