feat: New form components

[evadecker]

What changed?

Add several new components to handle form fields:

• AddressField
• EmailField
• NameField
• PhoneField
• ShortTextField

Add a question wrapper:

• FormQuestion

Install Maskito for input masking for the phone field and ZIP code fields.

Install @tailwindcss/container-queries to enable using container queries with Tailwind.

Add a large variant for Button.
Add a size prop to TextField, Label, Input, etc...
Inherit Button styles for Select.
Add custom ::selection styles.

Why?

Create pre-baked form fields / groups for standard application within forms.

How was this change made?

Created new components.

How was this tested?

Wrote tests for all to validate basic behavior. Tested manually in Storybook.

Anything else?

Will need to follow-up with more types and more props for each form field.

[changeset-bot]

⚠️ No Changeset found

Latest commit: ad50870

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cloudflare-workers-and-pages]

Deploying namesake with    Cloudflare Pages

Latest commit:	ad50870
Status:	✅  Deploy successful!
Preview URL:	https://9004b95f.namesake-639.pages.dev
Branch Preview URL:	https://form-fields.namesake-639.pages.dev

View logs

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	46.82% ⬆️ +0.75%	2816 / 6014
🔵	Statements	46.82% ⬆️ +0.75%	2816 / 6014
🔵	Functions	53.01% ⬆️ +0.95%	132 / 249
🔵	Branches	78.24% ⬇️ -0.33%	259 / 331

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/components/common/Button/Button.tsx	100% 🟰 ±0%	50% ⬇️ -50.00%	100% 🟰 ±0%	100% 🟰 ±0%
src/components/common/Field/Field.tsx	93.68% ⬆️ +1.50%	100% 🟰 ±0%	83.33% 🟰 ±0%	93.68% ⬆️ +1.50%	142-150
src/components/common/Link/Link.tsx	51.72% 🟰 ±0%	100% 🟰 ±0%	0% 🟰 ±0%	51.72% 🟰 ±0%	30-46
src/components/common/Select/Select.tsx	91.89% ⬇️ -1.72%	100% 🟰 ±0%	66.66% 🟰 ±0%	91.89% ⬇️ -1.72%	80-83
src/components/common/TextField/TextField.tsx	100% 🟰 ±0%	40% ⬆️ +15.00%	50% 🟰 ±0%	100% 🟰 ±0%
src/components/forms/AddressField/AddressField.tsx	0%	0%	0%	0%	1-78
src/components/forms/EmailField/EmailField.tsx	100%	100%	100%	100%
src/components/forms/FormQuestion/FormQuestion.tsx	100%	100%	100%	100%
src/components/forms/NameField/NameField.tsx	100%	100%	100%	100%
src/components/forms/PhoneField/PhoneField.tsx	100%	100%	100%	100%
src/components/forms/ShortTextField/ShortTextField.tsx	100%	100%	100%	100%
src/components/quests/QuestForm/QuestForm.tsx	10% ⬆️ +1.18%	100% 🟰 ±0%	0% 🟰 ±0%	10% ⬆️ +1.18%	13-31, 34-50
src/routes/_authenticated/_home/quests.$questId.edit.tsx	0% 🟰 ±0%	0% 🟰 ±0%	0% 🟰 ±0%	0% 🟰 ±0%	1-99
src/routes/_authenticated/_home/quests.$questId.index.tsx	0% 🟰 ±0%	0% 🟰 ±0%	0% 🟰 ±0%	0% 🟰 ±0%	1-112

Generated in workflow #229 for commit ad50870 by the Vitest Coverage Report Action