@yahoo/uds 3.59.0-beta.1 → 3.59.0-beta.2

package/src/styles/styler.ts

@@ -1,194 +0,0 @@
-import {
-  backgroundColors,
-  borderRadii,
-  borderWidths,
-  foregroundColors,
-  lineColors,
-  spectrumColors,
-  textVariants,
-} from '@yahoo/uds/fixtures';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-
-import { getFeatureFlags } from '../flags';
-import { falsyToString } from '../utils/falsyToString';
-import type { CVA, CX } from './stylerTypes';
-import { variants } from './variants';
-
-const createObjectWithoutPrototype = <T>(): T => Object.create(null) as T;
-
-const { useGetStylesCache, skipTailwindMerge } = getFeatureFlags();
-
-/**
- * Prepare and object for memoization
- * Code uses old-school JS to hyper optimize component rendering hot paths.
- **/
-function normalizeObject(props: Record<string, unknown>) {
-  const sorted = createObjectWithoutPrototype<typeof props>();
-  const sortedKeys = Object.keys(props).sort();
-
-  for (let i = 0, len = sortedKeys.length; i < len; i++) {
-    const key = sortedKeys[i];
-
-    if (props[key] !== undefined) {
-      sorted[key] = props[key];
-    }
-  }
-
-  return sorted;
-}
-
-const twMerge = extendTailwindMerge({
-  extend: {
-    theme: {
-      borderColor: lineColors,
-      borderWidth: borderWidths,
-      borderRadius: borderRadii,
-    },
-  },
-  override: {
-    classGroups: {
-      'text-color': [{ text: [...foregroundColors, ...spectrumColors] }],
-      'bg-color': [{ bg: backgroundColors }],
-      'font-family': [{ font: ['icons', ...textVariants] }],
-      leading: [{ leading: textVariants }],
-    },
-    conflictingClassGroups: {},
-  },
-});
-
-const cx: CX<string> = (...inputs) => {
-  const finalClassName = clsx(inputs);
-  return skipTailwindMerge ? finalClassName : twMerge(finalClassName);
-};
-
-const cva: CVA<string> = (config) => {
-  const { base, variants, defaultVariants, compoundVariants } = config;
-
-  /**
-   * !WARNING
-   * This is a VERY performance-sensitive function. Do not change it
-   * without benchmarking first.
-   */
-  return (maybeProps): string => {
-    if (!maybeProps) {
-      return cx(base);
-    }
-
-    const { className, ...props } = maybeProps;
-
-    if (!variants) {
-      return cx(base, className);
-    }
-
-    // Using old-school for loop for performance (doesn't create intermediate arrays)
-    const variantClassNames: string[] = [];
-
-    for (const prop in defaultVariants) {
-      if (prop === undefined) {
-        continue;
-      }
-
-      if (props[prop] !== undefined) {
-        continue;
-      }
-
-      const defaultPropValue = defaultVariants[prop];
-      const variantKey = falsyToString(defaultPropValue) as keyof (typeof variants)[typeof prop];
-      variantClassNames.push(variants[prop][variantKey]);
-    }
-
-    for (const prop in props) {
-      if (prop === undefined) {
-        continue;
-      }
-
-      const propValue = props[prop];
-      const variantKey = falsyToString(propValue) as keyof (typeof variants)[typeof prop];
-      variantClassNames.push(variants[prop][variantKey]);
-    }
-
-    if (!compoundVariants) {
-      return cx(base, variantClassNames, className);
-    }
-
-    let compoundVariantClassNames = '';
-
-    // Using old-school for loop for performance (doesn't create intermediate arrays)
-    for (const compoundConfig of compoundVariants) {
-      const { className: compoundClassname, ...compoundVariantConfig } = compoundConfig;
-
-      let allMatch = true;
-      for (const cvKey in compoundVariantConfig) {
-        const cvValue = compoundVariantConfig[cvKey];
-        const propValue = props[cvKey] ?? defaultVariants?.[cvKey];
-        const isMatch = propValue === cvValue;
-
-        if (!isMatch) {
-          allMatch = false;
-          break;
-        }
-      }
-
-      if (allMatch) {
-        compoundVariantClassNames = cx(compoundVariantClassNames, compoundClassname);
-      }
-    }
-
-    return cx(base, variantClassNames, compoundVariantClassNames, className);
-  };
-};
-
-const getStylesInternal = cva({
-  variants,
-});
-
-// Extract the type of the props accepted by getStylesInternal
-type GetStylesInternalProps = Parameters<typeof getStylesInternal>[0];
-
-const styleCache = new Map<string, string>();
-
-const getStylesCacheKeySymbol = Symbol('getStylesCacheKey');
-
-const generateCacheKey = (props: Record<string, unknown>): string => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  if ((props as any)[getStylesCacheKeySymbol]) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (props as any)[getStylesCacheKeySymbol];
-  }
-
-  const sorted = normalizeObject(props);
-
-  let cacheKey = '';
-
-  for (const key in sorted) {
-    cacheKey += `${key}:${sorted[key]}|`;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (props as any)[getStylesCacheKeySymbol] = cacheKey; // Cache the key on the props object itself
-
-  return cacheKey;
-};
-
-const cachedGetStyles = (props: Record<string, unknown>, onHit?: () => void) => {
-  if (!useGetStylesCache) {
-    return getStylesInternal(props);
-  }
-
-  const cacheKey = generateCacheKey(props);
-
-  if (styleCache.has(cacheKey)) {
-    onHit?.();
-    return styleCache.get(cacheKey)!;
-  }
-
-  const styles = getStylesInternal(props);
-  styleCache.set(cacheKey, styles);
-
-  return styles;
-};
-
-const getStyles = cachedGetStyles as (props: GetStylesInternalProps, onHit?: () => void) => string;
-
-export { cva, cx, getStyles, getStylesCacheKeySymbol, normalizeObject };

