@storybook/addon-knobs#number JavaScript Examples

Gallery = () => ({
  components: { CounterBadge, TypeOverline },
  props: {
    value: {
      default: number('Value', 8),
    },
  },
  data() {
    return { sizes, variants };
  },
  template: `
  <div>
    <div v-for="variant in variants" :key="variant" class="mb-8">
      <TypeOverline tag="h1" variant="large" class="mb-2">{{ variant }}</TypeOverline>
      <div class="flex">
        <div v-for="size in sizes" class="mr-4">
          <TypeOverline tag="h2" class="mb-2">{{ size }}</TypeOverline>
          <CounterBadge :value="value" :size="size" :variant="variant" />
        </div>
      </div>
    </div>
  </div>
  `,
})

SimpleEmissionsPie = () => {
  const transport = number("Transport", 12);
  const housing = number("Housing", 16);
  const food = number("Good", 3);
  const goods = number("Goods", 20);
  const services = number("Services", 29);
  const total = number("Total", transport + housing + food + goods + services);
  const energyShare = { transport, housing, food, goods, services, total };
  const data = { energyShare };
  return <EmissionsPie data={data} />;
}

HasMissingDataCityWaterAir = () => {
  const waterpH = number("WaterPH");
  const totalDissolvedSolids = number("TotalDissolvedSolids");
  const specificConductance = number("SpecificConductance");
  const url = text("URL", "/");
  const aqi = number("AQI", 54);

  const data = {
    waterpH,
    totalDissolvedSolids,
    specificConductance,
    url,
    aqi,
  };
  return <CityWaterAir data={data} />;
}

HasAllDataCityWaterAir = () => {
  const waterpH = number("WaterPH", 6.8);
  const totalDissolvedSolids = number("TotalDissolvedSolids", 124);
  const specificConductance = number("SpecificConductance", 1030);
  const url = text("URL", "/");
  const aqi = number("AQI", 60);

  const data = {
    waterpH,
    totalDissolvedSolids,
    specificConductance,
    url,
    aqi,
  };
  return <CityWaterAir data={data} />;
}

ProgressBar = () => {
  return {
    content: {
      completed: number('completed', 75, {
        range: true,
        min: 0,
        max: 100,
        step: 1,
      }),
    },
    resourceType: 'core/wcm/components/progressbar/v1/progressbar',  // todo: derive from path
  };
}

Breadcrumb = () => {
  // this is kind of a hack, since in AEM the breadcrumb is included in the header w/o a backing content
  // and/or it is styled with the designer: todo: verify how this is usually done
  content.startLevel = number('startLevel', 1, {
    range: true,
    min: 0,
    max: 10,
    step: 1,
  });
  content.showHidden = boolean('showHidden');
  content.hideCurrent = boolean('hideCurrent');

  return {
    resourceLoaderPath: '/content/en/products/outdoor/hiking',
    content,
    resourceType: 'core/wcm/components/breadcrumb/v2/breadcrumb',  // todo: derive from path
  };
}

storiesOf('Snackbar', module)
  .addParameters({
    component: SnackbarProvider,
  })
  .add('default', () => (
    <Flex flex={1}>
      <View>
        <SnackbarProvider>
          <SnackbarDemo
            variant={select('Variant', variantOptions, undefined)}
            title={text('Title', 'Snackbar text here')}
            maxLines={number('maxLines', undefined)}
            action={{
              label: text('Action Label', 'Retry'),
              onClick: () => {},
            }}
            onClose={() => {}}
            autoHide={boolean('autoHide', true)}
            icon={Info}
            position={{
              bottom: 1,
            }}
          />
        </SnackbarProvider>
      </View>
    </Flex>
  ));

