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

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import { ComponentMeta } from '@storybook/react';
     4  import { useForm } from 'react-hook-form';
     5  import { zodResolver } from '@hookform/resolvers/zod';
     6  import TextField from '../webapp/javascript/ui/Form/TextField';
     7  import Button from '../webapp/javascript/ui/Button';
     8  import * as z from 'zod';
     9  import '../webapp/sass/profile.scss';
    10  
    11  export default {
    12    title: 'Examples/Form',
    13  } as ComponentMeta<any>;
    14  
    15  const schema = z.object({
    16    name: z.string().min(1, { message: 'Required' }),
    17    age: z.number().min(10),
    18  });
    19  export function ExampleForm() {
    20    const {
    21      register,
    22      handleSubmit,
    23      formState: { errors },
    24    } = useForm({
    25      resolver: zodResolver(schema),
    26    });
    27  
    28    return (
    29      <form onSubmit={handleSubmit((d) => alert(JSON.stringify(d)))}>
    30        <TextField
    31          {...register('name')}
    32          label="Name"
    33          errorMessage={errors.name?.message}
    34        />
    35  
    36        <TextField
    37          label="Age"
    38          type="number"
    39          {...register('age', { valueAsNumber: true })}
    40          errorMessage={errors.age?.message}
    41        />
    42  
    43        <Button type="submit" kind="secondary">
    44          Submit
    45        </Button>
    46      </form>
    47    );
    48  }