@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tokens/automation/properties.ts

@@ -0,0 +1,433 @@
+import type {
+  AllPossibleProperties,
+  PossibleStates,
+  SchemaStateValue,
+  ShadowType,
+  ShadowVariantConfig,
+} from '@yahoo/uds/tokens';
+
+import { textVariantsSafe } from '../../tailwind/components/getResponsiveTextStyles';
+import { getShadowLayerValue } from '../../tailwind/utils/getShadowPresetValues';
+import { mapTextVariantFixtureToValue } from './mapTextVariantFixtureToValue';
+import { mapColorFixtureToValue } from './utils/mapColorFixtureToValue';
+
+type DispatchContext = {
+  componentName: string;
+  subComponentName?: string;
+  propertyKey: string;
+  layer: string;
+};
+
+// TODO: Find a better home or way to dispatch this.
+const shouldUseOutlineInsteadOfBorder = ({
+  componentName,
+  layer,
+  propertyKey,
+}: DispatchContext): boolean => {
+  if (
+    componentName === 'chip' &&
+    layer === 'root' &&
+    ['borderColor', 'borderWidth'].includes(propertyKey)
+  ) {
+    return true;
+  }
+
+  if (
+    componentName === 'input' &&
+    layer === 'inputWrapper' &&
+    ['borderColor', 'borderWidth'].includes(propertyKey)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
+  name: string;
+  // The css properties that this configurable property affects
+  // they will all have the same value
+  cssProperties: string | string[];
+  // Accepts only one of the allowed fixture values
+  // TODO: once you have more info, make value more type safe
+  twThemePath: (selected: T, value: string) => string;
+  // possibleFixtures here represents the union of allowed fixture values.
+  possibleFixtures: T[];
+  // some properties are composed of other properties (example: text variant)
+  extendedProperties?:
+    | ExtendablePropertiesName[]
+    | ((context: DispatchContext) => ExtendablePropertiesName[] | undefined | false);
+  // custom value renderer - if present, this will be used instead of twThemePath
+  customValueRenderer?: (
+    schemaStateValue: SchemaStateValue<CVR>,
+    schema: unknown,
+    themeGetter: (path: string) => string,
+  ) => string;
+  // Flag to indicate this property's values should be concatenated
+  concatenate?: boolean;
+  // How to join multiple values (default: ", ")
+  concatenationDelimiter?: string;
+}
+
+/// CONFIGURABLE PROPERTIES
+const backgroundColor: ConfigurableProperty<
+  'backgroundPaletteColors' | 'spectrumColors' | 'alwaysPaletteAliases'
+> = {
+  name: 'backgroundColor',
+  cssProperties: 'background-color',
+  twThemePath: mapColorFixtureToValue,
+  possibleFixtures: ['backgroundPaletteColors', 'spectrumColors', 'alwaysPaletteAliases'] as const,
+};
+
+const fontSize: ConfigurableProperty<'textVariants'> = {
+  name: 'fontSize',
+  cssProperties: 'font-size',
+  twThemePath: mapTextVariantFixtureToValue('fontSize'),
+  possibleFixtures: ['textVariants'] as const,
+};
+
+const fontVariationSettings: ConfigurableProperty<'textVariants'> = {
+  name: 'fontVariationSettings',
+  cssProperties: 'font-variation-settings',
+  twThemePath: () => {
+    return ``;
+  },
+  possibleFixtures: ['textVariants'] as const,
+  customValueRenderer: (schemaValue) => {
+    const { value: rawValue } = schemaValue;
+    const value = textVariantsSafe(rawValue as string);
+    return `"wght" var(--uds-font-weight-${value}), "slnt" var(--uds-font-slant-${value}), "wdth" var(--uds-font-width-${value});`;
+  },
+};
+
+const fontWeight: ConfigurableProperty<'textVariants'> = {
+  name: 'fontWeight',
+  cssProperties: 'font-weight',
+  twThemePath: mapTextVariantFixtureToValue('fontWeight'),
+  possibleFixtures: ['textVariants'] as const,
+};
+
+const fontFamily: ConfigurableProperty<'textVariants'> = {
+  name: 'fontFamily',
+  cssProperties: 'font-family',
+  twThemePath: mapTextVariantFixtureToValue('fontFamily'),
+  possibleFixtures: ['textVariants'] as const,
+};
+
+const gap: ConfigurableProperty<'spacingAliases'> = {
+  name: 'gap',
+  cssProperties: 'gap',
+  twThemePath: (selected, value) => `spacing[${value}]`,
+  possibleFixtures: ['spacingAliases'] as const,
+};
+
+const color: ConfigurableProperty<
+  'alwaysPaletteAliases' | 'spectrumColors' | 'foregroundPaletteColors'
+> = {
+  name: 'color',
+  cssProperties: 'color',
+  twThemePath: mapColorFixtureToValue,
+  possibleFixtures: ['alwaysPaletteAliases', 'spectrumColors', 'foregroundPaletteColors'] as const,
+};
+
+const borderWidth: ConfigurableProperty<'borderWidths' | 'spacingAliases'> = {
+  name: 'borderWidth',
+  cssProperties: 'border-width',
+  twThemePath: (selected, value) => {
+    if (selected === 'borderWidths') {
+      return `borderWidth[${value}]`;
+    } else {
+      return `spacing[${value}]`;
+    }
+  },
+  possibleFixtures: ['borderWidths', 'spacingAliases'] as const,
+  extendedProperties: (context) =>
+    shouldUseOutlineInsteadOfBorder(context) && [
+      'outlineWidth',
+      'insetOutlineOffset',
+      'solidOutline',
+    ],
+};
+
+const borderColor: ConfigurableProperty<
+  'alwaysPaletteAliases' | 'spectrumColors' | 'linePaletteColors'
+> = {
+  name: 'borderColor',
+  cssProperties: 'border-color',
+  twThemePath: mapColorFixtureToValue,
+  possibleFixtures: ['alwaysPaletteAliases', 'spectrumColors', 'linePaletteColors'] as const,
+  extendedProperties: (context) => shouldUseOutlineInsteadOfBorder(context) && ['outlineColor'],
+};
+
+const outlineWidth: ConfigurableProperty<'borderWidths' | 'spacingAliases'> = {
+  name: 'outlineWidth',
+  cssProperties: 'outline-width',
+  twThemePath: (type, value) =>
+    type === 'borderWidths' ? `borderWidth[${value}]` : `spacing[${value}]`,
+  possibleFixtures: ['borderWidths', 'spacingAliases'] as const,
+};
+
+const solidOutline: ConfigurableProperty<never> = {
+  name: 'solidOutline',
+  cssProperties: 'outline-style',
+  twThemePath: () => '',
+  customValueRenderer: () => 'solid',
+  possibleFixtures: [] as const,
+};
+
+const insetOutlineOffset: ConfigurableProperty<'borderWidths' | 'spacingAliases'> = {
+  name: 'insetOutlineOffset',
+  cssProperties: 'outline-offset',
+  twThemePath: () => '',
+  customValueRenderer: ({ value, type }, schema, theme) => {
+    const width =
+      type === 'borderWidths' ? theme(`borderWidth[${value}]`) : theme(`spacing[${value}]`);
+
+    return `calc(-1 * ${width})`;
+  },
+  possibleFixtures: ['borderWidths', 'spacingAliases'] as const,
+};
+
+const outlineColor: ConfigurableProperty<
+  'alwaysPaletteAliases' | 'spectrumColors' | 'linePaletteColors'
+> = {
+  name: 'outlineColor',
+  cssProperties: 'outline-color',
+  twThemePath: mapColorFixtureToValue,
+  possibleFixtures: ['alwaysPaletteAliases', 'spectrumColors', 'linePaletteColors'] as const,
+};
+
+const borderRadius: ConfigurableProperty<'borderRadii'> = {
+  name: 'borderRadius',
+  cssProperties: 'border-radius',
+  twThemePath: (selected, value) => `borderRadius.${value}`,
+  possibleFixtures: ['borderRadii'] as const,
+};
+
+const padding: ConfigurableProperty<'spacingAliases'> = {
+  name: 'padding',
+  cssProperties: 'padding',
+  twThemePath: (selected, value) => `spacing[${value}]`,
+  possibleFixtures: ['spacingAliases'] as const,
+};
+
+const iconSize: ConfigurableProperty<'iconSizes'> = {
+  name: 'iconSize',
+  cssProperties: ['width', 'height'],
+  twThemePath: (selected, value) => `sizing.icon.${value}`,
+  possibleFixtures: ['iconSizes'] as const,
+};
+
+const spacingHorizontal: ConfigurableProperty<'spacingAliases'> = {
+  name: 'spacingHorizontal',
+  cssProperties: ['padding-right', 'padding-left'],
+  twThemePath: (selected, value) => `spacing[${value}]`,
+  possibleFixtures: ['spacingAliases'] as const,
+};
+
+const spacingVertical: ConfigurableProperty<'spacingAliases'> = {
+  name: 'spacingVertical',
+  cssProperties: ['padding-top', 'padding-bottom'],
+  twThemePath: (selected, value) => `spacing[${value}]`,
+  possibleFixtures: ['spacingAliases'] as const,
+};
+
+const textTransform: ConfigurableProperty<'textVariants'> = {
+  name: 'textTransform',
+  cssProperties: 'text-transform',
+  twThemePath: mapTextVariantFixtureToValue('textTransform'),
+  possibleFixtures: ['textVariants'] as const,
+};
+
+const lineHeight: ConfigurableProperty<'textVariants'> = {
+  name: 'lineHeight',
+  cssProperties: 'line-height',
+  twThemePath: mapTextVariantFixtureToValue('lineHeight'),
+  possibleFixtures: ['textVariants'] as const,
+};
+
+const textVariant: ConfigurableProperty<'textVariants'> = {
+  name: 'textVariant',
+  cssProperties: [],
+  twThemePath: () => {
+    return ``;
+  },
+  possibleFixtures: ['textVariants'] as const,
+  extendedProperties: [
+    'fontSize',
+    'fontWeight',
+    'fontFamily',
+    'lineHeight',
+    'textTransform',
+    'fontVariationSettings',
+  ],
+};
+
+const shadow: ConfigurableProperty<'shadowVariants', ShadowVariantConfig | string> = {
+  name: 'drop shadow',
+  cssProperties: 'box-shadow',
+  twThemePath: () => {
+    return ``;
+  },
+  concatenate: true,
+  customValueRenderer: (schemaValue) => {
+    const shadowType: ShadowType = 'drop';
+    const noneValue = '0 0 0 transparent';
+
+    if (schemaValue.valueType === 'alias') {
+      const noneValue = '0 0 0 transparent';
+
+      if (schemaValue.value === 'none') {
+        return noneValue;
+      }
+      if (schemaValue.value !== 'custom') {
+        return `var(--uds-${shadowType}-shadow-${schemaValue.value})`;
+      }
+    } else if (schemaValue.valueType === 'custom') {
+      const customShadowPresetVals = (schemaValue.value as ShadowVariantConfig).map(
+        (preset, index) =>
+          getShadowLayerValue({
+            preset,
+            shadowType,
+            prefix: index > 0 ? `${index + 1}` : undefined,
+          }),
+      );
+
+      return customShadowPresetVals?.join(', ') || noneValue;
+    }
+
+    throw new Error('Invalid valueType');
+  },
+  possibleFixtures: ['shadowVariants'] as const,
+};
+
+const insetShadow: ConfigurableProperty<'shadowVariantsWithInvert', ShadowVariantConfig | string> =
+  {
+    name: 'inset shadow',
+    cssProperties: 'box-shadow',
+    twThemePath: () => {
+      return ``;
+    },
+    concatenate: true,
+    customValueRenderer: (schemaValue) => {
+      const shadowType: ShadowType = 'inset';
+      const noneValue = '0 0 0 transparent';
+
+      if (schemaValue.valueType === 'alias') {
+        const noneValue = '0 0 0 transparent';
+
+        if (schemaValue.value === 'none') {
+          return noneValue;
+        }
+        if (schemaValue.value !== 'custom') {
+          return `var(--uds-${shadowType}-shadow-${schemaValue.value})`;
+        }
+      } else if (schemaValue.valueType === 'custom') {
+        const customShadowPresetVals = (schemaValue.value as ShadowVariantConfig).map(
+          (preset, index) =>
+            getShadowLayerValue({
+              preset,
+              shadowType,
+              prefix: index > 0 ? `${index + 1}` : undefined,
+            }),
+        );
+
+        return customShadowPresetVals?.join(', ') || noneValue;
+      }
+
+      throw new Error('Invalid valueType');
+    },
+    possibleFixtures: ['shadowVariantsWithInvert'] as const,
+  };
+
+const height: ConfigurableProperty<'spacingAliases'> = {
+  name: 'height',
+  cssProperties: 'height',
+  twThemePath: (selected, value) => {
+    return `height[${value}]`;
+  },
+  possibleFixtures: ['spacingAliases'] as const,
+};
+
+const width: ConfigurableProperty<'spacingAliases'> = {
+  name: 'width',
+  cssProperties: 'width',
+  twThemePath: (selected, value) => {
+    return `width[${value}]`;
+  },
+  possibleFixtures: ['spacingAliases'] as const,
+};
+
+const textDecorationLine: ConfigurableProperty<'textDecorationLines'> = {
+  name: 'textDecorationLine',
+  cssProperties: 'text-decoration-line',
+  possibleFixtures: ['textDecorationLines'] as const,
+  twThemePath: () => {
+    return ``;
+  },
+  customValueRenderer: (schemaValue) => {
+    return String(schemaValue.value);
+  },
+};
+
+const publicProperties = {
+  backgroundColor,
+  borderWidth,
+  borderRadius,
+  borderColor,
+  fontFamily,
+  fontSize,
+  fontVariationSettings,
+  lineHeight,
+  textTransform,
+  padding,
+  gap,
+  color,
+  fontWeight,
+  iconSize,
+  spacingHorizontal,
+  spacingVertical,
+  textVariant,
+  textDecorationLine,
+  shadow,
+  insetShadow,
+  height,
+  width,
+} as const;
+
+const internalProperties = {
+  outlineWidth,
+  outlineColor,
+  insetOutlineOffset,
+  solidOutline,
+};
+
+export const configurableProperties = {
+  ...publicProperties,
+  ...internalProperties,
+};
+
+export type ExtendablePropertiesName = keyof typeof configurableProperties;
+export type ConfigurablePropertiesName = keyof typeof publicProperties;
+
+export interface SelectedConfigurableProperty<
+  C extends ConfigurablePropertiesName,
+  O extends string,
+  // T remains the tuple type for the fixture array:
+  T extends
+    (typeof publicProperties)[C]['possibleFixtures'] = (typeof publicProperties)[C]['possibleFixtures'],
+  // V is now a tuple of arrays of strings (e.g. [['value1', 'value2'], ['meow', 'wof']])
+  V extends readonly (readonly string[])[] = readonly (readonly string[])[],
+> {
+  label: string;
+  name: C;
+  typeOfFixture: T;
+  values: V;
+  pseudoStates?: PossibleStates[];
+  // if this property support non alias values - values not present in Fixtures
+  supportsCustom?: boolean;
+  // defaults is not an array; each key maps to one string
+  // and the allowed string is drawn from the union of all elements in the arrays of `values`
+  defaults: { [K in O]: V[number][number] };
+  // used to display the label of the property in the UI
+}

package/src/tokens/automation/types/ComponentConfig.ts

@@ -0,0 +1,116 @@
+// tokens
+import type * as properties from '@yahoo/uds/fixtures';
+import type { UniversalTokensConfig } from '@yahoo/uds/tokens';
+import type {
+  ConfigurablePropertiesName,
+  SelectedConfigurableProperty,
+} from '@yahoo/uds/tokens/automation/properties';
+
+// TODO: use macro to convert this to runtime
+export type AllPossibleProperties =
+  | Exclude<
+      keyof typeof properties,
+      // remove Button and IconButton specific properties
+      | 'iconButtonClassNames'
+      | 'iconButtonSize'
+      | 'iconButtonStates'
+      | 'buttonClassNames'
+      | 'buttonColorProperties'
+      | 'buttonIconSvgSize'
+      | 'buttonKinds'
+      | 'buttonMotionEffects'
+      | 'buttonMotionProperties'
+      | 'buttonPalettes'
+      | 'buttonSizeProperties'
+      | 'buttonSizes'
+      | 'buttonStates'
+      | 'buttonVariants'
+    >
+  | 'shadowVariantConfig';
+
+export type PossibleStates =
+  | 'hover'
+  | 'pressed'
+  | 'focused'
+  | 'invalid'
+  | 'focus-within'
+  | 'focused-keyboard'
+  | 'visited'
+  | 'readonly'
+  | 'disabled'
+  | 'invalid&hover'
+  | 'invalid&pressed';
+export type PossibleStatesWithRest = 'rest' | PossibleStates;
+
+export interface LayerConfig {
+  label: string;
+  properties: Readonly<
+    Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>
+  >;
+  pseudoSelector?: string;
+}
+
+export interface ComponentStateConfig {
+  label: string;
+  options: string[];
+  layers: {
+    root: LayerConfig;
+  } & Record<string, LayerConfig>;
+}
+
+export interface SubComponentConfig {
+  label: string;
+  description: string;
+  overrideComponentName?: string;
+  variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
+}
+
+export interface VariantConfig<O extends string = string> {
+  label: string;
+  description: string;
+  isConfigurable: boolean;
+  default: O;
+  options: readonly O[];
+}
+
+export interface VariantConfigWithProperties<O extends string = string> extends VariantConfig<O> {
+  layers: {
+    root: LayerConfig;
+  } & Record<string, LayerConfig>;
+}
+
+export interface VariantConfigWithComponentStates<O extends string = string>
+  extends VariantConfig<O> {
+  componentStates?: Readonly<Record<string, ComponentStateConfig>>;
+}
+
+export interface ComponentConfig {
+  label: string;
+  description: string;
+  overrideComponentName?: string;
+  subComponents?: Record<string, SubComponentConfig>;
+  variants?: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
+}
+
+export type AutoComponents = Omit<
+  UniversalTokensConfig,
+  | 'colorMode'
+  | 'font'
+  | 'scaleMode'
+  | 'version'
+  | 'motion'
+  | 'button'
+  | 'iconButton'
+  | 'shadow'
+  | 'breakpoints'
+  | 'typography'
+  | 'globalDefaults'
+>;
+
+export type AutoComponentName = keyof AutoComponents;
+
+export type AllVariantKeys = {
+  [K in keyof AutoComponents]: {
+    [V in keyof AutoComponents[K]['defaults']]: V;
+  }[keyof AutoComponents[K]['defaults']];
+}[keyof AutoComponents];

package/src/tokens/automation/types/ComponentDB.ts

@@ -0,0 +1 @@
+// TODO: add a type for the schema

package/src/tokens/automation/types/ComponentStyles.ts

@@ -0,0 +1,47 @@
+import type { ComponentConfig } from './index';
+
+/**
+ * For each variant in `config.variants`, for each option in `variant.options`,
+ * produce a string `.uds-{lowercase(label)}-{variantKey}-{optionValue}`.
+ */
+// type VariantOptionSelector<C extends ComponentConfig> = {
+//   [VariantKey in keyof C['variants']]: C['variants'][VariantKey]['options'] extends ReadonlyArray<
+//     infer O
+//   >
+//     ? `.uds-${Lowercase<C['label']>}-${string & VariantKey}-${string & O}`
+//     : never;
+// }[keyof C['variants']];
+
+/**
+ * The union of all possible selectors for a given config,
+ * e.g. ".uds-avatar" | ".uds-avatar-size-xs" | ".uds-avatar-size-sm" ...
+ */
+export type AllSelectors<C extends ComponentConfig> = BaseSelector<C>;
+
+/**
+ * A generic "Tailwind style object":
+ *   - Keys are CSS selectors (like ".uds-avatar-size-sm")
+ *   - Values are style declarations (like { [varName]: "1rem", display: "inline-block", ... })
+ *
+ * You can refine these Declarations to be more typed if you want
+ * (e.g. only allow certain var names, only allow CSS property keys, etc.).
+ */
+export type CssStyleObject<C extends ComponentConfig> = {
+  [Selector in AllSelectors<C>]?: Record<string, string>;
+};
+
+/**
+ * Base class is just `.uds-{label}`
+ */
+export type BaseSelector<C extends ComponentConfig> = C['overrideComponentName'] extends string
+  ? `uds-${Lowercase<C['overrideComponentName']>}`
+  : `uds-${Lowercase<C['label']>}`;
+
+/**
+ * Represents a selector for a parent variant in the component configuration.
+ * For each variant in `config.variants`, it produces a string in the format:
+ * `.uds-{lowercase(label)}-{variantKey}`.
+ */
+export type ParentVariantSelector<C extends ComponentConfig> = {
+  [K in keyof C['variants']]: `uds-${Lowercase<C['label']>}-${string & K}`;
+}[keyof C['variants']];

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

@@ -0,0 +1,2 @@
+export type * from './ComponentConfig';
+export type * from './ComponentStyles';

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

@@ -0,0 +1,13 @@
+type ElementType<A> = A extends Array<infer T> ? T : never;
+type ElementsOfAll<Inputs, R extends Array<unknown> = []> = Inputs extends readonly [
+  infer F,
+  ...infer M,
+]
+  ? ElementsOfAll<M, [...R, ElementType<F>]>
+  : R;
+type CartesianProduct<Inputs> = ElementsOfAll<Inputs>[];
+
+export const cartesianProduct = <Sets extends Array<Array<unknown>>>(
+  sets: Sets,
+): CartesianProduct<Sets> =>
+  sets.reduce((a, b) => a.flatMap((d) => b.map((e) => [d, e].flat()))) as CartesianProduct<Sets>;

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

@@ -0,0 +1,49 @@
+import { getConfigSubcomponents, mapValues } from '@yahoo/uds/tokens';
+
+import type { ComponentConfig, VariantConfig } from '../types';
+
+type ConfigVariants =
+  | {
+      type: 'has-sub-components';
+      variants: Record<string, VariantConfig>;
+    }
+  | {
+      type: 'no-sub-components';
+      variant: VariantConfig;
+    }
+  | {
+      type: 'no-variants';
+    };
+
+export function coalesceConfigVariant<C extends ComponentConfig>(
+  config: C,
+  variantKey: string,
+): ConfigVariants {
+  const rootVariantDef = config.variants?.[variantKey];
+
+  // Prefer root definition. In the future, maybe we merge with subComponent definitions.
+  if (rootVariantDef) {
+    return {
+      type: 'no-sub-components',
+      variant: rootVariantDef,
+    };
+  }
+
+  const subComponents = getConfigSubcomponents(config);
+
+  if (!subComponents) {
+    return {
+      type: 'no-variants',
+    };
+  }
+
+  const subcomponentToVariant = mapValues(
+    subComponents,
+    (subComponent) => subComponent.variants[variantKey],
+  );
+
+  return {
+    type: 'has-sub-components',
+    variants: subcomponentToVariant,
+  };
+}

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

@@ -0,0 +1,29 @@
+import type { UniversalTokensConfigAuto } from '../../../../generated/universalTokensConfigAuto';
+
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+
+export function getConfigDefaultValue(
+  config: UniversalTokensConfigAuto,
+  componentName: keyof UniversalTokensConfigAuto,
+  variant: KeysOfUnion<UniversalTokensConfigAuto[keyof UniversalTokensConfigAuto]['defaults']>,
+): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const result = (config[componentName]?.defaults as any)?.[variant];
+
+  if (result === undefined) {
+    throw new Error(
+      `The variant default for "${variant}" is not defined for the component "${componentName}"`,
+    );
+  }
+
+  return result;
+}
+
+export function isConfigDefaultValue(
+  config: UniversalTokensConfigAuto,
+  componentName: keyof UniversalTokensConfigAuto,
+  variant: KeysOfUnion<UniversalTokensConfigAuto[keyof UniversalTokensConfigAuto]['defaults']>,
+  value: unknown,
+): boolean {
+  return getConfigDefaultValue(config, componentName, variant) === value;
+}