@yahoo/uds 2.8.1 → 2.10.0-beta.1

package/cli/cli.ts

@@ -58,4 +58,4 @@ async function main() {
   await command.run(props);
 }
 
-main();
+await main();

package/cli/codemods/addCommentAboveComponents.ts

@@ -1,82 +1,7 @@
-import path from 'node:path';
+import { IndentationText, Project } from 'ts-morph';
 
-import { IndentationText, Node, Project, SourceFile, SyntaxKind } from 'ts-morph';
-
-const getProject = () => {
-  const workspaceDir = Bun.env.PWD;
-  const srcDir = path.join(workspaceDir, 'tsconfig.json');
-  return new Project({
-    tsConfigFilePath: srcDir,
-    manipulationSettings: { indentationText: IndentationText.TwoSpaces },
-  });
-};
-
-const getGlobPattern = (selectedDirs?: string[]) => {
-  let glob = './';
-  if (selectedDirs && selectedDirs.length === 1) {
-    glob += selectedDirs[0];
-  } else if (selectedDirs) {
-    glob += `{${selectedDirs.join(',')}}`;
-  }
-  glob += '/**/*.+(ts|tsx)';
-
-  return glob;
-};
-
-/**
- * Gets the named imports being imported from `packageName` module.
- * @param sourceFile Source file to search for imports in.
- * @param packageName The package name to search in.
- */
-const getImportsFromPackage = (sourceFile: SourceFile, packageName: string) => {
-  const importedComponents = new Set<string>();
-
-  // Collect imports from '@yahoo/uds'
-  sourceFile.getImportDeclarations().forEach((importDeclaration) => {
-    if (importDeclaration.getModuleSpecifierValue() === packageName) {
-      importDeclaration.getNamedImports().forEach((namedImport) => {
-        importedComponents.add(namedImport.getName());
-      });
-    }
-  });
-
-  return importedComponents;
-};
-
-/** Returns true if the jsx element has a `propertyName` prop. */
-function hasJSXProperty(element: Node, propertyName: string) {
-  if (!Node.isJsxElement(element) && !Node.isJsxSelfClosingElement(element)) {
-    return false;
-  }
-
-  const openingElement = Node.isJsxElement(element) ? element.getOpeningElement() : element;
-
-  return openingElement
-    .getAttributes()
-    .some((attr) => Node.isJsxAttribute(attr) && attr.getNameNode().getText() === propertyName);
-}
-
-/** Returns true if the name of the jsx element is `tagName`. */
-function matchesJSXTagName(element: Node, tagName: string) {
-  if (!Node.isJsxElement(element) && !Node.isJsxSelfClosingElement(element)) {
-    return false;
-  }
-
-  const tagNameNode = Node.isJsxElement(element)
-    ? element.getOpeningElement().getTagNameNode()
-    : element.getTagNameNode();
-
-  return tagNameNode.getText() === tagName;
-}
-
-/** Gets the JSX elements in the source file. */
-function getJSXElements(sourceFile: SourceFile) {
-  const jsxElements = [
-    ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement),
-    ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement),
-  ];
-  return jsxElements;
-}
+import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
+import { getJSXElements, hasJSXProperty, matchesJSXTagName } from './utils';
 
 interface LineInfo {
   linePos: number;
@@ -138,7 +63,7 @@ export async function addCommentAboveComponents({
       });
 
       const updateSrc = srcLines.join('\n');
-      console.log(updateSrc);
+      // console.log(updateSrc);
       sourceFile.replaceWithText(updateSrc);
     }
   });

package/cli/codemods/flattenButtonVariant.ts

