@stackbit/sdk 0.2.38 → 0.2.39-alpha.0

package/src/config/config-loader.ts

@@ -5,7 +5,12 @@ import semver from 'semver';
 import _ from 'lodash';
 
 import { ConfigValidationResult, validateConfig, validateContentModels } from './config-validator';
-import { ConfigError, ConfigLoadError, ConfigValidationError } from './config-errors';
+import {
+    ConfigError,
+    ConfigLoadError,
+    ConfigPresetsError,
+    ConfigValidationError
+} from './config-errors';
 import { loadStackbitConfigFromJs, LoadStackbitConfigResult, StopConfigWatch } from './config-loader-esbuild';
 import {
     assignLabelFieldIfNeeded,
@@ -60,7 +65,7 @@ export async function loadConfig({
     stackbitConfigESBuildOutDir,
     watchCallback
 }: ConfigLoaderOptions): Promise<ConfigLoaderResult & StopConfigWatch> {
-    const rawConfigResult = await loadStackbitConfigFromDir({
+    const rawConfigResult = await loadConfigFromDir({
         dirPath,
         stackbitConfigESBuildOutDir,
         watchCallback: watchCallback
@@ -96,14 +101,34 @@ async function processConfigLoaderResult({
 
     const { models: externalModels, errors: externalModelsLoadErrors } = await loadModelsFromExternalSource(config, dirPath, modelsSource);
 
-    const normalizedResult = validateAndNormalizeConfig(config, externalModels);
+    const extendedConfig = await extendConfig({ dirPath, config, externalModels });
 
-    const presetsResult = await loadPresets(dirPath, normalizedResult.config);
+    return {
+        valid: extendedConfig.valid,
+        config: extendedConfig.config,
+        errors: [...configLoadErrors, ...externalModelsLoadErrors, ...extendedConfig.errors]
+    };
+}
 
+export async function extendConfig({
+    dirPath,
+    config,
+    externalModels
+}: {
+    dirPath: string;
+    config: Record<string, any>;
+    externalModels?: Model[];
+}): Promise<{
+    valid: boolean;
+    config: Config;
+    errors: (ConfigValidationError | ConfigPresetsError)[];
+}> {
+    const normalizedResult = validateAndNormalizeConfig(config, externalModels);
+    const presetsResult = await loadPresets(dirPath, normalizedResult.config);
     return {
         valid: normalizedResult.valid,
         config: presetsResult.config,
-        errors: [...configLoadErrors, ...externalModelsLoadErrors, ...normalizedResult.errors, ...presetsResult.errors]
+        errors: [...normalizedResult.errors, ...presetsResult.errors]
     };
 }
 
@@ -139,7 +164,7 @@ export function validateAndNormalizeConfig(config: Record<string, any>, external
     });
 }
 
-async function loadStackbitConfigFromDir({
+export async function loadConfigFromDir({
     dirPath,
     stackbitConfigESBuildOutDir,
     watchCallback

package/src/config/config-schema/style-field-schema.ts

@@ -19,15 +19,15 @@ const styleSizeSchema = stylePropWithAll(
     errors: { wrap: { label: false } }
 });
 
-const borderWidthPattern = /^\d+(?::\d+(?::\d+)?)?$/;
-const borderWidthSchema = stylePropWithAll(Joi.array().items(Joi.string().pattern(borderWidthPattern)).single()).prefs({
+const anyRangePattern = /^\d+(?::\d+(?::\d+)?)?$/;
+const borderWidthSchema = stylePropWithAll(Joi.array().items(Joi.string().pattern(anyRangePattern)).single()).prefs({
     messages: {
         'string.pattern.base': 'Illegal definition "{{#value}}" of style field "{{#label}}". This field must match "borderWidth" style pattern'
     },
     errors: { wrap: { label: false } }
 });
 
-const fontWeightPattern = /^[1-8]00:[2-9]00$/;
+const fontWeightPattern = /^[1-8]00:[2-9]00(?::\d+)?$/;
 const opacityPattern = /^[1-9]?[05]:(?:5|[1-9][05]|100)$/;
 
 const styleColorSchema = arrayOf(
@@ -59,7 +59,10 @@ const stylePropsSchema = Joi.object({
             label: Joi.string().required()
         })
     ),
-    fontSize: arrayOfStringsWithAll(...STYLE_PROPS_VALUES.fontSize),
+    fontSize: stylePropWithAll(
+        Joi.string().pattern(sizePattern),
+        arrayOf(Joi.string().pattern(sizePattern), Joi.number().integer().min(0).multiple(1))
+    ),
     fontStyle: arrayOfStringsWithAll(...STYLE_PROPS_VALUES.fontStyle),
     fontWeight: stylePropWithAll(
         Joi.string().pattern(fontWeightPattern),

package/src/config/config-types.ts

@@ -3,7 +3,7 @@ import { CMS_NAMES, FIELD_TYPES, SSG_NAMES, STYLE_PROPS } from './config-consts'
 
 export interface Config extends BaseConfig {
     models: Model[];
-    presets?: Record<string, any>;
+    presets?: Record<string, Preset>;
 }
 
 export interface YamlConfig extends BaseConfig {
@@ -113,6 +113,13 @@ export interface ModelsSourceSanity {
     [key: string]: any;
 }
 
+export interface Preset {
+    label: string;
+    modelName: string;
+    thumbnail?: string;
+    data: Record<string, any>;
+}
+
 /*******************
  *** Model Types ***
  *******************/
@@ -213,6 +220,17 @@ export interface ImageModel {
 
 export type Field = FieldSimple | FieldEnum | FieldImage | FieldNumber | FieldObject | FieldModel | FieldReference | FieldStyle | FieldList;
 
+export type FieldSpecificProps =
+    | FieldSimpleProps
+    | FieldEnumProps
+    | FieldImageProps
+    | FieldNumberProps
+    | FieldObjectProps
+    | FieldModelProps
+    | FieldReferenceProps
+    | FieldStyleProps
+    | FieldListProps;
+
 export type FieldSimple = FieldCommonProps & FieldSimpleProps;
 export type FieldEnum = FieldCommonProps & FieldEnumProps;
 export type FieldImage = FieldCommonProps & FieldImageProps;
@@ -238,6 +256,7 @@ export interface FieldCommonProps {
     const?: unknown;
     hidden?: boolean;
     readOnly?: boolean;
+    localized?: boolean;
 }
 
 export type FieldType = typeof FIELD_TYPES[number];

package/src/config/presets-loader.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import fse from 'fs-extra';
 import { parseFile, append } from '@stackbit/utils';
 
-import { Config } from './config-types';
+import { Config, Preset } from './config-types';
 import { ConfigPresetsError } from './config-errors';
 
 export interface PresetsLoaderResult {
@@ -11,6 +11,17 @@ export interface PresetsLoaderResult {
     errors: ConfigPresetsError[];
 }
 
+interface RawPresetData {
+    model: string;
+    presets: RawPreset[];
+}
+
+interface RawPreset {
+    label: string;
+    thumbnail?: string;
+    data: Record<string, any>;
+}
+
 export async function loadPresets(dirPath: string, config: Config): Promise<PresetsLoaderResult> {
     const presetFiles = [];
     let presetsRelDirs = ['.stackbit/presets', 'node_modules/@stackbit/components/presets'];
@@ -30,14 +41,14 @@ export async function loadPresets(dirPath: string, config: Config): Promise<Pres
         presetFiles.push(...files);
     }
 
-    const presets: Record<string, any> = {};
-    const presetsIdsByModel: Record<string, any> = {};
+    const presets: Record<string, Preset> = {};
+    const presetsIdsByModel: Record<string, string[]> = {};
     const errors: ConfigPresetsError[] = [];
 
     for (const presetFile of presetFiles) {
         const presetsRelDir = path.dirname(presetFile);
         const presetPath = path.join(dirPath, presetFile);
-        let presetData: any;
+        let presetData: RawPresetData;
         try {
             presetData = await parseFile(presetPath);
         } catch (err: any) {
@@ -46,11 +57,12 @@ export async function loadPresets(dirPath: string, config: Config): Promise<Pres
         }
         _.forEach(_.get(presetData, 'presets', []), (preset, i) => {
             const presetId = `${presetFile}:presets[${i}]`;
-            presets[presetId] = preset;
-            if (preset.thumbnail) {
-                preset.thumbnail = resolveThumbnailPath(preset.thumbnail, presetsRelDir);
-            }
-            _.set(preset, 'modelName', presetData.model);
+            const { thumbnail, ...rest } = preset;
+            presets[presetId] = {
+                ...rest,
+                ...(thumbnail ? { thumbnail: resolveThumbnailPath(thumbnail, presetsRelDir) } : null),
+                modelName: presetData.model
+            };
             append(presetsIdsByModel, presetData.model, presetId);
         });
     }

package/src/content/content-schema.ts

@@ -1,7 +1,6 @@
-import Joi from 'joi';
+import Joi, { CustomHelpers, ErrorReport } from 'joi';
 import _ from 'lodash';
 import { append } from '@stackbit/utils';
-
 import { STYLE_PROPS_VALUES } from '../config/config-consts';
 import { isDataModel, isPageModel } from '../utils';
 import {
@@ -119,11 +118,16 @@ function joiSchemaForField(field: Field | FieldListItems, config: Config, fieldP
         case 'text':
         case 'markdown':
         case 'html':
-        case 'image':
         case 'file':
         case 'color':
             fieldSchema = Joi.string().allow('', null);
             break;
+        case 'image':
+            fieldSchema = Joi.alternatives([
+                Joi.string().allow('', null),
+                Joi.object()
+            ]);
+            break;
         case 'boolean':
             fieldSchema = Joi.boolean();
             break;
@@ -298,12 +302,12 @@ const StylePropContentSchemas: Record<StyleProps, (styleConfig: any) => Joi.Sche
     width: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.width),
     height: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.height),
     fontFamily: stylePropObjectValueSchema,
-    fontSize: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.fontSize),
+    fontSize: stylePropFontSizeSchema,
     fontStyle: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.fontStyle),
     fontWeight: stylePropFontWeightSchema,
     textAlign: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.textAlign),
     textColor: stylePropObjectValueSchema,
-    textDecoration: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.textDecoration),
+    textDecoration: stylePropTextDecorationSchema,
     backgroundColor: stylePropObjectValueSchema,
     backgroundPosition: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.nineRegions),
     backgroundSize: stylePropSchemaWithValidValues(STYLE_PROPS_VALUES.backgroundSize),
@@ -327,6 +331,26 @@ function stylePropSchemaWithValidValues(validValues: any[]) {
     };
 }
 
+const textDecorationWrongValue = 'textDecoration.wrong.value';
+
+function stylePropTextDecorationSchema(styleConfig: any) {
+    const values = styleConfig === '*' ? STYLE_PROPS_VALUES.textDecoration : styleConfig;
+    return Joi.string().custom((value: string, { error, errorsArray }: CustomHelpers & { errorsArray?: () => ErrorReport[] }) => {
+        const parts = value.split?.(' ');
+        const errors = errorsArray!();
+        parts.forEach((part) => {
+            if (!values.includes(part)) {
+                errors.push(error(textDecorationWrongValue));
+            }
+        });
+        return errors && errors.length ? errors : value;
+    }).prefs({
+        messages: {
+            [textDecorationWrongValue]: `{{#label}} must be a space separated string values from [${values.join(', ')}]`
+        }
+    });
+}
+
 function stylePropSizeSchema(styleConfig: any) {
     if (styleConfig === '*') {
         return Joi.object({
@@ -432,49 +456,31 @@ function stylePropObjectValueSchema(styleConfig: any) {
     return Joi.valid(..._.map(styleConfig, (object) => _.get(object, 'value')));
 }
 
+function stylePropFontSizeSchema(styleConfig: any) {
+    if (styleConfig === '*') {
+        return Joi.number().integer().min(0).max(100).multiple(1);
+    }
+    return Joi.number().valid(...parseRange(styleConfig));
+}
+
 function stylePropFontWeightSchema(styleConfig: any) {
+    const values = STYLE_PROPS_VALUES.fontWeight.map((valueStr) => Number(valueStr));
     if (styleConfig === '*') {
-        return Joi.string().valid(...STYLE_PROPS_VALUES.fontWeight);
+        return Joi.number().valid(...values);
     }
-    styleConfig = _.castArray(styleConfig);
-    const validValues = _.reduce(
-        styleConfig,
-        (validValues, value) => {
-            if (_.isNumber(value)) {
-                return validValues.add(String(value));
-            }
-            if (!_.isString(value)) {
-                return validValues;
-            }
-            if (_.isEmpty(value)) {
-                return validValues;
-            }
-            const parts = value.split(':').map((value) => Number(value));
-            if (_.some(parts, _.isNaN)) {
-                return validValues;
-            }
-            if (parts.length === 1) {
-                return validValues.add(String(parts[0]!));
-            }
-            const start = parts[0]!;
-            const end = parts[1]!;
-            for (let i = start; i <= end; i += 100) {
-                validValues.add(String(i));
-            }
-            return validValues;
-        },
-        new Set<string>()
-    );
-    return Joi.valid(...[...validValues]);
+    return Joi.number().valid(...parseRange(styleConfig, { defaultStep: 100 }));
 }
 
 function stylePropOpacitySchema(styleConfig: any) {
     if (styleConfig === '*') {
         return Joi.number().integer().min(0).max(100).multiple(5);
     }
-    styleConfig = _.castArray(styleConfig);
-    const validValues = _.reduce(
-        styleConfig,
+     return Joi.number().valid(...parseRange(styleConfig, { userDefinedStep: false, defaultStep: 5 }));
+}
+
+function parseRange(styleConfig: any, { userDefinedStep = true, defaultStep = 1 } = {}) {
+    const values = _.reduce(
+        _.castArray(styleConfig),
         (validValues, value) => {
             if (_.isNumber(value)) {
                 return validValues.add(value);
@@ -492,14 +498,14 @@ function stylePropOpacitySchema(styleConfig: any) {
             if (parts.length === 1) {
                 return validValues.add(parts[0]!);
             }
-            const start = parts[0]!;
-            const end = parts[1]!;
-            for (let i = start; i <= end; i += 5) {
+            const [start, end, userStep = defaultStep] = parts;
+            const step = userDefinedStep ? userStep : defaultStep;
+            for (let i = start!; i <= end!; i += step) {
                 validValues.add(i);
             }
             return validValues;
         },
         new Set<number>()
     );
-    return Joi.valid(...[...validValues]);
-}
+    return Array.from(values);
+}

package/src/index.ts

@@ -5,7 +5,7 @@ export * from './content/content-errors';
 export * from './config/config-errors';
 export * from './analyzer/file-browser';
 export * from './utils';
-export { loadConfig, ConfigLoaderOptions, ConfigLoaderResult } from './config/config-loader';
+export { loadConfig, loadConfigFromDir, extendConfig, ConfigLoaderOptions, ConfigLoaderResult } from './config/config-loader';
 export { writeConfig, WriteConfigOptions, convertToYamlConfig } from './config/config-writer';
 export { loadContent, ContentItem, ContentLoaderOptions, ContentLoaderResult } from './content/content-loader';
 export { matchSSG, SSGMatcherOptions, SSGMatchResult } from './analyzer/ssg-matcher';

package/src/utils/index.ts

@@ -9,7 +9,7 @@ type StricterUnionMember<T, Union, Keys extends string = UnionKeys<Union> extend
 
 export type StricterUnion<Union, Union2 = Union> = Union2 extends any ? StricterUnionMember<Union2, Union> : never;
 
-export type Logger = Pick<Console, 'log' | 'info' | 'warn' | 'error' | 'group' | 'groupEnd'>;
+export type Logger = Pick<Console, 'log' | 'debug' | 'info' | 'warn' | 'error' | 'group' | 'groupEnd'>;
 
 export * from './model-utils';
 export * from './model-matcher';

package/src/utils/model-iterators.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 
+import { mapPromise, mapValuesPromise } from '@stackbit/utils';
 import { getListFieldItems, isListDataModel, isListField, isObjectListItems, isModelField, isObjectField, isModelListItems } from './model-utils';
 import { DataModel, Field, FieldList, FieldListItems, FieldModelProps, FieldObjectProps, Model } from '../config/config-types';
 
@@ -366,6 +367,150 @@ export function mapObjectFieldsWithModelRecursively(
     });
 }
 
+export async function asyncMapObjectFieldsWithModelRecursively({
+    value,
+    model,
+    modelsByName,
+    iteratee,
+    pageLayoutKey = 'layout',
+    objectTypeKey = 'type',
+    valueId
+}: {
+    value: any;
+    model: Model;
+    modelsByName: Record<string, Model>;
+    iteratee: (options: {
+        value: any;
+        model: Model | null;
+        field: Field | null;
+        fieldListItem: FieldListItems | null;
+        error: string | null;
+        valueKeyPath: (string | number)[];
+        modelKeyPath: string[];
+        objectStack: any[];
+        skipNested: () => void;
+    }) => Promise<any>;
+    pageLayoutKey?: string;
+    objectTypeKey?: string;
+    valueId?: string;
+}): Promise<any> {
+    async function _mapDeep({
+        value,
+        model,
+        field,
+        fieldListItem,
+        valueKeyPath,
+        modelKeyPath,
+        objectStack
+    }: {
+        value: any;
+        model: Model | null;
+        field: Field | null;
+        fieldListItem: FieldListItems | null;
+        valueKeyPath: (string | number)[];
+        modelKeyPath: string[];
+        objectStack: any[];
+    }) {
+        let error: string | null = null;
+        let modelField: FieldModelProps | null = null;
+
+        if (!model && !field && !fieldListItem) {
+            error = `could not match model/field ${modelKeyPath.join('.')} to content at ${valueKeyPath.join('.')}`;
+        }
+
+        if (field && isModelField(field)) {
+            modelField = field;
+        } else if (fieldListItem && isModelListItems(fieldListItem)) {
+            modelField = fieldListItem;
+        }
+
+        if (modelField) {
+            const modelResult = getModelOfObject({
+                object: value,
+                field: modelField,
+                modelsByName,
+                pageLayoutKey,
+                objectTypeKey,
+                valueKeyPath,
+                modelKeyPath
+            });
+            if ('error' in modelResult) {
+                error = modelResult.error;
+            } else {
+                model = modelResult.model;
+            }
+            field = null;
+            fieldListItem = null;
+            modelKeyPath = model ? [model.name] : [];
+        }
+
+        let shouldSkipNested = false;
+        const skipNested = () => {
+            shouldSkipNested = true;
+        };
+
+        const res = await iteratee({ value, model, field, fieldListItem, error, valueKeyPath, modelKeyPath, objectStack, skipNested });
+        if (!_.isUndefined(res)) {
+            value = res;
+        }
+
+        if (shouldSkipNested) {
+            return value;
+        }
+
+        if (_.isPlainObject(value)) {
+            // if fields will not be resolved or the object will have a key that
+            // doesn't exist among fields, the nested calls to _iterateDeep will
+            // include an error.
+            const fields = getFieldsOfModelOrField(model, field, fieldListItem);
+            const fieldsByName = _.keyBy(fields, 'name');
+            modelKeyPath = _.concat(modelKeyPath, 'fields');
+            value = await mapValuesPromise(value, (val, key) => {
+                const field = _.get(fieldsByName, key, null);
+                return _mapDeep({
+                    value: val,
+                    model: null,
+                    field: field,
+                    fieldListItem: null,
+                    valueKeyPath: _.concat(valueKeyPath, key),
+                    modelKeyPath: _.concat(modelKeyPath, key),
+                    objectStack: _.concat(objectStack, value)
+                });
+            });
+        } else if (_.isArray(value)) {
+            let fieldListItems: FieldListItems | null = null;
+            if (field && isListField(field)) {
+                fieldListItems = getListFieldItems(field);
+            } else if (model && isListDataModel(model)) {
+                fieldListItems = model.items;
+            }
+            value = await mapPromise(value, (val, idx) => {
+                return _mapDeep({
+                    value: val,
+                    model: null,
+                    field: null,
+                    fieldListItem: fieldListItems,
+                    valueKeyPath: _.concat(valueKeyPath, idx),
+                    modelKeyPath: _.concat(modelKeyPath, 'items'),
+                    objectStack: _.concat(objectStack, value)
+                });
+            });
+        }
+
+        return value;
+    }
+
+    return _mapDeep({
+        value: value,
+        model: model,
+        field: null,
+        fieldListItem: null,
+        valueKeyPath: valueId ? [valueId] : [],
+        modelKeyPath: [model.name],
+        objectStack: []
+    });
+}
+
 export function getModelOfObject({
     object,
     field,