@storybook/addon-knobs#select TypeScript Examples

The following examples show how to use @storybook/addon-knobs#select. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Test.stories.ts    From IOT-Map-Component with MIT License 6 votes vote down vote up 
shapeParams = (id) => ({
  type: select(
    'Shape type',
    [ShapeType.circle, ShapeType.square],
    0,
    'item ' + id
  ),
  color: color('Shape color', '#FFCC00', 'item ' + id),
  anchored: boolean('With anchor', false, 'item ' + id),
  plain: boolean('Plain shape', false, 'item ' + id),
  accuracy: accuracyParams(id),
  direction: directionParams(id)
})
Example #2
Source File: Example.stories.tsx    From ant-extensions with MIT License 6 votes vote down vote up 
Example = () => {
  const { i18n, t } = useTranslation();
  const [value, onChange] = useState<string | undefined>("$now");

  const size = select<AnyObject>("size", [undefined, "small", "middle", "large"], undefined);

  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ padding: "2em", maxWidth: 450, margin: "auto" }}>
        <Form layout="vertical" size={size}>
          <Form.Item label={t("labelInputDate")}>
            <RelativeDatePicker
              value={value}
              onChange={onChange}
              disabled={boolean("disabled", false)}
              readOnly={boolean("readOnly", false)}
              size={size}
            />
          </Form.Item>
          <Form.Item label="DateUtils.isValid">{DateUtils.isValid(value) ? "Yes" : "No"}</Form.Item>
          <Form.Item label="DateUtils.toString">{DateUtils.toString(value)}</Form.Item>
          <Form.Item label="DateUtils.toISOString">
            {DateUtils.toISOString(value)?.toString()}
          </Form.Item>
        </Form>
      </div>
    </ConfigProvider>
  );
}
Example #3
Source File: with-variants.stories.ts    From angular-component-library with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
withVariants = (): any => ({
    template: `
        <blui-app-bar
         [expandedHeight]="expandedHeight"
         [collapsedHeight]="collapsedHeight"
         [scrollThreshold]="scrollThreshold"
         [scrollContainerId]="scrollContainerId"
         (collapsedChange)="isCollapsed = $event"
         [variant]="variant">
            <div [style.top.px]="isCollapsed ? 0 : expandedYOffset">Content</div>
        </blui-app-bar>
    `,
    props: {
        collapsedHeight: number('collapsedHeight', 64),
        expandedHeight: number('expandedHeight', 200),
        scrollThreshold: number('scrollThreshold', 100),
        variant: select('variant', ['snap', 'collapsed', 'expanded'], 'snap'),
        expandedYOffset: number('Expanded Y Offset', 80),
        isCollapsed: undefined,
    },
})
Example #4
Source File: with-variants.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
withVariants = (): StoryFnReactReturnType => {
    const expandedHeight = number('expandedHeight', 200);
    const collapsedHeight = number('collapsedHeight', 64);
    const scrollThreshold = number('scrollThreshold', 136);
    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap');

    return (
        <AppBar
            expandedHeight={expandedHeight}
            collapsedHeight={collapsedHeight}
            scrollThreshold={scrollThreshold}
            variant={variant}
        >
            <Toolbar>
                <Typography variant="h6">Title</Typography>
            </Toolbar>
        </AppBar>
    );
}
Example #5
Source File: Avatar.stories.tsx    From ui with MIT License 6 votes vote down vote up 
demo = () => (
  <StoryContainer>
    <Avatar
      size={select("Size", ["default", "small"], "default")}
      disabled={boolean("Disabled", false)}
      intent={select(
        "Intent",
        ["default", "active", "pending", "invalid"],
        "active",
      )}
      onClick={action("button-click")}
      selectable={boolean("Selectable", true)}
      transformCase={select(
        "transformCase",
        ["none", "uppercase"],
        "uppercase",
      )}
    >
      {text("Text", "RL")}
    </Avatar>
  </StoryContainer>
)
Example #6
Source File: badge.stories.tsx    From skin-react with MIT License 6 votes vote down vote up 
Badges = () => {
  const bgColor = select('Background Color', BgColorOptions, '', 'BG color');
  const content = number(
    'number',
    100,
    {
      range: true,
      min: 1,
      max: 200,
      step: 50
    },
    '1'
  );
  const props = {...defaultProps, bgColor};
  return <Badge {...props} aria-label="unread items" number={content} />;
}
Example #7
Source File: Button.stories.tsx    From substrate-api-explorer with Apache License 2.0 6 votes vote down vote up 
storiesOf('UI|Button', module).add('default', () => {
  const fluidKnob = boolean('Fluid', false, 'props')
  const disabledKnob = boolean('Disabled', false, 'props')
  const themeKnob = select('Theme', ButtonThemes, 'primary', 'props')
  const condensedKnob = boolean('Condensed', false, 'props')
  const textKnob = text('Text', 'Button', 'props')

  return (
    <div style={{ padding: 24, display: 'flex', justifyContent: 'center' }}>
      <Button
        fluid={fluidKnob}
        disabled={disabledKnob}
        theme={themeKnob}
        condensed={condensedKnob}
        text={textKnob}
      />
    </div>
  )
})
Example #8
Source File: Icon.stories.tsx    From react-native-base-ui with MIT License 6 votes vote down vote up 
getProps = (): IconProps => ({
  name: select<ICON_NAME>(
    'name',
    Object.keys(ICON_SETS).reduce((result, key) => {
      // @ts-ignore
      result[key] = key;
      return result;
    }, {}),
    'show'
  ),
  size: number('size', 46),
  // @ts-ignore
  color: color('color', undefined),
})
Example #9
Source File: WeirdSatellites.stories.tsx    From react-planet with MIT License 6 votes vote down vote up 
storiesOf('Planet', module).add('weird satelites', () => {
	const classes = useStyles();

	const satelliteOrientation = select(
		'satellite Orientation',
		{
			unset: undefined,
			DEFAULT: 'DEFAULT',
			INSIDE: 'INSIDE',
			OUTSIDE: 'OUTSIDE',
			READABLE: 'READABLE',
		},
		'READABLE'
	);

	return withTheme(
		<div className={classes.root}>
			<Planet
				centerContent={<div className={classes.planet} />}
				orbitRadius={200}
				open
				autoClose
				satelliteOrientation={satelliteOrientation}
			>
				{generateSatellites(9, true, !!satelliteOrientation)}
			</Planet>
		</div>
	);
});
Example #10
Source File: Features.stories.tsx    From devtools-ds with MIT License 6 votes vote down vote up 
AllIcons = () => {
  const size = select("Size", sizes, "x-large");
  const fill = color("Color", "rgba(0,0,0,.8)");
  return (
    <IconTable>
      {names.map((iconName) => {
        const Icon = mappings[iconName];

        if (typeof Icon !== "function") {
          return null;
        }

        return (
          <IconRow key={iconName}>
            <Icon size={size} fill={fill} />
            <IconText>{iconName}</IconText>
          </IconRow>
        );
      })}
    </IconTable>
  );
}
Example #11
Source File: alert.stories.ts    From kickstand-ui with MIT License 6 votes vote down vote up 
defaultHeading = () => {
    const color = select('color', colors, 'primary');
    const header = text('header', 'The Facts of Life by Michael Scott');
    const note = boolean('note', false);
    const dismissible = boolean('dismissible', false);
    const display = boolean('display', false);
    const icon = text('icon', 'warning');
    const hideIcon = boolean('hide-icon', false);
    return (`
        <div class="m-xxl">
            <ks-alert id="alert_test" icon="${icon}" hide-icon="${hideIcon}" header="${header}" note="${note}" color="${color}" dismissible="${dismissible}" display="${display}">${dummyText}</ks-alert>
            <p>Some random text.</p>
            <div>
                <ks-button shows="alert_test">Show Alert</ks-button>
            </div>
        </div>
    `);
}
Example #12
Source File: Modal.stories.tsx    From chroma-react with MIT License 6 votes vote down vote up 
ModalStory: React.FC = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Container>
      <Button
        aria-haspopup="dialog"
        aria-expanded={isOpen}
        onClick={() => setIsOpen(!isOpen)}
      >
        Open Modal
      </Button>
      <Modal
        isOpen={isOpen}
        title={text('title', 'Dialog Example')}
        fullWidth={boolean('is full width?', false)}
        size={select('size', [0, 1], 0)}
        onDismiss={() => {
          console.log('closing...');
          setIsOpen(false);
        }}
        disableDismissOnClickOutside={boolean(
          'disableDismissOnClickOutside',
          false
        )}
      />
    </Container>
  );
}
Example #13
Source File: Avatar.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Interactive = () => (
  <StoryContainer title="Interactive">
    <Avatar
      type={select('Type', avatarTypes, 'icon') as AvatarTypes}
      text={text('Text', 'Natura Design System')}
      imgSource={text('URL', '')}
      iconName={select('IconName', iconNames as Array<IconName>, 'outlined-default-mockup' as IconName)}
      size={select('Size', avatarSizes, 'medium') as AvatarSizes}
    />
  </StoryContainer>
)
Example #14
Source File: GameState.stories.tsx    From react-js-tutorial with MIT License 6 votes vote down vote up 
GameStateInfo = () => (
  <GameStateComponent
    rebuild={action("rebuild click") as typeof actions.rebuild}
    winner={text("winner", "")}
    gameStatus={select("gameStatus", GameStatus, GameStatus.NewGame)}
    nextTurn={text("nextTurn", firstPlayerMark)}
    moves={number("moves", 10)}
  />
)
Example #15
Source File: CallToActionCard.story.tsx    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
CallToActionCardStories.add('default', () => {
  const ctaElements: { [key: string]: JSX.Element } = {
    custom: <h1>This is just H1 tag, you can any component as CTA element</h1>,
    button: (
      <Button size="lg" icon="fa fa-plus" onClick={action('cta button clicked')}>
        Add datasource
      </Button>
    ),
  };
  const ctaElement = select(
    'Call to action element',
    {
      Custom: 'custom',
      Button: 'button',
    },
    'custom'
  );

  return renderComponentWithTheme(CallToActionCard, {
    message: text('Call to action message', 'Renders message prop content'),
    callToActionElement: ctaElements[ctaElement],
    footer: text('Call to action footer', 'Renders footer prop content'),
  });
});
Example #16
Source File: with-full-config.stories.ts    From angular-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withFullConfig = (): any => ({
    styles: [
        `
       ::ng-deep .showBackgroundImage .blui-app-bar-toolbar {
            background-color: unset!important;
        }
       ::ng-deep .showBackgroundImage .blui-app-bar-background {
          background-image: url(${bgImage})!important;
          background-size: cover!important;
          opacity: .5;
        }
    `,
    ],
    template: `
        <blui-app-bar
             [class.showBackgroundImage]="showBackgroundImage"
             [expandedHeight]="expandedHeight"
             [collapsedHeight]="collapsedHeight"
             [scrollThreshold]="scrollThreshold"
             [scrollContainerId]="scrollContainerId"
             [variant]="variant"
             (collapsedChange)="isCollapsed = $event">
                 <button blui-icon mat-icon-button style="margin: 0 -8px">
                    <mat-icon>menu</mat-icon>
                 </button>
                 <blui-three-liner
                    [title]="title"
                    [subtitle]="subtitle"
                    [info]="info"
                    style="margin: 0 40px"
                    [style.top.px]="isCollapsed ? 0 : expandedYOffset">
                 </blui-three-liner>
                 <div blui-actions style="display: flex; margin: 0 -8px;">
                    <mat-icon style="margin: 0 8px">light</mat-icon>
                    <mat-icon style="margin: 0 8px">face</mat-icon>
                    <mat-icon style="margin: 0 8px">home</mat-icon>
                 </div>
        </blui-app-bar>
    `,
    props: {
        collapsedHeight: number('collapsedHeight', 64),
        expandedHeight: number('expandedHeight', 200),
        scrollThreshold: number('scrollThreshold', 100),
        variant: select('variant', ['snap', 'collapsed', 'expanded'], 'snap'),
        title: text('title', 'title'),
        subtitle: text('subtitle', 'subtitle'),
        info: text('info', 'info'),
        showBackgroundImage: boolean('Show Background Image', true),
        isCollapsed: undefined,
        expandedYOffset: number('Expanded Y Offset', 80),
    },
})