docs(ComponentPlayground): add playground to docs

[layershifter]

Playground

Inspired by BluePrint JS docs.

New knobs

There cool knobs are powered by Context and hooks, it means that we will be to replace old knobs with them and get:

• working examples with knobs in full screen mode
• working examples with knobs on CodeSandbox
• will be able to create controlled components with knobs

Heavily inspired by Retoggle.

They are implemented in @stardust-ui/docs-components and will start our work for shared docs experience 🚀 I'm going to move editor and snippet components there, it will allow us to reduce dependencies on root package.json, too.

They use less dependencies as possible, to they are independent from Fela or Stardust.

How to implement new playground?

Actually, each playground is a simple functional component with knobs, so just create a new Playground.tsx file in examples directory and it will work like a 💎

docs/src/examples/components/Header/Playground.tsx

import { useSelectKnob, useStringKnob } from '@stardust-ui/docs-components'
import { Header } from '@stardust-ui/react'
import * as React from 'react'

const HeaderPlayground: React.FunctionComponent = () => {
  const [as] = useSelectKnob({
    name: 'as',
    initialValue: 'h1',
    values: ['h1', 'h2', 'h3', 'h4', 'h5'],
  })
  const [content] = useStringKnob({
    name: 'content',
    initialValue: 'A sample header',
  })

  return <Header as={as} content={content} />
}

export default HeaderPlayground

This solution is temporary, in the future we are going to generate playgrounds in automated mode. But, we should start with something 🐎

Next steps

• Replace existing knobs with new
• Make CodeSnippets copy-pastable, generated JSX should be also exportable to CodeSandbox

[DustyTheBot]

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.
⚠️	New package.json added: packages/docs-components/package.json. Make sure you have approval before merging!

Generated by 🚫 dangerJS

[codecov]

Codecov Report

Merging #1082 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1082   +/-   ##
=======================================
  Coverage   81.94%   81.94%           
=======================================
  Files         702      702           
  Lines        8580     8580           
  Branches     1245     1172   -73     
=======================================
  Hits         7031     7031           
  Misses       1534     1534           
  Partials       15       15

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d83e858...fa4c6f9. Read the comment docs.

[codecov]

Codecov Report

Merging #1082 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1082   +/-   ##
=======================================
  Coverage   83.21%   83.21%           
=======================================
  Files         751      751           
  Lines        8881     8881           
  Branches     1192     1260   +68     
=======================================
  Hits         7390     7390           
  Misses       1477     1477           
  Partials       14       14

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0089939...e0f4b66. Read the comment docs.

[jurokapsiar]

Have you considered using <Dropdown>?

[layershifter]

These components are part of docs-component package which should be consumable even without Stardust.

I am going to add mapping with our components in a separate PR.