@storybook/addon-knobs#number TypeScript Examples

Interactive = () => {
  const [value, setValue] = React.useState(0)

  return (
    <StoryContainer title="Interactive">
      <Counter
        decrementButtonAccessibilityHint={text('Decrement button Accessibility Hint', 'A hint about what the decrement button does')}
        decrementButtonAccessibilityLabel={text('Decrement button Accessibility Label', 'Description of what the decrement button does')}
        incrementButtonAccessibilityHint={text('Increment button Accessibility Hint', 'A hint about what the increment button does')}
        incrementButtonAccessibilityLabel={text('Increment button Accessibility Label', 'Description of what the increment button does')}
        inputAccessibilityHint={text('Input Accessibility Hint', 'A hint about what the input does')}
        inputAccessibilityLabel={text('Input Accessibility Label', 'Description of what the input does')}
        disabled={boolean('Disabled', false)}
        label={text('Label', 'Interactive example')}
        maxValue={number('Maximum value for the counter', 99)}
        minValue={number('Minimum value for the counter', 0)}
        onDecrement={() => setValue(value - 1)}
        onIncrement={() => setValue(value + 1)}
        value={value}
      />
    </StoryContainer>
  )
}

withBasicUsage = (): StoryFnReactReturnType => {
    const expandedHeight = number('expandedHeight', 200);
    const collapsedHeight = number('collapsedHeight', 64);
    const scrollThreshold = number('scrollThreshold', 136);
    return (
        <AppBar expandedHeight={expandedHeight} collapsedHeight={collapsedHeight} scrollThreshold={scrollThreshold}>
            <Toolbar>
                <Typography variant="h6">Title</Typography>
            </Toolbar>
        </AppBar>
    );
}

getKnobs = () => {
  return {
    value: number('value', 70),
    title: text('title', 'Title'),
    minValue: number('minValue', 0),
    maxValue: number('maxValue', 100),
    threshold1Value: number('threshold1Value', 40),
    threshold1Color: text('threshold1Color', 'orange'),
    threshold2Value: number('threshold2Value', 60),
    threshold2Color: text('threshold2Color', 'red'),
  };
}

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

Default = (props?: Partial<StorybookProps>) => (
  <div style={{ height: 500, width: 500, padding: '40px 0', margin: 'auto' }}>
    <Grid
      colors={array('colors', [
        '#7400b8',
        '#6930c3',
        '#5e60ce',
        '#5390d9',
        '#4ea8de',
        '#48bfe3',
        '#56cfe1',
        '#64dfdf',
        '#72efdd',
        '#80ffdb',
      ])}
      speed={number('speed', 20)}
      maxLineLength={number('maxLineLength', 100)}
      squareSize={number('squareSize', 24)}
      lineWidth={number('lineWidth', 4)}
      gridColor={text('gridColor', 'rgba(191, 194, 198, 0.3)')}
      {...props}
    />
  </div>
)

withChannelValueChildren = (): StoryFnReactReturnType => (
    <Hero label={'Duration'} icon={<Schedule fontSize={'inherit'} />}>
        <ChannelValue
            fontSize={20}
            value={number('ChannelValue.hours', 1)}
            units={'h'}
            unitSpace={select('unitSpace', ['show', 'hide', 'auto'], 'hide')}
        />
        <ChannelValue
            fontSize={20}
            value={number('ChannelValue.minutes', 27)}
            units={'m'}
            unitSpace={select('unitSpace', ['show', 'hide', 'auto'], 'hide')}
        />
    </Hero>
)

GameStateInfoWithWinner = () => (
  <GameStateComponent
    rebuild={action("rebuild click") as typeof actions.rebuild}
    winner={text("winner", firstPlayerMark)}
    gameStatus={select("gameStatus", GameStatus, GameStatus.NewGame)}
    nextTurn={text("nextTurn", firstPlayerMark)}
    moves={number("moves", 10)}
  />
)

withActions = (): StoryFnReactReturnType => (
    <ScoreCard
        style={{ width: 400, flex: '0 0 auto' }}
        headerTitle={'Substation 3'}
        headerSubtitle={'High Humidity Alarm'}
        headerInfo={'4 Devices'}
        headerColor={Colors.blue[500]}
        headerFontColor={Colors.white[50]}
        headerBackgroundImage={backgroundImage}
        actionItems={actionItems}
        actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}
        actionRow={actionRow}
    >
        <List>
            <ListItem>
                <ListItemText primary={'Body Content'} />
            </ListItem>
        </List>
    </ScoreCard>
)

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

withHeroes = (): StoryFnReactReturnType => (
    <ScoreCard
        style={{ width: 400, flex: '0 0 auto' }}
        headerTitle={'Substation 3'}
        headerSubtitle={'High Humidity Alarm'}
        headerInfo={'4 Devices'}
        headerColor={Colors.blue[500]}
        headerFontColor={Colors.white[50]}
        headerBackgroundImage={backgroundImage}
        actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}
        actionRow={actionRow}
        badge={
            <HeroBanner>
                {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}
            </HeroBanner>
        }
        badgeOffset={0}
    >
        <List>
            <ListItem>
                <ListItemText primary={'Body Content'} />
            </ListItem>
        </List>
    </ScoreCard>
)