storiesOf('Text', module)
  .addParameters({
    component: Text,
  })
  .add('default', () => (
    <Text
      size={select('Size', sizeOptions, 'large')}
      weight={select('Weight', weightOptions, 'regular')}
      //@ts-expect-error
      as={select('as', htmlTagOptions, 'div')}
    >
      {text('Display Text', 'The quick brown fox jumps over the lazy dog ')}
    </Text>
  ))
  .add('maxLines', () => (
    <Text
      size={select('Size', sizeOptions, 'large')}
      weight={select('Weight', weightOptions, 'regular')}
      //@ts-expect-error
      as={select('as', htmlTagOptions, 'div')}
      maxLines={number('maxLines', 3)}
    >
      {text(
        'Display Text',
        'The quick brown fox jumps over the lazy dog brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog dog he quick brown fox jumps over the lazy dog he quick brown fox jumps over the lazy dog',
      )}
    </Text>
  ));

renderHelper = () => () => {
  const count = number('Count', 5);
  return (
    <SelectedMessageProvider>
      <Producer
        maxNumberOfMessages={count}
        topic={'storybook_example_topic'}
        getProducerWebsocket={producerMockWebsocket}
      />
    </SelectedMessageProvider>
  );
}

renderHelper = () => () => {
  const count = number('Count', 30);
  return (
    <SelectedMessageProvider>
      <Consumer
        maxNumberOfMessages={count}
        topic={'storybook_example_topic'}
        getConsumerWebsocket={consumerMockWebsocket}
      />
    </SelectedMessageProvider>
  );
}

renderHelper = (
  Component,
  defaultTitle = 'Test title',
  defaultSubtitle = 'Test Subtitle',
  defaultCount = 123,
  defaultCountLimit,
  defaultClassName
) => () => {
  const title = text('Title text', defaultTitle);
  const subtitle = text('Subtitle text', defaultSubtitle);
  const count = number('Count', defaultCount);
  const countLimit = number('Count limit', defaultCountLimit);
  const className = text('Custom CSS classname', defaultClassName);
  let props = {
    title,
    subtitle,
    count,
    countLimit,
    className,
  };

  return <Component {...props} />;
}

renderHelper = (
  Component,
  defaultErrorMessage,
  defaultIsFirst = false,
  defaultIsSelected = false,
  defaultMessagePartition = 0,
  defaultMessageOffset = 100,
  defaultMessageValue = 'Hello World!',
  defaultMessageTimestamp = new Date().getTime()
) => () => {
  const isFirst = boolean('First message', defaultIsFirst);
  const isSelected = boolean('Selected message', defaultIsSelected);
  const message = {
    topic: 'demo',
  };
  message.partition = number('Message partition', defaultMessagePartition);
  message.offset = number('Message offset', defaultMessageOffset);
  message.value = text('Message value', defaultMessageValue);
  message.timestamp = number('Message timestamp', defaultMessageTimestamp);

  const className = text('Custom CSS classname', undefined);
  const props = {
    isFirst,
    isSelected,
    message,
    className,
    onInteraction: action('handleClick'),
  };

  const errorMessage = text('Error message', defaultErrorMessage);
  if (errorMessage) {
    props.error = {
      message: errorMessage,
    };
  }

  return <Component {...props} />;
}

Playground = () => ({
  template: hbs`
    <DenaliProgress
      @size={{size}}
      @isLoading={{isLoading}}
      @color={{color}}
      @shade={{shade}}
      @value={{value}}
      class={{class}}
    />
  `,
  context: {
    value: number('value', 33),
    color: select('color', COLORS, COLORS[0], argument),
    shade: select('shade', SHADES, '500', argument),
    size: select('size', SIZES, SIZES[0], argument),
    isLoading: boolean('isLoading', false, argument),
    class: text('class', '', attribute),
  },
})

