WIP: tree-shake

.changeset/shiny-crews-hang.md

@@ -0,0 +1,5 @@
+---
+"@cultureamp/rich-text-toolkit": major
+---
+
+Refactor to use components from KAIO and be tree-shaking compatible.

.eslintrc.json

@@ -4,7 +4,8 @@
 
   "ignorePatterns": [
     "*.d.ts",
-    "*.js"
+    "*.js",
+    "dist"
   ],
 
   "env": {

.github/actions/setup/action.yml

@@ -12,7 +12,6 @@ runs:
       with:
         node-version-file: .nvmrc
         cache: "yarn"
-        registry-url: https://npm.pkg.github.com/
 
     # yarn install with use of cache
     # this is bit duplicate to cache: "yarn" above, but from testing the best performance is when both are used.

.github/workflows/canary-release.yml

@@ -15,7 +15,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       LABEL: ${{ github.event.inputs.label }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
       - run: |
           npm config set "//npm.pkg.github.com/:_authToken" "$GITHUB_TOKEN"

.github/workflows/checks.yml

@@ -5,8 +5,21 @@ on:
     branches-ignore:
       - main
 
+  # When Changesets opens a PR it does not trigger GitHub actions,
+  # because its token does not have permission to. This is a hack
+  # to allow one of us to trigger GitHub actions for a changesets PR
+  # by enabling automerge on the PR.
+  pull_request_target:
+    types:
+      - auto_merge_enabled
+    branches:
+      - main # the target branch of the PR
+    paths:
+      - "**/CHANGELOG.md" # only changesets releases touch changelogs
+
 jobs:
   build:
+    if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -21,6 +34,7 @@ jobs:
       - run: yarn build
 
   lint:
+    if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -35,6 +49,7 @@ jobs:
       - run: yarn lint-ci
 
   test:
+    if: github.head_ref != 'changeset-release/main'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

package.json

@@ -13,7 +13,9 @@
   "engines": {
     "node": ">=14"
   },
-  "main": "./dist/index.js",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/",
     "src/",
@@ -24,28 +26,36 @@
     "semi": false
   },
   "scripts": {
-    "build": "tsc --build && yarn copy-files",
-    "clean": "tsc --build --clean",
-    "copy-files": "copyfiles -u 1 src/**/*.scss dist/",
+    "copy-styles": "copyfiles -u 1 src/**/*.scss",
+    "rename-js-ext:cjs": "renamer -f '.js' -r '.cjs' './dist/cjs/**/*.*(js|js.map)'",
+    "build:cjs": "tsc -b ./tsconfig.cjs.json && yarn rename-js-ext:cjs && yarn copy-styles dist/cjs",
+    "rename-js-ext:esm": "renamer -f '.js' -r '.mjs' './dist/esm/**/*.*(js|js.map)'",
+    "build:esm": "tsc -b ./tsconfig.esm.json && yarn rename-js-ext:esm && yarn copy-styles dist/esm",
+    "build:types": "tsc -b ./tsconfig.types.json",
+    "clean": "rm -rf dist",
+    "build": "yarn clean && yarn build:esm && yarn build:cjs && yarn build:types",
     "lint": "yarn lint:prettier --write && yarn lint:eslint --fix",
     "lint-ci": "yarn lint:prettier --check && yarn lint:eslint --max-warnings=0",
     "lint:eslint": "eslint . --ext .ts,.tsx",
     "lint:prettier": "prettier 'src/**/*' --loglevel=warn",
     "test": "jest",
     "test:coverage": "jest --coverage",
+    "test:treeshake": "agadoo ./dist/esm/index.mjs",
     "ci:version": "changeset version",
     "ci:release": "yarn build && changeset publish"
   },
   "devDependencies": {
     "@changesets/cli": "^2.21.0",
     "@cultureamp/changelog-github": "^0.1.0",
+    "@kaizen/components": "^1.30.0",
     "@testing-library/react": "^12.1.3",
     "@tsconfig/node14": "^1.0.1",
     "@types/jest": "^27.4.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
+    "agadoo": "^3.0.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8.10.0",
     "eslint-import-resolver-typescript": "^2.5.0",
@@ -55,15 +65,11 @@
     "jest-resolve": "^27.5.1",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "prettier": "^2.5.1",
+    "renamer": "^4.0.0",
     "ts-jest": "^27.1.3",
     "typescript": "^4.6.2"
   },
   "dependencies": {
-    "@kaizen/button": "^3.0.0",
-    "@kaizen/component-library": "^16.7.3",
-    "@kaizen/draft-modal": "^10.6.16",
-    "@kaizen/draft-popover": "^5.3.13",
-    "@kaizen/typography": "^2.3.8",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.3.0",
@@ -76,5 +82,9 @@
     "prosemirror-state": "^1.4.1",
     "prosemirror-utils": "^1.0.0-0",
     "prosemirror-view": "^1.27.2"
+  },
+  "peerDependencies": {
+    "@kaizen/components": "^1.30.0",
+    "@kaizen/design-tokens": "^10.0.0"
   }
 }