Interactive = () => {
  const [open, setOpen] = useState(false)

  return (
    <View style={{ backgroundColor: 'gainsboro', flex: 1, height: 200 }}>
      <Snackbar
        message={text('message', 'A short snackbar message')}
        buttonText={text('button text', 'ok')}
        type={select('type', snackbarTypeOptions, 'standard') as SnackbarType}
        autoHideDuration={number('auto hide duration', 5000)}
        open={open}
        onClose={() => setOpen(false)}
      />
      <Button onPress={() => setOpen(!open)} title="open snackbar" />
    </View>
  )
}

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

volume = () => {
  const volume = number("volume", 1, volumeOptions);

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

Number = () => {
  const [value] = useState<number | undefined>();
  return (
    <StoryContainer>
      <h1>Number Input</h1>

      <NumberInput
        initialValue={number("Initial value", 0)}
        value={value}
        disabled={boolean("disabled", false)}
        invalid={boolean("invalid", false)}
      />
    </StoryContainer>
  );
}

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

Interactive = () => (
  <StoryContainer title="Interactive">
    <Badge
      variant={select('Type', ['dot', 'pulse', 'standard'], 'standard')}
      value={number('Value', 100) as number}
      limit={number('Limit', 99) as number}
      color={select('Color', ['primary', 'secondary', 'success', 'alert'], 'primary' as BadgeColors)}
    />
  </StoryContainer>
)

_Pagination = () => {
  const hrefBool = boolean('show Link Version', false);
  const pageSize = number(
    'pageSize',
    9,
    {
      range: true,
      min: 3,
      max: 9,
      step: 1
    },
    '1'
  );
  const props = hrefBool ? {...defaultProps, pageSize} : {pageSize};
  const pageItemsProps = hrefBool ? {href: '#'} : {};
  return (
    <div>
      <br />
      <h1> Pagination</h1>
      <Pagination a11yText="Pagination" onChangePage={(...args) => console.log(...args)} {...props}>
        {list.map((name, index) => (
          <PageItem key={`${name}-${hrefBool ? 'link' : 'btn'}}`} {...pageItemsProps}>
            {name}
          </PageItem>
        ))}
      </Pagination>
    </div>
  );
}

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

playground = () => {
    const color = select('color', types, 'primary');
    const value = number('value', 25);
    const size = select('size', sizes, 'md');
    const description = text('description', 'Loading...');
    const hideDescription = boolean('hide-description', false);
    const progressLabel = text('progress-label', 'Progress');
    const hideProgressLabel = boolean('hide-progress-label', false);
    return (`<ks-progress-bar class="m-xxl" color="${color}" description="${description}" progress-label="${progressLabel}" hide-progress-label="${hideProgressLabel}" hide-description="${hideDescription}" size="${size}" value="${value}" />`);
}

data = {
  string: "string",
  boolean: true,
  number: 100,
  promise,
  null: null,
  map,
  set,
  function: testFunction,
  error: new Error("You broke it"),
  date: new Date(),
  symbol: Symbol("foo"),
  regex: /[A-Z]/g,
  "test-undefined": undefined,
  array: [
    "fun",
    {
      object: {
        nesting: true,
      },
    },
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    9,
    10,
  ],
  object: {
    working: "properly",
    function: testFunction,
  },
}

card = () => {
    const imgDir = select('img-direction', imgDirections, 'top');
    const src = text('img-src', 'https://media.boingboing.net/wp-content/uploads/2018/07/screenshot-22.jpg');
    const alt = text('alt', 'Michael Scott');
    const href = text('href', '');
    const clickable = boolean('clickable', false);
    const collapse = select('collapse', ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'], 'xs');
    const lazy = boolean('lazy', true);
    const threshold = number('threshold', 300);
    const cardTitle = text('card-title', 'Meditation Moment');
    const cardSubtitle = text('card-subtitle', 'Comfort Food');
    const bodyText = text('body text', `"It's never too early for ice cream, Jim. But we didn't have any ice cream, so this is mayonnaise and black olives. It's comfort food, alright?"`);

    return (`<div class="m-xxl" style="height:500px">
                <ks-card img-src="${src}"
                        img-direction="${imgDir}"
                        alt="${alt}"
                        href="${href}"
                        clickable="${clickable}"
                        class="w-30"
                        lazy="${lazy}"
                        threshold="${threshold}"
                        collapse="${collapse}"
                        img-aspect-ratio="3:2"
                        >
                    <ks-card-body card-title="${cardTitle}"
                            card-subtitle="${cardSubtitle}">
                        ${bodyText}
                    </ks-card-body>
                    <ks-card-footer>
                        <ks-button>Get One</ks-button>
                    </ks-card-footer>
                </ks-card>
            </div>`);
}

withFullConfig = (): any => ({
    template: `
        <blui-empty-state [title]="title" [description]="description">
            <mat-icon blui-empty-icon 
                [style.color]="color" 
                [style.fontSize.px]="fontSize" 
                [style.transform]="invertRTL()">trending_up</mat-icon>
            <button blui-actions mat-stroked-button color="primary" (click)="click()">
                {{actionText}}
            </button>
        </blui-empty-state>
    `,
    props: {
        title: text('title', 'Predictions Page Coming Soon'),
        description: text('description', 'A fully redesigned predictions page is coming in our next release!'),
        click: action('button clicked'),
        actionText: text('Action Text', 'Learn More'),
        color: color('emptyIcon.color', Colors.black[500]),
        fontSize: number('emptyIcon.fontSize.px', 90),
        invertRTL: invertRTL,
    },
})

percentParams = (id) => [
  number(
    'Gauge value',
    15,
    {
      range: true,
      min: 0,
      max: 100,
      step: 1,
    },
    'item ' + id
  )
]

withStoryContainer = (story: RenderFunction) => {
  const CONTAINER_GROUP = 'Container options';
  // ---
  const containerBoundary = boolean('Show container boundary', false, CONTAINER_GROUP);
  const fullWidthContainter = boolean('Full width container', false, CONTAINER_GROUP);
  const containerWidth = number(
    'Container width',
    300,
    {
      range: true,
      min: 100,
      max: 500,
      step: 10,
    },
    CONTAINER_GROUP
  );
  const containerHeight = number(
    'Container height',
    0,
    {
      range: true,
      min: 100,
      max: 500,
      step: 10,
    },
    CONTAINER_GROUP
  );
  return (
    <StoryContainer
      width={fullWidthContainter ? undefined : containerWidth}
      height={containerHeight}
      showBoundaries={containerBoundary}
    >
      {story()}
    </StoryContainer>
  );
}

UserTable = () => {
  const data: ITableDataCallback = async query => {
    return {
      data: object('data', [
        {
          id: 1,
          email: '[email protected]',
          isAdmin: true,
          payload: {displayName: '홍길동'},
          createdDate: new Date(),
          updatedDate: new Date(),
        },
      ]),
      page: number('page', 1),
      totalCount: number('totalCount', 100), // TODO: totalCount
    };
  };

  return (
    <SnackbarProvider>
      <UserTableView data={data} />
    </SnackbarProvider>
  );
}

withBasicConfig = (): any => ({
    template: `
        <blui-app-bar
         [expandedHeight]="expandedHeight"
         [collapsedHeight]="collapsedHeight"
         [scrollThreshold]="scrollThreshold"
         [scrollContainerId]="scrollContainerId" 
         variant="snap">
            <div>Content</div>
        </blui-app-bar>
    `,
    props: {
        collapsedHeight: number('collapsedHeight', 64),
        expandedHeight: number('expandedHeight', 200),
        scrollThreshold: number('scrollThreshold', 100),
    },
})

BarGaugeCell = () => {
  const theme = useTheme();
  const width = number('width', 700, {}, 'Props');
  const data = buildData(theme, [
    {
      matcher: { id: FieldMatcherID.byName, options: 'Progress' },
      properties: [
        { prop: 'width', value: '200', custom: true },
        { prop: 'displayMode', value: 'gradient-gauge', custom: true },
        { prop: 'min', value: '0' },
        { prop: 'max', value: '100' },
      ],
    },
  ]);

  return (
    <div className="panel-container" style={{ width: 'auto' }}>
      <Table data={data} height={500} width={width} />
    </div>
  );
}

withNgContent = (): any => ({
    template: `
        <blui-app-bar
         [expandedHeight]="expandedHeight"
         [collapsedHeight]="collapsedHeight"
         [scrollThreshold]="scrollThreshold"
         [scrollContainerId]="scrollContainerId"
         (collapsedChange)="isCollapsed = $event"
         variant="snap">
             <blui-three-liner [style.top.px]="isCollapsed ? 0 : expandedYOffset">
                <blui-channel-value style="color: white" blui-title value="Temperature"></blui-channel-value>
                <div blui-subtitle>Subtitle</div>
                 <div blui-info class="info"
                    [matMenuTriggerFor]="dropdownToolbarMenu"
                    #menuTrigger="matMenuTrigger"
                    style="display: flex; align-items: center; cursor: pointer;"
                >
                    <span>Menu</span>
                    <mat-icon style="font-size: inherit; width: 16px; height: 16px;">arrow_drop_down</mat-icon>
                </div>
            </blui-three-liner>
        </blui-app-bar>

        <mat-menu #dropdownToolbarMenu="matMenu" [overlapTrigger]="false">
            <button mat-menu-item>Item 1</button>
            <button mat-menu-item>Item 2</button>
            <button mat-menu-item>Item 3</button>
        </mat-menu>
    `,
    props: {
        collapsedHeight: number('collapsedHeight', 64),
        expandedHeight: number('expandedHeight', 200),
        scrollThreshold: number('scrollThreshold', 100),
        isCollapsed: undefined,
        expandedYOffset: number('Expanded Y Offset', 80),
    },
})

Simple = () => {
  const theme = useTheme();
  const width = number('width', 700, {}, 'Props');
  const data = buildData(theme, []);

  return (
    <div className="panel-container" style={{ width: 'auto' }}>
      <Table data={data} height={500} width={width} />
    </div>
  );
}