BlockFormPlayground = () => ({
  template: hbs`
    <DenaliProgress
      @size={{size}}
      @isLoading={{isLoading}}
      class={{class}}
      as |Progress|
    >
      <Progress.Bar @color={{color1}} @value={{value1}} @shade={{shade1}} />
      <Progress.Bar @color={{color2}} @value={{value2}} @shade={{shade2}} />
      <Progress.Bar @color={{color3}} @value={{value3}} @shade={{shade3}} />
    </DenaliProgress>
  `,
  context: {
    value1: number('value1', 10),
    value2: number('value2', 20),
    value3: number('value3', 30),
    color1: select('color1', COLORS, COLORS[0], argument),
    color2: select('color2', COLORS, COLORS[3], argument),
    color3: select('color3', COLORS, COLORS[5], argument),
    shade1: select('shade1', SHADES, '100', argument),
    shade2: select('shade2', SHADES, '200', argument),
    shade3: select('shade3', SHADES, '300', argument),
    size: select('size', SIZES, SIZES[0], argument),
    isLoading: boolean('isLoading', false, argument),
    class: text('class', '', attribute),
  },
})

Gallery = () => ({
  components: { FancyIcon },
  props: {
    size: {
      default: number('Size', 72),
    },
  },
  data() {
    return {
      icons: Object.values(Icons),
    };
  },
  template: `
    <div class="flex flex-wrap">
      <div v-for="icon in icons" :key="icon" class="text-center m-3">
        <div :style="{ fontSize: size + 'px' }"><FancyIcon :icon="icon" /></div>
        <div class="font-body-small mt-2">{{ icon }}</div>
      </div>
    </div>
  `,
})

WithKnobs = () => ({
  components: { CountersignIcon },
  props: {
    signed: {
      default: boolean('signed', false),
    },
    countersigned: {
      default: boolean('countersigned', false),
    },
    size: {
      default: number('size', 24),
    },
  },
  template: `
    <CountersignIcon 
      :signed="signed"
      :countersigned="countersigned"
      :size="size"
    />`,
})

WithKnobs = () => {
  return {
    components: { AvatarImage },
    props: {
      border: {
        default: boolean('Border', false),
      },
      image: {
        default: text('Image', image),
      },
      initials: {
        default: text('Initials', 'XO'),
      },
      name: {
        default: text('Name', ''),
      },
      size: {
        default: number('Size', 40),
      },
      square: {
        default: boolean('Square', false),
      },
    },
    template: `
      <AvatarImage
        :border="border"
        :image="image"
        :initials="initials"
        :name="name"
        :size="size"
        :square="square"
      />
    `,
  };
}

