build: NX build optimization

.circleci/config.yml

@@ -25,6 +25,13 @@ references:
       keys:
         - npm-cache-v1
 
+  restore_nx_cache: &restore_nx_cache
+    restore_cache:
+      name: Restore NX cache
+      key: nx-cache-v11-{{ .Branch }}-
+
+
+
   attach_workspace: &attach_workspace
     attach_workspace:
         at: .
@@ -35,6 +42,19 @@ references:
       paths:
         - '*'
 
+  persist_nx_cache_only: &persist_nx_cache_only
+    persist_to_workspace:
+      root: .
+      paths:
+        - .nx/cache
+
+  save_nx_cache: &save_nx_cache
+    save_cache:
+      name: Save NX cache
+      key: nx-cache-v11-{{ .Branch }}-{{ epoch }}
+      paths:
+        - .nx/cache
+
   npm_install: &npm_install
     run:
       name: Install Dependencies
@@ -88,6 +108,7 @@ jobs:
     <<: *container_config
     steps:
       - *attach_workspace
+      - *restore_nx_cache
       - *restore_npm_cache
       - run:
           name: Authenticate with npm
@@ -137,7 +158,7 @@ jobs:
     steps:
       - *attach_workspace
       - run:
-          name: "Run tests with jest"
+          name: "Run tests with Jest"
           command:
             npm test -- --runInBand --no-cache --coverage --reporters=jest-junit
           environment:
@@ -152,22 +173,49 @@ jobs:
       - store_artifacts:
           path: coverage
 
-  build_storybook:
+  build_all:
     resource_class: medium+
     <<: *container_config
     steps:
       - *attach_workspace
       - *generate_base_path
       - run:
-          command: npm run storybook:build
-      - *check_git_status
-
-  build_new_docs:
-    <<: *container_config
-    steps:
-      - *attach_workspace
+          name: Build Storybook with NX
+          command: |
+            echo "=== Starting Storybook Build ==="
+            echo "Running: npm run storybook:build"
+            echo "This should use NX caching if available..."
+
+            # Show NX cache status before build
+            echo "=== NX Cache Status Before Build ==="
+            npx nx show projects --affected || echo "No affected projects or NX not available"
+            echo "=== End NX Cache Status ==="
+
+            # Run the build and capture output
+            if npm run storybook:build; then
+              echo "=== Storybook Build Complete ==="
+            else
+              echo "=== Build Failed ==="
+            fi
       - run:
-          command: cd packages/site && npm run generate && npm run build
+          name: Build Site with NX
+          command: |
+            echo "=== Starting Site Build ==="
+            echo "Running: npm run site:build"
+            echo "This should use NX caching if available..."
+
+            # Show NX cache status before build
+            echo "=== NX Cache Status Before Build ==="
+            npx nx show projects --affected || echo "No affected projects or NX not available"
+            echo "=== End NX Cache Status ==="
+
+            # Run the build and capture output
+            if npm run site:build; then
+              echo "=== Site Build Complete ==="
+            else
+              echo "=== Build Failed ==="
+            fi
+      - *persist_nx_cache_only
       - *check_git_status
 
   release:
@@ -222,6 +270,12 @@ jobs:
       - store_artifacts:
           path: packages/site/test-results
 
+  save_nx_cache:
+    <<: *container_config
+    steps:
+      - *attach_workspace
+      - *save_nx_cache
+
 workflows:
   version: 2
 
@@ -243,15 +297,15 @@ workflows:
       - test:
           requires:
             - install_dependencies
-      - build_storybook:
-          requires:
-            - install_dependencies
-      - build_new_docs:
+      - build_all:
           requires:
             - install_dependencies
       - e2e_tests:
           requires:
             - install_dependencies
+      - save_nx_cache:
+          requires:
+            - build_all
       - release:
           filters:
             branches:
@@ -260,6 +314,5 @@ workflows:
             - lint_javascript
             - lint_css
             - test
-            - build_storybook
-            - build_new_docs
+            - build_all
             - e2e_tests

.github/workflows/trigger-qa-build.yml

@@ -37,8 +37,25 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
           # Defaults to the user or organization that owns the workflow file
           scope: '@jobber'
+          cache: 'npm'
+
+      - name: Setup NX Cache
+        uses: actions/cache@v3
+        with:
+          path: .nx/cache
+          key: nx-cache-${{ runner.os }}-${{ github.ref_name }}-${{ github.sha }}
+          restore-keys: |
+            nx-cache-${{ runner.os }}-${{ github.ref_name }}-
+            nx-cache-${{ runner.os }}-
+
       - name: NPM CI
         run: npm ci
