Misc Tweaks (#23)

* chore: loosening minor/patch versions of node

* fix: ensuring prettier targets JSON files

* chore: adding extension recommendations

* chore: adding react/jsx-runtime eslint plugin to no longer warn when react isn't in scope

* chore: making eslint configurations consistent

* refactor: removing react imports where module only contains JSX

* chore: adding names to workflows

* chore: prettier formatting

* chore: upgrading cypress to get around CLI hang

* chore: upgrading vite, externalising react-dom, and making export syntax consistent

* refactor: caching cypress binaries

* chore: bumping to node v18

* chore: adding prettier config to top-level of monorepo

* chore: adding peer dependencies for react and react-dom

* chore: consistent file extension for prettier config files

* chore: upgrading syncpack and moving config to dedicated file

* chore: moving from @vitejs/plugin-react to @vitejs/plugin-react-swc

.changeset/cool-jokes-doubt.md

@@ -0,0 +1,7 @@
+---
+"@anthonyhastings/tds-core": patch
+"@anthonyhastings/tds-deprecated": patch
+"@anthonyhastings/tds-utils": patch
+---
+
+chore: adding peer dependencies for react and react-dom

.changeset/honest-bags-switch.md

@@ -0,0 +1,7 @@
+---
+"@anthonyhastings/tds-core": patch
+"@anthonyhastings/tds-deprecated": patch
+"@anthonyhastings/tds-utils": patch
+---
+
+refactor: removing react imports where module only contains JSX (possibly due to automatic JSX runtime)

.changeset/wise-cooks-jog.md

@@ -0,0 +1,7 @@
+---
+"@anthonyhastings/tds-core": patch
+"@anthonyhastings/tds-deprecated": patch
+"@anthonyhastings/tds-utils": patch
+---
+
+refactor: ensuring react-dom is external and ensuring package file has consistent export statements

.github/workflows/lint.yml

@@ -7,7 +7,8 @@ on:
       - main
 
 jobs:
-  test:
+  lint:
+    name: Linting
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository

.github/workflows/release.yml

@@ -9,7 +9,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   release:
-    name: Release
+    name: Releasing
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository

.github/workflows/test.yml

@@ -6,8 +6,12 @@ on:
     branches:
       - main
 
+env:
+  CYPRESS_CACHE_FOLDER: ${{ github.workspace }}/.cypress
+
 jobs:
   test:
+    name: Testing
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
@@ -19,16 +23,25 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'yarn'
 
+      - name: Restore Cypress Binary
+        uses: actions/cache@v3
+        with:
+          path: .cypress
+          key: cypress-binary-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile --prefer-offline
+        run: |
+          yarn install --frozen-lockfile --prefer-offline
+          yarn --silent cypress info
+          yarn --silent cypress cache list
 
       # Turborepo attempts to run as many tasks as possible over all available CPU's.
       # This causes problems when multiple Cypress tasks run concurrently as each tries
       # to instantiate xvfb and only one can do so. The solution is to start the process
       # beforehand and set the DISPLAY environment variable which stops Cypress from
       # attempting to instantiate xvfb itself. Multiple processes of Cypress can share
       # the same instance of xvfb.
-      - name: Run tests
+      - name: Run Package(s) Tests
         run: |
           Xvfb :99 & export DISPLAY=:99
           echo ---

.nvmrc

@@ -1 +1 @@
-16.16.0
+18

.prettierignore

@@ -1,3 +1,4 @@
+**/.changeset/
 **/coverage/
 **/dist/
 **/storybook-static/

.syncpackrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  dependencyTypes: ['dev', 'peer', 'prod'],
+  semverRange: '^',
+  source: ['package.json', 'apps/*/package.json', 'packages/*/package.json'],
+  versionGroups: [
+    {
+      label:
+        'Internal config packages should be pinned to "*" (meaning any version is acceptable)',
+      packages: ['**'],
+      dependencies: ['config-prettier', 'config-tsconfig', 'eslint-config-tds'],
+      dependencyTypes: ['dev'],
+      pinVersion: '*',
+    },
+  ],
+};

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "[markdown][javascript][typescript][typescriptreact]": {
+  "[markdown][javascript][typescript][typescriptreact][json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
   }
-}
+}

apps/docs/package.json

@@ -17,12 +17,13 @@
   "devDependencies": {
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
-    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/builder-vite": "^0.4.2",
     "@storybook/react": "^6.4.18",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "config-prettier": "*",
     "config-tsconfig": "*",
     "serve": "^13.0.2",
     "typescript": "^4.5.4",
-    "vite": "^3.0.8"
+    "vite": "^4.1.2"
   }
 }

package.json

@@ -8,9 +8,9 @@
     "build": "turbo run build",
     "lint": "turbo run lint",
     "lint:packages": "npm-run-all --parallel --print-label --continue-on-error lint:packages:*",
-    "lint:packages:semver": "syncpack lint-semver-ranges --dev --prod --peer --semver-range='^'",
-    "lint:packages:mismatches": "syncpack list-mismatches --dev --prod --peer",
-    "lint:format": "prettier --check \"**/*.{js,ts,tsx,md,mdx}\"",
+    "lint:packages:semver": "syncpack lint-semver-ranges",
+    "lint:packages:mismatches": "syncpack list-mismatches",
+    "lint:format": "prettier --check \"**/*.{js,ts,tsx,md,mdx,json}\"",
     "clean": "turbo run clean && rm -rf node_modules",
     "changeset": "changeset add",
     "version-packages": "changeset version",
