docs(CodeSandbox): improve example

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -19,5 +19,5 @@ The actual result that happened 💣
 x.y.z
 
 ### Testcase
-[Fork, update, and replace this pen to show the bug]:
-https://codesandbox.io/s/2l3n74j9y
+[Fork, update, and replace this sandbox to show the bug]:
+https://codesandbox.io/s/stardust-ui-example-8ismt

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -13,5 +13,5 @@ A clear and concise description of what the problem is. Ex. I have an issue when
 A clear and concise description of what you want to happen. Add any considered drawbacks.
 
 ### MVP
-[Fork, update, and replace this pen if you can show the proposed solution]:
-https://codesandbox.io/s/2l3n74j9y
+[Fork, update, and replace this sandbox if you can show the proposed solution]:
+https://codesandbox.io/s/stardust-ui-example-8ismt

.github/ISSUE_TEMPLATE/Support_question.md

@@ -9,6 +9,5 @@ We primarily use GitHub as an issue tracker; for usage and support questions, pl
 
 ---
 
-* Gitter Community Chat: https://gitter.im/Semantic-Org/Semantic-UI-React
-* StackOverflow: https://stackoverflow.com/questions/tagged/semantic-ui-react using the tag `semantic-ui-react`
+* Gitter Community Chat: https://gitter.im/stardust-ui/react
 * Also have a look at our docs: https://stardust-ui.github.io/react

CHANGELOG.md

@@ -59,6 +59,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Improve QuickStart code example @lucivpav ([#1797](https://github.com/stardust-ui/react/pull/1797))
 - Implement component tab UI @lucivpav ([#1784](https://github.com/stardust-ui/react/pull/1784))
 - Fix sidebar search input element's background color @lucivpav ([#1836](https://github.com/stardust-ui/react/pull/1836))
+- Improve an example on CodeSandbox @layershifter ([#1844](https://github.com/stardust-ui/react/pull/1844))
 
 <!--------------------------------[ v0.36.2 ]------------------------------- -->
 ## [v0.36.2](https://github.com/stardust-ui/react/tree/v0.36.2) (2019-08-19)

build/gulp/plugins/gulp-example-source.ts

@@ -28,7 +28,7 @@ const createExampleSourceCode = (file: Vinyl): ExampleSource => {
   })
   const prettierResult = prettier.format(babelResult.code, {
     ...prettierConfig,
-    parser: 'babylon',
+    parser: 'babel',
   })
   // https://eslint.org/docs/developer-guide/nodejs-api#cliengineexecuteontext
   // Results will contain single entry

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/ComponentControlsCodeSandbox.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import CodeSandboxer from 'react-codesandboxer'
 
 import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
-import { appTemplateJs, appTemplateTs } from './indexTemplates'
+import { appTemplate } from './indexTemplates'
 import ComponentButton from '../ComponentButton'
 import createPackageJson from './createPackageJson'
 
@@ -57,7 +57,6 @@ class ComponentControlsCodeSandbox extends React.PureComponent<
     const { examplePath, sandboxUrl } = this.state
 
     const main = exampleLanguage === 'ts' ? 'index.tsx' : 'index.js'
-    const appTemplate = exampleLanguage === 'ts' ? appTemplateTs : appTemplateJs
     const template = exampleLanguage === 'ts' ? 'create-react-app-typescript' : 'create-react-app'
 
     if (sandboxUrl) {

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts

@@ -7,6 +7,7 @@ const name = 'stardust-ui-example'
 const description =
   'An exported example from Stardust UI React, https://stardust-ui.github.io/react/'
 const dependencies = {
+  '@stardust-ui/code-sandbox': 'latest',
   ..._.mapValues(imports, () => 'latest'),
   // required to enable all features due old templates in https://github.com/codesandbox/codesandbox-importers
   // https://github.com/stardust-ui/react/issues/1519

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/indexTemplates.ts

@@ -1,27 +1,17 @@
-export const appTemplateJs = `import { Provider, themes } from "@stardust-ui/react"
-import React from "react";
-import ReactDOM from "react-dom";
-
-import Example from "./example";
-
-ReactDOM.render(
-  <Provider theme={themes.teams}>
-    <Example />
-  </Provider>,
-  document.getElementById("root")
-);
-`
-
-export const appTemplateTs = `import { Provider, themes } from "@stardust-ui/react"
+export const appTemplate = `import { SandboxApp } from "@stardust-ui/code-sandbox"
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import Example from "./example";
 
+//
+// You can edit this example in "example.js" or "example.tsx".
+//
+
 ReactDOM.render(
-  <Provider theme={themes.teams}>
+  <SandboxApp>
     <Example />
-  </Provider>,
+  </SandboxApp>,
   document.getElementById("root")
 );
 `

packages/code-sandbox/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@stardust-ui/code-sandbox",
+  "description": "Stardust UI tools for CodeSandbox.",
+  "version": "0.36.0-0",
+  "author": "Oleksandr Fediashov <a@fedyashov.com>",
+  "bugs": "https://github.com/stardust-ui/react/issues",
+  "dependencies": {
+    "@stardust-ui/react": "*"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/stardust-ui/react/tree/master/packages/code-sandbox",
+  "jsnext:main": "dist/es/index.js",
+  "license": "MIT",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/es/index.js",
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "stardust-ui/react.git",
+  "scripts": {
+    "build": "gulp bundle:package:no-umd --package code-sandbox"
+  },
+  "sideEffects": false,
+  "types": "dist/es/index.d.ts"
+}

packages/code-sandbox/src/SandboxApp.tsx

@@ -0,0 +1,58 @@
+import { Divider, Flex, Header, Provider, RadioGroup, Text, themes } from '@stardust-ui/react'
+// @ts-ignore
+import pkg from '@stardust-ui/react/package.json'
+import * as React from 'react'
+
+const items = [
+  {
+    key: 'light',
+    label: 'Teams Light',
+    value: 'teams',
+  },
+  {
+    key: 'dark',
+    label: 'Teams Dark',
+    value: 'teamsDark',
+  },
+  {
+    key: 'hc',
+    label: 'Teams High Contrast',
+    value: 'teamsHighContrast',
+  },
+]
+
+const SandboxApp: React.FunctionComponent = props => {
+  const { children } = props
+  const [theme, setTheme] = React.useState(items[0].value)
+
+  return (
+    <Provider theme={themes[theme]} styles={{ height: '100vh', padding: '1rem' }}>
+      <Header>Stardust UI @ {pkg.version}</Header>
+      <p>
+        This example is powered by Stardust UI, check{' '}
+        <Text as="a" href="https://stardust-ui.github.io/react/">
+          our docs
+        </Text>{' '}
+        and{' '}
+        <Text as="a" href="https://github.com/stardust-ui/react">
+          GitHub
+        </Text>
+        .
+      </p>
+
+      <Flex>
+        Select theme:
+        <RadioGroup
+          checkedValueChanged={(e, data) => setTheme(data.value as string)}
+          checkedValue={theme}
+          items={items}
+        />
+      </Flex>
+      <Divider />
+
+      {children}
+    </Provider>
+  )
+}
+
+export default SandboxApp

packages/code-sandbox/src/index.ts

@@ -0,0 +1 @@
+export { default as SandboxApp } from './SandboxApp'

packages/code-sandbox/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../build/tsconfig.common",
+  "include": ["src"]
+}

packages/docs-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stardust-ui/docs-components",
-  "description": "Registers a DOM nodes within a context.",
+  "description": "A set of React components to build docs sites.",
   "version": "0.36.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",