diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 1b266d99632..e22299234fc 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -1,4 +1,4 @@ -import React, { createElement, Fragment } from 'react'; +import React, { createElement } from 'react'; import { GuidePage, GuideSection } from './components'; @@ -263,11 +263,7 @@ const createExample = (example, customTitle) => { let playgroundComponent; if (playground) { - if (Array.isArray(playground)) { - playgroundComponent = playground.map((elm, idx) => { - return {playgroundCreator(elm())}; - }); - } else playgroundComponent = playgroundCreator(playground()); + playgroundComponent = playgroundCreator(playground()); } const component = () => ( diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index c79b328a8a4..37e724d726f 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react'; -import { assertUnreachable, PropTypes } from 'react-view'; +import React from 'react'; +import { assertUnreachable, PropTypes, useValueDebounce } from 'react-view'; import { EuiSpacer, EuiSwitch, @@ -15,8 +15,6 @@ import { EuiTableHeaderCell, EuiTableRow, EuiTableRowCell, - EuiTextColor, - EuiFormRow, } from '../../../../src/components/'; import { @@ -46,26 +44,17 @@ const Label = ({ children, tooltip }) => { const Knob = ({ name, - error: errorMsg, + error, type, defaultValue, - val, - set, + val: globalVal, + set: globalSet, options = {}, description, placeholder, custom, - state, }) => { - const [error, setError] = useState(errorMsg); - - useEffect(() => { - if (custom && custom.checkDep) { - setError(custom.checkDep(val, state)); - } - }, [state, val, custom]); - - let knobProps = {}; + const [val, set] = useValueDebounce(globalVal, globalSet); switch (type) { case PropTypes.Ref: return ( @@ -103,45 +92,27 @@ const Knob = ({ case PropTypes.String: case PropTypes.Date: - if (custom && custom.validator) { - knobProps = {}; - knobProps.onChange = e => { - const value = e.target.value; - if (custom.validator(value)) set(value); - else set(undefined); - }; - } else if (custom && custom.sanitize) { - knobProps = {}; - knobProps.value = val; - knobProps.onChange = e => { - const value = e.target.value; - set(custom.sanitize(value)); - }; - } else { - knobProps = {}; - knobProps.value = val; - knobProps.onChange = e => { - const value = e.target.value; - set(value); - }; - } - return ( - 0} - error={error} - fullWidth> + <> { + const value = e.target.value; + if (custom && custom.validator) { + if (custom.validator(value)) set(value); + else set(undefined); + } else { + set(value); + } + }} aria-label={description} - isInvalid={error && error.length > 0} compressed fullWidth - {...knobProps} /> - - ); + {error &&
error {error}
} + + ); case PropTypes.Boolean: return ( <> @@ -150,14 +121,13 @@ const Knob = ({ label="" checked={val} onChange={e => { - set(e.target.checked); + globalSet(e.target.checked); }} compressed /> {error &&
error {error}
} ); - case PropTypes.Enum: const optionsKeys = Object.keys(options); const numberOfOptions = optionsKeys.length; @@ -181,7 +151,7 @@ const Knob = ({ onChange={id => { let val = id; if (val.includes('__')) val = val.split('__')[0]; - set(val); + globalSet(val); }} name={`Select ${name}`} /> @@ -195,52 +165,28 @@ const Knob = ({ })); return ( - 0} - error={error} - fullWidth> + <> { - set(e.target.value); + globalSet(e.target.value); }} - isInvalid={error && error.length > 0} aria-label={`Select ${name}`} compressed /> - + {error &&
error {error}
} + ); } - case PropTypes.Custom: - if (custom && custom.use) { - switch (custom.use) { - case 'switch': - return ( - <> - { - const value = e.target.checked; - - set(value ? value : undefined); - }} - compressed - /> - - ); - } - } - case PropTypes.ReactNode: case PropTypes.Function: case PropTypes.Array: case PropTypes.Object: + case PropTypes.Custom: return null; default: return assertUnreachable(); @@ -264,30 +210,13 @@ const KnobColumn = ({ state, knobNames, error, set }) => { {markup(humanizedType)} ); - let humanizedName = ( - {name} - ); - - if ( - state[name].custom && - state[name].custom.origin && - state[name].custom.origin.required - ) { - humanizedName = ( - - {humanizedName}{' '} - (required) - - ); - } - return ( - {humanizedName} + {name} {state[name].description && ( <>
@@ -328,9 +257,7 @@ const KnobColumn = ({ state, knobNames, error, set }) => { set={value => set(value, name)} enumName={state[name].enumName} defaultValue={state[name].defaultValue} - custom={state[name] && state[name].custom} - state={state} - orgSet={set} + custom={state[name].custom} /> diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index 7c23dd19114..6c23d46a956 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import classNames from 'classnames'; import format from 'html-format'; -import { useView, Compiler, Placeholder } from 'react-view'; +import { useView, Compiler, Error, Placeholder } from 'react-view'; import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components'; import Knobs from './knobs'; @@ -61,9 +61,15 @@ export default ({ config, setGhostBackground }) => { placeholder={Placeholder} /> + - + {getSnippet(params.editorProps.code)} diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js index 3809e60d88f..97e82585bb8 100644 --- a/src-docs/src/services/playground/props.js +++ b/src-docs/src/services/playground/props.js @@ -1,7 +1,7 @@ /* eslint-disable guard-for-in */ import { PropTypes } from 'react-view'; -const getProp = prop => { +const getProp = (prop, propName) => { const newProp = {}; if (prop.description) newProp.description = prop.description; newProp.custom = { origin: prop }; @@ -23,8 +23,13 @@ const getProp = prop => { newProp.required = prop.required; if (prop.defaultValue) { newProp.defaultValue = prop.defaultValue.value; + newProp.value = prop.defaultValue.value.substring( + 1, + prop.defaultValue.value.length - 1 + ); + } else { + newProp.value = undefined; } - newProp.value = undefined; newProp.options = {}; for (const i in prop.type.value) { const val = prop.type.value[i].value; @@ -35,24 +40,30 @@ const getProp = prop => { case 'number': newProp.type = PropTypes.Number; - if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; + newProp.placeholder = propName; + if (prop.defaultValue) newProp.value = prop.defaultValue.value; + else newProp.value = 0; break; case 'string': newProp.type = PropTypes.String; - if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; + newProp.placeholder = propName; + if (prop.defaultValue) newProp.value = prop.defaultValue.value; + else newProp.value = ''; break; case 'func': newProp.type = PropTypes.Function; + newProp.placeholder = propName; break; case 'node': case 'element': newProp.type = PropTypes.ReactNode; - if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; - newProp.value = undefined; + newProp.placeholder = propName; + if (prop.defaultValue) newProp.value = prop.defaultValue.value; + else newProp.value = undefined; break; default: @@ -67,7 +78,7 @@ const propUtilityForPlayground = props => { const modifiedProps = {}; for (const key in props) { - if (props[key].type) modifiedProps[key] = getProp(props[key]); + if (props[key].type) modifiedProps[key] = getProp(props[key], key); } return modifiedProps; }; diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 60f815c12c1..703c6c4fbb3 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -14,11 +14,6 @@ import { EuiBadgeGroup, EuiCallOut, } from '../../../../src/components'; -import { - badgeConfig, - betaBadgeConfig, - notificationBadgeConfig, -} from './playground'; import Badge from './badge'; @@ -322,5 +317,4 @@ export const BadgeExample = { demo: , }, ], - playground: [badgeConfig, betaBadgeConfig, notificationBadgeConfig], }; diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js deleted file mode 100644 index 18163a71828..00000000000 --- a/src-docs/src/views/badge/playground.js +++ /dev/null @@ -1,187 +0,0 @@ -import { PropTypes } from 'react-view'; -import { - EuiBadge, - EuiNotificationBadge, - EuiBetaBadge, -} from '../../../../src/components/'; -import { - propUtilityForPlayground, - mapOptions, -} from '../../services/playground'; -import { iconTypes } from '../icon/icons'; -import * as t from '@babel/types'; - -const iconOptions = mapOptions(iconTypes); - -export const badgeConfig = () => { - const docgenInfo = Array.isArray(EuiBadge.__docgenInfo) - ? EuiBadge.__docgenInfo[0] - : EuiBadge.__docgenInfo; - const propsToUse = propUtilityForPlayground(docgenInfo.props); - - propsToUse.onClick = { - ...propsToUse.onClick, - type: PropTypes.Custom, - value: undefined, - custom: { - ...propsToUse.onClick.custom, - use: 'switch', - label: 'Simulate', - modifyOtherProps: (val, state, set) => { - console.log(val, 'state', state); - if (val) { - if (!state.onClickAriaLabel.value) { - set('onClickAriaLabel', 'onClickAriaLabel'); - } - } else { - set(state.onClickAriaLabel.value, 'onClickAriaLabel'); - } - }, - }, - }; - - propsToUse.children = { - type: PropTypes.String, - value: 'Badge content', - hidden: true, - custom: { - sanitize: val => { - return val.replace(/<(?:"[^"]"['"]|'[^']'['"]|[^'">])+>/g, ''); - }, - }, - }; - - propsToUse.onClickAriaLabel = { - ...propsToUse.onClickAriaLabel, - type: PropTypes.String, - custom: { - ...propsToUse.onClickAriaLabel.custom, - checkDep: (val, state) => { - if (state.onClick.value && !val) { - return 'When passing onClick to EuiBadge, you must also provide onClickAriaLabel'; - } - return undefined; - }, - }, - }; - - propsToUse.iconOnClickAriaLabel = { - ...propsToUse.iconOnClickAriaLabel, - type: PropTypes.String, - }; - - propsToUse.iconType = { - ...propsToUse.iconType, - value: undefined, - type: PropTypes.String, - custom: { - ...propsToUse.iconType.custom, - validator: val => iconOptions[val], - }, - }; - - propsToUse.color = { - ...propsToUse.color, - value: undefined, - type: PropTypes.String, - }; - - return { - config: { - componentName: 'EuiBadge', - props: propsToUse, - scope: { - EuiBadge, - }, - imports: { - '@elastic/eui': { - named: ['EuiBadge'], - }, - }, - customProps: { - onClick: { - generate: val => { - if (!val) return null; - const obj = t.arrowFunctionExpression( - [], - t.blockStatement([]), - false - ); - return obj; - }, - }, - }, - }, - }; -}; - -export const betaBadgeConfig = () => { - const docgenInfo = Array.isArray(EuiBetaBadge.__docgenInfo) - ? EuiBetaBadge.__docgenInfo[0] - : EuiBetaBadge.__docgenInfo; - const propsToUse = propUtilityForPlayground(docgenInfo.props); - - propsToUse.label = { - ...propsToUse.label, - type: PropTypes.String, - value: 'content', - }; - - propsToUse.tooltipContent = { - ...propsToUse.tooltipContent, - type: PropTypes.String, - }; - - propsToUse.iconType = { - ...propsToUse.iconType, - value: undefined, - type: PropTypes.String, - custom: { - ...propsToUse.iconType.custom, - validator: val => iconOptions[val], - }, - }; - - return { - config: { - componentName: 'EuiBetaBadge', - props: propsToUse, - scope: { - EuiBetaBadge, - }, - imports: { - '@elastic/eui': { - named: ['EuiBetaBadge'], - }, - }, - }, - }; -}; - -export const notificationBadgeConfig = () => { - const docgenInfo = Array.isArray(EuiNotificationBadge.__docgenInfo) - ? EuiNotificationBadge.__docgenInfo[0] - : EuiNotificationBadge.__docgenInfo; - const propsToUse = propUtilityForPlayground(docgenInfo.props); - - propsToUse.children = { - type: PropTypes.String, - value: '10', - hidden: true, - }; - - return { - config: { - componentName: 'EuiNotificationBadge', - props: propsToUse, - scope: { - EuiNotificationBadge, - }, - imports: { - '@elastic/eui': { - named: ['EuiNotificationBadge'], - }, - }, - }, - }; -};