storiesOf('Heading', module)
  .addParameters({
    component: Heading,
  })
  .add('default', () => (
    <ScrollView>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="medium">{'Heading (medium)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="large">{'Heading (large)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="xlarge">{'Heading (xlarge)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="xxlarge">{'Heading (xxlarge)'}</Heading>
        </View>
      </Space>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="xxxlarge">{'Heading (xxxlarge)'}</Heading>
        </View>
      </Space>
    </ScrollView>
  ))
  .add('with weight', () => (
    <ScrollView>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="medium" weight={select('Weight', weightOptions, 'bold')}>
            {'The quick brown fox jumps over the lazy dog.'}
          </Heading>
        </View>
      </Space>
    </ScrollView>
  ))
  .add('with maxLines', () => (
    <ScrollView>
      <Space margin={[4, 0, 0, 0]}>
        <View>
          <Heading size="medium" maxLines={number('maxLines', 1)}>
            {text('Text', 'The quick brown fox jumps over the lazy dog.')}
          </Heading>
        </View>
      </Space>
    </ScrollView>
  ));

Playground = () => ({
  template: hbs`
    <DenaliTable
      class={{this.class}}
      @isFrozen={{this.isFrozen}}
      @isStriped={{this.isStriped}}
      @isCards={{this.isCards}}
      as |Table|
    >
      <Table.Header as |Head|>
        <Head.Row as |Row|>
          {{#each (range 1 this.numCols true) as |colNum|}}
            <Row.HeaderCell
              @position={{this.position}}
              @isMono={{this.isMono}}
              @isSorted={{this.isSorted}}
              @sortDirection={{this.sortDirection}}
            >
              H{{colNum}}
            </Row.HeaderCell>
          {{/each}}
        </Head.Row>
      </Table.Header>

      <Table.Body as |Body|>
        {{#each (range 1 this.numRows true) as |rowNum|}}
          <Body.Row as |Row|>
            {{#each (range 1 this.numCols true) as |colNum|}}
              {{#if (eq colNum 1)}}
                <Row.HeaderCell @position={{this.position}}>{{rowNum}}:{{colNum}}</Row.HeaderCell>
              {{else}}
                <Row.Cell @position={{this.position}}>{{rowNum}}:{{colNum}}</Row.Cell>
              {{/if}}
            {{/each}}
          </Body.Row>
        {{/each}}
      </Table.Body>

      <Table.Footer as |Foot|>
        <Foot.Row as |Row|>
          {{#each (range 1 this.numCols true) as |colNum|}}
            {{#if (eq colNum 1)}}
              <Row.HeaderCell @position={{this.position}}>F{{colNum}}</Row.HeaderCell>
            {{else}}
              <Row.Cell @position={{this.position}}>F{{colNum}}</Row.Cell>
            {{/if}}
          {{/each}}
        </Foot.Row>
      </Table.Footer>
    </DenaliTable>
  `,
  context: {
    isFrozen: boolean('isFrozen', false, argument),
    isStriped: boolean('isStriped', false, argument),
    isCards: boolean('isCards', false, argument),
    class: text('class', '', attribute),
    position: select('position', POSITIONS, POSITIONS[0], argument),
    isSorted: boolean('isSorted', false, argument),
    sortDirection: select('sortDirection', SORT_DIRECTIONS, SORT_DIRECTIONS[0], argument),
    isMono: boolean('isMono', false, argument),
    numRows: number('numRows', 5, { min: 1, max: 99 }, example),
    numCols: number('numCols', 3, { min: 1, max: 20 }, example),
  },
})

WithKnobs = () => {
  return {
    components: { PaginationNavigation },
    props: {
      flat: {
        default: boolean('Flat', false),
      },
      maxPages: {
        default: number('Max Pages', 6),
      },
      pageSize: {
        default: number('Page Size', 1),
      },
      size: {
        default: select('Size', Object.values(Sizes), Sizes.MEDIUM),
      },
      totalItems: {
        default: number('Total Items', 12),
      },
      variant: {
        default: select('Variant', Object.values(Variants), Variants.PRIMARY),
      },
    },
    data() {
      return {
        currentPage: 1,
      };
    },
    template: `
      <PaginationNavigation
        :flat="flat"
        :max-pages="maxPages"
        :page-size="pageSize"
        :size="size"
        :total-items="totalItems"
        :variant="variant"
        v-model="currentPage"
      />
    `,
  };
}

CustomProps = () => {
  const cols = number('cols', 1, {
    min: 1,
    max: 10,
    step: 1,
    range: true
  })

  const rows = number('rows', 1, {
    min: 1,
    max: 5,
    step: 1,
    range: true
  })

  const gap = number('gap (px)', 10, {
    min: 0,
    max: 20,
    step: 1,
    range: true
  })

  const pages = number('pages', 2, {
    min: 1,
    max: 5,
    step: 1,
    range: true
  })

  const loop = boolean('loop', false)

  const scrollSnap = boolean('scrollSnap', true)

  return (
    <Carousel
      cols={cols}
      rows={rows}
      gap={gap}
      loop={loop}
      scrollSnap={scrollSnap}
    >
      {[...Array(cols * rows * pages)].map((_, i) => (
        <Carousel.Item key={i}>
          <Item img={randomImageUrl + i} />
        </Carousel.Item>
      ))}
    </Carousel>
  )
}