@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/components/index.ts

@@ -0,0 +1,41 @@
+export { Box, type BoxProps } from './Box';
+export { Divider, type DividerProps } from './Divider';
+export { FormLabel, type FormLabelProps } from './FormLabel';
+export { HStack, type HStackProps } from './HStack';
+export { Icon, type IconProps } from './Icon';
+export { Image, type ImageProps } from './Image';
+export { Link, type LinkProps } from './Link';
+export { Text, type TextProps } from './Text';
+export { VStack, type VStackProps } from './VStack';
+
+// Client Components
+export { Button, type ButtonProps } from './client';
+export { SpringMotionConfig, type SpringMotionConfigProps } from './client';
+export { IconButton, type IconButtonProps } from './client';
+export { Pressable, type PressableProps } from './client';
+export { Avatar, type AvatarProps } from './client';
+export { AvatarIcon, type AvatarIconProps } from './client';
+export { AvatarImage, type AvatarImageProps } from './client';
+export { AvatarText, type AvatarTextProps } from './client';
+export { Checkbox, type CheckboxProps } from './client';
+export { Switch, type SwitchProps } from './client';
+export { Chip, type ChipProps } from './client';
+export { ChipButton, type ChipButtonProps } from './client';
+export { ChipDismissible, type ChipDismissibleProps } from './client';
+export { ChipLink, type ChipLinkProps } from './client';
+export { ChipToggle, type ChipToggleProps } from './client';
+export { Input, type InputProps } from './client';
+export { InputHelpText, type InputHelpTextProps } from './client';
+export { Badge, type BadgeProps } from './client';
+export { Radio, type RadioProps } from './client';
+export { RadioGroupProvider, type RadioGroupProviderProps } from './client';
+export { Menu } from './client'; // Need on single line to help docs parser
+export {
+  type MenuContentProps,
+  type MenuDividerProps,
+  type MenuItemCheckboxProps,
+  type MenuItemProps,
+  type MenuPlacement,
+  type MenuProviderProps,
+  type MenuTriggerProps,
+} from './client';

package/src/defaultTokensConfig.ts

@@ -0,0 +1,31 @@
+import { yosConfig } from './tokens/configs/yosConfig';
+import type {
+  BreakpointsConfig,
+  ButtonConfig,
+  ColorModeConfig,
+  FontConfig,
+  GlobalDefaultsConfig,
+  IconButtonConfig,
+  MotionConfig,
+  ScaleModeConfig,
+  ShadowConfig,
+  TypographyConfig,
+  UniversalTokensConfig,
+} from './tokens/types';
+
+export const defaultTokensConfig = {
+  ...yosConfig,
+  colorMode: yosConfig.colorMode as ColorModeConfig,
+  scaleMode: yosConfig.scaleMode as ScaleModeConfig,
+  font: yosConfig.font as FontConfig,
+  button: yosConfig.button as ButtonConfig,
+  iconButton: yosConfig.iconButton as IconButtonConfig,
+  motion: yosConfig.motion as MotionConfig,
+  shadow: yosConfig.shadow as ShadowConfig,
+  typography: yosConfig.typography as TypographyConfig,
+  globalDefaults: yosConfig.globalDefaults as GlobalDefaultsConfig,
+  breakpoints: yosConfig.breakpoints as BreakpointsConfig,
+  version: 'v0.63.0', // NOTE: Match the latest migration version
+} satisfies UniversalTokensConfig;
+
+export { defaultUniversalTokensConfigAuto } from '../generated/universalTokensConfigAuto';

package/src/fixtures/index.ts

