feat(ui-components): prepublish (#7955)

* feat(ui-components): prepublish

* fix css

* undo un-needed tsconfig changes

Signed-off-by: Aviv Keller <[email protected]>

* add code comment

Signed-off-by: Aviv Keller <[email protected]>

* ts-ignore root-level files

---------

Signed-off-by: Aviv Keller <[email protected]>

Author: avivkeller

.github/workflows/publish-packages.yml

@@ -119,10 +119,14 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
           # Create a unique version using the commit SHA as a prerelease identifier
-          # This ensures we can publish multiple times from the same codebase with unique versions
           npm version --no-git-tag-version 1.0.1-$COMMIT_SHA
-          # Publish the package to the npm registry with public access flag
-          pnpm publish --access public --no-git-checks
+
+          # Check if a custom publish script exists in package.json
+          if jq -e '.scripts.publish' package.json > /dev/null; then
+            pnpm run publish
+          else
+            pnpm publish --access public --no-git-checks
+          fi
 
       - name: Notify on Manual Release
         if: ${{ github.event_name == 'workflow_dispatch' }}

.gitignore

@@ -17,6 +17,9 @@ apps/site/public/blog-data.json
 junit.xml
 lcov.info
 
+# Distributed Files
+dist
+
 # Storybook
 storybook-static
 build-storybook.log

.prettierignore

@@ -39,6 +39,9 @@ CODEOWNERS
 # Public Folders
 apps/site/public
 
+# Distributed Files
+dist
+
 # Prettier's Handlebar parser is limited and chokes on some syntax features
 # https://github.com/prettier/prettier/issues/11834
 scripts/release-post/template.hbs

eslint.config.js

@@ -18,6 +18,7 @@ export default [
       '**/.open-next',
       'test-results',
       'playwright-report',
+      'dist',
     ],
   },
   {

packages/ui-components/.stylelintignore

@@ -1 +1,2 @@
 storybook-static
+dist

packages/ui-components/package.json

@@ -11,6 +11,10 @@
     ]
   },
   "scripts": {
+    "compile:ts": "tsc",
+    "compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
+    "compile": "node --run compile:ts && node --run compile:css",
+    "publish": "node --run compile && node scripts/publish.mjs",
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:fix": "node --run lint -- -- --fix",
@@ -33,13 +37,13 @@
     "@radix-ui/react-tabs": "~1.1.12",
     "@radix-ui/react-toast": "~1.2.14",
     "@radix-ui/react-tooltip": "~1.2.7",
-    "@tailwindcss/postcss": "~4.1.11",
     "@vcarl/remark-headings": "~0.1.0",
-    "classnames": "catalog:",
-    "postcss-calc": "^10.1.1",
-    "tailwindcss": "catalog:"
+    "classnames": "catalog:"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "~4.1.11",
+    "postcss-calc": "^10.1.1",
+    "tailwindcss": "catalog:",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-themes": "^9.0.15",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
@@ -53,6 +57,7 @@
     "eslint-plugin-react": "~7.37.4",
     "eslint-plugin-storybook": "~9.0.3",
     "global-jsdom": "^26.0.0",
+    "postcss-cli": "^11.0.1",
     "postcss-loader": "~8.1.1",
     "react": "catalog:",
     "storybook": "^9.0.15",

packages/ui-components/src/Common/BasePagination/PaginationListItem/__tests__/index.test.jsx

@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 
 import { render, screen } from '@testing-library/react';
 
+// @ts-ignore this file is intentionally stored outside of the `rootDir`
 import { isVisible } from '../../../../../../../tests/utilities.mjs';
 
 import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';

packages/ui-components/src/Common/BasePagination/__tests__/index.test.jsx

@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 
 import { render, screen } from '@testing-library/react';
 
+// @ts-ignore this file is intentionally stored outside of the `rootDir`
 import { isVisible } from '../../../../../../tests/utilities.mjs';
 
 import BasePagination from '#ui/Common/BasePagination';

packages/ui-components/src/scripts/publish.mjs

@@ -0,0 +1,21 @@
+import { spawnSync } from 'node:child_process';
+import { writeFile } from 'node:fs/promises';
+
+import pkg from '../package.json' with { type: 'json' };
+
+// Strip the devDependencies, since they aren't needed for publish
+// Strip the exports, since we don't want to reference './src'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const { devDependencies, exports, ...cleanedPkg } = pkg;
+// Change `#ui` to `./` from `./src`, since we are publishing
+// from the same directory as the source code (rather, the compiled code).
+cleanedPkg.imports['#ui/*'] = ['./*'];
+
+await writeFile(
+  'dist/package.json',
+  JSON.stringify(cleanedPkg, null, 2),
+  'utf8'
+);
+
+// Now, publish the generated `dist` folder
+spawnSync('pnpm', ['publish'], { cwd: 'dist', stdio: 'inherit' });

packages/ui-components/tsconfig.json

@@ -6,15 +6,16 @@
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
-    "baseUrl": "."
+    "baseUrl": "./src",
+    "rootDir": "./src",
+    "outDir": "./dist"
   },
   "include": ["src"]
 }