@storybook/addon-knobs select TypeScript Examples

Source File: Test.stories.ts From IOT-Map-Component with MIT License

6 votes

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)
})

Source File: Example.stories.tsx From ant-extensions with MIT License

6 votes

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>
  );
}

Source File: with-variants.stories.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

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,
    },
})

Source File: with-variants.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License

6 votes

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>
    );
}

Source File: Avatar.stories.tsx From ui with MIT License

6 votes

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>
)

Source File: badge.stories.tsx From skin-react with MIT License

6 votes

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} />;
}

Source File: Button.stories.tsx From substrate-api-explorer with Apache License 2.0

6 votes

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>
  )
})

Source File: Icon.stories.tsx From react-native-base-ui with MIT License

6 votes

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),
})

Source File: WeirdSatellites.stories.tsx From react-planet with MIT License

6 votes

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>
	);
});

Source File: Features.stories.tsx From devtools-ds with MIT License

6 votes

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>
  );
}

Source File: alert.stories.ts From kickstand-ui with MIT License

6 votes

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>
    `);
}

Source File: Modal.stories.tsx From chroma-react with MIT License

6 votes

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>
  );
}

Source File: Avatar.stories.tsx From natds-rn with ISC License

6 votes

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>
)

Source File: GameState.stories.tsx From react-js-tutorial with MIT License

6 votes

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)}
  />
)

Source File: CallToActionCard.story.tsx From grafana-chinese with Apache License 2.0

6 votes

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'),
  });
});

Source File: with-full-config.stories.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

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),
    },
})

@storybook/addon-knobs#select TypeScript Examples