Merge pull request #140 from rangle/nx-migrate

Change from yarn to npm, run nx migration, and fix the resulting issues.

Author: brenzy

.github/workflows/build-chromatic.yml

@@ -33,7 +33,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       # Cache node_modules to speed up future builds
       # For more info see: https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows
@@ -44,30 +44,30 @@ jobs:
           cache-name: cache-node-modules
         with:
           path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-${{ hashFiles('**/yarn.lock', '**/package.json') }}
+          key: ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
           restore-keys: |
             ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-
             ${{ runner.os }}-build-${{ env.cache.name }}-main-
             ${{ runner.os }}-build-${{ env.cache.name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-        # Only install dependencies if cached dependencies aren't found (applies when content of yarn.lock or any package.json changes)
+        # Only install dependencies if cached dependencies aren't found (applies when content of package-lock.json or any package.json changes)
       - name: Install Dependencies
         if: ${{ steps.cache-nodemodules.outputs.cache-hit != 'true' }}
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Validate tokens
         id: validate-tokens
         run: |
           # Parse and Validate Design Tokens
-          yarn tokens:ci
+          npm run tokens:ci
 
       - name: Build projects 🏗
         run: npx nx run demo:build --skip-nx-cache
 
       - name: Lint
-        run: yarn lint:ci
+        run: npm run lint:ci
 
       - name: Test
         run: npx nx affected  --parallel=2 --target=test --coverage --skip-nx-cache

.github/workflows/build-storybook.yml

@@ -24,15 +24,15 @@ jobs:
           path: |
             ~/.npm
             ~/.cache
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: get-npm-version
         id: package-version
@@ -41,7 +41,7 @@ jobs:
           path: libs/foundations
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Build storybook static site
         env:

.github/workflows/deployment-pr.yml

@@ -20,7 +20,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       # Cache node_modules to speed up future builds
       # For more info see: https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows
@@ -31,27 +31,27 @@ jobs:
           cache-name: cache-node-modules
         with:
           path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock', '**/package.json') }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
           restore-keys: |
             ${{ runner.os }}-build-${{ env.cache-name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
-        # Only install dependencies if cached dependencies aren't found (applies when content of yarn.lock or any package.json changes)
+        # Only install dependencies if cached dependencies aren't found (applies when content of package-lock.json or any package.json changes)
       - name: Install Dependencies
         if: ${{ steps.cache-nodemodules.outputs.cache-hit != 'true' }}
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Validate tokens
         id: validate-tokens
         run: |
           # Parse and Validate Design Tokens
-          yarn tokens:ci
+          npm run tokens:ci
 
       - name: Build Demo App
         run: npx nx run demo:build --skip-nx-cache
 
       - name: Lint
-        run: yarn lint:ci
+        run: npm run lint:ci
 
       - name: Configure AWS credentials for deployment
         uses: aws-actions/configure-aws-credentials@v2
@@ -62,7 +62,7 @@ jobs:
 
       ## Deploy remix demo app with SST
       - name: Deploy Demo App to AWS
-        run: yarn sst deploy --stage radius-pr
+        run: npx sst deploy --stage radius-pr
 
       # Find existing Demo App comment
       - name: Find Existing Comment

.github/workflows/deployment.yml

@@ -23,7 +23,7 @@ jobs:
           path: |
             ~/.npm
             ~/.cache
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
 
@@ -34,10 +34,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Build Demo App
         run: npx nx run demo:build --skip-nx-cache
@@ -55,4 +55,4 @@ jobs:
 
       ## Deploy remix demo app with SST
       - name: Deploy Demo App to AWS
-        run: yarn sst deploy --stage prod
+        run: npx sst deploy --stage prod

.github/workflows/main-cache.yml

@@ -2,10 +2,10 @@ name: Update Main Cache
 
 # This workflow is responsible for maintaining an updated cache of node_modules on the 'main' branch.
 # It's triggered on every push to the 'main' branch. It checks out the code, sets up Node.js, and caches
-# the node_modules folder, using a key that is specific to the 'main' branch and the hash of the 'yarn.lock' file.
-# If the 'yarn.lock' file has not changed since the last push to 'main', the existing cache will be reused.
-# If the 'yarn.lock' file has changed, a new cache will be created. This ensures that the cache is always
-# up-to-date with the latest dependencies defined in 'yarn.lock'. This cache can then be used by workflows
+# the node_modules folder, using a key that is specific to the 'main' branch and the hash of the 'package-lock.json' file.
+# If the 'package-lock.json' file has not changed since the last push to 'main', the existing cache will be reused.
+# If the 'package-lock.json' file has changed, a new cache will be created. This ensures that the cache is always
+# up-to-date with the latest dependencies defined in 'package-lock.json'. This cache can then be used by workflows
 # in pull requests to speed up the build process by reusing the installed dependencies.
 
 on:
@@ -33,7 +33,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       # Cache node_modules to speed up future builds
       - name: Cache node modules
@@ -43,12 +43,12 @@ jobs:
           cache-name: cache-node-modules
         with:
           path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock', '**/package.json') }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
           restore-keys: |
             ${{ runner.os }}-build-${{ env.cache-name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
       # Install dependencies to update the cache
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci

.github/workflows/merge-chromatic.yml

@@ -31,7 +31,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       # Cache node_modules to speed up future builds
       # For more info see: https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows
@@ -42,24 +42,24 @@ jobs:
           cache-name: cache-node-modules
         with:
           path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-
             ${{ runner.os }}-build-${{ env.cache.name }}-main-
             ${{ runner.os }}-build-${{ env.cache.name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
 
-        # Only install dependencies if cached dependencies aren't found (applies when content of yarn.lock changes)
+        # Only install dependencies if cached dependencies aren't found (applies when content of package-lock.json changes)
       - name: Install Dependencies
         if: ${{ steps.cache-nodemodules.outputs.cache-hit != 'true' }}
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Validate tokens
         id: validate-tokens
         run: |
           # Parse and Validate Design Tokens
-          yarn tokens:ci
+          npm run tokens:ci
 
       - name: Build projects 🏗
         run: npx nx run demo:build --skip-nx-cache

.gitignore

@@ -52,3 +52,5 @@ apps/demo/public/brand/*
 
 # Environment Variables
 *.env
+
+.nx/cache

.prettierignore

@@ -4,3 +4,5 @@ nx.json
 **/*.hbs
 /dist
 /coverage
+
+/.nx/cache

README.md

@@ -11,16 +11,16 @@ Follow the steps below to set up the Radius Booster Design System Kit on your lo
 
 Start by cloning the repository to your local machine using the following command:
 
-``` bash
+```bash
 git clone https://github.com/rangle/radius-monorepo-react
 ```
 
 ### 2. Install dependencies
 
 Navigate to the cloned repository's root directory and install the required dependencies by running:
 
-``` bash
-yarn install
+```bash
+npm install
 ```
 
 This command installs all the necessary packages and dependencies required for the project.
@@ -30,7 +30,7 @@ This command installs all the necessary packages and dependencies required for t
 Before you can start working with NX Cloud, you need to create an nx-cloud.env file in the root directory. This file
 should contain the NX Cloud authentication token key. Here's how to set it up:
 
-``` bash
+```bash
 echo "NX_CLOUD_AUTH_TOKEN=<your-nx-cloud-token>" > nx-cloud.env
 ```
 
@@ -40,8 +40,8 @@ Replace <your-nx-cloud-token> with your actual NX Cloud token. This sets up NX C
 
 To view and test the components, run the Storybook development server with the following command:
 
-``` bash
-yarn storybook
+```bash
+npm run storybook
 ```
 
 This command launches the Storybook server, which provides an interactive, visual environment to explore and test the
@@ -51,8 +51,8 @@ components in isolation. You can access Storybook by opening a web browser and n
 
 To see the components in action, you can run the demo app by executing the following command:
 
-``` bash
-yarn demo
+```bash
+npm run demo
 ```
 
 This command starts the demo app, which showcases the various components and their usage within a real-world application
@@ -67,4 +67,4 @@ information.
 
 If you encounter any issues or have questions, please create an issue on GitHub, and we'll do our best to help you out.
 We appreciate your feedback and are committed to improving the Radius Booster Design System Kit to better serve the
-development community.
+development community.

apps/demo/.eslintignore

@@ -0,0 +1,2 @@
+build
+public/build