@@ -0,0 +1,143 @@
+import { Project, SyntaxKind } from 'ts-morph';
+
+import { ButtonPalette, ButtonVariant, ButtonVariantFlat } from '~/tokens';
+
+import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
+
+const buttonFlatValMap: Record<ButtonVariantFlat, ButtonVariantFlat> = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  brand: 'brand',
+  alert: 'alert',
+  positive: 'positive',
+  warning: 'warning',
+  info: 'info',
+  'brand-secondary': 'brand-secondary',
+  'brand-tertiary': 'brand-tertiary',
+  'alert-secondary': 'alert-secondary',
+  'alert-tertiary': 'alert-tertiary',
+  'positive-secondary': 'positive-secondary',
+  'positive-tertiary': 'positive-tertiary',
+  'warning-secondary': 'warning-secondary',
+  'warning-tertiary': 'warning-tertiary',
+  'info-secondary': 'info-secondary',
+  'info-tertiary': 'info-tertiary',
+};
+
+// This is a hack to typecheck the keys of the object, ensure that all of the values are present
+// NOTE: Importing fixtures still causes issues
+const buttonVariantsFlat = Object.values(buttonFlatValMap);
+
+function parseButtonVariantFlat({
+  palette = 'accent',
+  variant = 'primary',
+}: {
+  palette?: ButtonPalette;
+  variant?: ButtonVariant;
+}): ButtonVariantFlat {
+  if (palette === 'accent') {
+    return variant; // primary, secondary, tertiary
+  }
+
+  if (variant === 'primary') {
+    return palette; // brand, alert, positive, warning
+  }
+
+  return `${palette}-${variant}`; // brand-secondary, alert-tertiary, etc.
+}
+
+interface Options {
+  selectedDirs?: string[];
+  project?: Project;
+}
+
+/**
+ * Flatten palette and variant into a single variant prop for UDS Button and IconButton.
+ */
+export async function flattenButtonVariant({ selectedDirs, project = getProject() }: Options) {
+  const glob = getGlobPattern(selectedDirs);
+  const sourceFiles = project.getSourceFiles(glob);
+
+  for (const sourceFile of sourceFiles) {
+    // Get UDS imports from '@yahoo/uds'
+    const importUdsComponents = getImportsFromPackage(sourceFile, '@yahoo/uds');
+
+    // Only process files that import Button or IconButton
+    if (!importUdsComponents.has('Button') && !importUdsComponents.has('IconButton')) {
+      continue;
+    }
+
+    // Process both JsxOpeningElement and JsxSelfClosingElement nodes.
+    const jsxElements = [
+      ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement),
+      ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement),
+    ].filter((el) => {
+      const tagName = el.getTagNameNode().getText();
+      return (tagName === 'Button' || tagName === 'IconButton') && importUdsComponents.has(tagName);
+    });
+
+    jsxElements.forEach((jsxEl) => {
+      // Get palette and variant attributes
+      const paletteAttr = jsxEl.getAttribute('palette');
+      const variantAttr = jsxEl.getAttribute('variant');
+
+      // Prepare to capture literal values.
+      let paletteLiteral: string | undefined;
+      let variantLiteral: string;
+
+      // Process palette attribute
+      if (paletteAttr) {
+        // @ts-expect-error - getInitializer() is not in the type definition
+        const initializer = paletteAttr.getInitializer();
+        if (initializer && initializer.getKind() === SyntaxKind.StringLiteral) {
+          paletteLiteral = initializer.getText().slice(1, -1);
+        }
+      }
+
+      // Process variant attribute
+      if (variantAttr) {
+        // @ts-expect-error - getInitializer() is not in the type definition
+        const initializer = variantAttr.getInitializer();
+        if (initializer && initializer.getKind() === SyntaxKind.StringLiteral) {
+          variantLiteral = initializer.getText().slice(1, -1);
+        } else {
+          variantLiteral = 'primary';
+        }
+      } else {
+        variantLiteral = 'primary';
+      }
+
+      // Remove the old palette and variant attributes.
+      if (paletteAttr) {
+        paletteAttr.remove();
+      }
+      if (variantAttr) {
+        variantAttr.remove();
+      }
+
+      if (!paletteLiteral && buttonVariantsFlat.includes(variantLiteral as ButtonVariantFlat)) {
+        // If the variant is already a valid flattened value, use it as is.
+        if (variantLiteral !== 'primary') {
+          // If its "primary", just remove all the props
+          jsxEl.addAttribute({
+            name: 'variant',
+            initializer: `"${variantLiteral}"`,
+          });
+        }
+      } else {
+        // Compute the flattened variant using the parsing function.
+        const flattened = parseButtonVariantFlat({
+          palette: paletteLiteral as ButtonPalette,
+          variant: variantLiteral as ButtonVariant,
+        });
+
+        jsxEl.addAttribute({
+          name: 'variant',
+          initializer: `"${flattened}"`,
+        });
+      }
+    });
+  }
+  await project.save();
+}

