Support position for devtool

[jellydn]

WHAT

• Migrate example from create-react-app to vitejs
• Support 4 positions for devtool UI: top-left, top-right, bottom-left, bottom-right. And keep top-right as default option
• Add storybook for easy to test/prototype component
• Update packages

Storybook:
https://react-hook-form-devtool-ui.vercel.app/?path=/story/devtoolui--default-dev-tool

WHY

• We should support position as a prop because it's easy to adjust for different UI.

HOW

• New usage

<DevTool control={control} placement="top-left" />

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• Linter
• Tests
• Review comments
• Security

[bluebill1049]

oh wow, thanks very much @jellydn this is awesome, I will contribute to the UI as well after this is merged. I will bake those buttons inside the pannel so they look nicer.

[bluebill1049]

Let me know it's ready to be reviewed.

[jellydn]

@bluebill1049 Thanks Bill. It's ready. Please take a look. Thanks 😀

[bluebill1049]

LTGM, let's get it in and i will polish up the UI part.

[bluebill1049]

nice! thanks for the huge improvement!

[jellydn]

Great. Thanks. Good to hear that.

[bluebill1049]

sorry about the delay, and thanks for your hard work. I am publishing it now.

[bluebill1049]

let me know your twitter acc, i can tag you for the release.

[jellydn]

Thanks @bluebill1049 This is my twitter @jellydn

[bluebill1049]

https://twitter.com/HookForm/status/1391665467329105920 really appreciated your work on the storybook as well!

[bluebill1049]

if i find some more free time, I will do a "setting" icon in the panel as well. so user can switch it around.

[jellydn]

That would be great. Thanks.