refactor(position): esm export refactor

BREAKING CHANGE: new import pattern
pluralsight · Oct 29, 2019 · b66711a · b66711a
1 parent 28c733e
commit b66711a
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/packages/position/index.js b/packages/position/index.js
diff --git 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
diff --git a/packages/position/src/index.js 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
diff --git a/packages/position/vars.js b/packages/position/vars.js
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'