Convert codebase to ESM

.eslintignore

@@ -1,6 +1,9 @@
 /.vscode
+storybook-static
 node_modules
 dist
 *.svg
 package.json
 *.css
+!/.storybook
+!/**/.storybook

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "root": true,
+    "extends": ["plugin:@workleap/react-library"],
+    "rules": {
+        "no-console": ["warn", { "allow": ["warn", "error"] }],
+        "react/destructuring-assignment": "off",
+        "no-param-reassign": "off",
+
+        // New Workleap rules that we don't want to enforce yet
+        "@typescript-eslint/consistent-type-imports": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "react/no-unused-prop-types": "off"
+
+    },
+    "overrides": [
+        {
+            "files": ["*.mdx"],
+            "rules":{
+                "react/jsx-no-undef": "off"
+            }
+        },
+        {
+            "files": [
+                ".storybook/*",
+                "**/scripts/*.js"
+            ],
+            "rules":{
+                "no-console": "off"
+            }
+        }
+    ]
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,8 +6,8 @@
     Before submitting your pull request, please:
 
     1. Read our contributing documentation: https://github.com/gsoft-inc/wl-orbiter/blob/master/CONTRIBUTING.md
-    2. Ensure there are no linting or TypeScript errors: `yarn lint`
-    3. Verify that tests pass: `yarn jest`
+    2. Ensure there are no linting or TypeScript errors: `pnpm lint`
+    3. Verify that tests pass: `pnpm jest`
 -->
 
 Issue:

.github/workflows/changeset.yml

@@ -2,7 +2,7 @@ name: Changeset
 
 on:
   push:
-    branches: ["master"]
+    branches: ["master", "master-esm"]
 
 jobs:
   release:
@@ -14,23 +14,29 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout Commit
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-            node-version-file: ".nvmrc"
-      - name: Cache yarn dependencies
-        uses: actions/cache@v3
+          node-version-file: ".nvmrc"
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
         id: cache-dependencies
         with:
-            path: node_modules
-            key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-            restore-keys: |
-              ${{ runner.ox }}-yarn-
-      - name: Install Dependencies
-        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+          path: |
+            node_modules
+            ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: Install pnpm
         run: |
-          yarn install --frozen-lockfile
+          corepack enable
+          pnpm install --frozen-lockfile
+
       - name: Create release Pull Request or publish to NPM
         id: changesets
         uses: changesets/action@v1

.github/workflows/chromatic.yml

@@ -5,30 +5,51 @@ name: Chromatic
 
 on:
     pull_request:
+        # Opened, synchronize, or reopened are the default types
+        # We added ready_for_review to trigger the workflow is passed from draft to ready_for_review
+        types: ["opened", "synchronize", "reopened", "ready_for_review"]
         branches-ignore:
           - changeset-release/*
 
 jobs:
     chromatic:
+        if: github.event.pull_request.draft == false
         runs-on: ubuntu-latest
         steps:
             - name: Checkout Commit
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
               with:
                   fetch-depth: 0
+
             - name: Setup Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version-file: ".nvmrc"
-                  cache: "yarn"
+
+            - name: Cache pnpm store
+              uses: actions/cache@v4
+              with:
+                  path: |
+                    node_modules
+                    ~/.pnpm-store
+                  key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                    ${{ runner.os }}-pnpm-
+
             - name: Install Dependencies
-              run: yarn install --frozen-lockfile
+              run: |
+                corepack enable
+                pnpm install --frozen-lockfile
+
             - name: Build Packages
-              run: yarn build
+              run: pnpm run build
+
             - name: Publish to Chromatic
-              uses: chromaui/[email protected]
+              uses: chromaui/action@v1
+              id: chromatic
               with:
                   projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                   buildScriptName: build-sb-chroma
-
-
+                  traceChanged: true
+                  onlyChanged: true # TurboSnap
+                  exitOnceUploaded: true # The PRs will be marked as success/failure based on the Chromatic build status

.github/workflows/ci.yml

@@ -5,9 +5,9 @@ name: CI
 
 on:
     push:
-        branches: ["master"]
+        branches: ["master", "master-esm"]
     pull_request:
-        branches: ["master"]
+        branches: ["master", "master-esm"]
 
 concurrency:
     group: ${{ github.ref }}
@@ -18,42 +18,77 @@ jobs:
         name: "Eslint"
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
             - name: Setup Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version-file: ".nvmrc"
+            - name: Cache pnpm store
+              uses: actions/cache@v4
+              with:
+                  path: |
+                    node_modules
+                    ~/.pnpm-store
+                  key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                    ${{ runner.os }}-pnpm-
             - name: Install Dependencies
-              run: yarn install --frozen-lockfile
+              run: |
+                corepack enable
+                pnpm install --frozen-lockfile
             - name: Lint Eslint
-              run: yarn lint-ci-eslint
+              run: pnpm run lint-ci-eslint
 
     stylelint:
         name: "Stylelint"
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
             - name: Setup Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version-file: ".nvmrc"
+            - name: Cache pnpm store
+              uses: actions/cache@v4
+              with:
+                  path: |
+                    node_modules
+                    ~/.pnpm-store
+                  key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                    ${{ runner.os }}-pnpm-
             - name: Install Dependencies
-              run: yarn install --frozen-lockfile
+              run: |
+                corepack enable
+                pnpm install --frozen-lockfile
             - name: Lint Stylelint
-              run: yarn lint-ci-style
+              run: pnpm run lint-ci-style
 
     build_and_tests:
         name: "Build and Tests"
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
             - name: Setup Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version-file: ".nvmrc"
+            - name: Cache pnpm store
+              uses: actions/cache@v4
+              with:
+                  path: |
+                    node_modules
+                    ~/.pnpm-store
+                  key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                    ${{ runner.os }}-pnpm-
             - name: Install Dependencies
-              run: yarn install --frozen-lockfile
+              run: |
+                corepack enable
+                pnpm install --frozen-lockfile
+            - name: Typecheck
+              run: pnpm run lint-ci-eslint
             - name: Build Packages
-              run: yarn build
+              run: pnpm run build
             - name: Run Jest
-              run: yarn test
+              run: pnpm run test

.gitignore

@@ -1,8 +1,5 @@
 node_modules
 dist
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
 *.tgz
 __MACOSX
 .DS_Store
@@ -13,3 +10,5 @@ storybook-static
 .stylelintcache
 build-storybook.log
 .idea
+migration-storybook.log
+storybook.log

.npmrc

@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+public-hoist-pattern[]=*

.nvmrc

@@ -1 +1 @@
-16.14
+lts/*

.storybook/components/banner/Banner.tsx

@@ -1,7 +1,7 @@
 import "./Banner.css";
 
-import { Div, DivProps } from "@components/html";
-import { mergeProps } from "@components/shared";
+import { Div, DivProps } from "@components/html/index.ts";
+import { mergeProps } from "@components/shared/index.ts";
 
 export function Banner({ children, ...rest }: DivProps) {
     return (

.storybook/components/banner/index.ts

@@ -1 +1 @@
-export * from "./Banner";
+export * from "./Banner.tsx";