src/plugins/LinkManager/components/LinkModal/LinkModal.tsx

@@ -1,5 +1,4 @@
-import { InputEditModal } from "@kaizen/draft-modal"
-import { TextField } from "@kaizen/draft-form"
+import { InputEditModal, TextField } from "@kaizen/components"
 import { ValidationResponse, validateLink } from "../../validation"
 import React, { useRef, useState } from "react"
 

src/plugins/LinkManager/components/LinkPopover/LinkPopover.module.scss

@@ -1,11 +1,17 @@
 @import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
 
 .popoverContent {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.popoverLinkContainer {
+  padding-inline-start: $spacing-8;
+  padding-inline-end: $spacing-12;
+}
+
 .popoverLink {
   max-width: 300px;
   overflow: hidden;
@@ -18,5 +24,7 @@
 }
 
 .popoverActions {
+  padding-inline-start: $spacing-4;
+  padding-inline-end: $spacing-4;
   border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
 }

src/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx

@@ -1,13 +1,13 @@
-import { Box, Icon } from "@kaizen/component-library"
-import { IconButton } from "@kaizen/button"
-import { Paragraph } from "@kaizen/typography"
+import {
+  EditIcon,
+  ExternalLinkIcon,
+  RemoveLinkIcon,
+  Text,
+  usePopover,
+} from "@kaizen/components"
 import { Positioner } from "./Positioner"
 import { SelectionPosition } from "../../types"
-import { usePopover } from "@kaizen/draft-popover"
 import React from "react"
-import editIcon from "@kaizen/component-library/icons/edit.icon.svg"
-import externalLinkIcon from "@kaizen/component-library/icons/external-link.icon.svg"
-import removeLinkIcon from "@kaizen/component-library/icons/remove-link.icon.svg"
 import styles from "./LinkPopover.module.scss"
 
 export interface LinkPopoverProps {
@@ -26,9 +26,9 @@ export const LinkPopover: React.VFC<LinkPopoverProps> = props => {
       <Positioner ref={ElementRef} {...selectionPosition} />
       <Popover size="large">
         <div className={styles.popoverContent}>
-          <Icon icon={externalLinkIcon} role="presentation" />
-          <Box pl={0.5} pr={0.75}>
-            <Paragraph
+          <ExternalLinkIcon role="presentation" />
+          <div className={styles.popoverLinkContainer}>
+            <Text
               variant="body"
               tag="div"
               classNameOverride={styles.paragraphFlex}
@@ -41,15 +41,15 @@ export const LinkPopover: React.VFC<LinkPopoverProps> = props => {
               >
                 {href}
               </a>
-            </Paragraph>
-          </Box>
-          <Box pr={0.25} pl={0.25} classNameOverride={styles.popoverActions}>
-            <IconButton onClick={onEdit} icon={editIcon} label="Edit link" />
-          </Box>
-          <IconButton
+            </Text>
+          </div>
+          <div className={styles.popoverActions}>
+            <EditIcon role="img" onClick={onEdit} aria-label="Edit link" />
+          </div>
+          <RemoveLinkIcon
+            role="img"
             onClick={onRemove}
-            icon={removeLinkIcon}
-            label="Remove link"
+            aria-label="Remove link"
           />
         </div>
       </Popover>

tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "module": "CommonJS",
+  },
+}

tsconfig.esm.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "module": "esnext",
+    "moduleResolution": "node",
+  },
+}

tsconfig.json

@@ -1,18 +1,21 @@
 {
-  "extends": "@tsconfig/node14/tsconfig.json",
   "compilerOptions": {
+    "baseUrl": ".",
+    "lib": ["es2020", "dom"],
+    "module": "commonjs",
     "jsx": "react",
-    "declaration": true,
-    "declarationMap": true,
-    "lib": ["dom", "es2020"],
-    "moduleResolution": "node",
-    "outDir": "dist",
-    "rootDir": "src",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowJs": false,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "types": [],
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "rootDir": "src",
   },
-  "files": ["./types.d.ts"],
+  "files": ["types.d.ts"],
   "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }

tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/types",
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+  },
+}