@yahoo/uds 2.0.0 → 2.1.0

package/fonts/mobile.cjs

@@ -25,5 +25,5 @@ var fonts = [
   require.resolve('@yahoo/uds/fonts/yahoo-serif-display-bold.otf'),
 ];
 
-// eslint-disable-next-line no-undef
+ 
 module.exports.fonts = fonts;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "bin": {
     "uds": "./cli/uds-cli"
   },
   "files": [
     "cli/**",
+    "!cli/**/*.test.*",
     "dist/**",
-    "fonts/**",
-    "package.json"
+    "fonts/**"
   ],
   "sideEffects": false,
   "exports": {
@@ -24,6 +24,26 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./analytics/server": {
+      "import": {
+        "types": "./dist/analytics/server.d.ts",
+        "default": "./dist/analytics/server.js"
+      },
+      "require": {
+        "types": "./dist/analytics/server.d.cts",
+        "default": "./dist/analytics/server.cjs"
+      }
+    },
+    "./flags": {
+      "import": {
+        "types": "./dist/flags.d.ts",
+        "default": "./dist/flags.js"
+      },
+      "require": {
+        "types": "./dist/flags.d.cts",
+        "default": "./dist/flags.cjs"
+      }
+    },
     "./client": {
       "import": {
         "types": "./dist/client/index.d.ts",
@@ -95,23 +115,23 @@
     }
   },
   "scripts": {
-    "build": "bun run ./scripts/prebuild.ts && tsup && bun run ./scripts/postbuild.ts",
-    "build:cli": "bun ./cli/compile.ts",
-    "build:fixtures": "bun run ./scripts/buildFixtures.ts",
-    "build:purgeCSSData": "bun run ./scripts/generatePurgeCSSData.ts",
+    "build": "bun run ./scripts/build.ts",
+    "build:cli": "bun run ./cli/utils/secrets.ts decrypt && bun ./cli/compile.ts",
     "ci:publish": "bun semantic-release -e semantic-release-monorepo",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .coverage",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .coverage && rm -rf cli/bin",
     "dev": "concurrently bun:dev:*",
     "dev:fixtures": "bun run ./scripts/buildFixtures.ts --watch",
     "dev:purgeCSSData": "bun run ./scripts/generatePurgeCSSData.ts --watch",
     "dev:ts": "tsup --watch",
-    "lint": "ESLINT_USE_FLAT_CONFIG=true eslint -c eslint.config.mjs .",
+    "lint": "eslint -c eslint.config.mjs .",
+    "lint:fix": "bun run lint --fix",
     "lint:pkg": "bun publint",
     "test": "vitest run",
     "test:bun": "bun run test:bun:scripts && bun run test:bun:cli",
     "test:bun:cli": "cd ./cli && bun test",
     "test:bun:scripts": "cd ./scripts && bun test",
     "test:coverage": "vitest run --coverage",
+    "test:e2e": "bun run e2e/verifyCLI.ts",
     "test:ui": "vitest --ui --coverage",
     "test:watch": "vitest",
     "typecheck": "concurrently bun:typecheck:*",
@@ -120,37 +140,44 @@
     "typecheck:uds": "tsc -p . --noEmit"
   },
   "dependencies": {
-    "@ariakit/react": "^0.4.11",
+    "@ariakit/react": "^0.4.12",
     "bluebun": "^0.0.34",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.5.4",
+    "firebase": "^11.0.0",
+    "framer-motion": "^11.11.4",
+    "googleapis": "^144.0.0",
     "imurmurhash": "^0.1.4",
     "lodash-es": "^4.17.21",
+    "open": "^10.1.0",
     "prompts": "^2.4.2",
     "react-toastify": "^10.0.5",
     "semver": "^7.6.3",
-    "tailwind-merge": "^2.5.2",
-    "ts-morph": "^23.0.0"
+    "tailwind-merge": "^2.5.3",
+    "ts-morph": "^24.0.0",
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^6.0.0",
+    "@fullhuman/postcss-purgecss": "^7.0.0",
+    "@next/env": "^14.2.15",
+    "@types/bun": "1.1.14",
     "@types/imurmurhash": "^0.1.4",
     "@types/prompts": "^2.4.9",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@yahoo/uds-icons": "workspace:*",
     "autoprefixer": "^10.4.20",
     "chalk": "^5.3.0",
-    "concurrently": "^8.2.2",
-    "postcss": "^8.4.45",
-    "tailwindcss": "^3.4.10",
-    "terser": "^5.31.6",
+    "concurrently": "^9.0.1",
+    "node-mocks-http": "^1.16.1",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "terser": "^5.34.1",
     "tsconfig": "workspace:*",
-    "tsup": "^8.2.4"
+    "tsup": "^8.3.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.10"
+    "tailwindcss": "^3.4.13"
   }
 }

