docs: remove knobs usage (#3988)

* docs: remove knobs usage * use vercel variable * add config and use silent * fix siteRoot
Semantic-Org · Jul 17, 2020 · 1b686fa · 1b686fa
1 parent 513f70e
commit 1b686fa
Show file tree

Hide file tree

Showing 12 changed files with 302 additions and 268 deletions.
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -1,19 +1,16 @@
-import { KnobProvider } from '@stardust-ui/docs-components'
 import cx from 'classnames'
 import copyToClipboard from 'copy-to-clipboard'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { InView } from 'react-intersection-observer'
-
-import { Checkbox, Grid, Label } from 'semantic-ui-react'
+import { Grid } from 'semantic-ui-react'
 
 import { examplePathToHash, scrollToAnchor } from 'docs/src/utils'
 import CarbonAdNative from 'docs/src/components/CarbonAd/CarbonAdNative'
 import formatCode from 'docs/src/utils/formatCode'
 import ComponentControls from '../ComponentControls'
 import ExampleEditor from '../ExampleEditor'
 import ComponentDocContext from '../ComponentDocContext'
-import ComponentExampleKnobs from './ComponentExampleKnobs'
 import ComponentExampleTitle from './ComponentExampleTitle'
 
 const childrenStyle = {
@@ -26,29 +23,6 @@ const componentControlsStyle = {
   width: 'auto',
 }
 
-/* eslint-disable react/prop-types */
-const knobComponents = {
-  KnobControl: (props) => (
-    <div style={{ display: 'flex', alignItems: 'center', flexGrow: 1, marginLeft: 5 }}>
-      {props.children}
-    </div>
-  ),
-  KnobBoolean: (props) => (
-    <Checkbox
-      checked={props.value}
-      onChange={(e, data) => props.setValue(data.checked)}
-      type='checkbox'
-      value={props.value}
-    />
-  ),
-  KnobLabel: (props) => (
-    <Label size='small' style={{ fontFamily: 'monospace' }}>
-      {props.name}
-    </Label>
-  ),
-}
-/* eslint-enable react/prop-types */
-
 /**
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the raw `code` code block.
@@ -193,30 +167,27 @@ class ComponentExample extends Component {
                 />
               </Grid.Column>
             </Grid.Row>
-            <KnobProvider components={knobComponents}>
-              <ComponentExampleKnobs />
-
-              {children && (
-                <Grid.Row columns={1} style={childrenStyle}>
-                  <Grid.Column>{children}</Grid.Column>
-                </Grid.Row>
-              )}
 
-              <Grid.Row style={{ paddingBottom: wasEverVisible && 0 }}>
-                <ExampleEditor
-                  examplePath={examplePath}
-                  hasCodeChanged={originalSourceCode !== sourceCode}
-                  onCodeChange={this.handleCodeChange}
-                  onCodeFormat={this.handleCodeFormat}
-                  onCodeReset={this.handleCodeReset}
-                  renderHtml={renderHtml}
-                  showCode={showCode}
-                  sourceCode={sourceCode}
-                  title={title}
-                  visible={wasEverVisible}
-                />
+            {children && (
+              <Grid.Row columns={1} style={childrenStyle}>
+                <Grid.Column>{children}</Grid.Column>
               </Grid.Row>
-            </KnobProvider>
+            )}
+
+            <Grid.Row style={{ paddingBottom: wasEverVisible && 0 }}>
+              <ExampleEditor
+                examplePath={examplePath}
+                hasCodeChanged={originalSourceCode !== sourceCode}
+                onCodeChange={this.handleCodeChange}
+                onCodeFormat={this.handleCodeFormat}
+                onCodeReset={this.handleCodeReset}
+                renderHtml={renderHtml}
+                showCode={showCode}
+                sourceCode={sourceCode}
+                title={title}
+                visible={wasEverVisible}
+              />
+            </Grid.Row>
 
             {isActiveHash && <CarbonAdNative inverted={showCode} />}
           </Grid>

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js
diff --git a/docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js b/docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js
@@ -1,4 +1,3 @@
-import * as docsComponents from '@stardust-ui/docs-components'
 import faker from 'faker'
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -18,7 +17,6 @@ export const babelConfig = {
 }
 
 export const externals = {
-  '@stardust-ui/docs-components': docsComponents,
   faker,
   lodash: require('lodash'),
   'prop-types': PropTypes,

diff --git a/docs/src/components/ExternalExampleLayout.js b/docs/src/components/ExternalExampleLayout.js
@@ -1,12 +1,11 @@
-import { KnobProvider } from '@stardust-ui/docs-components'
 import PropTypes from 'prop-types'
-import React, { createElement } from 'react'
+import React from 'react'
 import { withRouteData } from 'react-static'
 
 const ExternalExampleLayout = (props) => {
   const exampleComponent = require(`docs/src/examples/${props.path}`).default
 
-  return <KnobProvider>{createElement(exampleComponent)}</KnobProvider>
+  return React.createElement(exampleComponent)
 }
 
 ExternalExampleLayout.propTypes = {

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js
@@ -1,24 +1,38 @@
-import { useBooleanKnob } from '@stardust-ui/docs-components'
 import React from 'react'
-import { Button, Popup } from 'semantic-ui-react'
+import { Button, Checkbox, Divider, Grid, Popup } from 'semantic-ui-react'
 
 const PopupExampleEventsEnabled = () => {
-  const [eventsEnabled] = useBooleanKnob({
-    name: 'eventsEnabled',
-    initialValue: true,
-  })
-  const [open, setOpen] = useBooleanKnob({ name: 'open' })
+  const [eventsEnabled, setEventsEnabled] = React.useState(true)
+  const [open, setOpen] = React.useState(false)
 
   return (
-    <Popup
-      content='Hello'
-      eventsEnabled={eventsEnabled}
-      on='click'
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
-      open={open}
-      trigger={<Button content='A trigger' />}
-    />
+    <Grid columns={2}>
+      <Grid.Column>
+        <Checkbox
+          checked={open}
+          label={{ children: <code>open</code> }}
+          onChange={(e, data) => setOpen(data.checked)}
+        />
+        <Divider fitted hidden />
+        <Checkbox
+          checked={eventsEnabled}
+          label={{ children: <code>eventsEnabled</code> }}
+          onChange={(e, data) => setEventsEnabled(data.checked)}
+        />
+      </Grid.Column>
+
+      <Grid.Column>
+        <Popup
+          content='Hello'
+          eventsEnabled={eventsEnabled}
+          on='click'
+          onClose={() => setOpen(false)}
+          onOpen={() => setOpen(true)}
+          open={open}
+          trigger={<Button content='A trigger' />}
+        />
+      </Grid.Column>
+    </Grid>
   )
 }
 

diff --git a/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js b/docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js
@@ -1,61 +1,81 @@
-import { useBooleanKnob } from '@stardust-ui/docs-components'
 import React from 'react'
-import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
+import {
+  Checkbox,
+  Grid,
+  Header,
+  Icon,
+  Image,
+  Menu,
+  Segment,
+  Sidebar,
+} from 'semantic-ui-react'
 
 const SidebarExampleMultiple = () => {
-  const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
+  const [visible, setVisible] = React.useState(false)
 
   return (
-    <Sidebar.Pushable as={Segment}>
-      <Sidebar
-        as={Menu}
-        animation='overlay'
-        direction='left'
-        icon='labeled'
-        inverted
-        onHide={() => setVisible(false)}
-        vertical
-        visible={visible}
-        width='thin'
-      >
-        <Menu.Item as='a'>
-          <Icon name='home' />
-          Home
-        </Menu.Item>
-        <Menu.Item as='a'>
-          <Icon name='gamepad' />
-          Games
-        </Menu.Item>
-        <Menu.Item as='a'>
-          <Icon name='camera' />
-          Channels
-        </Menu.Item>
-      </Sidebar>
+    <Grid columns={1}>
+      <Grid.Column>
+        <Checkbox
+          checked={visible}
+          label={{ children: <code>visible</code> }}
+          onChange={(e, data) => setVisible(data.checked)}
+        />
+      </Grid.Column>
 
-      <Sidebar
-        as={Menu}
-        animation='overlay'
-        direction='right'
-        inverted
-        vertical
-        visible={visible}
-      >
-        <Menu.Item as='a' header>
-          File Permissions
-        </Menu.Item>
-        <Menu.Item as='a'>Share on Social</Menu.Item>
-        <Menu.Item as='a'>Share by E-mail</Menu.Item>
-        <Menu.Item as='a'>Edit Permissions</Menu.Item>
-        <Menu.Item as='a'>Delete Permanently</Menu.Item>
-      </Sidebar>
+      <Grid.Column>
+        <Sidebar.Pushable as={Segment}>
+          <Sidebar
+            as={Menu}
+            animation='overlay'
+            direction='left'
+            icon='labeled'
+            inverted
+            onHide={() => setVisible(false)}
+            vertical
+            visible={visible}
+            width='thin'
+          >
+            <Menu.Item as='a'>
+              <Icon name='home' />
+              Home
+            </Menu.Item>
+            <Menu.Item as='a'>
+              <Icon name='gamepad' />
+              Games
+            </Menu.Item>
+            <Menu.Item as='a'>
+              <Icon name='camera' />
+              Channels
+            </Menu.Item>
+          </Sidebar>
 
-      <Sidebar.Pusher>
-        <Segment basic>
-          <Header as='h3'>Application Content</Header>
-          <Image src='/images/wireframe/paragraph.png' />
-        </Segment>
-      </Sidebar.Pusher>
-    </Sidebar.Pushable>
+          <Sidebar
+            as={Menu}
+            animation='overlay'
+            direction='right'
+            inverted
+            vertical
+            visible={visible}
+          >
+            <Menu.Item as='a' header>
+              File Permissions
+            </Menu.Item>
+            <Menu.Item as='a'>Share on Social</Menu.Item>
+            <Menu.Item as='a'>Share by E-mail</Menu.Item>
+            <Menu.Item as='a'>Edit Permissions</Menu.Item>
+            <Menu.Item as='a'>Delete Permanently</Menu.Item>
+          </Sidebar>
+
+          <Sidebar.Pusher>
+            <Segment basic>
+              <Header as='h3'>Application Content</Header>
+              <Image src='/images/wireframe/paragraph.png' />
+            </Segment>
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>
+      </Grid.Column>
+    </Grid>
   )
 }