🎠 webpack: add react context example

Closes #52.

Signed-off-by: Dennis Reimann <mail@dennisreimann.de>

new

Signed-off-by: Dennis Reimann <mail@dennisreimann.de>

new

Signed-off-by: Dennis Reimann <mail@dennisreimann.de>

packages/core/test/configuration_test.js

@@ -49,9 +49,10 @@ describe('Configuration', () => {
     it('should resolve components source paths as array', async () => {
       const config = await Configuration.read(opts)
 
-      assert.strictEqual(config.source.components.length, 2)
+      assert.strictEqual(config.source.components.length, 3)
       assert.strictEqual(config.source.components[0], resolve(testProjectPath, 'src', 'elements'))
       assert.strictEqual(config.source.components[1], resolve(testProjectPath, 'src', 'modules'))
+      assert.strictEqual(config.source.components[2], resolve(testProjectPath, 'src', 'examples'))
     })
 
     it('should resolve components source paths as array if string is given', async () => {

packages/core/test/page_test.js

@@ -72,12 +72,13 @@ describe('Page', () => {
     it('should infer childIds if they are not provided', async () => {
       const data = await Page.fetchById(state, 'testcases')
 
-      assert.strictEqual(data.childIds.length, 5, `Actual children:\n\n${data.childIds.join('\n')}`)
+      assert.strictEqual(data.childIds.length, 6, `Actual children:\n\n${data.childIds.join('\n')}`)
       assertItem(data.childIds, 'testcases/custom-data')
       assertItem(data.childIds, 'testcases/custom-path')
       assertItem(data.childIds, 'testcases/custom-fragment')
       assertItem(data.childIds, 'testcases/custom-fragment-and-template')
       assertItem(data.childIds, 'testcases/custom-template')
+      assertItem(data.childIds, 'testcases/examples')
     })
 
     it('should infer childIds for index if they are not provided', async () => {
@@ -221,7 +222,7 @@ describe('Page', () => {
       const data = await Page.fetchAll(state)
       const pageIds = Object.keys(data)
 
-      assert.strictEqual(pageIds.length, 23)
+      assert.strictEqual(pageIds.length, 24)
 
       assertItem(pageIds, 'index')
       assertItem(pageIds, 'documentation')
@@ -246,6 +247,7 @@ describe('Page', () => {
       assertItem(pageIds, 'testcases/custom-fragment')
       assertItem(pageIds, 'testcases/custom-fragment-and-template')
       assertItem(pageIds, 'testcases/custom-template')
+      assertItem(pageIds, 'testcases/examples')
     })
   })
 })

test/acceptance/integration/navigation.spec.js

@@ -42,14 +42,15 @@ context('Navigation', () => {
   })
 
   it('should display initially collapsed pages', () => {
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('not.be.visible')
-    cy.get('[data-test-navitem-id="patterns/organisms"] > button').click()
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('be.visible')
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('not.be.visible')
+    cy.get('[data-test-navitem-id="testcases/examples"] > button').click()
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('be.visible')
 
     cy.reload()
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('be.visible')
-    cy.get('[data-test-navitem-id="patterns/organisms"] > button').click()
-    cy.get('[data-test-navtree-id="patterns/organisms"]').should('not.be.visible')
+
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('be.visible')
+    cy.get('[data-test-navitem-id="testcases/examples"] > button').click()
+    cy.get('[data-test-navtree-id="testcases/examples"]').should('not.be.visible')
   })
 
   it('should be toggleable', () => {

test/project/lib/react-client-render.js

@@ -1,9 +1,9 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { hydrate } from 'react-dom'
 
-export default function clientRender (Component, props) {
-  ReactDOM.hydrate(
-    React.createElement(Component, props),
+export default (Component, props) =>
+  hydrate(
+    <Component {...props} />,
     document.querySelector('#app')
   )
-}

test/project/lib/react-server-render.js

@@ -1,5 +1,6 @@
+// eslint-disable-next-line no-unused-vars
+const React = require('react')
 const { renderToString } = require('react-dom/server')
 
-module.exports = function serverRender (Component, props) {
-  return renderToString(Component(props))
-}
+module.exports = (Component, props) =>
+  renderToString(<Component {...props} />)

test/project/src/examples/ReactContext/ReactContext.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ThemeContext, { ThemeProvider } from './ThemeContext'
+
+export default () => (
+  <ThemeProvider>
+    <ThemeContext.Consumer>
+      {context => (<h1>Context: {context}</h1>)}
+    </ThemeContext.Consumer>
+  </ThemeProvider>
+)

test/project/src/examples/ReactContext/ThemeContext.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+const ThemeContext = React.createContext('light')
+
+export class ThemeProvider extends Component {
+  render () {
+    const { children, value = 'dark' } = this.props
+
+    return (
+      <ThemeContext.Provider value={value}>
+        {children}
+      </ThemeContext.Provider>
+    )
+  }
+}
+
+export default ThemeContext

test/project/src/examples/ReactContext/component.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  title: 'React Context'
+}

test/project/src/examples/ReactContext/variants/ReactContext.jsx

@@ -0,0 +1,4 @@
+import React from 'react'
+import ReactContext from '../ReactContext.jsx'
+
+export default props => <ReactContext {...props} />

test/project/uiengine.config.js

@@ -24,7 +24,7 @@ module.exports = {
   // - templates contains the variant preview and application templates
   // - pages is the directory of the UIengine's site structure and page markdown files
   source: {
-    components: ['./src/elements', './src/modules'],
+    components: ['./src/elements', './src/modules', './src/examples'],
     templates: './src/templates',
     pages: './uiengine/pages',
     additionalWatches: './lib'

test/project/uiengine/pages/patterns/organisms/page.config.js

@@ -1,4 +1,3 @@
 module.exports = {
-  components: ['form'],
-  collapsed: true
+  components: ['form']
 }

test/project/uiengine/pages/testcases/examples/page.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  components: ['ReactContext'],
+  collapsed: true
+}