How to use the @storybook/addon-knobs/react.object function in @storybook/addon-knobs

To help you get started, we’ve selected a few @storybook/addon-knobs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github commercetools / ui-kit / src / components / inputs / localized-multiline-text-input / localized-multiline-text-input.story.js View on Github external
onBlur={action('onBlur')}
              onFocus={action('onFocus')}
              hideLanguageExpansionControls={boolean(
                'hideLanguageExpansionControls',
                false
              )}
              defaultExpandLanguages={
                // we need to set undefined instead of false to avoid prop-type
                // warnings in case hideLanguageExpansionControls is true
                defaultExpandLanguages || undefined
              }
              defaultExpandMultilineText={defaultExpandMultilineText}
              isAutofocussed={boolean('isAutofocussed', false)}
              isDisabled={boolean('isDisabled', false)}
              isReadOnly={boolean('isReadOnly', false)}
              placeholder={object('placeholder', { en: '', de: '' })}
              horizontalConstraint={select(
                'horizontalConstraint',
                ['m', 'l', 'xl', 'scale'],
                'm'
              )}
              hasError={boolean('hasError', false)}
              hasWarning={boolean('hasWarning', false)}
              errors={
                Object.values(errors).some(error => error.length > 0)
                  ? Object.entries(errors).reduce((acc, [language, error]) => {
                      if (error.length === 0) return acc;
                      acc[language] = {error};
                      return acc;
                    }, {})
                  : undefined
              }
github uber / react-vis / website / storybook / lineseries-story.js View on Github external
'style'
      )}
      stroke={color('stroke', props.stroke || '#12939a', 'style')}
      strokeDasharray={text(
        'strokeDasharray',
        props.strokeDasharray || '',
        'style'
      )}
      strokeStyle={select(
        'strokeStyle',
        {solid: 'solid', dashed: 'dashed'},
        props.strokeStyle || 'solid',
        'style'
      )}
      strokeWidth={text('strokeWidth', props.strokeWidth || '', 'style')}
      style={object('style', props.style || {}, 'style')}
    />
  );
}
github elasticpath / react-pwa-reference-storefront / components / src / AppModalBundleConfiguration / appmodalbundleconfiguration.main.stories.tsx View on Github external
.add('AppModalBundleConfigurationMain', () => {
    mockAppModalBundleConfigurationMain();
    let handleModalCloseFuncText = text('handleModalClose','() => {alert("handleModalClose invoked")}');
    
    return (
      textToFunc(handleModalCloseFuncText)} 
        bundleConfigurationItems={object('bundleLineItem',bundleLineItem)} 
        openModal={boolean('isOpenModal', true)} 
      />
    );
  });
github elasticpath / react-pwa-reference-storefront / components / src / B2bEditAccount / b2b.editaccount.stories.tsx View on Github external
.add('B2bEditAccount', () => {
    let handleCloseFuncText = text('handleClose','() => {alert("handleClose invoked")}');
    let handleUpdateFuncText = text('handleUpdate', '() => {alert("handleUpdate invoked")}');
    
    return (
      {textToFunc(handleCloseFuncText)}}
        editSubAccountUri={text('editSubAccountUri', editSubAccountUri)}
        handleUpdate={()=>{textToFunc(handleUpdateFuncText)}}
        isOpen={boolean('isOpen', true)}
        accountData={object('accountData', accountData)}
        editMetadataUri={text('editMetadataUri', editMetadataUri)}
      />
    );
  });
github elasticpath / react-pwa-reference-storefront / components / src / AppHeaderNavigation / appheadernavigation.main.stories.tsx View on Github external
.add('AppHeaderNavigationMain', () => {
    mockFetchNavigationData();
    
    let isOfflineCheckFuncText = text('isOfflineCheck','() => {alert("isOfflineCheck invoked")}');
    let onFetchNavigationErrorFuncText = text('onFetchNavigationError','() => {alert("onFetchNavigationError invoked")}');
    
    return (
      <div style="{{">
        
           { textToFunc(isOfflineCheckFuncText) }} 
            checkedLocation={boolean('checkedLocation', false)}
            onFetchNavigationError={()=&gt;{ textToFunc(onFetchNavigationErrorFuncText) }}
            appHeaderNavigationLinks={object('appHeaderNavigationLinks', {})}
          /&gt;
        
      </div>
    );
  });
github i-novus-llc / n2o-framework / frontend / n2o / src / components / widgets / Table / cells / ImageCell / ImageCell.story.js View on Github external
.add('Метаданные', () => {
    const props = {
      id: text('id', ImageCellJson.id),
      shape: select('shape', Object.values(imageShapes), ImageCellJson.shape),
      style: object('style', ImageCellJson.style),
      className: text('className', ImageCellJson.className),
      title: text('title', ImageCellJson.title),
      model: {
        url:
          'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjJiNDE2OGJmYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2MmI0MTY4YmZhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=',
      },
    };

    const tableProps = {
      headers: [
        {
          id: 'knobs',
          component: TextTableHeader,
          label: 'Ячейка с картинкой',
        },
      ],