From b66711a39749824a25885fd39da1488b081886fc Mon Sep 17 00:00:00 2001
From: Edward Irby <edward-irby@pluralsight.com>
Date: Fri, 25 Oct 2019 15:21:11 -0700
Subject: [PATCH] refactor(position): esm export refactor

BREAKING CHANGE: new import pattern
---
 .../src/react/__stories__/index.story.js      |  5 +----
 .../src/react/__stories__/index.story.js      |  2 +-
 .../note/src/react/__stories__/index.story.js |  2 +-
 packages/position/css.js                      |  1 -
 packages/position/index.js                    |  6 ------
 packages/position/package.json                | 10 +++++-----
 packages/position/src/css/index.js            |  3 ---
 packages/position/src/index.js                |  2 ++
 packages/position/src/vars/index.js           |  1 -
 packages/position/vars.js                     |  1 -
 packages/site/pages/components/actionmenu.js  |  4 ++--
 packages/site/pages/components/carousel.js    |  2 +-
 .../components/position-portal-example.js     |  2 +-
 .../components/position-positions-example.js  | 19 ++++++++++++++++++-
 packages/site/pages/components/position.js    | 19 +++++++------------
 packages/site/pages/components/tooltip.js     |  4 ++--
 packages/typeahead/src/react/index.js         |  2 +-
 17 files changed, 42 insertions(+), 43 deletions(-)
 delete mode 100644 packages/position/css.js
 delete mode 100644 packages/position/index.js
 delete mode 100644 packages/position/src/css/index.js
 create mode 100644 packages/position/src/index.js
 delete mode 100644 packages/position/src/vars/index.js
 delete mode 100644 packages/position/vars.js

diff --git a/packages/actionmenu/src/react/__stories__/index.story.js b/packages/actionmenu/src/react/__stories__/index.story.js
index 7fba620590..4bfbbc7b34 100644
--- a/packages/actionmenu/src/react/__stories__/index.story.js
+++ b/packages/actionmenu/src/react/__stories__/index.story.js
@@ -5,10 +5,7 @@ import { action } from '@storybook/addon-actions'
 
 import core from '@pluralsight/ps-design-system-core'
 import Icon from '@pluralsight/ps-design-system-icon/react.js'
-import {
-  BelowLeft,
-  BelowRight
-} from '@pluralsight/ps-design-system-position/react.js'
+import { BelowLeft, BelowRight } from '@pluralsight/ps-design-system-position'
 
 import ActionMenu from '../index.js'
 
diff --git a/packages/carousel/src/react/__stories__/index.story.js b/packages/carousel/src/react/__stories__/index.story.js
index 44c70b1e4d..d05aee2a0f 100644
--- a/packages/carousel/src/react/__stories__/index.story.js
+++ b/packages/carousel/src/react/__stories__/index.story.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react.js'
 import Card from '@pluralsight/ps-design-system-card/react.js'
 import Icon from '@pluralsight/ps-design-system-icon/react.js'
-import { BelowRight } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowRight } from '@pluralsight/ps-design-system-position'
 
 import Carousel from '../index.js'
 
diff --git a/packages/note/src/react/__stories__/index.story.js b/packages/note/src/react/__stories__/index.story.js
index 44e24e5f44..5ff7fd2b75 100644
--- a/packages/note/src/react/__stories__/index.story.js
+++ b/packages/note/src/react/__stories__/index.story.js
@@ -5,7 +5,7 @@ import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react'
 import Avatar from '@pluralsight/ps-design-system-avatar'
 import Icon from '@pluralsight/ps-design-system-icon/react'
 import Link from '@pluralsight/ps-design-system-link'
-import { Below } from '@pluralsight/ps-design-system-position/react'
+import { Below } from '@pluralsight/ps-design-system-position'
 import Text from '@pluralsight/ps-design-system-text/react'
 
 import Note from '../index.js'
diff --git a/packages/position/css.js b/packages/position/css.js
deleted file mode 100644
index 7b24a76a0a..0000000000
--- a/packages/position/css.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/css/index.js')
diff --git a/packages/position/index.js b/packages/position/index.js
deleted file mode 100644
index 7f9ed22ca7..0000000000
--- a/packages/position/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const css = require('./css.js')
-const js = require('./js.js')
-const react = require('./react.js')
-const vars = require('./vars.js')
-
-module.exports = { css: css, js: js, react: react, vars: vars }
diff --git a/packages/position/package.json b/packages/position/package.json
index 6358e25fef..410bc07423 100644
--- a/packages/position/package.json
+++ b/packages/position/package.json
@@ -4,15 +4,15 @@
   "description": "Position UI Component for the Pluralsight Design System",
   "license": "Apache-2.0",
   "repository": "pluralsight/design-system",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "run-s build:js build:css",
