refactor(switch): convert to esm

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

packages/switch/.storybook/main.js → packages/switch/.storybook-storyshots/main.js

@@ -4,5 +4,12 @@ module.exports = {
   typescript: {
     check: true,
     reactDocgen: 'react-docgen-typescript'
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      type: 'javascript/auto'
+    })
+    return config
   }
 }

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

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

packages/switch/.storybook/main.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  addons: ['@pluralsight/ps-design-system-storybook-preset'],
+  stories: ['../src/**/*.story.@(js|ts|tsx)'],
+  typescript: {
+    check: true,
+    reactDocgen: 'react-docgen-typescript'
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      type: 'javascript/auto'
+    })
+    return config
+  }
+}

packages/switch/jest.config.js

@@ -1,9 +1,15 @@
-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'
 
-module.exports = {
+const {
+  packageJson: { name }
+} = readPkg.sync()
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default {
   ...baseConfig,
   displayName: name,
   name: name,

packages/switch/package.json

@@ -6,19 +6,22 @@
   "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",
   "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",
     "build:watch": "yarn build:esm --watch",
+    "compile:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
+    "rewrite:esm": "tsc-esm --project tsconfig.build.json",
     "storybook": "start-storybook -p 6006",
     "test": "tsc --noEmit --project ./tsconfig.json && jest",
     "test:watch": "yarn test --watchAll"
   },
+  "sideEffects": false,
   "style": "dist/index.css",
+  "type": "module",
   "types": "dist/esm/index.d.ts",
   "dependencies": {
     "@pluralsight/ps-design-system-core": "^6.9.3",

packages/switch/src/css/index.ts

@@ -15,7 +15,7 @@ import {
   names as themeNames
 } from '@pluralsight/ps-design-system-theme'
 
-import * as vars from '../vars'
+import * as vars from '../vars/index'
 
 export default {
   '.psds-switch': {

packages/switch/src/index.ts

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

packages/switch/src/react/__specs__/index.spec.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable  @typescript-eslint/no-unnecessary-type-assertion */
-
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import Switch from '..'
+import Switch from '../index'
 
 describe('Switch', () => {
   it('forwards refs', () => {

packages/switch/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/switch/src/react/__stories__/index.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 
-import Switch from '..'
+import Switch from '../index'
 
 const sizeStory = storiesOf('size', module)
 Object.values(Switch.sizes).forEach(size =>

packages/switch/src/react/index.tsx

@@ -1,6 +1,3 @@
-import { compose, css } from 'glamor'
-import React from 'react'
-
 import Halo from '@pluralsight/ps-design-system-halo'
 import {
   useTheme,
@@ -13,9 +10,11 @@ import {
   HTMLPropsFor,
   RefFor
 } from '@pluralsight/ps-design-system-util'
+import { compose, css } from 'glamor'
+import React from 'react'
 
-import stylesheet from '../css'
-import * as vars from '../vars'
+import stylesheet from '../css/index'
+import * as vars from '../vars/index'
 
 const styles = {
   switch: (disabled: boolean, labelAlign: ValueOf<typeof vars.labelAligns>) =>