feat(ui-components): prepublish

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

apps/site/styles/effects.css

@@ -1,3 +1,5 @@
+@reference "@node-core/ui-components/styles/index.css";
+
 @utility turtle {
   @apply animate-surf
     absolute

apps/site/styles/locales.css

@@ -1,3 +1,5 @@
+@reference "@node-core/ui-components/styles/index.css";
+
 /**
  * To enhance readability for Korean users, line spacing is increased,
  * line breaks in the middle of words are prevented, and long words are

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/**/*.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/scripts/publish.mjs

@@ -0,0 +1,18 @@
+import { spawnSync } from 'node:child_process';
+import { writeFile } from 'node:fs/promises';
+
+import pkg from '../package.json' with { type: 'json' };
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const { devDependencies, exports, ...cleanedPkg } = pkg;
+cleanedPkg.imports = {
+  ...pkg.imports,
+  '#ui/*': ['./dist/*'],
+};
+
+await writeFile(
+  'dist/package.json',
+  JSON.stringify(cleanedPkg, null, 2),
+  'utf8'
+);
+spawnSync('pnpm', ['publish'], { cwd: 'dist', stdio: 'inherit' });

packages/ui-components/src/styles/base.css

@@ -1,17 +1,22 @@
-* {
-  @apply subpixel-antialiased;
-}
+@reference "tailwindcss";
+@reference "./theme.css";
 
-html,
-body {
-  @apply h-full;
-}
+@layer utilities {
+  * {
+    @apply subpixel-antialiased;
+  }
+
+  html,
+  body {
+    @apply h-full;
+  }
 
-body {
-  @apply font-open-sans
-    bg-white
-    text-neutral-950
-    motion-safe:scroll-smooth
-    dark:bg-neutral-950
-    dark:text-white;
+  body {
+    @apply font-open-sans
+      bg-white
+      text-neutral-950
+      motion-safe:scroll-smooth
+      dark:bg-neutral-950
+      dark:text-white;
+  }
 }