package/src/styles/stylerTypes.ts

@@ -1,81 +0,0 @@
-import type { StylePropsVariantsAuto } from '../../generated/autoVariants';
-import type {
-  ButtonPalette,
-  ButtonSize,
-  ButtonVariant,
-  ColorMode,
-  IconButtonSize,
-  ScaleMode,
-  StyleProps,
-} from '../tokens/types';
-
-type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
-
-type CvaStyleValue<T> = T | CvaStyleArray<T> | Record<string, unknown> | null | boolean | undefined;
-
-type CvaStyleArray<T> = CvaStyleValue<T>[];
-
-type CVAVariantSchema<T, V extends CVAVariantShape<T>> = {
-  [Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;
-};
-
-type CVAVariantShape<T> = Record<string, Record<string, T>>;
-
-type CVAStyleProp<T> = T extends string
-  ? {
-      className?: T;
-    }
-  : {
-      style?: T;
-    };
-
-type CVAConfigBase<T> = { base?: T | null };
-
-interface CVA<T> {
-  <V extends CVAVariantShape<T>>(
-    config: V extends CVAVariantShape<T>
-      ? CVAConfigBase<T> & {
-          base?: T;
-          variants?: V;
-          compoundVariants?: (V extends CVAVariantShape<T>
-            ? (
-                | CVAVariantSchema<T, V>
-                | {
-                    [Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;
-                  }
-              ) &
-                CVAStyleProp<T>
-            : CVAStyleProp<T>)[];
-          defaultVariants?: CVAVariantSchema<T, V>;
-        }
-      : CVAConfigBase<T> & {
-          variants?: never;
-          compoundVariants?: never;
-          defaultVariants?: never;
-        },
-  ): (
-    props?: V extends CVAVariantShape<T>
-      ? CVAVariantSchema<T, V> & CVAStyleProp<T>
-      : CVAStyleProp<T>,
-  ) => T;
-}
-
-interface CX<T> {
-  (...inputs: CvaStyleValue<T>[]): T;
-}
-
-type StylePropsVariants<ReturnType> = {
-  [key in keyof Required<StyleProps>]: Record<
-    Exclude<`${StyleProps[key]}`, 'undefined' | 'false'>,
-    ReturnType
-  >;
-} & {
-  colorMode: Record<ColorMode, string>;
-  scaleMode: Record<ScaleMode, string>;
-  buttonPalette: Record<ButtonPalette, string>;
-  buttonVariant: Record<ButtonVariant, string>;
-  buttonSize: Record<ButtonSize, string>;
-  iconButtonSize: Record<IconButtonSize, string>;
-} & StylePropsVariantsAuto<ReturnType>;
-
-export { type CVA, type CX, type StylePropsVariants };