@@ -0,0 +1,638 @@
+import type {
+  AlwaysPaletteAlias,
+  AvatarShape,
+  AvatarSize,
+  BackgroundPaletteAlias,
+  BadgeSize,
+  BadgeVariant,
+  BorderRadius,
+  BorderWidth,
+  Breakpoint,
+  ButtonClassName,
+  ButtonColorProperty,
+  ButtonKind,
+  ButtonMotionEffect,
+  ButtonMotionProperty,
+  ButtonPalette,
+  ButtonSize,
+  ButtonSizeProperty,
+  ButtonState,
+  ButtonVariant,
+  ButtonVariantFlat,
+  CheckboxSize,
+  CheckboxVariant,
+  ChipSize,
+  ChipVariant,
+  ColorMode,
+  FontAlias,
+  FontFamilyCDNUrl,
+  FontID,
+  FontWeightDescriptive,
+  ForegroundPaletteAlias,
+  Hue,
+  HueStep,
+  IconButtonClassName,
+  IconButtonSize,
+  IconSize,
+  IconVariant,
+  InputSize,
+  LinePaletteAlias,
+  MotionSpringConfig,
+  MotionSpringConfigOptions,
+  MotionVariant,
+  MotionVariantSpeed,
+  PaletteValue,
+  RegionMode,
+  ScaleEffectMap,
+  ScaleMode,
+  ShadowColor,
+  ShadowOffset,
+  ShadowOpacity,
+  ShadowPaletteAlias,
+  ShadowSpreadRadius,
+  ShadowVariant,
+  ShadowVariantInvert,
+  SpacingAlias,
+  SpectrumColor,
+  SwitchSize,
+  TextDecorationLine,
+  TextProperty,
+  TextTransform,
+  TextVariant,
+  TextVariantTypography,
+  TextVariantUi,
+  TextVariantWithoutEmphasized,
+  TShirtSize,
+  TypographyStyleProperty,
+} from '@yahoo/uds/tokens';
+
+import { fromEntries } from '../tokens/utils/fromEntries';
+import { typesToConstants } from './macros/typesToConstants' with { type: 'macro' };
+import {
+  getBorderRadiusRamp,
+  getBorderWidthRamp,
+} from './utils/getScaleModeRamp' with { type: 'macro' };
+import { getTailwindAsUdsColors } from './utils/getTailwindAsUdsColors' with { type: 'macro' };
+
+/* -------------------------------------------------------------------------- */
+/*                                 BREAKPOINTS                                */
+/* -------------------------------------------------------------------------- */
+
+const breakpoints = typesToConstants<Breakpoint>('Breakpoint');
+
+/* -------------------------------------------------------------------------- */
+/*                                    MODES                                   */
+/* -------------------------------------------------------------------------- */
+const colorModes = typesToConstants<ColorMode>('ColorMode');
+const scaleModes = typesToConstants<ScaleMode>('ScaleMode');
+const regionModes = typesToConstants<RegionMode>('RegionMode');
+
+/* -------------------------------------------------------------------------- */
+/*                                   COLORS                                   */
+/* -------------------------------------------------------------------------- */
+const hues = typesToConstants<Hue>('Hue');
+const hueSteps = typesToConstants<HueStep>('HueStep');
+const spectrumColors = typesToConstants<SpectrumColor>('SpectrumColor');
+const backgroundPaletteColors = typesToConstants<BackgroundPaletteAlias>('BackgroundPaletteAlias');
+const foregroundPaletteColors = typesToConstants<ForegroundPaletteAlias>('ForegroundPaletteAlias');
+const linePaletteColors = typesToConstants<LinePaletteAlias>('LinePaletteAlias');
+const alwaysPaletteAliases = typesToConstants<AlwaysPaletteAlias>('AlwaysPaletteAlias');
+const shadowPaletteColors = typesToConstants<ShadowPaletteAlias>('ShadowPaletteAlias');
+const shadowColors = typesToConstants<ShadowColor>('ShadowColor');
+
+const backgroundColors = [...backgroundPaletteColors, ...alwaysPaletteAliases];
+const foregroundColors = [...foregroundPaletteColors, ...alwaysPaletteAliases];
+const lineColors = [...linePaletteColors, ...alwaysPaletteAliases];
+const palette = {
+  background: backgroundPaletteColors,
+  foreground: foregroundPaletteColors,
+  line: linePaletteColors,
+  shadow: shadowPaletteColors,
+};
+const tailwindColorsAsUds = getTailwindAsUdsColors();
+
+const idealColorSorting = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'muted',
+  'on-color',
+  'accent',
+  'brand',
+  'brand-secondary',
+  'info',
+  'info-secondary',
+  'alert',
+  'alert-secondary',
+  'positive',
+  'positive-secondary',
+  'warning',
+  'warning-secondary',
+];
+
+function sortPalette<T extends Record<string, PaletteValue>>(
+  palette: T,
+  ordering: string[] = idealColorSorting,
+): Array<[string, PaletteValue]> {
+  return Object.entries(palette).sort(
+    ([prevPaletteAlias], [nextPaletteAlias]) =>
+      ordering.indexOf(prevPaletteAlias) - ordering.indexOf(nextPaletteAlias),
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 TYPOGRAPHY                                 */
+/* -------------------------------------------------------------------------- */
+const textVariantsTypography = typesToConstants<TextVariantTypography>('TextVariantTypography');
+const textVariantsUi = typesToConstants<TextVariantUi>('TextVariantUi');
+const textVariants = typesToConstants<TextVariant>('TextVariant');
+const textVariantsWithoutEmphasized = typesToConstants<TextVariantWithoutEmphasized>(
+  'TextVariantWithoutEmphasized',
+);
+const textProperties = typesToConstants<TextProperty>('TextProperty');
+const textDecorationLines = typesToConstants<TextDecorationLine>('TextDecorationLine');
+const typographyStyleProperties =
+  typesToConstants<TypographyStyleProperty>('TypographyStyleProperty');
+
+const fontAliases = typesToConstants<FontAlias>('FontAlias');
+const fontIds = typesToConstants<FontID>('FontID');
+const fontUrls = typesToConstants<FontFamilyCDNUrl>('FontFamilyCDNUrl');
+const fontWeights = typesToConstants<FontWeightDescriptive>('FontWeightDescriptive');
+const textTransforms = typesToConstants<TextTransform>('TextTransform');
+
+/* -------------------------------------------------------------------------- */
+/*                                OTHER TOKENS                                */
+/* -------------------------------------------------------------------------- */
+const avatarSizes = typesToConstants<AvatarSize>('AvatarSize');
+const avatarShapes = typesToConstants<AvatarShape>('AvatarShape');
+const borderRadii = typesToConstants<BorderRadius>('BorderRadius');
+const borderRadiusRamp = {
+  xSmall: getBorderRadiusRamp('xSmall'),
+  small: getBorderRadiusRamp('small'),
+  medium: getBorderRadiusRamp('medium'),
+  large: getBorderRadiusRamp('large'),
+  xLarge: getBorderRadiusRamp('xLarge'),
+  xxLarge: getBorderRadiusRamp('xxLarge'),
+  xxxLarge: getBorderRadiusRamp('xxxLarge'),
+};
+const borderWidths = typesToConstants<BorderWidth>('BorderWidth');
+const borderWidthRamp = {
+  xSmall: getBorderWidthRamp('xSmall'),
+  small: getBorderWidthRamp('small'),
+  medium: getBorderWidthRamp('medium'),
+  large: getBorderWidthRamp('large'),
+  xLarge: getBorderWidthRamp('xLarge'),
+  xxLarge: getBorderWidthRamp('xxLarge'),
+  xxxLarge: getBorderWidthRamp('xxxLarge'),
+};
+
+// typesafe sorting mechanism for icon sizes
+const iconSizeSort: Record<IconSize, number> = {
+  xs: 0,
+  sm: 1,
+  md: 2,
+  lg: 3,
+};
+const iconSizes = typesToConstants<IconSize>('IconSize').sort((a, b) => {
+  return iconSizeSort[a] - iconSizeSort[b];
+});
+const iconVariants = typesToConstants<IconVariant>('IconVariant');
+
+/** Preserve order we want to display */
+const spacingAliases: SpacingAlias[] = [
+  '0',
+  'px',
+  '0.5',
+  '1',
+  '1.5',
+  '2',
+  '2.5',
+  '3',
+  '3.5',
+  '4',
+  '4.5',
+  '5',
+  '5.5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+  '14',
+  '16',
+  '20',
+  '24',
+  '28',
+  '32',
+  '36',
+  '40',
+  '44',
+  '48',
+  '52',
+  '56',
+  '60',
+  '64',
+  '72',
+  '80',
+  '96',
+];
+
+const spacingMap: Record<SpacingAlias, number> = {
+  '0': 0,
+  px: 1,
+  '0.5': 2,
+  '1': 4,
+  '1.5': 6,
+  '2': 8,
+  '2.5': 10,
+  '3': 12,
+  '3.5': 14,
+  '4': 16,
+  '4.5': 18,
+  '5': 20,
+  '5.5': 22,
+  '6': 24,
+  '7': 28,
+  '8': 32,
+  '9': 36,
+  '10': 40,
+  '11': 44,
+  '12': 48,
+  '14': 56,
+  '16': 64,
+  '20': 80,
+  '24': 96,
+  '28': 112,
+  '32': 128,
+  '36': 144,
+  '40': 160,
+  '44': 176,
+  '48': 192,
+  '52': 208,
+  '56': 224,
+  '60': 240,
+  '64': 256,
+  '72': 288,
+  '80': 320,
+  '96': 384,
+};
+
+const shadowOffsets = typesToConstants<ShadowOffset>('ShadowOffset');
+
+const shadowOffsetMap: Record<ShadowOffset, number> = {
+  '-96': -384,
+  '-80': -320,
+  '-72': -288,
+  '-64': -256,
+  '-60': -240,
+  '-56': -224,
+  '-52': -208,
+  '-48': -192,
+  '-44': -176,
+  '-40': -160,
+  '-36': -144,
+  '-32': -128,
+  '-28': -112,
+  '-24': -96,
+  '-20': -80,
+  '-16': -64,
+  '-14': -56,
+  '-12': -48,
+  '-11': -44,
+  '-10': -40,
+  '-9': -36,
+  '-8': -32,
+  '-7': -28,
+  '-6': -24,
+  '-5.5': -22,
+  '-5': -20,
+  '-4.5': -18,
+  '-4': -16,
+  '-3.5': -14,
+  '-3': -12,
+  '-2.5': -10,
+  '-2': -8,
+  '-1.5': -6,
+  '-1': -4,
+  '-0.5': -2,
+  '-px': -1,
+  '0': 0,
+  px: 1,
+  '0.5': 2,
+  '1': 4,
+  '1.5': 6,
+  '2': 8,
+  '2.5': 10,
+  '3': 12,
+  '3.5': 14,
+  '4': 16,
+  '4.5': 18,
+  '5': 20,
+  '5.5': 22,
+  '6': 24,
+  '7': 28,
+  '8': 32,
+  '9': 36,
+  '10': 40,
+  '11': 44,
+  '12': 48,
+  '14': 56,
+  '16': 64,
+  '20': 80,
+  '24': 96,
+  '28': 112,
+  '32': 128,
+  '36': 144,
+  '40': 160,
+  '44': 176,
+  '48': 192,
+  '52': 208,
+  '56': 224,
+  '60': 240,
+  '64': 256,
+  '72': 288,
+  '80': 320,
+  '96': 384,
+};
+
+const shadowSpreadRadii = typesToConstants<ShadowSpreadRadius>('ShadowSpreadRadius');
+
+const shadowSpreadRadiusMap: Record<ShadowSpreadRadius, number> = {
+  '-96': -384,
+  '-80': -320,
+  '-72': -288,
+  '-64': -256,
+  '-60': -240,
+  '-56': -224,
+  '-52': -208,
+  '-48': -192,
+  '-44': -176,
+  '-40': -160,
+  '-36': -144,
+  '-32': -128,
+  '-28': -112,
+  '-24': -96,
+  '-20': -80,
+  '-16': -64,
+  '-14': -56,
+  '-12': -48,
+  '-11': -44,
+  '-10': -40,
+  '-9': -36,
+  '-8': -32,
+  '-7': -28,
+  '-6': -24,
+  '-5.5': -22,
+  '-5': -20,
+  '-4.5': -18,
+  '-4': -16,
+  '-3.5': -14,
+  '-3': -12,
+  '-2.5': -10,
+  '-2': -8,
+  '-1.5': -6,
+  '-1': -4,
+  '-0.5': -2,
+  '-px': -1,
+  '0': 0,
+  px: 1,
+  '0.5': 2,
+  '1': 4,
+  '1.5': 6,
+  '2': 8,
+  '2.5': 10,
+  '3': 12,
+  '3.5': 14,
+  '4': 16,
+  '4.5': 18,
+  '5': 20,
+  '5.5': 22,
+  '6': 24,
+  '7': 28,
+  '8': 32,
+  '9': 36,
+  '10': 40,
+  '11': 44,
+  '12': 48,
+  '14': 56,
+  '16': 64,
+  '20': 80,
+  '24': 96,
+  '28': 112,
+  '32': 128,
+  '36': 144,
+  '40': 160,
+  '44': 176,
+  '48': 192,
+  '52': 208,
+  '56': 224,
+  '60': 240,
+  '64': 256,
+  '72': 288,
+  '80': 320,
+  '96': 384,
+};
+
+const shadowOpacities = typesToConstants<ShadowOpacity>('ShadowOpacity');
+
+const shadowOpacityMap = fromEntries(shadowOpacities.map((key) => [key, parseInt(key)]));
+
+const tshirtSizes = typesToConstants<TShirtSize>('TShirtSize');
+
+/* -------------------------------------------------------------------------- */
+/*                                 COMPONENTS                                 */
+/* -------------------------------------------------------------------------- */
+
+const buttonVariants = typesToConstants<ButtonVariant>('ButtonVariant');
+
+const buttonVariantPriority: { [key in ButtonVariantFlat]?: number } = {
+  primary: 0,
+  secondary: 1,
+  tertiary: 2,
+};
+// Sort the button variants by priority first, then alphabetically
+const buttonVariantsFlat = typesToConstants<ButtonVariantFlat>('ButtonVariantFlat').sort((a, b) => {
+  const aPriority = buttonVariantPriority[a] ?? Number.MAX_SAFE_INTEGER;
+  const bPriority = buttonVariantPriority[b] ?? Number.MAX_SAFE_INTEGER;
+
+  if (aPriority !== bPriority) {
+    return aPriority - bPriority;
+  }
+  return a.localeCompare(b);
+});
+
+const buttonVariantsSecondary = buttonVariantsFlat.filter((variant) =>
+  variant.includes('secondary'),
+);
+const buttonVariantsTertiary = buttonVariantsFlat.filter((variant) => variant.includes('tertiary'));
+const buttonVariantsPrimary = buttonVariantsFlat.filter(
+  (variant) =>
+    !buttonVariantsSecondary.includes(variant) && !buttonVariantsTertiary.includes(variant),
+);
+
+const buttonPalettes = typesToConstants<ButtonPalette>('ButtonPalette');
+const buttonSizes = typesToConstants<ButtonSize>('ButtonSize');
+const buttonStates = typesToConstants<ButtonState>('ButtonState');
+const buttonKinds = typesToConstants<ButtonKind>('ButtonKind');
+// TODO this should come from the configurator via the CLI of some other means in the future
+const buttonIconSvgSize: ButtonSize = 'sm';
+const buttonColorProperties = typesToConstants<ButtonColorProperty>('ButtonColorProperty');
+const buttonSizeProperties = typesToConstants<ButtonSizeProperty>('ButtonSizeProperty');
+const buttonMotionProperties = typesToConstants<ButtonMotionProperty>('ButtonMotionProperty');
+const buttonMotionEffects = typesToConstants<ButtonMotionEffect>('ButtonMotionEffect');
+const buttonClassNames = typesToConstants<ButtonClassName>('ButtonClassName');
+const iconButtonSizes = typesToConstants<IconButtonSize>('IconButtonSize');
+const iconButtonClassNames = typesToConstants<IconButtonClassName>('IconButtonClassName');
+const inputSizes = typesToConstants<InputSize>('InputSize');
+
+/* -------------------------------------------------------------------------- */
+/*                                   Motion                                   */
+/* -------------------------------------------------------------------------- */
+const motionVariants = typesToConstants<MotionVariant>('MotionVariant');
+const motionVariantSpeeds = typesToConstants<MotionVariantSpeed>('MotionVariantSpeed');
+const motionSpringConfig = typesToConstants<MotionSpringConfig>('MotionSpringConfig');
+const motionSpringConfigOptions = typesToConstants<MotionSpringConfigOptions>(
+  'MotionSpringConfigOptions',
+);
+
+/* ---------------------------------- Scale --------------------------------- */
+const scaleEffectMap: ScaleEffectMap = {
+  // TODO create a helper like typesToConstants that creates this from the types
+  none: {
+    xs: '1',
+    sm: '1',
+    md: '1',
+    lg: '1',
+    xl: '1',
+  },
+  up: {
+    xs: '1.0125',
+    sm: '1.03',
+    md: '1.125',
+    lg: '1.25',
+    xl: '2',
+  },
+  down: {
+    xs: '0.9875',
+    sm: '0.97',
+    md: '0.875',
+    lg: '0.75',
+    xl: '0.5',
+  },
+};
+
+/* -------------------------------------------------------------------------- */
+/*                                  Elevation                                 */
+/* -------------------------------------------------------------------------- */
+const shadowVariants = typesToConstants<ShadowVariant>('ShadowVariant');
+const shadowVariantsInvert = typesToConstants<ShadowVariantInvert>('ShadowVariantInvert');
+const shadowVariantsWithInvert = [...shadowVariants, ...shadowVariantsInvert];
+
+/* -------------------------------------------------------------------------- */
+/*                                   Checkbox                                 */
+/* -------------------------------------------------------------------------- */
+const checkboxVariants = typesToConstants<CheckboxVariant>('CheckboxVariant');
+const checkboxSizes = typesToConstants<CheckboxSize>('CheckboxSize');
+
+/* -------------------------------------------------------------------------- */
+/*                                     Switch                                 */
+/* -------------------------------------------------------------------------- */
+const switchSizes = typesToConstants<SwitchSize>('SwitchSize');
+
+/* -------------------------------------------------------------------------- */
+/*                                    Chip                                   */
+/* -------------------------------------------------------------------------- */
+const chipVariants = typesToConstants<ChipVariant>('ChipVariant');
+const chipSizes = typesToConstants<ChipSize>('ChipSize');
+
+/* -------------------------------------------------------------------------- */
+/*                                  Badge                                 */
+/* -------------------------------------------------------------------------- */
+const badgeVariants = typesToConstants<BadgeVariant>('BadgeVariant');
+const badgeSizes = typesToConstants<BadgeSize>('BadgeSize');
+
+export {
+  alwaysPaletteAliases,
+  avatarShapes,
+  avatarSizes,
+  backgroundColors,
+  backgroundPaletteColors,
+  badgeSizes,
+  badgeVariants,
+  borderRadii,
+  borderRadiusRamp,
+  borderWidthRamp,
+  borderWidths,
+  breakpoints,
+  buttonClassNames,
+  buttonColorProperties,
+  buttonIconSvgSize,
+  buttonKinds,
+  buttonMotionEffects,
+  buttonMotionProperties,
+  buttonPalettes,
+  buttonSizeProperties,
+  buttonSizes,
+  buttonStates,
+  buttonVariants,
+  buttonVariantsFlat,
+  buttonVariantsPrimary,
+  buttonVariantsSecondary,
+  buttonVariantsTertiary,
+  checkboxSizes,
+  checkboxVariants,
+  chipSizes,
+  chipVariants,
+  colorModes,
+  fontAliases,
+  fontIds,
+  fontUrls,
+  fontWeights,
+  foregroundColors,
+  foregroundPaletteColors,
+  hues,
+  hueSteps,
+  iconButtonClassNames,
+  iconButtonSizes,
+  iconSizes,
+  iconVariants,
+  inputSizes,
+  lineColors,
+  linePaletteColors,
+  motionSpringConfig,
+  motionSpringConfigOptions,
+  motionVariants,
+  motionVariantSpeeds,
+  palette,
+  regionModes,
+  scaleEffectMap,
+  scaleModes,
+  shadowColors,
+  shadowOffsetMap,
+  shadowOffsets,
+  shadowOpacities,
+  shadowOpacityMap,
+  shadowPaletteColors,
+  shadowSpreadRadii,
+  shadowSpreadRadiusMap,
+  shadowVariants,
+  shadowVariantsInvert,
+  shadowVariantsWithInvert,
+  sortPalette,
+  spacingAliases,
+  spacingMap,
+  spectrumColors,
+  switchSizes,
+  tailwindColorsAsUds,
+  textDecorationLines,
+  textProperties,
+  textTransforms,
+  textVariants,
+  textVariantsTypography,
+  textVariantsUi,
+  textVariantsWithoutEmphasized,
+  tshirtSizes,
+  typographyStyleProperties,
+};