package/cli/codemods/propsToClass.ts

@@ -11,6 +11,8 @@ import {
   SyntaxKind,
 } from 'ts-morph';
 
+import { getGlobPattern } from './utils';
+
 const throwComplexExpressionWarning = ({
   attr,
   element,
@@ -70,6 +72,11 @@ const throwComplexExpressionWarning = ({
 
 export const getProject = () => {
   const workspaceDir = Bun.env.PWD;
+
+  if (!workspaceDir) {
+    throw new Error('Workspace directory not found.');
+  }
+
   const srcDir = path.join(workspaceDir, 'tsconfig.json');
   return new Project({
     tsConfigFilePath: srcDir,
@@ -77,18 +84,6 @@ export const getProject = () => {
   });
 };
 
-const getGlobPattern = (selectedDirs?: string[]) => {
-  let glob = './';
-  if (selectedDirs && selectedDirs.length === 1) {
-    glob += selectedDirs[0];
-  } else if (selectedDirs) {
-    glob += `{${selectedDirs.join(',')}}`;
-  }
-  glob += '/**/*.+(ts|tsx)';
-
-  return glob;
-};
-
 interface PropToClassMap {
   selectedDirs?: string[];
   project?: Project;

package/cli/codemods/remapProps.ts

@@ -1,7 +1,7 @@
-import path from 'node:path';
-
 import { green, print, red } from 'bluebun';
-import { IndentationText, Project, SyntaxKind } from 'ts-morph';
+import { SyntaxKind } from 'ts-morph';
+
+import { getGlobPattern, getProject } from './utils';
 
 interface RemapPropsOptions {
   /** Properties to remap values for */
@@ -15,14 +15,8 @@ interface RemapPropsOptions {
  * For example, a UDS component with a prop of `spacing="6"` should be updated to `spacing="4"`.
  */
 export async function remapProps({ properties, oldToNewMap }: RemapPropsOptions) {
-  const workspaceDir = Bun.env.PWD;
-  const srcDir = path.join(workspaceDir, 'tsconfig.json');
-  const project = new Project({
-    tsConfigFilePath: srcDir,
-    manipulationSettings: { indentationText: IndentationText.TwoSpaces },
-  });
-
-  const sourceFiles = project.getSourceFiles(`${workspaceDir}/**/*.{ts,tsx}`);
+  const project = getProject();
+  const sourceFiles = project.getSourceFiles(getGlobPattern());
 
   for (const sourceFile of sourceFiles) {
     const jsxOpeningElement = sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement);
@@ -51,7 +45,14 @@ export async function remapProps({ properties, oldToNewMap }: RemapPropsOptions)
             if (newValue) {
               const oldLog = red(`${propName}=${oldValue}`);
               const newLog = green(`${propName}=${newValue}`);
-              const relativePath = sourceFile.getFilePath().replace(Bun.env.PWD, '');
+
+              const workspaceDir = Bun.env.PWD;
+
+              if (!workspaceDir) {
+                throw new Error('Workspace directory not found.');
+              }
+
+              const relativePath = sourceFile.getFilePath().replace(workspaceDir, '');
               print(`${relativePath} ${oldLog} -> ${newLog}`);
               attribute.set({ name: propName, initializer: `"${newValue}"` });
             }

package/cli/codemods/replaceTwClassNameWithProp.ts

@@ -0,0 +1,99 @@
+import { Node, Project, SyntaxKind } from 'ts-morph';
+
+import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
+
+const getGlob = (selectedDirs?: string[]) => {
+  const glob = getGlobPattern(selectedDirs);
+  return [glob, '!**/*.d.ts', '!**/*/{vitest,tailwind,uds,site}.config.ts'];
+};
+
+interface Options {
+  /** Class names to replace with properties */
+  replacements: Record<string, Record<string, string>>;
+  /** Package to look in. @default '@yahoo/uds' */
+  packageName?: string;
+  selectedDirs?: string[];
+  project?: Project;
+}
+
+/**
+ * Replace tailwind classNames on UDS components with the equivalent UDS prop.
+ * Example: `w-full` -> `width="full"`.
+ */
+export async function replaceTwClassNameWithProp({
+  selectedDirs,
+  packageName = '@yahoo/uds',
+  project = getProject(),
+  replacements,
+}: Options) {
+  const glob = getGlob(selectedDirs);
+  const sourceFiles = project.getSourceFiles(glob);
+
+  for (const sourceFile of sourceFiles) {
+    const importUdsComponents = getImportsFromPackage(sourceFile, packageName);
+
+    // Find all nodes of JsxAttribute kind and filter for className attributes
+    const jsxAttributes = sourceFile
+      .getDescendantsOfKind(SyntaxKind.JsxAttribute)
+      .filter((node) => node.getNameNode().getText() === 'className');
+
+    // Process each className attribute
+    jsxAttributes.forEach((classNameAttr) => {
+      const initializer = classNameAttr.getInitializer();
+      if (!initializer) {
+        return;
+      }
+
+      // Navigate up to find JsxOpeningElement
+      const ancestors = classNameAttr.getAncestors();
+      const jsxOpeningElement = ancestors.find((node) => Node.isJsxOpeningElement(node));
+
+      if (!jsxOpeningElement) {
+        return;
+      }
+
+      // Only modify UDS components.
+      const componentName = jsxOpeningElement.getTagNameNode().getText();
+      const wasImportedFromUDS = importUdsComponents.has(componentName);
+      if (!wasImportedFromUDS) {
+        return;
+      }
+
+      // Get the className value
+      const classNameValue = initializer.getText().replace(/['"]/g, '');
+      const componentClasses = classNameValue.split(' ');
+
+      const replaceList = Object.keys(replacements);
+      const classesToSwitchToProps = new Set();
+      const remainingClasses = componentClasses
+        .filter((c) => {
+          if (replaceList.includes(c)) {
+            classesToSwitchToProps.add(c);
+          }
+          return !classesToSwitchToProps.has(c);
+        })
+        .join(' ');
+
+      // Remove the tw classes from the element which are listed in the replacements.
+      if (remainingClasses) {
+        classNameAttr.setInitializer(`"${remainingClasses}"`);
+      } else {
+        classNameAttr.remove();
+      }
+
+      // For each class that was replaced, add the corresponding prop.
+      for (const item of Object.entries(replacements)) {
+        const [prop, val] = Object.entries(item[1])[0];
+
+        if (classesToSwitchToProps.has(item[0])) {
+          jsxOpeningElement.insertAttribute(0, {
+            name: prop,
+            initializer: `"${val}"`,
+          });
+        }
+      }
+    });
+  }
+
+  await project.save();
+}

package/cli/codemods/utils/getGlobPattern.ts

@@ -0,0 +1,11 @@
+export const getGlobPattern = (selectedDirs?: string[]) => {
+  let glob = './';
+  if (selectedDirs && selectedDirs.length === 1) {
+    glob += selectedDirs[0];
+  } else if (selectedDirs) {
+    glob += `{${selectedDirs.join(',')}}`;
+  }
+  glob += '/**/*.+(ts|tsx)';
+
+  return glob;
+};

package/cli/codemods/utils/getImportsFromPackage.ts

@@ -0,0 +1,21 @@
+import { SourceFile } from 'ts-morph';
+
+/**
+ * Gets the named imports being imported from `packageName` module.
+ * @param sourceFile Source file to search for imports in.
+ * @param packageName The package name to search in.
+ */
+export const getImportsFromPackage = (sourceFile: SourceFile, packageName: string) => {
+  const importedComponents = new Set<string>();
+
+  // Collect imports from '@yahoo/uds'
+  sourceFile.getImportDeclarations().forEach((importDeclaration) => {
+    if (importDeclaration.getModuleSpecifierValue() === packageName) {
+      importDeclaration.getNamedImports().forEach((namedImport) => {
+        importedComponents.add(namedImport.getName());
+      });
+    }
+  });
+
+  return importedComponents;
+};

package/cli/codemods/utils/getJSXElements.ts

@@ -0,0 +1,9 @@
+import { SourceFile, SyntaxKind } from 'ts-morph';
+
+/** Gets the JSX elements in the source file. */
+export function getJSXElements(sourceFile: SourceFile) {
+  return [
+    ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement),
+    ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement),
+  ];
+}

package/cli/codemods/utils/getProject.ts

@@ -0,0 +1,17 @@
+import path from 'node:path';
+
+import { IndentationText, Project } from 'ts-morph';
+
+export const getProject = () => {
+  const workspaceDir = Bun.env.PWD;
+
+  if (!workspaceDir) {
+    throw new Error('Workspace directory not found.');
+  }
+
+  const srcDir = path.join(workspaceDir, 'tsconfig.json');
+  return new Project({
+    tsConfigFilePath: srcDir,
+    manipulationSettings: { indentationText: IndentationText.TwoSpaces },
+  });
+};

package/cli/codemods/utils/hasJSXProperty.ts

@@ -0,0 +1,14 @@
+import { Node } from 'ts-morph';
+
+/** Returns true if the jsx element has a `propertyName` prop. */
+export function hasJSXProperty(element: Node, propertyName: string) {
+  if (!Node.isJsxElement(element) && !Node.isJsxSelfClosingElement(element)) {
+    return false;
+  }
+
+  const openingElement = Node.isJsxElement(element) ? element.getOpeningElement() : element;
+
+  return openingElement
+    .getAttributes()
+    .some((attr) => Node.isJsxAttribute(attr) && attr.getNameNode().getText() === propertyName);
+}

package/cli/codemods/utils/index.ts

@@ -0,0 +1,14 @@
+/**
+ * ------------------- GENERATED | DO NOT MODIFY THIS SECTION ------------------
+ * This file uses eslint-plugin-codegen to automatically watch for changes in
+ * the `src/components` directory and updates this barrel file.
+ */
+// codegen:start {preset: barrel,  exclude: ['*.*.*']}
+export * from './getGlobPattern';
+export * from './getImportsFromPackage';
+export * from './getJSXElements';
+export * from './getProject';
+export * from './hasJSXProperty';
+export * from './matchesJSXTagName';
+export * from './sizingPropToClassMap';
+// codegen:end

package/cli/codemods/utils/matchesJSXTagName.ts

@@ -0,0 +1,14 @@
+import { Node } from 'ts-morph';
+
+/** Returns true if the name of the jsx element is `tagName`. */
+export function matchesJSXTagName(element: Node, tagName: string) {
+  if (!Node.isJsxElement(element) && !Node.isJsxSelfClosingElement(element)) {
+    return false;
+  }
+
+  const tagNameNode = Node.isJsxElement(element)
+    ? element.getOpeningElement().getTagNameNode()
+    : element.getTagNameNode();
+
+  return tagNameNode.getText() === tagName;
+}

package/cli/commands/codemod/flattenButtonVariant.ts

@@ -0,0 +1,16 @@
+import { type Props, spinStart, spinStop } from 'bluebun';
+
+import { flattenButtonVariant } from '../../codemods/flattenButtonVariant';
+
+export default {
+  name: 'flattenButtonVariant',
+  description: `Flatten deprecated button props into single variant prop`,
+
+  run: async (props: Props & { selectedDirs?: string[] }) => {
+    spinStart('Running codemod...');
+
+    await flattenButtonVariant({ selectedDirs: props.selectedDirs });
+
+    spinStop('Codemod complete! Peek the diff and commit your changes!');
+  },
+};

package/cli/commands/codemod/tailwindClassesToProps.ts

@@ -0,0 +1,24 @@
+import { type Props, spinStart, spinStop } from 'bluebun';
+
+import { replaceTwClassNameWithProp } from '../../codemods/replaceTwClassNameWithProp';
+
+export default {
+  name: 'tailwindClassesToProps',
+  description: `Converts tailwind classes to UDS props (e.g. w-full => width="full").`,
+
+  run: async (props: Props & { selectedDirs?: string[] }) => {
+    spinStart('Running codemod...');
+    await replaceTwClassNameWithProp({
+      selectedDirs: props.selectedDirs,
+      replacements: {
+        'w-fit': { width: 'fit' },
+        'w-full': { width: 'full' },
+        'w-screen': { width: 'screen' },
+        'h-full': { height: 'full' },
+        'h-screen': { height: 'screen' },
+        'h-fit': { height: 'fit' },
+      },
+    });
+    spinStop('Codemod complete! Peek the diff and commit your changes!');
+  },
+};

package/cli/tailwindcss.d.ts

@@ -0,0 +1,2 @@
+// The typecheck script is not able to find the `flattenColorPalette` function from TailwindCSS.
+declare module 'tailwindcss/lib/util/flattenColorPalette';

package/cli/tsconfig.json

@@ -1,8 +1,12 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
-  "include": ["."],
-  "exclude": ["node_modules"],
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "node_modules"
+  ],
   "compilerOptions": {
     "composite": false,
     "declaration": true,
@@ -16,16 +20,34 @@
     "preserveWatchOutput": true,
     "skipLibCheck": true,
     "strict": true,
-    "types": ["bun-types"],
+    "types": [
+      "bun-types"
+    ],
     "target": "esnext",
-    "lib": ["ESNext"],
+    "lib": [
+      "ESNext"
+    ],
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
-      "@yahoo/uds/scripts/*": ["../scripts/*"],
-      "@yahoo/uds/*": ["../src/*"],
-      "@yahoo/uds/tailwind/tsMorph": ["../scripts/utils/tsMorph.ts"],
-      "root/*": ["../../*"]
+      "~/*": [
+        "../src/*"
+      ],
+      "@yahoo/uds/scripts/*": [
+        "../scripts/*"
+      ],
+      //      "@yahoo/uds/tokens": [
+      //        "../src/tokens/index.ts"
+      //      ],
+      "@yahoo/uds/tailwind/purger": [
+        "../src/tailwind/purger/index.ts"
+      ],
+      "@yahoo/uds/tailwind/tsMorph": [
+        "../scripts/utils/tsMorph.ts"
+      ],
+      "root/*": [
+        "../../*"
+      ]
     }
   }
 }

package/cli/utils/configWorker.ts

@@ -8,7 +8,7 @@ import { eq, gte } from 'semver';
 import { ConfigWorkerThreadMessageEvent } from './types';
 
 const PRODUCTION_PREFIX = 'https://config.uds.build';
-const STAGING_PREFIX = 'https://staging.uds.build';
+const STAGING_PREFIX = 'https://staging.config.uds.build';
 const LOCAL_PORT = process.env.PORT || 4001;
 const LOCAL_PREFIX = `http://localhost:${LOCAL_PORT}`;
 
@@ -16,7 +16,7 @@ let CONFIG_ENDPOINT = `${PRODUCTION_PREFIX}/api/config`;
 
 // Setup auth bypass for Vercel preview deployments (staging)
 const PROTECTION_BYPASS = process.env.VERCEL_PROTECTION_BYPASS ?? '';
-const FETCH_REQUEST_INIT: FetchRequestInit = {
+const FETCH_REQUEST_INIT: BunFetchRequestInit = {
   headers: {
     'x-vercel-protection-bypass': PROTECTION_BYPASS,
   },