test.js

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import PropTypes from 'prop-types'

import { html } from 'js-beautify'

import withThemes, {
  ThemeTypes,
  propTypesFromThemeTypes
} from './src'

var GrandChild = ({ theme }) => (
  <div>
    <div className={theme.heading}>GRAND</div>
  </div>
)

GrandChild.themeTypes = {
  heading: ThemeTypes.className
}

GrandChild.propTypes = {
  theme: propTypesFromThemeTypes(GrandChild.themeTypes)
}

GrandChild = withThemes({
  default: {
    heading: 'base_grand'
  }
})(GrandChild)

// --

var Child = ({ theme }) => (
  <div>
    <div className={theme.heading}>BAR</div>
    <div className={theme.body}>FOOBAR</div>
    <GrandChild theme={theme.grand} />
  </div>
)

Child.foo = 'BAR'

Child.themeTypes = {
  heading: ThemeTypes.className,
  body: ThemeTypes.className,
  grand: ThemeTypes.themeOf(GrandChild)
}

Child.propTypes = {
  theme: propTypesFromThemeTypes(Child.themeTypes)
}

Child = withThemes({
  default: {
    heading: 'base_hed',
    body: 'base_body',
    grand: GrandChild.themes.default
  }
})(Child)

// --

var Test = ({ prop1, theme }) => (
  <div>
    <div className={theme.heading}>FOO</div>
    <Child theme={theme.child1} />
    <Child theme={theme.child2} />
  </div>
)

Test.propTypes = {
  prop1: PropTypes.string
}

Test.themeTypes = {
  heading: ThemeTypes.className,
  child1: ThemeTypes.themeOf(Child),
  child2: ThemeTypes.themeOf(Child)
}

Test.propTypes = {
  theme: propTypesFromThemeTypes(Test.themeTypes)
}

const THEMES = {
  bla: {
    heading: 'base_hed',
    child1: Child.themes.default.add({
      heading: 'child1'
    })
  },
  other: {
    heading: 'other_base_hed'
  }
}

Test = withThemes(THEMES, THEMES.other)(Test)

// --

// const theme = Test.themes.default.add({
//   heading: 'added_heading',
//   child1: {
//     heading: 'added_heading_grand'
//   }
// })

const element = (
  <Test prop1={1} theme={Test.themes.blaa} />
)

console.log(html(ReactDOMServer.renderToStaticMarkup(element), { indent_size: 2 }))