💥 (breaking) NICE-67 node20; semantic-release@23, ... [b] (#2151)

## Packages

### Upgrades

- `@jeromefitz/*` canary builds from: JeromeFitz/packages#1144
- `semantic-release@23`
- `prettier@3`
- `octokit/core`
- `date-fns`
- `upstash/redis`
- `react-use`
- `zustand`


### Removals

- [x] `@radix-ui/*` internals

## Next + ESM

Well ... this was a journey. Wanted to see about moving the following packages to be their own externals (module, esm, etc.):

- `@jeromefitz/design-system`
- `@jeromefitz/shared`
- `next-notion`

But ... then `next` in the current configuration _cannot_ import and keeps thinking everything is a `client` component on the `server`. This without an example I know is not helpful, but will try again on this to move to module stuff later.

What this does is preps for that -- and also removes it, heh.

But then focuses on `next` transpiling (sic) the worskpaces not importing them as an external.

Changes to `postcss.config.cjs` 

C'est la vie.

## Breaking

Is the fact everything is kind of re-written but also not ... but this is a more proper move to Node 20
- This detaches `jerandky` for the moment as well

.github/actions/e2e/action.yml

@@ -34,7 +34,7 @@ runs:
       id: playwright-version
       shell: bash
       # @todo(github-actions) can we do this dynamically?
-      run: echo "PLAYWRIGHT_VERSION=1.41.0" >> $GITHUB_ENV
+      run: echo "PLAYWRIGHT_VERSION=1.41.1" >> $GITHUB_ENV
 
     - name: '🎭 Playwright: Check Browser Cache'
       id: playwright-cache
@@ -97,15 +97,15 @@ runs:
     - name: '🎭  Playwright: Install (!cache)'
       id: e2e-dependencies-playwright
       shell: bash
-      # run: pnpm [email protected].0  install --with-deps
-      run: npx [email protected].0 install --with-deps
+      # run: pnpm [email protected].1  install --with-deps
+      run: npx [email protected].1 install --with-deps
       if: steps.playwright-cache.outputs.cache-hit != 'true'
 
     - name: '🎭  Playwright: Install (cache)'
       id: e2e-dependencies-playwright-cache
       shell: bash
-      # run: pnpm [email protected].0  install-deps
-      run: npx [email protected].0 install-deps
+      # run: pnpm [email protected].1  install-deps
+      run: npx [email protected].1 install-deps
       if: steps.playwright-cache.outputs.cache-hit == 'true'
 
     - name: '🎭  Playwright: ${{ inputs.WEBSITE }}'

.prettierrc.mjs

@@ -0,0 +1,3 @@
+import config from '@jeromefitz/prettier-config/tailwind'
+
+export default config

.syncpackrc.cjs

@@ -21,6 +21,13 @@ const config = {
       label: 'ignore: semver',
       packages: ['**'],
     },
+    {
+      dependencies: ['server-only'],
+      dependencyTypes: ['peer'],
+      isIgnored: true,
+      label: 'ignore: server-only',
+      packages: ['**'],
+    },
     {
       dependencies: ['**'],
       dependencyTypes: ['dev', 'local', 'overrides', 'prod'],
@@ -43,6 +50,12 @@ const config = {
       label: '@todo: @jeromefitz/date-fns-tz',
       packages: ['**'],
     },
+    {
+      dependencies: ['server-only'],
+      dependencyTypes: ['peer'],
+      label: '@todo: server-only',
+      packages: ['**'],
+    },
     {
       dependencies: ['$LOCAL'],
       dependencyTypes: ['dev', 'prod'],

jsconfig.json

@@ -3,6 +3,8 @@
     "baseUrl": ".",
     "paths": {
       "@jeromefitz/ds/*": ["./packages/design-system/src/*"],
+      "@jeromefitz/shared/*": ["./packages/shared/src/*"],
+      "next-notion/*": ["./packages/next-notion/src/*"],
       "~app/*": ["./sites/jeromefitzgerald.com/src/app/*"],
       "~components/*": ["./sites/jeromefitzgerald.com/src/components/*"],
       "~config/*": ["./sites/jeromefitzgerald.com/src/config/*"],
@@ -20,7 +22,7 @@
       "~svg/*": ["./sites/jeromefitzgerald.com/src/svg/*"],
       "~theme/*": ["./sites/jeromefitzgerald.com/src/theme/*"],
       "~ui/*": ["./sites/jeromefitzgerald.com/src/ui/*"],
-      "~utils/*": ["./sites/jeromefitzgerald.com/src/utils/*"]
-    }
-  }
+      "~utils/*": ["./sites/jeromefitzgerald.com/src/utils/*"],
+    },
+  },
 }