-    "build:css": "build-css",
-    "build:js": "babel --root-mode upward src --out-dir dist",
+    "build": "run-s build:js build:cjs",
+    "build:cjs": "babel --root-mode upward src --out-dir dist/cjs",
+    "build:js": "cross-env ESM=true babel --root-mode upward src --out-dir dist/esm",
     "build:watch": "npm run build:js -- --watch",
     "prepublish": "npm run build",
     "storybook": "start-storybook -p 6006",
diff --git a/packages/position/src/css/index.js b/packages/position/src/css/index.js
deleted file mode 100644
index 1cb2692796..0000000000
--- a/packages/position/src/css/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import * as vars from '../vars'
-
-export default {}
diff --git a/packages/position/src/index.js b/packages/position/src/index.js
new file mode 100644
index 0000000000..a473c0f7dc
--- /dev/null
+++ b/packages/position/src/index.js
@@ -0,0 +1,2 @@
+export * from './js/index.js'
+export * from './react/index.js'
diff --git a/packages/position/src/vars/index.js b/packages/position/src/vars/index.js
deleted file mode 100644
index b1c6ea436a..0000000000
--- a/packages/position/src/vars/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {}
diff --git a/packages/position/vars.js b/packages/position/vars.js
deleted file mode 100644
index aa76530da1..0000000000
--- a/packages/position/vars.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/vars/index.js')
diff --git a/packages/site/pages/components/actionmenu.js b/packages/site/pages/components/actionmenu.js
index 202daa7e65..dc1d56c70b 100644
--- a/packages/site/pages/components/actionmenu.js
+++ b/packages/site/pages/components/actionmenu.js
@@ -4,7 +4,7 @@ import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react.js'
 import Button from '@pluralsight/ps-design-system-button'
 import core from '@pluralsight/ps-design-system-core'
 import Icon from '@pluralsight/ps-design-system-icon/react.js'
-import { BelowLeft } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowLeft } from '@pluralsight/ps-design-system-position'
 import * as Text from '@pluralsight/ps-design-system-text/react.js'
 import Theme from '@pluralsight/ps-design-system-theme/react.js'
 
@@ -107,7 +107,7 @@ function InAppExample() {
 
       <Code collapsible language="javascript">
         {`import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react.js'
-import { BelowLeft } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowLeft } from '@pluralsight/ps-design-system-position'
 import Button from '@pluralsight/ps-design-system-button'
 
 function InAppExample() {
diff --git a/packages/site/pages/components/carousel.js b/packages/site/pages/components/carousel.js
index 52ab65db4d..94d991f438 100644
--- a/packages/site/pages/components/carousel.js
+++ b/packages/site/pages/components/carousel.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react.js'
 import Avatar from '@pluralsight/ps-design-system-avatar'
-import { BelowRight } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowRight } from '@pluralsight/ps-design-system-position'
 import Card from '@pluralsight/ps-design-system-card/react.js'
 import Carousel from '@pluralsight/ps-design-system-carousel/react.js'
 import Icon from '@pluralsight/ps-design-system-icon/react.js'
diff --git a/packages/site/pages/components/position-portal-example.js b/packages/site/pages/components/position-portal-example.js
index 8b12de6cd5..5cdd497ca4 100644
--- a/packages/site/pages/components/position-portal-example.js
+++ b/packages/site/pages/components/position-portal-example.js
@@ -1,4 +1,4 @@
-import { Above } from '@pluralsight/ps-design-system-position/react.js'
+import { Above } from '@pluralsight/ps-design-system-position'
 import core from '@pluralsight/ps-design-system-core'
 import Button from '@pluralsight/ps-design-system-button'
 import React from 'react'
diff --git a/packages/site/pages/components/position-positions-example.js b/packages/site/pages/components/position-positions-example.js
index 4a4bfa5046..fee44a3d0c 100644
--- a/packages/site/pages/components/position-positions-example.js
+++ b/packages/site/pages/components/position-positions-example.js
@@ -4,10 +4,27 @@ import core from '@pluralsight/ps-design-system-core'
 import Button from '@pluralsight/ps-design-system-button'
 import Tooltip from '@pluralsight/ps-design-system-tooltip/react.js'
 
-import * as components from '@pluralsight/ps-design-system-position/react.js'
+import {
+  Above,
+  AboveLeft,
+  AboveRight,
+  BelowLeft,
+  BelowRight,
+  RightOf,
+  LeftOf
+} from '@pluralsight/ps-design-system-position'
 
 import { Head } from '../../src/ui/index.js'
 
+const components = [
+  Above,
+  AboveLeft,
+  AboveRight,
+  BelowLeft,
+  BelowRight,
+  RightOf,
+  LeftOf
+]
 export default function PositionExample(props) {
   return (
     <ul className="positions">
diff --git a/packages/site/pages/components/position.js b/packages/site/pages/components/position.js
index 936d650204..a5f95e241a 100644
--- a/packages/site/pages/components/position.js
+++ b/packages/site/pages/components/position.js
@@ -6,8 +6,7 @@ import * as Text from '@pluralsight/ps-design-system-text/react.js'
 import Theme from '@pluralsight/ps-design-system-theme/react.js'
 import Tooltip from '@pluralsight/ps-design-system-tooltip/react.js'
 
-import * as fns from '@pluralsight/ps-design-system-position/js.js'
-import * as components from '@pluralsight/ps-design-system-position/react.js'
+import { rightOf, Below } from '@pluralsight/ps-design-system-position'
 
 import {
   Chrome,
@@ -20,9 +19,6 @@ import {
   SectionHeading
 } from '../../src/ui/index.js'
 
-const { rightOf } = fns
-const { Below } = components
-
 export default _ => (
   <Chrome>
     <Content title="Position">
@@ -45,7 +41,7 @@ export default _ => (
   Below,
   LeftOf,
   RightOf
-} from '@pluralsight/ps-design-system-position/react'`}</Code>
+} from '@pluralsight/ps-design-system-position'`}</Code>
 
       <PropTypes
         props={[
@@ -169,7 +165,7 @@ export default _ => (
   below,
   leftOf,
   rightOf
-} from '@pluralsight/ps-design-system-position/js'`}</Code>
+} from '@pluralsight/ps-design-system-position'`}</Code>
 
       <P>Use the JavaScript function to get the positioning style desired.</P>
       <JsExample />
@@ -230,10 +226,9 @@ function JsExample() {
         collapsible
         lang="javascript"
       >{`import Button from '@pluralsight/ps-design-system-button'
