refactor(badge): convert to esm

BREAKING CHANGE: Drop cjs; esm only; all in on tree shaking
BREAKING CHANGE: Remove file imports (eg, packageName/react)

package.json

@@ -120,6 +120,7 @@
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "babel-eslint": "^10.0.3",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.1.0",
     "babel-plugin-macros": "^2.6.1",
     "core-js": "^3.6.5",
@@ -164,9 +165,11 @@
     "prettier-eslint-cli": "^5.0.0",
     "raf": "^3.4.1",
     "react-test-renderer": "^17.0.1",
+    "read-pkg-up": "^7.0.1",
     "require-context.macro": "^1.2.2",
     "ts-loader": "^6.2.2",
     "typescript": "^3.9.3",
+    "typescript-esm": "^2.0.0",
     "webpack": "^5.9.0",
     "wsrun": "^5.2.1",
     "yargs": "^14.2.3"

packages/badge/.storybook-storyshots/preview.js

@@ -0,0 +1 @@
+import '@pluralsight/ps-design-system-normalize'

packages/badge/.storybook/main.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  addons: ['@pluralsight/ps-design-system-storybook-preset'],
+  stories: ['../src/**/*.story.@(js|ts|tsx)'],
+  typescript: {
+    check: true,
+    reactDocgen: 'react-docgen-typescript'
+  }
+}

packages/badge/jest.config.js

@@ -1,9 +1,14 @@
-const path = require('path')
+import * as path from 'path'
+import readPkg from 'read-pkg-up'
+import { fileURLToPath } from 'url'
 
