docs(examples): show only relevant styling variables

[kuzhelov]

Provided functionality is working, thorough description with visual examples is about to come.

Issues

• description is not provided
• naming (suggestions are warmly welcome:). Specifically, it is about making names of all the introduced agents being succinct and consistent

[levithomason]

PR title check is wanting docs: ...message or something like docs(examples): ...message.

[levithomason]

I'd like to not have this part of the public API at present. One thought is to first consume the theme in the tree, clone it and observe it at that point, then provide the observed version down stream.

This could be wrapped up in a new component something like this (assumes some observe() deep clone exists):

import Provider from 'src/components/Provider'

const ProviderObserver = (props) => (
  <Provider.Consumer
    render={context => {
      const observed = observe(context)
      observed.onGet(props.onGet)

      return (
        <Provider {...observed}>
          {props.children}
        </Provider>
      )
    }}
  />
)

export default ProviderObserver

Now, anywhere we'd like to observe context in the tree we can use it like so:

// ComponentExample.js

  handleContextGet(context: object, path: string[]) {
    // assuming componentVariables.Button.backgroundColor was accessed:
    // 
    // context === { siteVariables: { ... }, componentVariables: { ... }, ... }
    // path === ['componentVariables', 'Button', 'backgroundColor']
  }

  renderWithProvider() {
    const { componentVariables, showRtl } = this.state
    return (
      <Provider componentVariables={componentVariables} rtl={showRtl}>
        <ProviderObserver onGet={this.handleContextGet}>
          <ExampleComponent knobs={this.getKnobsValue()} />
        </ProviderObserver>
      </Provider>
    )
  }

Now, any rules rendered down stream of our ProviderObserver that access the variables should result in firing the onGet callback. Here, we can track those variables.

What's also neat about this is that we can now also tell any part of the theme is accessed. Including listing out any other components that may be at play in the example.

Let's see if we can get an implementation working that does not require changes to any existing:

1. Rules file
2. Variables file
3. Component file

[kuzhelov]

thanks for your feedback - agree, will look into that

[levithomason]

Bump, anything I can do to help here?