Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: remove knobs usage #3988

Merged
merged 4 commits into from Jul 17, 2020
Merged

docs: remove knobs usage #3988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af908f0
docs: remove knobs usage
layershifter Jul 17, 2020
265191a
use vercel variable
layershifter Jul 17, 2020
55bc135
add config and use silent
layershifter Jul 17, 2020
0c8ee0b
fix siteRoot
layershifter Jul 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
69 changes: 20 additions & 49 deletions docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
View file
Open in desktop
@@ -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 = {
Expand All @@ -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.
Expand Down Expand Up @@ -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>
Expand Down
43 changes: 0 additions & 43 deletions docs/src/components/ComponentDoc/ComponentExample/ComponentExampleKnobs.js
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions docs/src/components/ComponentDoc/ExampleEditor/renderConfig.js
View file
Open in desktop
@@ -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'
Expand All @@ -18,7 +17,6 @@ export const babelConfig = {
}

export const externals = {
'@stardust-ui/docs-components': docsComponents,
faker,
lodash: require('lodash'),
'prop-types': PropTypes,
Expand Down
5 changes: 2 additions & 3 deletions docs/src/components/ExternalExampleLayout.js
View file
Open in desktop
@@ -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 = {
Expand Down
46 changes: 30 additions & 16 deletions docs/src/examples/modules/Popup/Usage/PopupExampleEventsEnabled.js
View file
Open in desktop
@@ -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>
)
}

Expand Down
122 changes: 71 additions & 51 deletions docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js
View file
Open in desktop
@@ -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>
)
}

Expand Down