GitHub Copilotのプロンプトファイル機能を試してみた

{
  // ...

  // プロンプト機能を有効化
   "chat.promptFiles": true
}

新しいReactのフォームコンポーネントを作成してください。

フォーム名やフィールドが提供されていない場合は、確認してください。

フォームの要件:

- フォームデザインシステムのコンポーネントを使用する: design-system/Form.md
- フォームの状態管理には `react-hook-form` を使用する
  - フォームのデータに対して、必ず TypeScript の型を定義する
  - 不要な再レンダリングを防ぐために `defaultValues` を使用する
- バリデーションには `zod` を使用する:
  - 再利用可能なバリデーションスキーマを別ファイルに作成する
  - TypeScript の型を使用して型安全性を確保する
  - ユーザーエクスペリエンスに配慮したバリデーションルールをカスタマイズする

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { contactSchema, ContactFormData } from '../validation/contactSchema';
import { Form, Input, TextArea, Button } from 'design-system/Form';

const ContactForm: React.FC = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<ContactFormData>({
    resolver: zodResolver(contactSchema),
    defaultValues: {
      email: '',
      name: '',
      message: '',
    },
  });

  const onSubmit = (data: ContactFormData) => {
    console.log(data);
  };

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Input
        label="Email"
        {...register('email')}
        error={errors.email?.message}
      />
      <Input
        label="Name"
        {...register('name')}
        error={errors.name?.message}
      />
      <TextArea
        label="Message"
        {...register('message')}
        error={errors.message?.message}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
};

export default ContactForm;

import * as z from 'zod';

export const contactSchema = z.object({
  email: z.string().email({ message: "Invalid email address" }),
  name: z.string().min(1, { message: "Name is required" }),
  message: z.string().min(1, { message: "Message is required" }),
});

export type ContactFormData = z.infer<typeof contactSchema>;