feat(Provider): allow to render to multiple documents

CHANGELOG.md

@@ -39,6 +39,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Open `Popup` on `contextmenu` @jurokapsiar ([#1524](https://github.com/stardust-ui/react/pull/1524))
 - Add `align` prop for `Text` component @Bugaa92 ([#1668](https://github.com/stardust-ui/react/pull/1668))
 - Add `size` prop for `Button` component @layershifter ([#1716](https://github.com/stardust-ui/react/pull/1716))
+- Add `target` prop on `Provider`, allows to specify a `document` where styles should be renderer @layershifter ([#1252](https://github.com/stardust-ui/react/pull/1252))
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))

build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts

@@ -1,3 +1,5 @@
+import { getPackageName } from './utils/packageNameUtils'
+
 export default [
   '@babel/runtime@7.1.2',
   '@babel/runtime@7.4.5',
@@ -64,6 +66,6 @@ export default [
   'webpack@4.25.1',
 ]
 
-export const isIgnored = (packageId): boolean => {
-  return packageId.startsWith('@stardust-ui/')
+export const isIgnored = (packageId: string): boolean => {
+  return packageId.startsWith('@stardust-ui/') || getPackageName(packageId) === 'fela'
 }

build/dangerjs/detectNonApprovedDependencies/utils/getVersionConstrains.ts

@@ -3,6 +3,7 @@ import * as fs from 'fs'
 
 import * as readPackageJson from 'read-package-json'
 import { getPackageName, getPackageVersion } from './packageNameUtils'
+import { isIgnored } from '../approvedPackages'
 
 type PackageJson = {
   dependencies?: string[]
@@ -75,18 +76,22 @@ export const getDependenciesVersionConstraints = async (
   let detectedConstraints: Constraints = {}
   const dependenciesWithConstraints = (await parsePackageJson(packageJsonPath)).dependencies
 
-  const pendingTasks = dependenciesWithConstraints.map(async dependency => {
-    detectedConstraints[dependency] = dependencyChain
-    const dependencyPackageJson = findPackageJsonOf(dependency, path.dirname(basePath))
+  const pendingTasks = dependenciesWithConstraints.map(async dependencyPackageId => {
+    if (isIgnored(dependencyPackageId)) {
+      return
+    }
+
+    detectedConstraints[dependencyPackageId] = dependencyChain
+    const dependencyPackageJson = findPackageJsonOf(dependencyPackageId, basePath)
 
     if (!dependencyPackageJson) {
       throw new Error(
-        `Package.json wasn't found for the following dependency: ${dependency} in ${packageJsonPath}`,
+        `Package.json wasn't found for the following dependency: ${dependencyPackageId} in ${packageJsonPath}`,
       )
     }
 
     const newDepChain = [...dependencyChain]
-    newDepChain.push(dependency)
+    newDepChain.push(dependencyPackageId)
 
     const newConstraints = await getDependenciesVersionConstraints(
       dependencyPackageJson,

docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx

@@ -2,7 +2,7 @@ import * as Stardust from '@stardust-ui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
 // @ts-ignore
-import { ThemeContext } from 'react-fela'
+import { ThemeContext } from '@stardust-ui/react-fela'
 
 import { ComponentInfo } from 'docs/src/types'
 import componentInfoContext from 'docs/src/utils/componentInfoContext'

docs/src/components/Playground/renderConfig.ts

@@ -1,9 +1,9 @@
 import * as DocsComponent from '@stardust-ui/docs-components'
 import * as Stardust from '@stardust-ui/react'
+import * as ReactFela from '@stardust-ui/react-fela'
 import * as _ from 'lodash'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import * as ReactFela from 'react-fela'
 import * as Classnames from 'classnames'
 
 export const babelConfig = {

docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { Attachment, Button, Provider, themes } from '@stardust-ui/react'
+
+type PortalWindowProps = {
+  children: (externalDocument: Document) => React.ReactElement
+  onClose?: () => void
+}
+
+const PortalWindow: React.FunctionComponent<PortalWindowProps> = ({ children, onClose }) => {
+  const externalContainer = React.useRef<HTMLDivElement>(null)
+  const externalWindow = React.useRef<Window>(null)
+  const [mounted, setMounted] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    externalWindow.current = window.open('', '', 'width=600,height=400,left=200,top=200')
+
+    externalContainer.current = externalWindow.current.document.createElement('div')
+
+    externalWindow.current.document.body.appendChild(externalContainer.current)
+    if (onClose) externalWindow.current.onbeforeunload = onClose
+
+    setMounted(true)
+
+    return () => {
+      externalWindow.current.close()
+    }
+  }, [])
+
+  return (
+    mounted &&
+    ReactDOM.createPortal(
+      children(externalContainer.current.ownerDocument),
+      externalContainer.current,
+    )
+  )
+}
+
+const ProviderExampleTarget = () => {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open window!</Button>
+      {open && (
+        <PortalWindow onClose={() => setOpen(false)}>
+          {externalDocument => (
+            <Provider theme={themes.teams} target={externalDocument}>
+              <Attachment header="Document.docx" />
+            </Provider>
+          )}
+        </PortalWindow>
+      )}
+    </>
+  )
+}
+
+export default ProviderExampleTarget

docs/src/examples/components/Provider/Usage/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Target"
+      description="A Provider allows to define target document to apply styles."
+      examplePath="components/Provider/Usage/ProviderExampleTarget"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Provider/index.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react'
+
 import Types from './Types'
+import Usage from './Usage'
 
 const ProviderExamples = () => (
-  <div>
+  <>
     <Types />
-  </div>
+    <Usage />
+  </>
 )
 
 export default ProviderExamples

packages/react/package.json

@@ -6,14 +6,15 @@
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
+    "@stardust-ui/fela": "^10.6.1",
     "@stardust-ui/react-component-event-listener": "^0.34.0",
     "@stardust-ui/react-component-nesting-registry": "^0.34.0",
     "@stardust-ui/react-component-ref": "^0.34.0",
+    "@stardust-ui/react-fela": "^10.6.2",
     "@stardust-ui/react-proptypes": "^0.34.0",
     "classnames": "^2.2.5",
     "downshift": "^3.2.10",
     "fast-memoize": "^2.5.1",
-    "fela": "^10.5.0",
     "fela-plugin-embedded": "^10.5.0",
     "fela-plugin-fallback-value": "^10.5.0",
     "fela-plugin-placeholder-prefixer": "^10.5.0",
@@ -23,7 +24,6 @@
     "lodash": "^4.17.11",
     "popper.js": "^1.15.0",
     "prop-types": "^15.6.1",
-    "react-fela": "^10.5.0",
     "react-is": "^16.6.3"
   },
   "devDependencies": {

packages/react/src/components/Provider/Provider.tsx

@@ -1,9 +1,9 @@
-import { IStyle } from 'fela'
+import { IStyle } from '@stardust-ui/fela'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 // @ts-ignore
-import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela'
+import { RendererProvider, ThemeProvider, ThemeContext } from '@stardust-ui/react-fela'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 
 import { felaRenderer, ChildrenComponentProps } from '../../lib'
@@ -34,6 +34,7 @@ export interface ProviderProps extends ChildrenComponentProps {
   renderer?: Renderer
   rtl?: boolean
   disableAnimations?: boolean
+  target?: Document
   theme?: ThemeInput
   variables?: ComponentVariablesInput
 }
@@ -74,6 +75,7 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
     rtl: PropTypes.bool,
     disableAnimations: PropTypes.bool,
     children: PropTypes.node.isRequired,
+    target: PropTypes.object,
   }
 
   static defaultProps = {
@@ -145,6 +147,7 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
       renderer,
       variables,
       children,
+      target,
       ...unhandledProps
     } = this.props
     const inputContext: ProviderContextInput = {
@@ -169,7 +172,11 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
     }
 
     return (
-      <RendererProvider renderer={outgoingContext.renderer} {...{ rehydrate: false }}>
+      <RendererProvider
+        renderer={outgoingContext.renderer}
+        target={target}
+        {...{ rehydrate: false }}
+      >
         <ThemeProvider theme={outgoingContext}>
           <ProviderBox as={as} variables={variables} {...unhandledProps} {...rtlProps}>
             {children}

packages/react/src/components/Provider/ProviderConsumer.tsx

@@ -1,6 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { FelaTheme } from 'react-fela'
+import { FelaTheme } from '@stardust-ui/react-fela'
 
 import { ThemePrepared } from '../../themes/types'
 import { ProviderContextPrepared } from '../../types'

packages/react/src/lib/UIComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as _ from 'lodash'
 // @ts-ignore We have this export in package, but it is not present in typings
-import { ThemeContext } from 'react-fela'
+import { ThemeContext } from '@stardust-ui/react-fela'
 
 import renderComponent, { RenderResultConfig } from './renderComponent'
 import { AccessibilityActionHandlers } from './accessibility/reactTypes'

packages/react/src/lib/createComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as _ from 'lodash'
 // @ts-ignore
-import { ThemeContext } from 'react-fela'
+import { ThemeContext } from '@stardust-ui/react-fela'
 
 import renderComponent, { RenderResultConfig } from './renderComponent'
 import { AccessibilityActionHandlers } from './accessibility/reactTypes'

packages/react/src/lib/felaRenderer.tsx

@@ -1,4 +1,4 @@
-import { createRenderer } from 'fela'
+import { createRenderer } from '@stardust-ui/fela'
 import felaPluginEmbedded from 'fela-plugin-embedded'
 import felaPluginFallbackValue from 'fela-plugin-fallback-value'
 import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer'

packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts

@@ -1,7 +1,8 @@
 import { debugRoot } from '../../../../styles/debugStyles'
+import { ICSSInJSStyle } from '../../../types'
 
 const itemLayoutStyles = {
-  root: ({ props, variables }) => {
+  root: ({ props, variables }): ICSSInJSStyle => {
     const { debugLayout } = props
     return {
       ...(debugLayout && debugRoot()),

packages/react/src/themes/types.ts

@@ -1,5 +1,5 @@
 import * as CSSType from 'csstype'
-import { IRenderer as FelaRenderer } from 'fela'
+import { IRenderer as FelaRenderer } from '@stardust-ui/fela'
 import * as React from 'react'
 import { Extendable, ObjectOf, ObjectOrFunc, Omit } from '../types'
 import { AccordionContentProps } from '../components/Accordion/AccordionContent'

packages/react/test/utils/withProvider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { mount } from 'enzyme'
-import { ThemeProvider } from 'react-fela'
+import { ThemeProvider } from '@stardust-ui/react-fela'
 import { felaRenderer } from 'src/lib'
 import { ThemeInput } from 'src/themes/types'