@storybook/addon-knobs#boolean TypeScript Examples

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

basicFormWithMultiSelect = (): JSX.Element => {
  const validationSchema = Yup.object({
    friends: Yup.array().of(Yup.string()).required().min(1, 'Required'),
  });

  return (
    <Card raised style={{padding: '16px', minWidth: '768px'}}>
      <SQForm
        initialValues={MOCK_FORM_FOR_MULTISELECT}
        onSubmit={handleSubmit}
        validationSchema={validationSchema}
        muiGridProps={{
          spacing: 2,
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <SQFormMultiSelect
          name="friends"
          label="Friends"
          size={5}
          onChange={action('Friends selected')}
          useSelectAll={boolean('Use Select All', true)}
        >
          {MOCK_FRIENDS_OPTIONS}
        </SQFormMultiSelect>
        <Grid item style={{alignSelf: 'flex-end'}}>
          <SQFormButton>Submit</SQFormButton>
        </Grid>
      </SQForm>
    </Card>
  );
}

Example = () => {
  const { i18n } = useTranslation();

  const eventsFromNames = actions("onChange");

  return (
    <ConfigProvider direction={i18n.dir()}>
      <div style={{ position: "fixed", top: 0, bottom: 0, left: 0, right: 0 }}>
        <PageMaker
          config={config}
          isEditing={boolean("Edit", true)}
          widgets={widgets}
          onAdd={addNew}
          renderWidget={(widget) => <div>Widget here - {widget}</div>}
          {...eventsFromNames}
        />
      </div>
    </ConfigProvider>
  );
}

storiesOf('Accordion', module)
  .addDecorator(withKnobs)
  .add('accordion', () => {
    const multi = boolean('multi', false);
    const background = boolean('background', true);
    return {
      moduleMetadata: {
        imports: [BrowserAnimationsModule, AccordionModule],
      },
      template: /* HTML */ `
        <aui-accordion
          [multi]="multi"
          [background]="background"
        >
          <aui-accordion-item [disabled]="true">
            <div auiAccordionItemHeader>header1</div>
            <div>accordion item content1</div>
          </aui-accordion-item>
          <aui-accordion-item>
            <div auiAccordionItemHeader>header2</div>
            <div>accordion item content2</div>
          </aui-accordion-item>
          <aui-accordion-item>
            <div auiAccordionItemHeader>header3</div>
            <div>accordion item content3</div>
          </aui-accordion-item>
        </aui-accordion>
      `,
      props: {
        multi,
        background,
      },
    };
  });

withFullConfig = (): any => ({
    template: `
        <blui-channel-value [value]="value" [units]="units" [color]="color" [prefix]="prefix" [unitSpace]="unitSpace">
            <mat-icon *ngIf="showIcon" [style.color]="iconColor" [style.transform]="invertRTL()">trending_up</mat-icon>
        </blui-channel-value> 
    `,
    props: {
        value: text('value', '123'),
        units: text('units', 'hz'),
        iconColor: color('icon.color', Colors.red[500]),
        showIcon: boolean('Show Icon', true),
        color: color('color', Colors.black[500]),
        prefix: boolean('prefix', false),
        unitSpace: select('unitSpace', ['show', 'hide', 'auto'], 'auto'),
        invertRTL: invertRTL,
    },
})

withFullConfig = (): StoryFnReactReturnType => {
    const value = text('value', '123');
    const units = text('units', 'hz');
    const textColor = color('color', Colors.black[500]);
    const iconColor = color('icon.htmlColor', Colors.red[500]);
    const icon = boolean('Show Icon', true) ? (
        <Trend htmlColor={iconColor} style={getLeftToRightIconTransform()} />
    ) : (
        undefined
    );
    const fontSize = number('fontSize', 30);
    const prefix = boolean('prefix', false);
    const unitSpace = select('unitSpace', ['show', 'hide', 'auto'], 'auto');
    return (
        <ChannelValue
            value={value}
            units={units}
            color={textColor}
            icon={icon}
            fontSize={fontSize}
            prefix={prefix}
            unitSpace={unitSpace}
        />
    );
}

controls = () => {
  const controls = boolean("controls", true);

  return (
    <Stream
      src={defaultVideo}
      controls={controls}
      loop
      muted
      {...streamActionProps}
    />
  );
}

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

_WindowNotice = () => {
  const hidden = boolean('hidden', false);
  return (
    <div>
      <WindowNotice
        {...defaultProps}
        title="Your first order has been placed!"
        id="window-notice-1"
        hidden={hidden}
        a11yText="Window Notice"
        footer={
          <Button size="large" aria-label="Continue Button">
            Continue
          </Button>
        }
      >
        <p>You'll get a confirmation email soon. The rest of your items are now ready to checkout.</p>
      </WindowNotice>
    </div>
  );
}

storiesOf('COMPONENTS|CompareApiCard', module).add('default', () => {
  const nameKnob = text('name', 'fooBar', 'props')
  const pathKnob = text('path', 'api.query.foo.bar', 'props')
  const existsMainKnob = boolean('exists.main', true, 'props')
  const existsComparisonKnob = boolean('exists.comparison', true, 'props')
  const mainApiTypeKnob = text('mainApiType', 'number', 'props')
  const comparisonApiTypeKnob = text('comparisonApiType', 'string', 'props')
  const descriptionKnob = text(
    'description',
    'This is the description.',
    'props'
  )
  const isNewKnob = boolean('states.isNew', true, 'props')
  const isAlteredKnob = boolean('states.isAltered', true, 'props')

  return (
    <div style={{ maxWidth: 800, padding: '24px' }}>
      <CompareApiCard
        name={nameKnob}
        path={pathKnob}
        exists={{ main: existsMainKnob, comparison: existsComparisonKnob }}
        mainApiParams={[{ name: 'foo' }, { name: 'bar' }]}
        comparisonApiParams={[{ name: 'baz' }, { name: 'qux' }]}
        mainApiType={mainApiTypeKnob}
        comparisonApiType={comparisonApiTypeKnob}
        description={descriptionKnob}
        states={{
          isNew: isNewKnob,
          isAltered: isAlteredKnob
        }}
      />
    </div>
  )
})

createProps = (): InputProps => ({
  size: optionsKnob(
    'size',
    {
      default: INPUT_SIZE.default,
      large: INPUT_SIZE.large,
      compact: INPUT_SIZE.compact,
      mini: INPUT_SIZE.mini,
    },
    INPUT_SIZE.default,
    {
      display: 'inline-radio',
    }
  ),
  positive: boolean('positive', false),
  error: boolean('error', false),
  disabled: boolean('disabled', false),
  clearable: boolean('clearable', false),

  // actions
  onChangeText: action('on change text'),
  onFocus: action('on focus'),
  onBlur: action('on blur'),
})

storiesOf('Planet', module).add('menu', () => {
	const classes = useStyles();

	const bounce = boolean('bounce', false);
	const bounceOnClose = boolean('bounce on close', false);

	return withTheme(
		<div className={classes.root}>
			<Planet
				centerContent={
					<PaperButton color="#4da37c" iconColor="LIGHT">
						<MenuIcon />
					</PaperButton>
				}
				hideOrbit
				autoClose
				orbitRadius={60}
				bounce={bounce}
				bounceOnClose={bounceOnClose}
			>
				<PaperButton color="white" iconColor="DARK">
					<InfoIcon />
				</PaperButton>
				<PaperButton color="white" iconColor="DARK">
					<EditIcon />
				</PaperButton>
				<PaperButton color="white" iconColor="DARK">
					<DeleteIcon />
				</PaperButton>
			</Planet>
		</div>
	);
});

Playground = () => {
  const name = text("Tag Name", "div");
  const isSelfClosing = boolean("Self Closing", false);
  const isClosingTag = boolean("Closing", false);
  const key = text("Property Key", "class");
  const value = text("Property Value", "nodeClass");

  const property = {
    [key]: value,
  };

  return (
    <Node
      closing={isClosingTag}
      selfClosing={isSelfClosing}
      name={name}
      properties={property}
    />
  );
}

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

AllButtonFloatStory: React.FunctionComponent = () => (
  <Container
    containerStyles={{
      position: 'fixed',
      height: '100%',
      top: 0,
      bottom: 0,
      width: '100%',
    }}
  >
    <ButtonFloat
      justify="left"
      icon={Plus}
      disabled={boolean('disabled', false)}
    >
      Button Float
    </ButtonFloat>
    <ButtonFloat
      justify="center"
      icon={Edit}
      size={1}
      disabled={boolean('disabled', false)}
    >
      Button Float
    </ButtonFloat>
    <ButtonFloat
      justify="right"
      size={0}
      disabled={boolean('disabled', false)}
      trailingIcon={ChevronDown}
    >
      Button Float
    </ButtonFloat>
  </Container>
)

Interactive = () => (
  <StoryContainer title="Interactive">
    <Button
      disabled={boolean('Disabled', false)}
      onPress={onPress}
      size={select('Size', buttonSizes, 'semiX') as ButtonSizes}
      text={textKnob('Text', 'Natura Design System')}
      type={select('Types', buttonTypes, 'contained') as ButtonTypes}
    />
  </StoryContainer>
)

getKnobs = () => {
  return {
    disabled: boolean('Disabled', false),
    text: text('Button Text', 'Click me!'),
    options: object('Options', [
      {
        label: 'A',
        value: 'A',
        children: [
          { label: 'B', value: 'B' },
          { label: 'C', value: 'C' },
        ],
      },
      { label: 'D', value: 'D' },
    ]),
  };
}

Default = () => (
  <Button
    active={boolean('Active', false)}
    modifier={radios('Different buttons', variant, 'outlined') as positionAll}
    disabled={boolean('Disabled', false)}
    loading={boolean('Loading', false)}
    onClick={action('onClick')}
  >
    {text('Text', 'Hello Button')}
  </Button>
)