[Proof of Concept] Multiple Stories inside one MD

[tuchk4]

Current blockers:

Importing components from md code blocks

The problem is that we parse it in runtime and seems it is not possible to make dynamic imports.
To make it possible we should parse it with webpack but this seems to be a complicated solution.

import Button  from '../components/Button';
<Button>Hello World</Button>

Maybe it is better to pass components as story arguments instead of importing them.

storiesOf('Button', module).add(
  'Button variants',
  mdx({
    content: require('./Multiple.md'),
    components: { Button }
  }),
);

Implementation for VUE

I am not experienced with vue. Would be nice if someone with experience would help with implementation.

---

We could start with React implementation and then add support for Vue.

@lonyele What do you think?

[tuchk4]

Right now don't know how correctly import components.
It should work in context of md file dir.

[tuchk4]

content is rendered components tree

[tuchk4]

remove old md features for Proof of convept. Returns only compiled md content

[tuchk4]

const value = state.counter || 0;

<button
  onClick={() => {
    setState({
      counter: value + 1,
    });
  }}
>
  Hello World {value}
</button>;

Transforms into

const value = state.counter || 0;

return <button
  onClick={() => {
    setState({
      counter: value + 1,
    });
  }}
>
  Hello World {value}
</button>;

[tuchk4]

eval