@@ -24,10 +24,11 @@
     "@changesets/cli": "^2.22.0",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "config-prettier": "*",
     "husky": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "syncpack": "^8.2.4",
+    "syncpack": "^9.7.4",
     "turbo": "^1.4.3"
   }
 }

packages/config-eslint/.prettierrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('config-prettier'),
+};

packages/config-eslint/index.js

@@ -7,7 +7,12 @@ module.exports = {
       jsx: true,
     },
   },
-  extends: ['turbo', 'plugin:react/recommended', 'prettier'],
+  extends: [
+    'turbo',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'prettier',
+  ],
   rules: {
     'react/jsx-key': 'off',
   },

packages/tds-core/package.json

@@ -16,7 +16,7 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    "./src": "./src/index.tsx",
+    "./src": "./src/index.ts",
     ".": {
       "require": "./dist/tds-core.cjs",
       "import": "./dist/tds-core.js"
@@ -34,19 +34,23 @@
     "test:gui": "cypress open --component --browser chrome",
     "types:check": "tsc --noEmit"
   },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
   "devDependencies": {
     "@testing-library/cypress": "^8.0.3",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "config-prettier": "*",
     "config-tsconfig": "*",
-    "cypress": "^10.5.0",
+    "cypress": "^12.6.0",
     "eslint": "^8.15.0",
     "eslint-config-tds": "*",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "typescript": "^4.5.4",
-    "vite": "^3.0.8"
+    "vite": "^4.1.2"
   }
 }

packages/tds-core/src/Button.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export interface ButtonProps {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;

packages/tds-core/src/Heading.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export interface HeadingProps {
   children: React.ReactNode;
 }

packages/tds-core/vite.config.ts

@@ -1,17 +1,17 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 
 export default defineConfig({
   build: {
     lib: {
-      entry: './src/index.tsx',
+      entry: './src/index.ts',
       formats: ['cjs', 'es'],
     },
     rollupOptions: {
-      external: ['react'],
+      external: ['react', 'react-dom'],
     },
     sourcemap: true,
-    target: 'es2019',
+    target: 'es2020',
   },
   plugins: [react()],
   publicDir: false,

packages/tds-deprecated/package.json

@@ -16,7 +16,7 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    "./src": "./src/index.tsx",
+    "./src": "./src/index.ts",
     ".": {
       "require": "./dist/tds-deprecated.cjs",
       "import": "./dist/tds-deprecated.js"
@@ -34,19 +34,23 @@
     "test:gui": "cypress open --component --browser chrome",
     "types:check": "tsc --noEmit"
   },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
   "devDependencies": {
     "@testing-library/cypress": "^8.0.3",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "config-prettier": "*",
     "config-tsconfig": "*",
-    "cypress": "^10.5.0",
+    "cypress": "^12.6.0",
     "eslint": "^8.15.0",
     "eslint-config-tds": "*",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "typescript": "^4.5.4",
-    "vite": "^3.0.8"
+    "vite": "^4.1.2"
   }
 }

packages/tds-deprecated/src/Anchor.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export interface AnchorProps {
   children: React.ReactNode;
   openInNewWindow?: boolean;

packages/tds-deprecated/vite.config.ts

@@ -1,17 +1,17 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 
 export default defineConfig({
   build: {
     lib: {
-      entry: './src/index.tsx',
+      entry: './src/index.ts',
       formats: ['cjs', 'es'],
     },
     rollupOptions: {
-      external: ['react'],
+      external: ['react', 'react-dom'],
     },
     sourcemap: true,
-    target: 'es2019',
+    target: 'es2020',
   },
   plugins: [react()],
   publicDir: false,

packages/tds-utils/.eslintrc.cjs

@@ -1,4 +1,8 @@
 module.exports = {
   root: true,
   extends: ['tds'],
+  env: {
+    browser: true,
+    es2020: true,
+  },
 };

packages/tds-utils/package.json

@@ -16,8 +16,11 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    "require": "./dist/tds-utils.cjs",
-    "import": "./dist/tds-utils.js"
+    "./src": "./src/index.ts",
+    ".": {
+      "require": "./dist/tds-utils.cjs",
+      "import": "./dist/tds-utils.js"
+    }
   },
   "license": "MIT",
   "files": [
@@ -30,21 +33,27 @@
     "test": "jest",
     "types:check": "tsc --noEmit"
   },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
   "devDependencies": {
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^28.1.7",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "config-prettier": "*",
     "config-tsconfig": "*",
     "eslint": "^8.15.0",
     "eslint-config-tds": "*",
     "jest": "^28.1.3",
     "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-test-renderer": "^18.1.0",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.5.4",
-    "vite": "^3.0.8"
+    "vite": "^4.1.2"
   }
 }

packages/tds-utils/src/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useLayoutEffect } from 'react';
 
 /**
  * On the server, React emits a warning when calling `useLayoutEffect`.
@@ -9,6 +9,6 @@ import * as React from 'react';
  */
 
 const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : () => {};
+  typeof window !== 'undefined' ? useLayoutEffect : () => {};
 
 export { useIsomorphicLayoutEffect };