+
+      - name: Build with NX (if needed)
+        run: npm run build
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.JOBBER_NPM_TOKEN }}
+
       - name: NPM Publish
         id: npmPublish
         env:
@@ -73,6 +90,7 @@ jobs:
       - name: Send Summary File
         id: summaryFile
         run: echo "releaseSummary=$(cat ./lerna-publish-summary.json)" >> $GITHUB_OUTPUT
+
   send_build_information:
     permissions: write-all
     runs-on: ubuntu-latest

.gitignore

@@ -11,3 +11,6 @@ storybook-static
 jobber-*.tgz
 .npmrc
 styles.css.backup
+
+# NX cache
+.nx/cache

.prettierignore

@@ -2,3 +2,5 @@ packages/generators/templates
 packages/components/dist/styles.css
 packages/design/icons/
 **/CHANGELOG.md
+
+/.nx/cache

jest.config.js

@@ -153,7 +153,11 @@ module.exports = {
   // ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  testPathIgnorePatterns: ["/node_modules/", "/packages/generators/templates/"],
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/packages/generators/templates/",
+    "/.nx/",
+  ],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],

jest.web.config.js

@@ -25,6 +25,7 @@ module.exports = {
     "/node_modules/",
     "/packages/generators/templates/",
     "/packages/components-native/",
+    "/.nx/",
   ],
   transformIgnorePatterns: ["node_modules/(?!@codesandbox/sandpack-react)/"],
 };

nx.json

@@ -0,0 +1,106 @@
+{
+  "extends": "nx/presets/npm.json",
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": [
+          "build",
+          "bootstrap",
+          "storybook:build",
+          "site:build",
+          "merge:dist",
+          "generate:sitemap",
+          "test"
+        ],
+        "parallel": 3
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/**/*.{ts,tsx,js,jsx,json,css,md,mdx}",
+        "{projectRoot}/rollup.config.*",
+        "{projectRoot}/tsconfig.json",
+        "{projectRoot}/vite.config.*"
+      ],
+      "outputs": ["{projectRoot}/dist"],
+      "cache": true
+    },
+    "bootstrap": {
+      "dependsOn": ["^bootstrap"],
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/**/*.{ts,tsx,js,jsx,json,css,md,mdx}",
+        "{projectRoot}/rollup.config.*",
+        "{projectRoot}/tsconfig.json",
+        "{projectRoot}/vite.config.*"
+      ],
+      "outputs": ["{projectRoot}/dist"],
+      "cache": true
+    },
+    "test": {
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/**/*.{ts,tsx,js,jsx}",
+        "{projectRoot}/**/*.test.{ts,tsx,js,jsx}",
+        "{projectRoot}/**/*.spec.{ts,tsx,js,jsx}",
+        "{projectRoot}/jest.config.*",
+        "!{projectRoot}/node_modules/**/*"
+      ],
+      "outputs": ["{projectRoot}/coverage"],
+      "cache": true
+    },
+    "storybook:build": {
+      "dependsOn": ["^build"],
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/docs/**/*"
+      ],
+      "outputs": ["{projectRoot}/storybook-static"],
+      "cache": true
+    },
+    "site:build": {
+      "dependsOn": ["^build"],
+      "inputs": [
+        "default",
+        "^default",
+        "{projectRoot}/packages/site/**/*",
+        "{projectRoot}/packages/site/public/**/*",
+        "{projectRoot}/packages/site/src/**/*"
+      ],
+      "outputs": ["{projectRoot}/packages/site/dist"],
+      "cache": true
+    },
+    "merge:dist": {
+      "dependsOn": ["storybook:build", "site:build"],
+      "inputs": [
+        "{projectRoot}/storybook-static/**/*",
+        "{projectRoot}/packages/site/dist/**/*"
+      ],
+      "outputs": ["{projectRoot}/storybook-static"],
+      "cache": true
+    },
+    "generate:sitemap": {
+      "cache": true
+    }
+  },
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "!{projectRoot}/node_modules/**/*",
+      "!{projectRoot}/dist/**/*",
+      "!{projectRoot}/storybook-static/**/*"
+    ]
+  },
+  "parallel": 3,
+  "defaultBase": "master"
+}