From af908f01319d459eb3bc0115cefe48bfcc2c6414 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 17 Jul 2020 11:12:14 +0200 Subject: [PATCH 1/4] docs: remove knobs usage --- .../ComponentExample/ComponentExample.js | 69 +++------- .../ComponentExample/ComponentExampleKnobs.js | 43 ------ .../ExampleEditor/renderConfig.js | 2 - docs/src/components/ExternalExampleLayout.js | 5 +- .../Popup/Usage/PopupExampleEventsEnabled.js | 46 ++++--- .../Examples/SidebarExampleMultiple.js | 122 ++++++++++-------- .../Sidebar/States/SidebarExampleDimmed.js | 88 ++++++++----- .../Sidebar/Types/SidebarExampleSidebar.js | 88 ++++++++----- .../Sidebar/Usage/SidebarExampleCallback.js | 18 ++- .../Sidebar/Usage/SidebarExampleTarget.js | 80 +++++++----- 10 files changed, 294 insertions(+), 267 deletions(-) delete mode 100644 docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js index d945ecf1fc..4ec179bf57 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js @@ -1,11 +1,9 @@ -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' @@ -13,7 +11,6 @@ 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) => ( -
- {props.children} -
- ), - KnobBoolean: (props) => ( - props.setValue(data.checked)} - type='checkbox' - value={props.value} - /> - ), - KnobLabel: (props) => ( - - ), -} -/* 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 { /> - - - - {children && ( - - {children} - - )} - - + {children && ( + + {children} - + )} + + + + {isActiveHash && } diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js deleted file mode 100644 index 6e1470f595..0000000000 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js +++ /dev/null @@ -1,43 +0,0 @@ -import { CodeSnippet, KnobInspector, useKnobValues } from '@stardust-ui/docs-components' -import _ from 'lodash' -import React from 'react' -import { Grid } from 'semantic-ui-react' - -const columnStyles = { - padding: 0, -} - -const knobsStyles = { - background: 'whitesmoke', - color: '#777', - lineHeight: '1.5', - padding: '1rem', -} - -const rowStyles = { - padding: 0, -} - -const ComponentExampleKnobs = () => { - const knobValues = useKnobValues() - const values = _.fromPairs(knobValues.map((knob) => [knob.name, knob.value])) - - return ( - - {(knobs) => - knobs && ( - - -
{knobs}
- - - - - - ) - } - - ) -} - -export default ComponentExampleKnobs diff --git a/docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js b/docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js index 6182e2d29d..2097e6a8ed 100644 --- 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 index 5fbc95d646..6273e6447a 100644 --- 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 {createElement(exampleComponent)} + 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 index 57e7f9c94f..c0bbebc02f 100644 --- 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 ( - setOpen(false)} - onOpen={() => setOpen(true)} - open={open} - trigger={