feat: export mergeThemes and add examples (#285)

Author: levithomason

CHANGELOG.md

@@ -23,6 +23,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix build on Windows @jurokapsiar ([#383](https://github.com/stardust-ui/react/pull/383))
 
+### Features
+- Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))
+
+### Documentation
+- Add `Provider` examples @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))
+
 <!--------------------------------[ v0.10.0 ]------------------------------- -->
 ## [v0.10.0](https://github.com/stardust-ui/react/tree/v0.10.0) (2018-10-19)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.9.1...v0.10.0)

docs/src/examples/components/Provider/Types/ProviderExample.shorthand.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Provider } from '@stardust-ui/react'
+
+const theme = { siteVariables: { brand: 'cornflowerblue' } }
+
+const ProviderExampleShorthand = () => (
+  <Provider theme={theme}>
+    <div>
+      <p>
+        Use the <code>Provider.Consumer</code> to access the <code>theme</code>:
+      </p>
+
+      <Provider.Consumer
+        render={theme => <code>theme.siteVariables.brand = {theme.siteVariables.brand}</code>}
+      />
+    </div>
+  </Provider>
+)
+
+export default ProviderExampleShorthand

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

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Theme"
+      description="A Provider defines the theme for your components."
+      examplePath="components/Provider/Types/ProviderExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

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

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

src/components/Provider/Provider.tsx

@@ -21,7 +21,7 @@ export interface ProviderProps {
 }
 
 /**
- * The Provider passes the CSS in JS renderer and theme down context.
+ * The Provider passes the CSS in JS renderer and theme to your components.
  */
 class Provider extends React.Component<ProviderProps, any> {
   static propTypes = {

src/index.ts

@@ -118,3 +118,8 @@ export {
 export {
   default as chatMessageEnterEscBehavior,
 } from './lib/accessibility/Behaviors/Chat/chatMessageEnterEscBehavior'
+
+//
+// Utilities
+//
+export { default as mergeThemes } from './lib/mergeThemes'

test/specs/components/Provider/Provider-test.tsx

@@ -0,0 +1,12 @@
+import Provider from 'src/components/Provider/Provider'
+import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
+
+describe('Provider', () => {
+  test('is exported', () => {
+    expect(require('src/index.ts').Provider).toEqual(Provider)
+  })
+
+  test('has a ProviderConsumer subcomponent', () => {
+    expect(require('src/index.ts').Provider.Consumer).toEqual(ProviderConsumer)
+  })
+})

test/specs/components/Provider/ProviderConsumer-test.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import { mount } from 'enzyme'
+
+import Provider from 'src/components/Provider/Provider'
+import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
+import { IThemeInput } from 'types/theme'
+
+describe('ProviderConsumer', () => {
+  test('is exported', () => {
+    expect(require('src/index.ts').ProviderConsumer).toEqual(ProviderConsumer)
+  })
+
+  test('is a subcomponent of the Provider', () => {
+    expect(Provider.Consumer).toEqual(ProviderConsumer)
+  })
+
+  describe('render', () => {
+    test('is a callback that receives the prepared theme', () => {
+      expect.assertions(13)
+
+      const inputTheme: IThemeInput = {
+        siteVariables: { a: 'b' },
+        componentVariables: { Button: { color: 'red' } },
+        componentStyles: { Button: { root: { color: 'red' } } },
+        fontFaces: [{ name: 'name', paths: ['path.woff2'], style: { fontWeight: 400 } }],
+        staticStyles: ['body{margin:0;}', { body: { margin: 0 } }],
+        icons: {
+          user: { icon: { content: '\\f1', fontFamily: 'i' } },
+          userFunc: { icon: () => ({ content: '\\f1', fontFamily: 'i' }) },
+          userSvg: { isSvg: true, icon: <svg /> },
+          userSvgFunc: { isSvg: true, icon: () => <svg /> },
+        },
+      }
+
+      mount(
+        <Provider theme={inputTheme}>
+          <Provider.Consumer
+            render={preparedTheme => {
+              // siteVariables
+              expect(preparedTheme).toHaveProperty('siteVariables.a', 'b')
+
+              // componentVariables
+              expect(preparedTheme).toHaveProperty('componentVariables.Button')
+              expect(preparedTheme.componentVariables.Button).toBeInstanceOf(Function)
+              expect(preparedTheme.componentVariables.Button()).toMatchObject(
+                inputTheme.componentVariables.Button,
+              )
+
+              // componentStyles
+              expect(preparedTheme).toHaveProperty('componentStyles.Button.root')
+              expect(preparedTheme.componentStyles.Button.root).toBeInstanceOf(Function)
+              expect(preparedTheme.componentStyles.Button.root()).toMatchObject(
+                inputTheme.componentStyles.Button.root,
+              )
+
+              // fontFaces
+              expect(preparedTheme).toHaveProperty('fontFaces')
+              expect(preparedTheme.fontFaces).toMatchObject(inputTheme.fontFaces)
+
+              // staticStyles
+              expect(preparedTheme).toHaveProperty('staticStyles')
+              expect(preparedTheme.staticStyles).toMatchObject(inputTheme.staticStyles)
+
+              // icons
+              expect(preparedTheme).toHaveProperty('icons')
+              expect(preparedTheme.icons).toMatchObject(inputTheme.icons)
+              return null
+            }}
+          />
+        </Provider>,
+      )
+    })
+  })
+})