-const baseConfig = require('../../jest/base.config.js')
-const { name } = require('./package.json')
+import baseConfig from '../../jest/base.config.js'
+const {
+  packageJson: { name }
+} = readPkg.sync()
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-module.exports = {
+export default {
   ...baseConfig,
   displayName: name,
   name: name,

packages/badge/package.json

@@ -6,13 +6,16 @@
   "repository": "pluralsight/design-system",
   "author": "jaketrent",
   "keywords": [],
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/esm/index.mjs",
+  "module": "dist/esm/index.mjs",
+  "type": "module",
+  "sideEffects": false,
   "scripts": {
-    "build": "run-s build:cjs build:esm build:css",
-    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",
-    "build:css": "build-css --useGlamor -i dist/cjs/css/index.js",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
+    "build": "run-s build:esm build:css",
+    "build:css": "build-css --useGlamor -i dist/esm/css/index.mjs",
+    "build:esm": "run-s compile:esm rewrite:esm",
+    "compile:esm": "tsc --project tsconfig.build.json --module esnext --target es5 --outDir dist/esm",
+    "rewrite:esm": "tsc-esm --project tsconfig.build.json",
     "build:watch": "yarn build:js --watch",
     "storybook": "start-storybook -p 6006",
     "test": "jest",

packages/badge/src/css/index.ts

@@ -12,8 +12,8 @@ import {
 } from '@pluralsight/ps-design-system-core'
 import { names as themeNames } from '@pluralsight/ps-design-system-theme'
 
-import { appearances, colors } from '../vars'
-import { select } from '../js'
+import { appearances, colors } from '../vars/index'
+import { select } from '../js/index'
 
 export default {
   '.psds-badge': {

packages/badge/src/index.ts

@@ -1,4 +1,4 @@
-export { default } from './react'
-export * from './vars'
-export * from './js'
-export { default as css } from './css'
+export { default } from './react/index'
+export * from './vars/index'
+export * from './js/index'
+export { default as css } from './css/index'

packages/badge/src/js/index.ts

@@ -1,7 +1,7 @@
 import Theme from '@pluralsight/ps-design-system-theme'
 import { ValueOf } from '@pluralsight/ps-design-system-util'
 
-import * as vars from '../vars'
+import * as vars from '../vars/index'
 
 export function select(
   themeName: ValueOf<typeof Theme.names>,

packages/badge/src/react/__specs__/storyshots.spec.ts

@@ -6,7 +6,7 @@ import initStoryshots, {
 const createNodeMock = () => document.createElement('div')
 
 initStoryshots({
-  configPath: path.resolve(__dirname, '../../../.storybook'),
+  configPath: path.resolve(__dirname, '../../../.storybook-storyshots'),
   framework: 'react',
   test: snapshotWithOptions({ createNodeMock })
 })

packages/badge/src/react/__stories__/index.story.tsx

@@ -3,8 +3,8 @@ import { storiesOf } from '@storybook/react'
 
 import React from 'react'
 
-import Badge from '..'
-import * as vars from '../../vars'
+import Badge from '../index'
+import * as vars from '../../vars/index'
 
 const BadgeStory = ({
   appearance

packages/badge/src/react/index.tsx

@@ -7,9 +7,9 @@ import {
 import { css, StyleAttribute } from 'glamor'
 import React from 'react'
 
-import stylesheet from '../css'
-import { select } from '../js'
-import * as vars from '../vars'
+import stylesheet from '../css/index'
+import { select } from '../js/index'
+import * as vars from '../vars/index'
 
 type StyleFn = (
   props: InternalBadgeProps,

yarn.lock

@@ -2073,6 +2073,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@kristoferbaxter/estree-walker@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@kristoferbaxter/estree-walker/-/estree-walker-2.0.2.tgz#a448a7b298a42c87502c8ab53038d7c0ad2a73a2"
+  integrity sha512-aPFon+UXJ0758piFg/sp0tKr67675UWR9ssa39gN0ynJAY5wDQ8u57H0Z0uaeu0z1gEvLnLF8T1/rLrCZ4gFIg==
+
 "@lerna/add@3.21.0":
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.21.0.tgz#27007bde71cc7b0a2969ab3c2f0ae41578b4577b"
@@ -5170,6 +5175,11 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
+  integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -11022,6 +11032,18 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-glob@3.2.5, fast-glob@^3.0.3, fast-glob@^3.1.0, fast-glob@^3.1.1:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
+  integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
 fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -11034,18 +11056,6 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3, fast-glob@^3.1.0, fast-glob@^3.1.1:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
-  integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-    picomatch "^2.2.1"
-
 fast-json-parse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
@@ -16628,7 +16638,7 @@ madge@^4.0.1:
     typescript "^3.9.5"
     walkdir "^0.4.1"
 
-magic-string@^0.25.1:
+magic-string@0.25.7, magic-string@^0.25.1:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -17470,6 +17480,11 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mri@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -20518,7 +20533,7 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
-promise.allsettled@^1.0.0:
+promise.allsettled@1.0.4, promise.allsettled@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.4.tgz#65e71f2a604082ed69c548b68603294090ee6803"
   integrity sha512-o73CbvQh/OnPFShxHcHxk0baXR2a1m4ozb85ha0H14VEoi/EJJLa9mnPfEWJx9RjA9MLfhdjZ8I6HhWtBa64Ag==
@@ -24570,6 +24585,19 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-esm@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-esm/-/typescript-esm-2.0.0.tgz#07857699d339e28f2fc88e1fafd6a855170e39f6"
+  integrity sha512-/dERe64gRgZ3pSzP6Lc2DNiCdVPz1+mVlbkV9cl9eDunAqfelZHRA8MRTqEJLK6u6Adc6Z8Yy1lQY4nWUIh/5A==
+  dependencies:
+    "@kristoferbaxter/estree-walker" "2.0.2"
+    acorn "8.1.0"
+    fast-glob "3.2.5"
+    magic-string "0.25.7"
+    mri "1.1.6"
+    promise.allsettled "1.0.4"
+    typescript "4.2.3"
+
 typescript-plugin-css-modules@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-3.2.0.tgz#44241064395d565f242689b96eb50bf413e68ddf"
@@ -24589,16 +24617,16 @@ typescript-plugin-css-modules@^3.2.0:
     stylus "^0.54.7"
     tsconfig-paths "^3.9.0"
 
+typescript@4.2.3, typescript@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
+  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
+
 typescript@^3.2.1, typescript@^3.9.3, typescript@^3.9.5, typescript@^3.9.7:
   version "3.9.9"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.9.tgz#e69905c54bc0681d0518bd4d587cc6f2d0b1a674"
   integrity sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==
 
-typescript@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
-  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
-
 ua-parser-js@^0.7.18:
   version "0.7.24"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.24.tgz#8d3ecea46ed4f1f1d63ec25f17d8568105dc027c"