github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/InputField.stories.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import InputField from '@ui/InputField';
     4  import Button from '@ui/Button';
     5  import { ComponentStory, ComponentMeta } from '@storybook/react';
     6  import '../webapp/sass/profile.scss';
     7  
     8  const Template: ComponentStory<typeof InputField> = (args) => (
     9    <InputField type="password" {...args} />
    10  );
    11  
    12  export default {
    13    title: 'Components/InputField',
    14    component: InputField,
    15    argTypes: {
    16      type: {
    17        options: ['text', 'password'],
    18        control: { type: 'select' },
    19      },
    20    },
    21  } as ComponentMeta<typeof InputField>;
    22  
    23  export const AsFormInput = ({ type, label, placeholder }) => {
    24    return (
    25      <form>
    26        <p>Example of component usage in a form</p>
    27        <InputField type={type} label={label} placeholder={placeholder} />
    28        <InputField type={type} label={label} placeholder={placeholder} />
    29        <Button>Submit</Button>
    30      </form>
    31    );
    32  };
    33  AsFormInput.args = {
    34    label: 'Sample text',
    35    placeholder: 'Sample text',
    36    type: 'text',
    37  };
    38  
    39  export const Inputfield = Template.bind({});
    40  Inputfield.args = {
    41    label: 'Sample text',
    42    placeholder: 'Sample text',
    43    type: 'text',
    44  };