Docs: use TypeScript and plain JS in examples

[layershifter]

Input

• we want to write examples in TypeScript to get working all TS features and checks
• we want to show examples to user in JS and TS

Solution

Semantic UI React has a plugin that simply writes sources to a JSON file.

I have an idea about similar solution, but more advanced. We can use babel and babel-preset-typescript to generate following structure:

type ComponentExampleSource = {
  js: {
    children: string,
    shorthand: string,
  },
  ts: {
    children: string,
    shorthand: string,
  },
}

type ComponentExampleSources = {
  [k: string]: ComponentExampleSource
}

This will give us ability to get sources of example very easily and create a toggle with JS and TS in docs. BTW, this will allow us to drop raw-loader 😄

We will need to write a small plugin that will transform imports:

import * as _ from 'lodash'
import * as React from 'react'
// =>
import _ from 'lodash'
import React from 'react'

Quick POC: https://codesandbox.io/s/yv285k54lx

[hughreeling]

Or at least add Typescript specific gotya and examples. For example:

const centered = {
textAlign: 'center',
}

doesn't work
Should be

const centered: ICSSInJSStyle = {
textAlign: 'center',
}