package/cli/codemods/propsToClass.test.tsx

@@ -1,97 +0,0 @@
-import { unlink } from 'node:fs';
-import path from 'node:path';
-
-import * as bluebun from 'bluebun';
-import { afterEach, beforeAll, beforeEach, describe, expect, it, mock, spyOn } from 'bun:test';
-import { IndentationText, Project } from 'ts-morph';
-
-import { propsToClass } from './propsToClass';
-import { sizingPropToClassMap } from './utils/sizingPropToClassMap';
-
-const FILE_NAME = 'PropsToClass.mock.tsx';
-const FILE_BEFORE = `
-import { Button, cx, HStack, Text } from '@yahoo/uds';
-const textClassName = cx('text-primary');
-const otherProps = { height: 'fit' };
-
-export const PageA = () => {
-  return (
-    <HStack width="full" maxHeight="screen">
-      <Button minWidth="full">Click me</Button>
-      <Text width="10/12" className={textClassName}>Some text</Text>
-      <Text {...otherProps}>Some text</Text>
-    </HStack>
-  );
-}
-`.trim();
-const FILE_AFTER = `
-import { Button, cx, HStack, Text } from '@yahoo/uds';
-const textClassName = cx('text-primary');
-const otherProps = { height: 'fit' };
-
-export const PageA = () => {
-  return (
-    <HStack className="w-full max-h-screen">
-      <Button className="min-w-full">Click me</Button>
-      {/* 🙏 TODO: Add w-10/12 to your className attribute */}
-      <Text className={textClassName}>Some text</Text>
-      <Text {...otherProps}>Some text</Text>
-    </HStack>
-  );
-}
-`.trim();
-
-describe('propsToClass', () => {
-  const workspaceDir = Bun.env.PWD;
-  const srcDir = path.join(workspaceDir, 'tsconfig.json');
-  const project = new Project({
-    tsConfigFilePath: srcDir,
-    manipulationSettings: { indentationText: IndentationText.TwoSpaces },
-  });
-
-  beforeAll(async () => {
-    // setup mocks
-    mock.module('bluebun', () => ({ print: () => 'mocked' }));
-  });
-
-  beforeEach(async () => {
-    // Setup files
-    project.createSourceFile(FILE_NAME, FILE_BEFORE, {
-      overwrite: true,
-    });
-  });
-  afterEach(async () => {
-    // teardown files
-    unlink(FILE_NAME, (err) => {
-      if (err) {
-        throw err;
-      }
-    });
-  });
-
-  it('converts props to classNames', async () => {
-    // Sanity check
-    const fileBefore = project.getSourceFile(FILE_NAME)?.getText();
-    expect(fileBefore).toEqual(FILE_BEFORE);
-
-    // Apply the codemod
-    await propsToClass({ propToClassMap: sizingPropToClassMap, project });
-
-    // Confirm it's been transformed
-    const fileAfter = project.getSourceFile(FILE_NAME)?.getText();
-    expect(fileAfter).toEqual(FILE_AFTER);
-  });
-  it('logs a warning when a complex expression is found', async () => {
-    // Spy on the bun logger
-    const spy = spyOn(bluebun, 'print');
-
-    // Apply the codemod
-    await propsToClass({
-      propToClassMap: sizingPropToClassMap,
-      project,
-    });
-
-    // We print 3 times for each complex expression, and 2 times for each spread expression
-    expect(spy).toHaveBeenCalledTimes(5);
-  });
-});

package/cli/utils/purgeCSS.test.ts