package.json

@@ -25,29 +25,29 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "is-ci || husky install",
     "semantic-release": "pnpm run semantic-release:mono",
-    "semantic-release:dry": "pnpm --filter jeromefitzgerald.com -r --workspace-concurrency=1 exec -- npx --no-install semantic-release -e semantic-release-monorepo --dry-run",
-    "semantic-release:mono": "pnpm --filter jeromefitzgerald.com -r --workspace-concurrency=1 exec -- npx --no-install semantic-release -e semantic-release-monorepo"
+    "semantic-release:dry": "pnpm --filter jeromefitzgerald.com -r --workspace-concurrency=1 exec -- npx --no-install semantic-release --dry-run",
+    "semantic-release:mono": "pnpm --filter jeromefitzgerald.com -r --workspace-concurrency=1 exec -- npx --no-install semantic-release"
   },
   "dependencies": {
-    "@jeromefitz/conventional-gitmoji": "3.3.6",
-    "@jeromefitz/eslint-config": "1.2.1",
-    "@jeromefitz/lint-staged": "1.1.11",
-    "@jeromefitz/prettier-config": "1.2.1",
-    "@jeromefitz/release-notes-generator": "1.2.13",
-    "@jeromefitz/semantic": "9.2.7",
-    "@jeromefitz/tsconfig": "1.1.3",
+    "@jeromefitz/conventional-gitmoji": "4.0.0-canary.2",
+    "@jeromefitz/eslint-config": "2.0.0-canary.1",
+    "@jeromefitz/lint-staged": "2.0.0-canary.1",
+    "@jeromefitz/prettier-config": "2.0.0-canary.4",
+    "@jeromefitz/release-notes-generator": "2.0.0-canary.2",
+    "@jeromefitz/semantic": "10.0.0-canary.3",
+    "@jeromefitz/tsconfig": "2.0.0-canary.1",
     "@manypkg/cli": "0.21.2",
     "@types/is-ci": "3.0.4",
     "@types/lodash": "4.14.202",
     "@types/node": "20.11.5",
-    "ccommit": "1.1.3",
+    "ccommit": "2.0.0-canary.2",
     "concurrently": "8.2.2",
-    "dotenv": "16.3.1",
+    "dotenv": "16.3.2",
     "husky": "8.0.3",
     "is-ci": "3.0.1",
     "lodash": "4.17.21",
-    "semantic-release": "19.0.5",
-    "semantic-release-monorepo": "7.0.5",
+    "semantic-release": "23.0.0",
+    "semantic-release-monorepo": "8.0.0",
     "syncpack": "12.3.0",
     "ts-node": "10.9.2",
     "tsup": "8.0.1",

packages/design-system/package.json

@@ -1,7 +1,50 @@
 {
   "name": "@jeromefitz/ds",
   "version": "0.0.0",
+  "type": "module",
+  "license": "MIT",
   "private": true,
+  "engines": {
+    "node": ">=20"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./components/Anchor": {
+      "types": "./dist/components/Anchor/index.d.ts",
+      "default": "./dist/components/Anchor/index.js"
+    },
+    "./components/Button": {
+      "types": "./dist/components/Button/index.d.ts",
+      "default": "./dist/components/Button/index.js"
+    },
+    "./components/Caption": {
+      "types": "./dist/components/Caption/index.d.ts",
+      "default": "./dist/components/Caption/index.js"
+    },
+    "./components/Icon": {
+      "types": "./dist/components/Icon/index.d.ts",
+      "default": "./dist/components/Icon/index.js"
+    },
+    "./components/Section": {
+      "types": "./dist/components/Section/index.d.ts",
+      "default": "./dist/components/Section/index.js"
+    },
+    "./components/Separator": {
+      "types": "./dist/components/Separator/index.d.ts",
+      "default": "./dist/components/Separator/index.js"
+    },
+    "./utils/cx": {
+      "types": "./dist/utils/cx.d.ts",
+      "default": "./dist/utils/cx.js"
+    }
+  },
   "scripts": {
     "build": "tsup-node",
     "build:storybook": "storybook build",
@@ -25,40 +68,29 @@
   },
   "dependencies": {
     "@heroicons/react": "2.1.1",
-    "@radix-ui/primitive": "1.0.1",
     "@radix-ui/react-accessible-icon": "1.0.3",
     "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-alert-dialog": "1.0.5",
     "@radix-ui/react-announce": "0.1.8",
-    "@radix-ui/react-arrow": "1.0.3",
     "@radix-ui/react-aspect-ratio": "1.0.3",
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-checkbox": "1.0.4",
     "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-collection": "1.0.3",
-    "@radix-ui/react-compose-refs": "1.0.1",
     "@radix-ui/react-context": "1.0.1",
     "@radix-ui/react-context-menu": "2.1.5",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-direction": "1.0.1",
-    "@radix-ui/react-dismissable-layer": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-focus-guards": "1.0.1",
-    "@radix-ui/react-focus-scope": "1.0.4",
     "@radix-ui/react-hover-card": "1.0.7",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-id": "1.0.1",
     "@radix-ui/react-label": "2.0.2",
     "@radix-ui/react-menu": "2.0.6",
     "@radix-ui/react-navigation-menu": "1.1.4",
     "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-popper": "1.1.3",
     "@radix-ui/react-portal": "1.0.4",
-    "@radix-ui/react-presence": "1.0.1",
-    "@radix-ui/react-primitive": "1.0.3",
     "@radix-ui/react-progress": "1.0.3",
     "@radix-ui/react-radio-group": "1.1.3",
-    "@radix-ui/react-roving-focus": "1.0.4",
     "@radix-ui/react-scroll-area": "1.0.5",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-separator": "1.0.3",
@@ -71,13 +103,6 @@
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-toolbar": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
-    "@radix-ui/react-use-callback-ref": "1.0.1",
-    "@radix-ui/react-use-controllable-state": "1.0.1",
-    "@radix-ui/react-use-escape-keydown": "1.0.3",
-    "@radix-ui/react-use-layout-effect": "1.0.1",
-    "@radix-ui/react-use-previous": "1.0.1",
-    "@radix-ui/react-use-rect": "1.0.1",
-    "@radix-ui/react-use-size": "1.0.1",
     "@radix-ui/react-visually-hidden": "1.0.3",
     "clsx": "2.1.0",
     "cmdk": "0.2.0",
@@ -89,6 +114,8 @@
     "@jeromefitz/storybook-config": "workspace:*",
     "@jeromefitz/tailwind-config": "workspace:*",
     "@mantine/hooks": "7.4.2",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

packages/design-system/postcss.config.js → packages/design-system/postcss.config.cjs

@@ -1 +1 @@
-module.exports = require('@jeromefitz/tailwind-config/postcss.config')
+module.exports = require('@jeromefitz/tailwind-config/postcss.config.cjs')

packages/design-system/scripts/copy.sh

@@ -21,3 +21,23 @@ fi
 ###
 # @custom(build)
 ###
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  if [[ "$OSTYPE" == "darwin"* ]]; then
+  sed -i "" "s|dist/||g" dist/package.json
+else
+  sed -i -e "s|dist/||g" dist/package.json
+fi
+else
+  sed -i -e "s|dist/||g" dist/package.json
+fi
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  if [[ "$OSTYPE" == "darwin"* ]]; then
+  sed -i "" "s|src/||g" dist/package.json
+else
+  sed -i -e "s|src/||g" dist/package.json
+fi
+else
+  sed -i -e "s|src/||g" dist/package.json
+fi

packages/design-system/src/components/Anchor/Anchor.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable no-restricted-imports */
+// eslint-disable-next-line no-restricted-imports
 import NextLink from 'next/link'
 
 import { cx } from '../../utils/cx'
-import { ExternalLinkIcon } from '../Icon'
+import { ExternalLinkIcon } from '../Icon/Icon'
 
 const nextSeo = { url: `https://${process.env.NEXT_PUBLIC__SITE}` }
 const domain = new URL(nextSeo.url)
@@ -25,7 +25,7 @@ const Anchor = ({ className = '', href, children }) => {
     'underline',
     'text-radix-pink11 hover:text-radix-pink12',
     'transition-all duration-200 ease-in',
-    className
+    className,
   )
 
   if (isExternal && !isNotion) {

packages/design-system/src/components/Button/Button.stories.tsx

@@ -46,7 +46,7 @@ export const Custom: Story = {
     className: cx(
       'm-12 p-12',
       'bg-radix-slate12 text-radix-slate1',
-      'hocus:bg-radix-slate1 hocus:text-radix-slate12'
+      'hocus:bg-radix-slate1 hocus:text-radix-slate12',
     ),
     variant: 'empty',
   },

packages/design-system/src/components/Button/Button.styles.ts

@@ -9,7 +9,7 @@ export const commonStyles = cx(
   'outline-none outline-offset-0 ',
   'hocus:ring-1 ring-0 ring-inset',
   'focus:shadow-md',
-  'cursor-default hover:cursor-pointer'
+  'cursor-default hover:cursor-pointer',
 )
 
 export const variantStyles = {

packages/design-system/src/components/Button/Button.tsx

@@ -14,7 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
   props,
-  ref
+  ref,
 ) => {
   const { className, variant = VARIANTS.DEFAULT, ...rest } = props
   const finalClassName =

packages/design-system/src/components/Button/ButtonLink.tsx

@@ -22,6 +22,7 @@ const ButtonLinkComponent: ForwardRefRenderFunction<
     variant === VARIANTS.EMPTY
       ? cx(variantStyles[variant], className)
       : cx(commonStyles, variantStyles[variant], className)
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   const useLink = href && href.toString().startsWith('/')
 
   if (useLink) {
@@ -33,6 +34,7 @@ const ButtonLinkComponent: ForwardRefRenderFunction<
   return (
     <a
       className={finalClassName}
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       href={href.toString()}
       ref={ref}
       rel="noreferrer"

packages/design-system/src/components/Section/Section.Content.tsx

@@ -18,7 +18,7 @@ function SectionContent({ children, className = '' }) {
         // 'before:left-2 before:right-2,
         'before:bg-radix-slate6',
         '',
-        className
+        className,
       )}
     >
       <div

packages/design-system/src/components/Section/Section.Header.Content.tsx

@@ -7,7 +7,7 @@ function SectionHeaderContent({ children, className = '' }) {
         '[writing-mode:vertical-lr]',
         'md:[writing-mode:lr]',
         'w-11/12',
-        className
+        className,
       )}
     >
       {children}

packages/design-system/src/components/Section/Section.Header.Title.tsx

@@ -12,7 +12,7 @@ function SectionHeaderTitle({ children, className = '', isTitle = false }) {
         'my-1 py-1 pr-2',
         'md:my-2 md:py-2 md:pr-6',
         'w-11/12',
-        className
+        className,
       )}
     >
       {children}

packages/design-system/src/components/Section/Section.Header.tsx

@@ -23,7 +23,7 @@ function SectionHeader({ children, className = '' }) {
           'top-0 md:top-2',
           // w/  react-headroom
           // 'top-4 md:top-8',
-          className
+          className,
         )}
       >
         {children}

packages/design-system/src/components/Section/Section.Wrapper.tsx

@@ -14,7 +14,7 @@ function SectionWrapper({ children }) {
           'before:h-0',
           'before:relative before:inset-x-2 before:top-0 before:w-full before:content-normal',
           'before:bg-radix-slate8',
-          ''
+          '',
         )}
       >
         {children}

packages/design-system/src/components/Section/Tags.tsx

@@ -7,7 +7,7 @@ function Tags({ tags, className = '', classNameTag = '' }) {
       className={cx(
         'flex flex-row flex-wrap items-start align-top',
         'mt-4',
-        className
+        className,
       )}
     >
       {tags?.map((tag) => {
@@ -28,7 +28,7 @@ function Tags({ tags, className = '', classNameTag = '' }) {
               'md:left-0 md:my-2 md:mr-2',
               'md:px-4 md:py-1',
               classNameTag,
-              ''
+              '',
             )}
             style={{}}
           >