@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/src/tokens/automation/properties.ts

@@ -1,433 +0,0 @@
-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

@@ -1,116 +0,0 @@
-// 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

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

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

@@ -1,47 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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;
-}