-import { below } from '@pluralsight/ps-design-system-position/js'
-import Tooltip from '@pluralsight/ps-design-system-position/react'
+import Tooltip from '@pluralsight/ps-design-system-tooltip/react'
 
-import { rightOf } from '@pluralsight/ps-design-system-position/js'
+import { rightOf } from '@pluralsight/ps-design-system-position'
 
 function Example(){
   const button = React.useRef()
@@ -330,8 +325,8 @@ function ReactExample() {
         collapsible
         lang="javascript"
       >{`import Button from '@pluralsight/ps-design-system-button'
-import { Below } from '@pluralsight/ps-design-system-position/react'
-import Tooltip from '@pluralsight/ps-design-system-position/react'
+import { Below } from '@pluralsight/ps-design-system-position'
+import Tooltip from '@pluralsight/ps-design-system-tooltip/react'
 
 function HoverExampleOnly() {
   const [isHovered, setHovered] = React.useState(false)
diff --git a/packages/site/pages/components/tooltip.js b/packages/site/pages/components/tooltip.js
index 158be96bbc..632fa87712 100644
--- a/packages/site/pages/components/tooltip.js
+++ b/packages/site/pages/components/tooltip.js
@@ -1,4 +1,4 @@
-import { Below } from '@pluralsight/ps-design-system-position/react.js'
+import { Below } from '@pluralsight/ps-design-system-position'
 import Button from '@pluralsight/ps-design-system-button'
 import core from '@pluralsight/ps-design-system-core'
 import Icon from '@pluralsight/ps-design-system-icon/react.js'
@@ -123,7 +123,7 @@ function InAppExample() {
         collapsible
         lang="javascript"
       >{`import Button from '@pluralsight/ps-design-system-button'
-import { Below } from '@pluralsight/ps-design-system-position/react'
+import { Below } from '@pluralsight/ps-design-system-position'
 import Tooltip from '@pluralsight/ps-design-system-tooltip/react'
 
 function HoverExampleOnly() {
diff --git a/packages/typeahead/src/react/index.js b/packages/typeahead/src/react/index.js
index e7201ab2e4..012cbe5937 100644
--- a/packages/typeahead/src/react/index.js
+++ b/packages/typeahead/src/react/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import filterReactProps from '@pluralsight/ps-design-system-filter-react-props'
 import Icon from '@pluralsight/ps-design-system-icon/react.js'
-import { BelowLeft } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowLeft } from '@pluralsight/ps-design-system-position'
 import { elementOfType } from '@pluralsight/ps-design-system-prop-types'
 import TextInput from '@pluralsight/ps-design-system-textinput/react.js'