@@ -1,210 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-import { Project } from 'ts-morph';
-
-import {
-  getClassesForEnabledThemesAndScales,
-  getComponentsToConvertToTW,
-  getFiles,
-  getTailwindSafelist,
-  getUsedProps,
-  isUDSComponent,
-  parseFiles,
-  scanGetStylesReferences,
-} from './purgeCSS';
-
-const PAGE_A_CODE = `
-import { HStack, Button, getStyles } from '@yahoo/uds';
-
-const functionWithProp = () => {
-  const vars = {
-    isActive: false
-  };
-
-  return {
-    ...vars, 
-    color: 'blue'
-  }
-}
-
-const AnotherComponent = () => {
-  const propsList = functionWithProp();
-
-  const classNames = getStyles({
-    borderStartColor: 'primary'
-  });
-
-  return <HStack testProp="testValue" classNames={classNames} {...propsList}>meow</HStack>
-}
-
-const PageA = () => {
-  const justifyContent = 'justify-start';
-  const classNames = getStyles({
-    justifyContent
-  });
-
-  return (
-    <div>
-      <HStack />
-      <Button> Click me </Button>
-    </div>
-  )
-}
-`;
-
-const PAGE_B_CODE = `
-import { HStack, Spinner } from '@yahoo/uds';
-import { noop } from 'lodash';
-
-const PageB = () => {
-  return (
-    <div>
-    <HStack flexGrow="1" alignItems="center" justifyContent="center">
-      <Spinner />
-    </HStack>
-    </div>
-  )
-}
-`;
-
-const FILES = ['/pages/PageA.tsx', '/pages/PageB.tsx'];
-const IMPORTED_UDS_COMPONENTS = ['HStack', 'Button', 'getStyles', 'Spinner'];
-
-describe('purgeCSS', () => {
-  const project = new Project();
-
-  describe('getFiles', () => {
-    it('returns the list of files', async () => {
-      const files = await getFiles('./src/');
-
-      expect(files).toEqual(FILES);
-    });
-  });
-
-  describe('parseFiles', () => {
-    it('returns the list of imports from @yahoo/uds', () => {
-      project.createSourceFile(FILES[0], PAGE_A_CODE, {
-        overwrite: true,
-      });
-      project.createSourceFile(FILES[1], PAGE_B_CODE, {
-        overwrite: true,
-      });
-
-      const res = parseFiles(project, FILES);
-
-      expect(res).toEqual(IMPORTED_UDS_COMPONENTS);
-    });
-  });
-
-  describe('getTailwindSafelist', () => {
-    it('returns the tailwind classes required for all the components', () => {
-      project.createSourceFile(FILES[0], PAGE_A_CODE, {
-        overwrite: true,
-      });
-      project.createSourceFile(FILES[1], PAGE_B_CODE, {
-        overwrite: true,
-      });
-
-      const res = getTailwindSafelist(project, IMPORTED_UDS_COMPONENTS);
-
-      expect(res).toEqual([
-        'container',
-        'fill',
-        'items-start',
-        'items-center',
-        'justify-start',
-        'justify-center',
-        'text-accent',
-        'text-alert',
-        'text-black',
-        'text-brand',
-        'text-positive',
-        'text-warning',
-        'text-white',
-        'text-transparent',
-        'text-muted',
-        'text-on-color',
-        'text-primary',
-        'text-secondary',
-        'text-tertiary',
-        'text-current',
-        'border-s-primary',
-      ]);
-    });
-  });
-
-  describe('getComponentsToConvertToTW', () => {
-    it('should get just exports which are components from UDS', () => {
-      const res = getComponentsToConvertToTW(['Button', 'HStack', 'randomThingy']);
-
-      expect(res).toEqual(['Button', 'Icon', 'Pressable', 'Text', 'HStack', 'Box']);
-    });
-  });
-
-  describe('isUDSComponent', () => {
-    it('returns true if the component is exported from UDS', () => {
-      const res = isUDSComponent('HStack');
-
-      expect(res).toBeTrue();
-    });
-
-    it('returns false if the component is not exported from UDS', () => {
-      const res = isUDSComponent('NotUdsComponent');
-
-      expect(res).toBeFalse();
-    });
-  });
-
-  describe('getUsedProps', () => {
-    it('return the list of all used props in the project for a given component', () => {
-      project.createSourceFile(FILES[0], PAGE_A_CODE, {
-        overwrite: true,
-      });
-      project.createSourceFile(FILES[1], PAGE_B_CODE, {
-        overwrite: true,
-      });
-
-      const usedProps = getUsedProps(project, 'HStack');
-
-      expect(usedProps).toEqual([
-        ['testProp', ['testValue']],
-        ['classNames', []],
-        ['color', []],
-        ['isActive', []],
-        ['flexGrow', ['1']],
-        ['alignItems', ['center']],
-        ['justifyContent', ['center']],
-      ]);
-    });
-  });
-
-  describe('getClassesForEnabledThemesAndScales', () => {
-    it('returns the list of classes related to the mode/themes we have in the config', () => {
-      const classes = getClassesForEnabledThemesAndScales();
-
-      expect(classes).toEqual([
-        'uds-color-mode-dark',
-        'uds-color-mode-light',
-        'uds-scale-mode-large',
-      ]);
-    });
-  });
-
-  describe('scanGetStylesReferences', () => {
-    it('should scan the project for getStyles references and return the used variants', () => {
-      project.createSourceFile(FILES[0], PAGE_A_CODE, {
-        overwrite: true,
-      });
-      project.createSourceFile(FILES[1], PAGE_B_CODE, {
-        overwrite: true,
-      });
-
-      const res = scanGetStylesReferences(project);
-
-      const expectedResult = new Map();
-      expectedResult.set('borderStartColor', new Set(['primary']));
-      expectedResult.set('justifyContent', new Set([]));
-
-      expect(res).toEqual(expectedResult);
-    });
-  });
-});