Skip to content

Commit 1b686fa

Browse files
layershifterlayershifter
authored
docs: remove knobs usage (#3988)
* docs: remove knobs usage * use vercel variable * add config and use silent * fix siteRoot
1 parent 513f70e commit 1b686fa

12 files changed

+302
-268
lines changed

‎docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js

+20-49
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import { KnobProvider } from '@stardust-ui/docs-components'
21
import cx from 'classnames'
32
import copyToClipboard from 'copy-to-clipboard'
43
import PropTypes from 'prop-types'
54
import React, { Component } from 'react'
65
import { InView } from 'react-intersection-observer'
7-
8-
import { Checkbox, Grid, Label } from 'semantic-ui-react'
6+
import { Grid } from 'semantic-ui-react'
97

108
import { examplePathToHash, scrollToAnchor } from 'docs/src/utils'
119
import CarbonAdNative from 'docs/src/components/CarbonAd/CarbonAdNative'
1210
import formatCode from 'docs/src/utils/formatCode'
1311
import ComponentControls from '../ComponentControls'
1412
import ExampleEditor from '../ExampleEditor'
1513
import ComponentDocContext from '../ComponentDocContext'
16-
import ComponentExampleKnobs from './ComponentExampleKnobs'
1714
import ComponentExampleTitle from './ComponentExampleTitle'
1815

1916
const childrenStyle = {
@@ -26,29 +23,6 @@ const componentControlsStyle = {
2623
width: 'auto',
2724
}
2825

29-
/* eslint-disable react/prop-types */
30-
const knobComponents = {
31-
KnobControl: (props) => (
32-
<div style={{ display: 'flex', alignItems: 'center', flexGrow: 1, marginLeft: 5 }}>
33-
{props.children}
34-
</div>
35-
),
36-
KnobBoolean: (props) => (
37-
<Checkbox
38-
checked={props.value}
39-
onChange={(e, data) => props.setValue(data.checked)}
40-
type='checkbox'
41-
value={props.value}
42-
/>
43-
),
44-
KnobLabel: (props) => (
45-
<Label size='small' style={{ fontFamily: 'monospace' }}>
46-
{props.name}
47-
</Label>
48-
),
49-
}
50-
/* eslint-enable react/prop-types */
51-
5226
/**
5327
* Renders a `component` and the raw `code` that produced it.
5428
* Allows toggling the raw `code` code block.
@@ -193,30 +167,27 @@ class ComponentExample extends Component {
193167
/>
194168
</Grid.Column>
195169
</Grid.Row>
196-
<KnobProvider components={knobComponents}>
197-
<ComponentExampleKnobs />
198-
199-
{children && (
200-
<Grid.Row columns={1} style={childrenStyle}>
201-
<Grid.Column>{children}</Grid.Column>
202-
</Grid.Row>
203-
)}
204170

205-
<Grid.Row style={{ paddingBottom: wasEverVisible && 0 }}>
206-
<ExampleEditor
207-
examplePath={examplePath}
208-
hasCodeChanged={originalSourceCode !== sourceCode}
209-
onCodeChange={this.handleCodeChange}
210-
onCodeFormat={this.handleCodeFormat}
211-
onCodeReset={this.handleCodeReset}
212-
renderHtml={renderHtml}
213-
showCode={showCode}
214-
sourceCode={sourceCode}
215-
title={title}
216-
visible={wasEverVisible}
217-
/>
171+
{children && (
172+
<Grid.Row columns={1} style={childrenStyle}>
173+
<Grid.Column>{children}</Grid.Column>
218174
</Grid.Row>
219-
</KnobProvider>
175+
)}
176+
177+
<Grid.Row style={{ paddingBottom: wasEverVisible && 0 }}>
178+
<ExampleEditor
179+
examplePath={examplePath}
180+
hasCodeChanged={originalSourceCode !== sourceCode}
181+
onCodeChange={this.handleCodeChange}
182+
onCodeFormat={this.handleCodeFormat}
183+
onCodeReset={this.handleCodeReset}
184+
renderHtml={renderHtml}
185+
showCode={showCode}
186+
sourceCode={sourceCode}
187+
title={title}
188+
visible={wasEverVisible}
189+
/>
190+
</Grid.Row>
220191

221192
{isActiveHash && <CarbonAdNative inverted={showCode} />}
222193
</Grid>

‎docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js

-43
This file was deleted.

‎docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as docsComponents from '@stardust-ui/docs-components'
21
import faker from 'faker'
32
import React from 'react'
43
import ReactDOM from 'react-dom'
@@ -18,7 +17,6 @@ export const babelConfig = {
1817
}
1918

2019
export const externals = {
21-
'@stardust-ui/docs-components': docsComponents,
2220
faker,
2321
lodash: require('lodash'),
2422
'prop-types': PropTypes,

‎docs/src/components/ExternalExampleLayout.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { KnobProvider } from '@stardust-ui/docs-components'
21
import PropTypes from 'prop-types'
3-
import React, { createElement } from 'react'
2+
import React from 'react'
43
import { withRouteData } from 'react-static'
54

65
const ExternalExampleLayout = (props) => {
76
const exampleComponent = require(`docs/src/examples/${props.path}`).default
87

9-
return <KnobProvider>{createElement(exampleComponent)}</KnobProvider>
8+
return React.createElement(exampleComponent)
109
}
1110

1211
ExternalExampleLayout.propTypes = {

‎docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js

+30-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
1-
import { useBooleanKnob } from '@stardust-ui/docs-components'
21
import React from 'react'
3-
import { Button, Popup } from 'semantic-ui-react'
2+
import { Button, Checkbox, Divider, Grid, Popup } from 'semantic-ui-react'
43

54
const PopupExampleEventsEnabled = () => {
6-
const [eventsEnabled] = useBooleanKnob({
7-
name: 'eventsEnabled',
8-
initialValue: true,
9-
})
10-
const [open, setOpen] = useBooleanKnob({ name: 'open' })
5+
const [eventsEnabled, setEventsEnabled] = React.useState(true)
6+
const [open, setOpen] = React.useState(false)
117

128
return (
13-
<Popup
14-
content='Hello'
15-
eventsEnabled={eventsEnabled}
16-
on='click'
17-
onClose={() => setOpen(false)}
18-
onOpen={() => setOpen(true)}
19-
open={open}
20-
trigger={<Button content='A trigger' />}
21-
/>
9+
<Grid columns={2}>
10+
<Grid.Column>
11+
<Checkbox
12+
checked={open}
13+
label={{ children: <code>open</code> }}
14+
onChange={(e, data) => setOpen(data.checked)}
15+
/>
16+
<Divider fitted hidden />
17+
<Checkbox
18+
checked={eventsEnabled}
19+
label={{ children: <code>eventsEnabled</code> }}
20+
onChange={(e, data) => setEventsEnabled(data.checked)}
21+
/>
22+
</Grid.Column>
23+
24+
<Grid.Column>
25+
<Popup
26+
content='Hello'
27+
eventsEnabled={eventsEnabled}
28+
on='click'
29+
onClose={() => setOpen(false)}
30+
onOpen={() => setOpen(true)}
31+
open={open}
32+
trigger={<Button content='A trigger' />}
33+
/>
34+
</Grid.Column>
35+
</Grid>
2236
)
2337
}
2438

‎docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js

+71-51
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,81 @@
1-
import { useBooleanKnob } from '@stardust-ui/docs-components'
21
import React from 'react'
3-
import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
2+
import {
3+
Checkbox,
4+
Grid,
5+
Header,
6+
Icon,
7+
Image,
8+
Menu,
9+
Segment,
10+
Sidebar,
11+
} from 'semantic-ui-react'
412

513
const SidebarExampleMultiple = () => {
6-
const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
14+
const [visible, setVisible] = React.useState(false)
715

816
return (
9-
<Sidebar.Pushable as={Segment}>
10-
<Sidebar
11-
as={Menu}
12-
animation='overlay'
13-
direction='left'
14-
icon='labeled'
15-
inverted
16-
onHide={() => setVisible(false)}
17-
vertical
18-
visible={visible}
19-
width='thin'
20-
>
21-
<Menu.Item as='a'>
22-
<Icon name='home' />
23-
Home
24-
</Menu.Item>
25-
<Menu.Item as='a'>
26-
<Icon name='gamepad' />
27-
Games
28-
</Menu.Item>
29-
<Menu.Item as='a'>
30-
<Icon name='camera' />
31-
Channels
32-
</Menu.Item>
33-
</Sidebar>
17+
<Grid columns={1}>
18+
<Grid.Column>
19+
<Checkbox
20+
checked={visible}
21+
label={{ children: <code>visible</code> }}
22+
onChange={(e, data) => setVisible(data.checked)}
23+
/>
24+
</Grid.Column>
3425

35-
<Sidebar
36-
as={Menu}
37-
animation='overlay'
38-
direction='right'
39-
inverted
40-
vertical
41-
visible={visible}
42-
>
43-
<Menu.Item as='a' header>
44-
File Permissions
45-
</Menu.Item>
46-
<Menu.Item as='a'>Share on Social</Menu.Item>
47-
<Menu.Item as='a'>Share by E-mail</Menu.Item>
48-
<Menu.Item as='a'>Edit Permissions</Menu.Item>
49-
<Menu.Item as='a'>Delete Permanently</Menu.Item>
50-
</Sidebar>
26+
<Grid.Column>
27+
<Sidebar.Pushable as={Segment}>
28+
<Sidebar
29+
as={Menu}
30+
animation='overlay'
31+
direction='left'
32+
icon='labeled'
33+
inverted
34+
onHide={() => setVisible(false)}
35+
vertical
36+
visible={visible}
37+
width='thin'
38+
>
39+
<Menu.Item as='a'>
40+
<Icon name='home' />
41+
Home
42+
</Menu.Item>
43+
<Menu.Item as='a'>
44+
<Icon name='gamepad' />
45+
Games
46+
</Menu.Item>
47+
<Menu.Item as='a'>
48+
<Icon name='camera' />
49+
Channels
50+
</Menu.Item>
51+
</Sidebar>
5152

52-
<Sidebar.Pusher>
53-
<Segment basic>
54-
<Header as='h3'>Application Content</Header>
55-
<Image src='/images/wireframe/paragraph.png' />
56-
</Segment>
57-
</Sidebar.Pusher>
58-
</Sidebar.Pushable>
53+
<Sidebar
54+
as={Menu}
55+
animation='overlay'
56+
direction='right'
57+
inverted
58+
vertical
59+
visible={visible}
60+
>
61+
<Menu.Item as='a' header>
62+
File Permissions
63+
</Menu.Item>
64+
<Menu.Item as='a'>Share on Social</Menu.Item>
65+
<Menu.Item as='a'>Share by E-mail</Menu.Item>
66+
<Menu.Item as='a'>Edit Permissions</Menu.Item>
67+
<Menu.Item as='a'>Delete Permanently</Menu.Item>
68+
</Sidebar>
69+
70+
<Sidebar.Pusher>
71+
<Segment basic>
72+
<Header as='h3'>Application Content</Header>
73+
<Image src='/images/wireframe/paragraph.png' />
74+
</Segment>
75+
</Sidebar.Pusher>
76+
</Sidebar.Pushable>
77+
</Grid.Column>
78+
</Grid>
5979
)
6080
}
6181

0 commit comments

Comments
 (0)