chore(mixed): fix imports and introduce bundler test

.circleci/config.yml

@@ -55,9 +55,9 @@ jobs:
       - run:
           name: Visual Tests
           command: yarn test:visual
-#      - run:
-#          name: Project Tests
-#          command: yarn test:projects:cra-ts
+      - run:
+          name: Project Tests
+          command: yarn test:projects
       - run:
           name: Danger JS
           command: |

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix support for fallback values in styles (`color: ['#ccc', 'rgba(0, 0, 0, 0.5)']`) @miroslavstastny ([#573](https://github.com/stardust-ui/react/pull/573))
 - Fix styles for RTL mode of doc site component examples @kuzhelov ([#579](https://github.com/stardust-ui/react/pull/579))
 - Prevent blind props forwarding for `createShorthand` calls if the value is a React element and remove manual check for `Input` `wrapper` @Bugaa92 ([#496](https://github.com/stardust-ui/react/pull/496))
+- Fix issue with bundling package with Rollup and Parcel @layershifter ([#570](https://github.com/stardust-ui/react/pull/570))
 
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

build/gulp/scaffold/app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Button, Provider, themes } from '@stardust-ui/react'
+
+ReactDOM.render(
+  React.createElement(
+    Provider,
+    { theme: themes.teams },
+    React.createElement(Button, { content: 'Theming' }),
+  ),
+  document.getElementById('root'),
+)

build/gulp/scaffold/rollup.config.js

@@ -0,0 +1,67 @@
+import replace from 'rollup-plugin-replace'
+import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
+
+const warningWhitelist = [
+  'THIS_IS_UNDEFINED', // comes from TS transforms
+  'CIRCULAR_DEPENDENCY', // we should fix all other circular imports
+  'UNUSED_EXTERNAL_IMPORT', // to avoid throw on unused externals
+]
+
+export default {
+  external: [
+    'lodash',
+    'lodash/fp',
+    'prop-types',
+    'react',
+    'react-dom',
+    'react-is',
+  ],
+  input: 'app.js',
+  onwarn: (warning, warn) => {
+    if (warningWhitelist.includes(warning.code)) {
+      warn(warning)
+      return
+    }
+
+    throw warning
+  },
+  output: {
+    file: 'bundle.js',
+    format: 'iife',
+    globals: {
+      lodash: '_',
+      'lodash/fp': 'fp',
+      'prop-types': 'PropTypes',
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'react-is': 'ReactIs',
+    },
+    sourcemap: true,
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+    resolve(),
+    commonjs({
+      include: 'node_modules/**',
+      namedExports: {
+        'node_modules/keyboard-key/src/keyboardKey.js': [
+          'ArrowDown',
+          'ArrowUp',
+          'ArrowLeft',
+          'ArrowRight',
+          'End',
+          'Enter',
+          'Escape',
+          'Home',
+          'getCode',
+          'Spacebar',
+          'Tab',
+        ],
+        'node_modules/what-input/dist/what-input.js': ['ask'],
+      },
+    }),
+  ],
+}

build/gulp/tasks/test-projects.tsx

@@ -1,5 +1,7 @@
+import * as debug from 'debug'
 import * as fs from 'fs'
-import { task } from 'gulp'
+import { series, task } from 'gulp'
+import * as path from 'path'
 import sh from '../sh'
 import * as rimraf from 'rimraf'
 
@@ -15,12 +17,13 @@ const log = msg => {
   console.log('='.repeat(80))
 }
 
-const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)
+export const createPackageFilename = () => tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' })
 
-const buildAndPackStardust = async (): Promise<string> => {
-  await sh('yarn build:dist')
+export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)
 
-  return (await sh(`npm pack`, true)).trim()
+export const buildAndPackStardust = async (packageFilename: string) => {
+  await sh('yarn build:dist')
+  await sh(`yarn pack --filename ${packageFilename}`)
 }
 
 const createReactApp = async (atTempDirectory: string, appName: string): Promise<string> => {
@@ -90,8 +93,10 @@ export default App;
   //////// PREPARE STARDUST PACKAGE ///////
   log('STEP 0. Preparing Stardust package..')
 
-  const stardustPackageFilename = await buildAndPackStardust()
-  log(`Stardust package is published: ${paths.base(stardustPackageFilename)}`)
+  const packageFilename = createPackageFilename()
+
+  await buildAndPackStardust(packageFilename)
+  log(`Stardust package is published: ${packageFilename}`)
 
   try {
     //////// CREATE TEST REACT APP ///////
@@ -107,7 +112,7 @@ export default App;
     //////// ADD STARDUST AS A DEPENDENCY ///////
     log('STEP 2. Add Stardust dependency to test project..')
 
-    await runInTestApp(`yarn add ${paths.base(stardustPackageFilename)}`)
+    await runInTestApp(`yarn add ${packageFilename}`)
     log("Stardust is successfully added as test project's dependency.")
 
     //////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE ///////
@@ -120,6 +125,54 @@ export default App;
 
     log('Test project is built successfully!')
   } finally {
-    fs.unlinkSync(stardustPackageFilename)
+    fs.unlinkSync(packageFilename)
   }
 })
+
+task('test:projects:rollup', async () => {
+  const logger = debug('bundle:rollup')
+  logger.enabled = true
+
+  const packageFilename = createPackageFilename()
+
+  await buildAndPackStardust(packageFilename)
+  logger(`✔️Stardust UI package was prepared: ${packageFilename}`)
+
+  const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name
+  logger(`✔️Temporary directory was created: ${tmpDirectory}`)
+
+  const dependencies = [
+    'rollup',
+    'rollup-plugin-replace',
+    'rollup-plugin-commonjs',
+    'rollup-plugin-node-resolve',
+    'react',
+    'react-dom',
+  ].join(' ')
+  await runIn(tmpDirectory)(`yarn add ${dependencies}`)
+  logger(`✔️Dependencies were installed`)
+
+  await runIn(tmpDirectory)(`yarn add ${packageFilename}`)
+  logger(`✔️Stardust UI was added to dependencies`)
+
+  fs.copyFileSync(
+    path.resolve(__dirname, '..', 'scaffold', 'app.js'),
+    path.resolve(tmpDirectory, 'app.js'),
+  )
+  fs.copyFileSync(
+    path.resolve(__dirname, '..', 'scaffold', 'rollup.config.js'),
+    path.resolve(tmpDirectory, 'rollup.config.js'),
+  )
+  logger(`✔️Source and bundler's config were created`)
+
+  await runIn(tmpDirectory)(`yarn rollup -c`)
+  logger(`✔️Example project was successfully built: ${tmpDirectory}`)
+})
+
+task(
+  'test:projects',
+  series(
+    // 'test:projects:cra-ts', Temporary disabled
+    'test:projects:rollup',
+  ),
+)

docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx

@@ -1,7 +1,7 @@
 import { ChatMessage } from '@stardust-ui/react'
 
 import * as React from 'react'
-import * as cx from 'classnames'
+import cx from 'classnames'
 import Popover from './Popover'
 
 const janeAvatar = {

docs/src/prototypes/chatMessageWithPopover/Popover.tsx

@@ -10,7 +10,7 @@ import {
 } from '@stardust-ui/react'
 import { ReactChildren } from 'types/utils'
 import * as React from 'react'
-import * as cx from 'classnames'
+import cx from 'classnames'
 
 export interface PopoverProps {
   className?: string

docs/src/views/IntegrateCustomComponents.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as cx from 'classnames'
+import cx from 'classnames'
 import { NavLink } from 'react-router-dom'
 import { Header } from 'semantic-ui-react'
 import {

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "build": "gulp build",
     "build:docs": "gulp --series dll build:docs",
-    "build:dist": "gulp --series dll build:dist",
+    "build:dist": "gulp --series build:dist",
     "ci": "yarn lint && yarn prettier && yarn test --strict",
     "predeploy:docs": "cross-env NODE_ENV=production yarn build:docs",
     "deploy:docs": "gulp deploy:docs",
@@ -37,7 +37,7 @@
     "test:watch": "gulp test:watch",
     "test:vulns": "snyk test",
     "test:visual": "gulp screener",
-    "test:projects:cra-ts": "gulp test:projects:cra-ts",
+    "test:projects": "gulp test:projects",
     "generate:component": "gulp generate:component"
   },
   "lint-staged": {
@@ -75,7 +75,6 @@
   },
   "devDependencies": {
     "@babel/standalone": "^7.1.0",
-    "@types/classnames": "^2.2.4",
     "@types/color": "^3.0.0",
     "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
@@ -114,7 +113,7 @@
     "gulp-rename": "^1.3.0",
     "gulp-replace": "^1.0.0",
     "gulp-transform": "^3.0.5",
-    "gulp-typescript": "^5.0.0-alpha.1",
+    "gulp-typescript": "^5.0.0",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",

src/components/Avatar/Avatar.tsx

@@ -1,6 +1,8 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Image, Label, Status } from '../../'
+import Image from '../Image/Image'
+import Label from '../Label/Label'
+import Status from '../Status/Status'
 import { Extendable, ShorthandValue } from '../../../types/utils'
 import {
   createShorthandFactory,

src/components/Chat/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import * as cx from 'classnames'
+import cx from 'classnames'
 
 import {
   childrenExist,

src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import * as cx from 'classnames'
+import cx from 'classnames'
 import * as _ from 'lodash'
 
 import {

src/components/ItemLayout/ItemLayout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import * as cx from 'classnames'
+import cx from 'classnames'
 
 import {
   createShorthandFactory,

src/components/Label/Label.tsx

@@ -13,7 +13,9 @@ import {
   commonPropTypes,
 } from '../../lib'
 
-import { Icon, Image, Layout } from '../..'
+import Icon from '../Icon/Icon'
+import Image from '../Image/Image'
+import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { Extendable, ShorthandValue } from '../../../types/utils'
 

src/components/Layout/Layout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import * as cx from 'classnames'
+import cx from 'classnames'
 
 import { UIComponent, UIComponentProps, commonPropTypes } from '../../lib'
 import { Extendable } from '../../../types/utils'

src/components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import * as _ from 'lodash'
-import * as cx from 'classnames'
+import cx from 'classnames'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 

src/components/Popup/Popup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { createPortal } from 'react-dom'
+import * as ReactDOM from 'react-dom'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 import { Popper, PopperChildrenProps } from 'react-popper'
@@ -196,7 +196,7 @@ export default class Popup extends AutoControlledComponent<Extendable<PopupProps
         {this.state.open &&
           Popup.isBrowserContext &&
           popupContent &&
-          createPortal(popupContent, document.body)}
+          ReactDOM.createPortal(popupContent, document.body)}
       </>
     )
   }

src/components/Portal/PortalInner.tsx

@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
-import { Component } from 'react'
-import { createPortal } from 'react-dom'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../lib'
 
 export interface PortalInnerProps extends ChildrenComponentProps {
@@ -26,7 +26,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
 /**
  * An inner component that allows you to render children outside their parent.
  */
-class PortalInner extends Component<PortalInnerProps> {
+class PortalInner extends React.Component<PortalInnerProps> {
   public static propTypes = {
     ...commonPropTypes.createCommon({
       animated: false,
@@ -55,7 +55,7 @@ class PortalInner extends Component<PortalInnerProps> {
   public render() {
     const { children, context } = this.props
 
-    return context && createPortal(children, context)
+    return context && ReactDOM.createPortal(children, context)
   }
 }
 

src/components/Ref/RefFindNode.tsx

@@ -1,6 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { findDOMNode } from 'react-dom'
+import * as ReactDOM from 'react-dom'
 
 import { ChildrenComponentProps, handleRef } from '../../lib'
 
@@ -20,7 +20,7 @@ export default class RefFindNode extends React.Component<RefFindNodeProps> {
   }
 
   componentDidMount() {
-    handleRef(this.props.innerRef, findDOMNode(this))
+    handleRef(this.props.innerRef, ReactDOM.findDOMNode(this))
   }
 
   componentWillUnmount() {

src/components/Status/Status.tsx

@@ -1,6 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Icon } from '../../'
+import Icon from '../Icon/Icon'
 
 import {
   customPropTypes,