@storybook/addon-knobs#array TypeScript Examples

The following examples show how to use @storybook/addon-knobs#array. 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: RadioGroup.stories.tsx From substrate-api-explorer with Apache License 2.0

6 votes

storiesOf('UI|RadioGroup', module).add('default', () => {
  const [value, setValue] = useState(options[0])

  const labelKnob = text('Label', 'Radio Group Label', 'props')
  const optionsKnob = array('Options', options, ', ', 'props')

  return (
    <div style={{ padding: 24 }}>
      <RadioGroup
        id="storybook-radioGroup"
        label={labelKnob}
        options={optionsKnob}
        value={value}
        onChange={setValue}
      />
    </div>
  )
})

Example #2

Source File: Grid.stories.tsx From animated-grid-lines with MIT License

6 votes

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

Example #3

Source File: index.ts From alauda-ui with MIT License

5 votes

storiesOf('Paginator', module)
  .addDecorator(withKnobs)
  .add('chinese', () => {
    const layout = text('layout', 'total,pager,sizes,jumper,content');
    const currentPage = number('currentPage', 1);
    const pageSize = number('pageSize', 20);
    const total = number('total', 350);
    const pageSizeOptions = array('pageSizeOptions', ['10', '20', '50']);
    const disabled = boolean('disabled', false);

    return {
      moduleMetadata: {
        imports: [PaginatorModule],
        providers: [
          {
            provide: PaginatorIntl,
            useClass: PaginatorZh,
          },
        ],
      },
      template: /* HTML */ `
        <aui-paginator
          [layout]="layout"
          [(currentPage)]="currentPage"
          [(pageSize)]="pageSize"
          [total]="total"
          [pageSizeOptions]="pageSizeOptions"
          [disabled]="disabled"
        >
          custom content
        </aui-paginator>
      `,
      props: {
        layout,
        currentPage,
        pageSize,
        total,
        pageSizeOptions,
        disabled,
      },
    };
  })
  .add('english', () => {
    const currentPage = number('currentPage', 1);
    const pageSize = number('pageSize', 20);
    const total = number('total', 150);
    const pageSizeOptions = array('pageSizeOptions', ['10', '20', '50']);

    return {
      moduleMetadata: {
        imports: [PaginatorModule],
      },
      template: /* HTML */ `
        <aui-paginator
          layout="total,pager,sizes,jumper"
          [(currentPage)]="currentPage"
          [(pageSize)]="pageSize"
          [total]="total"
          [pageSizeOptions]="pageSizeOptions"
        ></aui-paginator>
      `,
      props: {
        currentPage,
        pageSize,
        total,
        pageSizeOptions,
      },
    };
  });

Example #4

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

5 votes

select = () => [
  <Select key="jsx" label="Symbol" options={array("options", ["X", "Y"])} />,
]

Example #5

Source File: ReactPasswordChecklist.stories.tsx From react-password-checklist with MIT License

5 votes

storiesOf("ReactPasswordChecklist", module)
	.addDecorator(withKnobs)
	.add("Default", () => (
		<ReactPasswordChecklist
			value={text("Password", "")}
			valueAgain={text("Password Again", "")}
			minLength={number("Minimum Length", 8)}
			maxLength={number("Maximum Length", 16)}
			onChange={action("onChange")}
            rtl={boolean('rtl', getDirection() == 'rtl')}
			rules={
				array("Rules", [
					"minLength",
					"specialChar",
					"number",
					"capital",
					"match",
					"notEmpty",
					"maxLength",
					"lowercase",
				]) as Array<RuleNames>
			}
		/>
	))
	.add("Custom Messages", () => (
		<ReactPasswordChecklist
			value={text("Password", "")}
			valueAgain={text("Password Again", "")}
			minLength={number("Minimum Length", 8)}
			onChange={action("onChange")}
            rtl={boolean('rtl', getDirection() == 'rtl')}
			rules={
				array("Rules", [
					"minLength",
					"specialChar",
					"number",
					"capital",
					"match",
				]) as Array<RuleNames>
			}
			messages={{
				minLength: "La contraseña tiene más de 8 caracteres.",
				specialChar: "La contraseña tiene caracteres especiales.",
				number: "La contraseña tiene un número.",
				capital: "La contraseña tiene una letra mayúscula.",
				match: "Las contraseñas coinciden.",
			}}
		/>
	)).add("Custom Messages RTL (Persian)", () => (
		<ReactPasswordChecklist
			value={text("Password", "")}
			valueAgain={text("Password Again", "")}
			minLength={8}
			onChange={action("onChange")}
            rtl={true}
			rules={
				array("Rules", [
					"minLength",
					"specialChar",
					"number",
					"capital",
				]) as Array<RuleNames>
			}
			messages={{
				minLength: "رمز عبور باید حداقل ۸ کارکتر باشد.",
				specialChar: "رمز عبور باید شامل کاراکترهای خاص (نمادها) باشد",
				number: "رمز عبور باید شامل اعداد باشد ",
				capital: "رمز عبور باید ترکیبی از حروف کوچک و بزرگ باشد.",
			}}
		/>
	))