@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tokens/automation/utils/index.ts

@@ -0,0 +1,939 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type {
+  ComponentConfig,
+  ComponentStateConfig,
+  LayerConfig,
+  PossibleStates,
+  SubComponentConfig,
+  VariantConfig,
+  VariantConfigWithComponentStates,
+  VariantConfigWithProperties,
+} from '@yahoo/uds/tokens';
+import type {
+  ConfigurablePropertiesName,
+  SelectedConfigurableProperty,
+} from '@yahoo/uds/tokens/automation/properties';
+import { configurableProperties } from '@yahoo/uds/tokens/automation/properties';
+import { isFunction, lowerCase, mergeWith } from 'lodash';
+
+import { generateSchemaKey } from './generateSchemaKey';
+
+type ThemeFn = (path: string) => string;
+
+type SchemaStateValue<T = any> = {
+  type: string;
+  valueType: 'alias' | 'custom';
+  value: T; // You might want to define a more specific type here
+};
+
+type VariableState = {
+  rest: SchemaStateValue;
+} & {
+  [K in PossibleStates]?: SchemaStateValue;
+};
+
+/**
+ * Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
+ * Adjust or extend as needed.
+ */
+const statePseudoMap: Record<PossibleStates | 'rest', string> = {
+  rest: '',
+  hover: ':hover:not(:has(:disabled))',
+  pressed: ':active:not(:has(:disabled))',
+  focused: ':focus',
+  'focus-within': ':focus-within',
+  // TODO: some of these are very specific to input we need to find a way to make them generic
+  invalid: ':has(input[aria-invalid="true"])',
+  'focused-keyboard': ':focus-visible',
+  visited: ':visited',
+  readonly: ':has(input:read-only)',
+  disabled: ':has(:disabled)',
+
+  // Compound selectors
+  'invalid&hover': ':has(input[aria-invalid="true"]):hover:not(:has(:disabled))',
+  'invalid&pressed': ':has(input[aria-invalid="true"]):active:not(:has(:disabled))',
+};
+
+export const statePseudoMapDocsMode: Record<PossibleStates | 'rest', string> = {
+  rest: '',
+  hover: 'hover',
+  pressed: 'active',
+  focused: 'focus',
+  'focus-within': 'focus-within',
+  invalid: 'has-input-invalid',
+  'focused-keyboard': 'focus-visible',
+  visited: 'visited',
+  readonly: 'input-readonly',
+  disabled: 'has-disabled',
+
+  // Compound selectors
+  'invalid&hover': 'has-input-invalid-and-hover',
+  'invalid&pressed': 'has-input-invalid-and-active',
+};
+
+export function findFixtureType(
+  property: SelectedConfigurableProperty<ConfigurablePropertiesName, string>,
+  variantKey: string,
+): string {
+  const defaultValue = property.defaults[variantKey];
+  const typeOfFixture = property.typeOfFixture;
+  // find the corresponding fixture type
+  let index = 0;
+  property.values.forEach((arrayOfValues, i) => {
+    if (arrayOfValues.includes(defaultValue)) {
+      index = i;
+    }
+  });
+  return typeOfFixture[index];
+}
+
+// We define a helper to produce the minimal shape at runtime
+// TODO: the return type shouldn't be `any` we need to have some sort of type safety for this, at least, just the shape
+export function toMinimalDbConfigObject<C extends ComponentConfig>(config: C): any {
+  const result: any = {};
+  // 1) "defaults"
+  // For each variant -> use the "default" if it is in `options`
+  const defaultsObj: any = {};
+  for (const variantKey in config.variants) {
+    const v = config.variants[variantKey];
+    // For runtime, we trust the user that "v.default" is in "v.options"
+    defaultsObj[variantKey] = v.default;
+  }
+  result.defaults = defaultsObj;
+
+  result.variables = {};
+  // for each variant key
+  for (const variantKey in config.variants) {
+    const variantConfig = config.variants[variantKey];
+    // for each variant option
+    for (const variantOption of variantConfig.options) {
+      // if we have componentStates
+      if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
+        const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
+          .componentStates;
+        // for each component state key
+        for (const componentStateKey in componentStates) {
+          const componentState = componentStates[componentStateKey];
+          // for each component state option
+          for (const componentStateOption of componentState.options) {
+            // for each layer key
+            for (const layerKey in componentState.layers) {
+              const layer = componentState.layers[layerKey];
+              // for each prop
+              const schemaKey = generateSchemaKey({
+                variantKey,
+                variantValue: variantOption,
+                stateKey: componentStateKey,
+                stateValue: componentStateOption,
+                layer: layerKey,
+              });
+
+              result.variables[schemaKey] = {};
+              for (const propKey in layer.properties) {
+                const prop = layer.properties[propKey];
+                // if the property has component states
+                // TODO: create a concrete type instead of using `any`
+                const variableObject: any = {
+                  [propKey]: {
+                    // for each pseudo state
+                    rest: {
+                      type: findFixtureType(prop, variantOption),
+                      valueType: 'alias',
+                      value: prop.defaults[variantOption],
+                    },
+                  },
+                };
+                if (prop.pseudoStates) {
+                  for (const pseudoState of prop.pseudoStates) {
+                    variableObject[propKey][pseudoState] = {
+                      type: findFixtureType(prop, variantOption),
+                      valueType: 'alias',
+                      value: prop.defaults[variantOption],
+                    };
+                  }
+                }
+                // add it to the result
+                result.variables[schemaKey] = {
+                  ...result.variables[schemaKey],
+                  ...variableObject,
+                };
+              }
+            }
+          }
+        }
+      }
+      // we don't have component states
+      else {
+        // for each layer key
+        for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
+          const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
+          // for each prop
+          const schemaKey = generateSchemaKey({
+            variantKey,
+            variantValue: variantOption,
+            layer: layerKey,
+          });
+
+          result.variables[schemaKey] = {};
+          for (const propKey in layer.properties) {
+            const prop = layer.properties[propKey];
+            // if the property has component states
+            // TODO: create a concrete type instead of using `any`
+            const variableObject: any = {
+              [propKey]: {
+                rest: {
+                  type: findFixtureType(prop, variantOption),
+                  valueType: 'alias',
+                  value: prop.defaults[variantOption],
+                },
+              },
+            };
+            if (prop.pseudoStates) {
+              for (const pseudoState of prop.pseudoStates) {
+                variableObject[propKey][pseudoState] = {
+                  type: findFixtureType(prop, variantOption),
+                  valueType: 'alias',
+                  value: prop.defaults[variantOption],
+                };
+              }
+            }
+            // add it to the result
+            result.variables[schemaKey] = {
+              ...result.variables[schemaKey],
+              ...variableObject,
+            };
+          }
+        }
+      }
+    }
+  }
+
+  // if we have sub components
+  if (config.subComponents) {
+    const { subComponents } = config;
+    for (const subComponentKey in subComponents) {
+      // for each variant key
+      for (const variantKey in subComponents[subComponentKey].variants) {
+        const variantConfig = subComponents[subComponentKey].variants[variantKey];
+        // add to the defaults
+        result.defaults[variantKey] = variantConfig.default;
+        // for each variant option
+        for (const variantOption of variantConfig.options) {
+          // if we have componentStates
+          if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
+            const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
+              .componentStates;
+            // for each component state key
+            for (const componentStateKey in componentStates) {
+              const componentState = componentStates[componentStateKey];
+              // for each component state option
+              for (const componentStateOption of componentState.options) {
+                // for each layer key
+                for (const layerKey in componentState.layers) {
+                  const layer = componentState.layers[layerKey];
+                  // for each prop
+                  const schemaKey = generateSchemaKey({
+                    variantKey,
+                    variantValue: variantOption,
+                    stateKey: componentStateKey,
+                    stateValue: componentStateOption,
+                    layer: layerKey,
+                    subComponentName: subComponentKey,
+                  });
+                  result.variables[schemaKey] = {};
+                  for (const propKey in layer.properties) {
+                    const prop = layer.properties[propKey];
+                    // if the property has component states
+                    // TODO: create a concrete type instead of using `any`
+                    const variableObject: any = {
+                      [propKey]: {
+                        rest: {
+                          type: findFixtureType(prop, variantOption),
+                          valueType: 'alias',
+                          value: prop.defaults[variantOption],
+                        },
+                      },
+                    };
+                    if (prop.pseudoStates) {
+                      for (const pseudoState of prop.pseudoStates) {
+                        variableObject[propKey][pseudoState] = {
+                          type: findFixtureType(prop, variantOption),
+                          valueType: 'alias',
+                          value: prop.defaults[variantOption],
+                        };
+                      }
+                    }
+                    // add it to the result
+                    result.variables[schemaKey] = {
+                      ...result.variables[schemaKey],
+                      ...variableObject,
+                    };
+                  }
+                }
+              }
+            }
+          }
+          // we don't have component states
+          else {
+            // for each layer key
+            for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
+              const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
+              // for each prop
+              const schemaKey = generateSchemaKey({
+                variantKey,
+                variantValue: variantOption,
+                layer: layerKey,
+                subComponentName: subComponentKey,
+              });
+
+              result.variables[schemaKey] = {};
+              for (const propKey in layer.properties) {
+                const prop = layer.properties[propKey];
+                // if the property has component states
+                // TODO: create a concrete type instead of using `any`
+                const variableObject: any = {
+                  [propKey]: {
+                    rest: {
+                      type: findFixtureType(prop, variantOption),
+                      valueType: 'alias',
+                      value: prop.defaults[variantOption],
+                    },
+                  },
+                };
+                if (prop.pseudoStates) {
+                  for (const pseudoState of prop.pseudoStates) {
+                    variableObject[propKey][pseudoState] = {
+                      type: findFixtureType(prop, variantOption),
+                      valueType: 'alias',
+                      value: prop.defaults[variantOption],
+                    };
+                  }
+                }
+                // add it to the result
+                result.variables[schemaKey] = {
+                  ...result.variables[schemaKey],
+                  ...variableObject,
+                };
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+export function generateClassName({
+  componentName,
+  variantKey,
+  variantValue,
+  layer,
+  layerOptionalPseudoSelector,
+  subComponentName,
+  stateKey,
+  stateValue,
+}: {
+  componentName: string;
+  variantKey: string;
+  variantValue?: string;
+  layer: string;
+  layerOptionalPseudoSelector?: string;
+  subComponentName?: string;
+  stateKey?: string;
+  stateValue?: string;
+}): string {
+  let className = '';
+  if (subComponentName) {
+    className = `uds-${lowerCase(componentName)}-${lowerCase(subComponentName)}-${lowerCase(variantKey)}`;
+  } else {
+    className = `uds-${lowerCase(componentName)}-${lowerCase(variantKey)}`;
+  }
+
+  if (variantValue) {
+    className = `${className}-${lowerCase(variantValue)}`;
+  }
+
+  if (stateKey && stateValue) {
+    className = `${className}-${lowerCase(stateKey)}-${lowerCase(stateValue)}`;
+  }
+
+  className = `${className}-${lowerCase(layer)}`;
+
+  if (layerOptionalPseudoSelector) {
+    className = `${className}${layerOptionalPseudoSelector}`;
+  }
+
+  return className.replaceAll(/\s+/g, '-');
+}
+
+export function generateDeclaration({
+  componentName,
+  variantKey,
+  variantValue,
+  layer,
+  layerOptionalPseudoSelector,
+  subComponentName,
+  stateKey,
+  stateValue,
+  schema,
+  propertyKey,
+  originalPropertyDefinition,
+  theme,
+  currentStyles,
+  previewOptions,
+}: {
+  componentName: string;
+  variantKey: string;
+  variantValue: string;
+  layer: string;
+  layerOptionalPseudoSelector?: string; // only gets applied to non root layers
+  subComponentName?: string;
+  stateKey?: string;
+  stateValue?: string;
+  // TODO: define and use a type for the Schema
+  schema: unknown;
+  propertyKey: string;
+  originalPropertyDefinition: SelectedConfigurableProperty<ConfigurablePropertiesName, any>;
+  theme: ThemeFn;
+  currentStyles: Readonly<Record<string, Record<string, string>>>;
+  previewOptions?: {
+    generatePseudoStateClassModifier?: boolean;
+  };
+}) {
+  /// Logic for generating the class names:
+  /// If its the root layer
+  /// - if we have component states
+  ///   - We need to combine the class that has the variant and the class that has the component state
+  ///   => example: '.uds-chip-toggle-variant-primary-root.uds-chip-toggle-variant-active-off-root'
+  /// - else
+  ///   - We only need one class for the root layer
+  ///   => example: '.uds-chip-link-variant-primary-root'
+  /// If its not the root layer
+  /// - We need to nest the child layer under the root layer
+  /// - if we have component states
+  ///   - The child layer should only have the variant and its value present since the root layer already has the component state present
+  ///   => example: '.uds-chip-toggle-variant-primary-root.uds-chip-toggle-variant-active-off-root .uds-chip-toggle-variant-primary-icon'
+  /// - If we dont have component state
+  ///   => example: '.uds-chip-dismissible-variant-primary-root .uds-chip-dismissible-variant-primary-icon'
+  /// Note: The classes should match what's on `autoVariants.ts`
+  const schemaKey = generateSchemaKey({
+    variantKey,
+    variantValue,
+    layer,
+    subComponentName,
+    stateKey,
+    stateValue,
+  });
+
+  let className = generateClassName({
+    componentName,
+    variantKey,
+    variantValue,
+    layer,
+    subComponentName,
+    stateKey,
+    stateValue,
+  });
+
+  // @ts-expect-error - fix the types later
+  const propertySelectedValueInSchema = schema.variables[schemaKey][propertyKey] as VariableState;
+
+  if (!propertySelectedValueInSchema) {
+    if (schemaKey === 'size/md/root' && propertyKey === 'spacingHorizontal') {
+      // @ts-expect-error - log
+      console.log({ componentName, schemaKey, propertyKey }, schema.variables);
+    }
+
+    throw new Error(
+      `Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`,
+    );
+  }
+
+  const styles: Record<string, Record<string, string>> = {};
+  // loop through the property states
+  for (const stateStr in propertySelectedValueInSchema) {
+    const state = stateStr as keyof VariableState;
+    const pseudo = statePseudoMap[state] ?? '';
+    const schemaValueForState = propertySelectedValueInSchema[state] as SchemaStateValue;
+
+    let fullClassName = ``;
+    if (layer === 'root') {
+      // We need to nest the component state classes under the variant classes
+      if (stateKey && stateValue) {
+        // We need to nest the component state classes under the variant class
+        const rootVariantClass = generateClassName({
+          componentName,
+          variantKey,
+          variantValue,
+          layer,
+          subComponentName,
+        });
+
+        className = generateClassName({
+          componentName,
+          variantKey,
+          layer,
+          subComponentName,
+          stateKey,
+          stateValue,
+        });
+
+        fullClassName = `.${rootVariantClass}${pseudo}.${className}`;
+      } else {
+        fullClassName = `.${className}${pseudo}`;
+      }
+    } else {
+      const rootVariantClassName = generateClassName({
+        componentName,
+        variantKey,
+        variantValue,
+        layer: 'root',
+        subComponentName,
+      });
+
+      if (stateKey && stateValue) {
+        const rootVariantClassNameWithComponentState = generateClassName({
+          componentName,
+          variantKey,
+          layer: 'root',
+          subComponentName,
+          stateKey,
+          stateValue,
+        });
+        // the layer class name should not have component states, but we need the variant key and value
+        className = generateClassName({
+          componentName,
+          variantKey,
+          variantValue,
+          layer,
+          layerOptionalPseudoSelector,
+          subComponentName,
+        });
+        fullClassName = `.${rootVariantClassName}${pseudo}.${rootVariantClassNameWithComponentState} .${className}`;
+      } else {
+        fullClassName = `.${rootVariantClassName}${pseudo} .${className}`;
+      }
+    }
+
+    const getTheCssPropertyValue = (
+      schemaStateValue: SchemaStateValue,
+      propertyName: keyof typeof configurableProperties,
+      theme: ThemeFn,
+      existingValue?: string,
+    ): string => {
+      const { value, type } = schemaStateValue;
+      const propertyConfig = configurableProperties[propertyName];
+
+      let newValue: string;
+      if (configurableProperties[propertyName].customValueRenderer) {
+        newValue = configurableProperties[propertyName].customValueRenderer(
+          schemaStateValue,
+          schema,
+          theme,
+        );
+      } else {
+        const twThemePath = configurableProperties[propertyName].twThemePath(
+          // @ts-expect-error - fix the types later
+          type,
+          String(value),
+        );
+        newValue = theme(twThemePath);
+      }
+
+      // If this property should be concatenated with existing values and we have an existing value
+      if (propertyConfig.concatenate && existingValue) {
+        const delimiter = propertyConfig.concatenationDelimiter || ', ';
+        return `${existingValue}${delimiter}${newValue}`;
+      }
+
+      return newValue;
+    };
+
+    // we need to get the property definition from the typescript object
+    // because we need to know the property name (not just the fixture type)
+    const { cssProperties, extendedProperties: extendedPropertiesGetter } =
+      configurableProperties[originalPropertyDefinition.name];
+    const cssDeclarations: Record<string, string> = {};
+
+    // Extended properties can either be a hardcoded array of strings or a function that returns an array of strings.
+    const isExtendedPropertiesFunction = isFunction(extendedPropertiesGetter);
+    const extendedProperties = isExtendedPropertiesFunction
+      ? extendedPropertiesGetter({ componentName, subComponentName, layer, propertyKey })
+      : extendedPropertiesGetter;
+
+    if (extendedProperties && extendedProperties.length) {
+      if (
+        !isExtendedPropertiesFunction &&
+        (typeof cssProperties === 'string' ||
+          (Array.isArray(cssProperties) && cssProperties.length > 0))
+      ) {
+        throw new Error(
+          'Invalid configuration: cssProperties should not be configured when extendedProperties are defined. Please update your property configuration accordingly.',
+        );
+      }
+
+      for (const extendedProp of extendedProperties) {
+        const originalPropertyDefinition = configurableProperties[extendedProp];
+        const cssPropertiesRef = originalPropertyDefinition.cssProperties;
+
+        if (typeof cssPropertiesRef === 'string') {
+          const existingValue = currentStyles?.[fullClassName]?.[cssPropertiesRef];
+
+          cssDeclarations[cssPropertiesRef] = getTheCssPropertyValue(
+            schemaValueForState,
+            extendedProp,
+            theme,
+            existingValue,
+          );
+        } else if (Array.isArray(cssPropertiesRef)) {
+          for (const cssProp of cssPropertiesRef) {
+            const existingValue = currentStyles?.[fullClassName]?.[cssProp];
+
+            cssDeclarations[cssProp] = getTheCssPropertyValue(
+              schemaValueForState,
+              extendedProp,
+              theme,
+              existingValue,
+            );
+          }
+        }
+      }
+    } else {
+      if (typeof cssProperties === 'string') {
+        // Check if we already have a value for this CSS property
+        const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
+
+        cssDeclarations[cssProperties] = getTheCssPropertyValue(
+          schemaValueForState,
+          originalPropertyDefinition.name,
+          theme,
+          existingValue,
+        );
+      } else if (Array.isArray(cssProperties)) {
+        for (const cssProp of cssProperties) {
+          const existingValue = currentStyles?.[fullClassName]?.[cssProp];
+
+          cssDeclarations[cssProp] = getTheCssPropertyValue(
+            schemaValueForState,
+            originalPropertyDefinition.name,
+            theme,
+            existingValue,
+          );
+        }
+      }
+    }
+
+    if (!styles[fullClassName]) {
+      styles[fullClassName] = {
+        ...cssDeclarations,
+        ...styles[fullClassName],
+      };
+    }
+
+    // todo rename to prefix
+    if (previewOptions?.generatePseudoStateClassModifier) {
+      const pseudoPrefixClass = statePseudoMapDocsMode[state] ?? '';
+
+      if (pseudoPrefixClass.length > 0 && stateStr !== 'root') {
+        // Add !important to all CSS declarations for docs mode to ensure they override pseudo-class styles
+        const importantCssDeclarations = Object.fromEntries(
+          Object.entries(cssDeclarations).map(([prop, value]) => [prop, `${value} !important`]),
+        );
+
+        styles[`.${pseudoPrefixClass}${fullClassName}`.replace(pseudo, '')] = {
+          ...importantCssDeclarations,
+          ...styles[`.${pseudoPrefixClass}${fullClassName}`.replace(pseudo, '')],
+        };
+      }
+    }
+  }
+
+  return styles;
+}
+
+export function generateStyles<C extends ComponentConfig>(
+  config: C,
+  schema: any,
+  theme: ThemeFn,
+  previewOptions?: {
+    generatePseudoStateClassModifier: boolean;
+  },
+): Record<string, Record<string, string>> {
+  function deepMerge<T extends object, U extends object>(target: T, source: U): T & U {
+    return mergeWith({}, target, source);
+  }
+
+  let componentName = config.label.toLowerCase();
+  if (config.overrideComponentName) {
+    componentName = config.overrideComponentName.toLowerCase();
+  }
+
+  let styles: Record<string, Record<string, string>> = {};
+  for (const variantKey in config.variants) {
+    const variantConfig = config.variants[variantKey];
+    // for each variant option
+    for (const variantOption of variantConfig.options) {
+      // if we have componentStates
+      if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
+        const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
+          .componentStates;
+        // for each component state key
+        for (const componentStateKey in componentStates) {
+          const componentState = componentStates[componentStateKey];
+          // for each component state option
+          for (const componentStateOption of componentState.options) {
+            // for each layer key
+            for (const layerKey in componentState.layers) {
+              const layer = componentState.layers[layerKey];
+              // for each prop
+              for (const propertyKey in layer.properties) {
+                const originalPropertyDefinition = layer.properties[propertyKey];
+                const declarations = generateDeclaration({
+                  componentName,
+                  variantKey,
+                  variantValue: variantOption,
+                  stateKey: componentStateKey,
+                  stateValue: componentStateOption,
+                  layer: layerKey,
+                  layerOptionalPseudoSelector: layer.pseudoSelector,
+                  propertyKey,
+                  originalPropertyDefinition,
+                  theme,
+                  schema,
+                  currentStyles: styles,
+                  previewOptions,
+                });
+                styles = deepMerge(styles, declarations);
+              }
+            }
+          }
+        }
+      }
+      // we don't have component states
+      else {
+        // for each layer key
+        for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
+          const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
+
+          for (const propertyKey in layer.properties) {
+            const originalPropertyDefinition = layer.properties[propertyKey];
+            const declarations = generateDeclaration({
+              componentName,
+              variantKey,
+              variantValue: variantOption,
+              layer: layerKey,
+              layerOptionalPseudoSelector: layer.pseudoSelector,
+              propertyKey,
+              originalPropertyDefinition,
+              theme,
+              schema,
+              currentStyles: styles,
+              previewOptions,
+            });
+            styles = deepMerge(styles, declarations);
+          }
+        }
+      }
+    }
+  }
+
+  // if we have sub components
+  if (config.subComponents) {
+    const { subComponents } = config;
+    for (const subComponentKey in subComponents) {
+      // for each variant key
+      for (const variantKey in subComponents[subComponentKey].variants) {
+        const variantConfig = subComponents[subComponentKey].variants[variantKey];
+        // for each variant option
+        for (const variantOption of variantConfig.options) {
+          // if we have componentStates
+          if ((variantConfig as VariantConfigWithComponentStates<string>).componentStates) {
+            const componentStates = (variantConfig as VariantConfigWithComponentStates<string>)
+              .componentStates;
+            // for each component state key
+            for (const componentStateKey in componentStates) {
+              const componentState = componentStates[componentStateKey];
+              // for each component state option
+              for (const componentStateOption of componentState.options) {
+                // for each layer key
+                for (const layerKey in componentState.layers) {
+                  const layer = componentState.layers[layerKey];
+                  for (const propertyKey in layer.properties) {
+                    const originalPropertyDefinition = layer.properties[propertyKey];
+                    const declarations = generateDeclaration({
+                      componentName,
+                      variantKey,
+                      variantValue: variantOption,
+                      stateKey: componentStateKey,
+                      stateValue: componentStateOption,
+                      subComponentName: subComponentKey,
+                      layer: layerKey,
+                      layerOptionalPseudoSelector: layer.pseudoSelector,
+                      propertyKey,
+                      originalPropertyDefinition,
+                      theme,
+                      schema,
+                      currentStyles: styles,
+                      previewOptions,
+                    });
+                    styles = deepMerge(styles, declarations);
+                  }
+                }
+              }
+            }
+          }
+          // we don't have component states
+          else {
+            // for each layer key
+            for (const layerKey in (variantConfig as VariantConfigWithProperties).layers) {
+              const layer = (variantConfig as VariantConfigWithProperties).layers[layerKey];
+              // for each prop
+              for (const propertyKey in layer.properties) {
+                // if the property has component states
+                const originalPropertyDefinition = layer.properties[propertyKey];
+                const declarations = generateDeclaration({
+                  componentName,
+                  subComponentName: subComponentKey,
+                  variantKey,
+                  variantValue: variantOption,
+                  layer: layerKey,
+                  layerOptionalPseudoSelector: layer.pseudoSelector,
+                  propertyKey,
+                  originalPropertyDefinition,
+                  theme,
+                  schema,
+                  currentStyles: styles,
+                  previewOptions,
+                });
+                styles = deepMerge(styles, declarations);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return styles;
+}
+
+export function createConfigurableProperty<
+  C extends ConfigurablePropertiesName,
+  O extends string,
+  T extends (typeof configurableProperties)[C]['possibleFixtures'],
+  V extends readonly (readonly string[])[] = readonly (readonly string[])[],
+>(prop: {
+  name: C;
+  typeOfFixture: T;
+  values: V;
+  defaults: { [K in O]: V[number][number] };
+  label: string;
+  pseudoStates?: PossibleStates[];
+  supportsCustom?: boolean;
+}): SelectedConfigurableProperty<C, O, T, V> {
+  return prop;
+}
+
+/**
+ * @deprecated use the new functions instead
+ */
+export function createVariantConfig<
+  O extends string,
+  T extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, O>>,
+>(config: {
+  label: string;
+  description: string;
+  isConfigurable: boolean;
+  default: O;
+  options: readonly O[];
+  properties: T;
+}): VariantConfig<O> {
+  return config;
+}
+
+export function createComponentStateConfig(config: {
+  label: string;
+  options: string[];
+  layers: {
+    root: LayerConfig;
+  } & Record<string, LayerConfig>;
+}): ComponentStateConfig {
+  return config;
+}
+
+export function createVariantConfigWithProperties(config: {
+  label: string;
+  description: string;
+  isConfigurable: boolean;
+  default: string;
+  options: readonly string[];
+  layers: {
+    root: LayerConfig;
+  } & Record<string, LayerConfig>;
+}): VariantConfigWithProperties {
+  return config;
+}
+
+export function createVariantConfigWithComponentStates(config: {
+  label: string;
+  description: string;
+  isConfigurable: boolean;
+  default: string;
+  options: readonly string[];
+  componentStates: Record<string, ComponentStateConfig>;
+}): VariantConfigWithComponentStates {
+  return config;
+}
+
+export function createComponentStates(config: {
+  label: string;
+  options: string[];
+  layers: {
+    root: LayerConfig;
+  } & Record<string, LayerConfig>;
+}): ComponentStateConfig {
+  return config;
+}
+
+export function createLayerConfig(config: {
+  label: string;
+  // a pseudo selector to apply to the layer (example placeholder on input)
+  pseudoSelector?: string;
+  properties: Readonly<
+    Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>
+  >;
+}): LayerConfig {
+  return config;
+}
+
+export function createSubComponentConfig(config: {
+  label: string;
+  description: string;
+  overrideComponentName?: string;
+  variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
+}): SubComponentConfig {
+  return config;
+}
+
+export type { SchemaStateValue };
+export { cartesianProduct } from './cartesianProduct';
+export { coalesceConfigVariant } from './coalesceConfigVariant';
+export { getConfigDefaultValue, isConfigDefaultValue } from './defaults';
+export { generateKeyFromFlatConfigPath } from './generateKeyFromFlatConfigPath';
+export { generateSchemaKey } from './generateSchemaKey';
+export {
+  getConfigVariantComponentStates,
+  getConfigVariantComponentStatesMatrix,
+} from './getConfigVariantComponentStatesMatrix';
+export { getConfigVariantProperties } from './getConfigVariantProperties';
+export { getConfigVariantPseudoStates } from './getConfigVariantPseudoStates';
+export { getConfigVariants } from './getConfigVariants';
+export { getConfigSubcomponents } from './subcomponents';
+export {
+  getConfigPseudoStateVariables,
+  getConfigPseudoStateVariablesWithSetter,
+  setConfigPseudoStateVariable,
+} from './variableData';