feat(ui): input field

[atsixian]

Description

1. Added InputField and TextInput, TextAreaInput, SelectInput for form handling
2. Aligned Text with design
3. Fixed use-form error display on submit

https://user-images.githubusercontent.com/43892874/213093398-31753d23-91ba-450a-abb7-4ae74a372cbf.mp4

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 47ff0ba107c790b1b3a1224d42d1daec8ff307dc

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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
chirpy	❌ Failed (Inspect)		Jan 22, 2023 at 8:43AM (UTC)

[cypress[bot]]

---

Test summary

4 • 2 • 0 • 1 • 0

---

Run details

Project	chirpy
Status	Failed
Commit	a076345a0a
Started	Jan 22, 2023 5:22 AM
Ended	Jan 22, 2023 5:25 AM
Duration	02:33 💡
OS	Linux Ubuntu - 22.04
Browser	Chrome 109

View run in Cypress Dashboard ➡️

---

Failures

	home/header.spec.ts		1
1	Header > should show user menu
	dashboard/project.spec.ts		1
1	Project > should show integration doc

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[github-actions[bot]]

Coverage report for ./apps/main

St.:grey_question:	Category	Percentage	Covered / Total
🔴	Statements	8.77%	40/456
🔴	Branches	10.23%	9/88
🔴	Functions	4.13%	5/121
🔴	Lines	9.27%	38/410

Test suite run success

2 tests passing in 2 suites.

Report generated by 🧪jest coverage report action from 362fe81ac8c3e2e04422460436c22552ebae308c

[relativeci[bot]]

Job #1255: Bundle Size — 2.02MiB (+0.11%).

e4596dd(current) vs a67fc39 main#1234(baseline)

Metrics (4 changes)

	Current Job #1255	Baseline Job #1234
Initial JS	1.39MiB(+0.01%)	1.39MiB
Initial CSS	92.71KiB(+2.43%)	90.51KiB
Cache Invalidation	18.47%	19.92%
Chunks	50	50
Assets	57	57
Modules	1045	1045
Duplicate Modules	182	182
Duplicate Code	4.86%(+0.62%)	4.83%
Packages	88	88
Duplicate Packages	0	0

Total size by type (2 changes)

|            |       Current
[Job #1255](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT?utm_source=github&utm_medium=pr-report "View job report") |      Baseline
[Job #1234](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1234-G73p6qDhW2ah5vcaOF4v?utm_source=github&utm_medium=pr-report "View baseline job report") | |:--|--:|--:| | [CSS](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Atrue%2C%22ft.JS%22%3Afalse%2C%22ft.IMG%22%3Afalse%2C%22ft.MEDIA%22%3Afalse%2C%22ft.FONT%22%3Afalse%2C%22ft.HTML%22%3Afalse%2C%22ft.OTHER%22%3Afalse%7D%7D "View all CSS assets") | `92.71KiB` (`+2.43%`) | `90.51KiB` | | [Fonts](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Afalse%2C%22ft.JS%22%3Afalse%2C%22ft.IMG%22%3Afalse%2C%22ft.MEDIA%22%3Afalse%2C%22ft.FONT%22%3Atrue%2C%22ft.HTML%22%3Afalse%2C%22ft.OTHER%22%3Afalse%7D%7D "View all Fonts assets") | `0B` | `0B` | | [HTML](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Afalse%2C%22ft.JS%22%3Afalse%2C%22ft.IMG%22%3Afalse%2C%22ft.MEDIA%22%3Afalse%2C%22ft.FONT%22%3Afalse%2C%22ft.HTML%22%3Atrue%2C%22ft.OTHER%22%3Afalse%7D%7D "View all HTML assets") | `0B` | `0B` | | [IMG](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Afalse%2C%22ft.JS%22%3Afalse%2C%22ft.IMG%22%3Atrue%2C%22ft.MEDIA%22%3Afalse%2C%22ft.FONT%22%3Afalse%2C%22ft.HTML%22%3Afalse%2C%22ft.OTHER%22%3Afalse%7D%7D "View all IMG assets") | `0B` | `0B` | | [JS](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Afalse%2C%22ft.JS%22%3Atrue%2C%22ft.IMG%22%3Afalse%2C%22ft.MEDIA%22%3Afalse%2C%22ft.FONT%22%3Afalse%2C%22ft.HTML%22%3Afalse%2C%22ft.OTHER%22%3Afalse%7D%7D "View all JS assets") | `1.92MiB` (`~+0.01%`) | `1.92MiB` | | [Media](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Afalse%2C%22ft.JS%22%3Afalse%2C%22ft.IMG%22%3Afalse%2C%22ft.MEDIA%22%3Atrue%2C%22ft.FONT%22%3Afalse%2C%22ft.HTML%22%3Afalse%2C%22ft.OTHER%22%3Afalse%7D%7D "View all Media assets") | `0B` | `0B` | | [Other](https://app.relative-ci.com/projects/rYoEVFddayylGRgFiBEd/jobs/1255-zZARtTsub0DwmjVNogQT/assets?ba=%7B%22filters%22%3A%7B%22ft.CSS%22%3Afalse%2C%22ft.JS%22%3Afalse%2C%22ft.IMG%22%3Afalse%2C%22ft.MEDIA%22%3Afalse%2C%22ft.FONT%22%3Afalse%2C%22ft.HTML%22%3Afalse%2C%22ft.OTHER%22%3Atrue%7D%7D "View all Other assets") | `11.53KiB` | `11.53KiB` |

---

View job #1255 report View refs/pull/557/merge branch activity

[github-actions[bot]]

Coverage report for ./packages/ui

❌ An unexpected error occurred. For more details, check console

Error: The process '/opt/hostedtoolcache/node/16.19.0/x64/bin/npx' failed with exit code 1

Branches coverage not met for global: expected >=26%, but got 25.6973293768546%	St.:grey_question:	Category	Percentage	Covered / Total
🔴	Statements	52% (-0.87% 🔻)	2355/4529
🔴	Branches	25.7% (-1.21% 🔻)	433/1685
🔴	Functions	35.6% (-0.78% 🔻)	455/1278
🔴	Lines	52.15% (-0.79% 🔻)	2240/4295

Show new covered files 🐣

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------- | :--------- | :------- | :-------- | :---- | | 🔴 |

`...` / index.ts

| 0% | 100% | 100% | 0% | | 🔴 |

`...` / input-field.tsx

| 0% | 0% | 0% | 0% | | 🔴 |

`...` / select-input.tsx

| 0% | 0% | 0% | 0% | | 🔴 |

`...` / styles.ts

| 0% | 100% | 0% | 0% | | 🔴 |

`...` / text-area-input.tsx

| 0% | 0% | 0% | 0% | | 🔴 |

`...` / text-input.tsx

| 0% | 0% | 0% | 0% |

Show files with reduced coverage 🔻

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------------------- | | 🟡 |

`...` / rest-handlers.ts

|

64.52% (-3.23% 🔻)

| 0% |

55.56% (-5.56% 🔻)

|

68% (-4% 🔻)

| | 🟢 |

`...` / next-router.tsx

|

81.82% (-9.09% 🔻)

| 100% |

66.67% (-16.67% 🔻)

| 85.71% | | 🟢 |

`...` / index.ts

|

90.35% (-0.72% 🔻)

| 100% |

80% (-1.48% 🔻)

| 100% | | 🟢 |

`...` / text.tsx

| 100% |

94.12% (-0.33% 🔻)

| 100% | 100% | | 🟡 |

`...` / use-form.ts

|

69.77% (-22.12% 🔻)

|

64.29% (-17.53% 🔻)

|

69.23% (-14.1% 🔻)

|

71.05% (-22.89% 🔻)

| | 🟡 |

`...` / validate.ts

|

69.23% (-9.34% 🔻)

|

56.25% (-18.75% 🔻)

| 100% |

69.23% (-9.34% 🔻)

| | 🟡 |

`...` / confirm-user-fields.tsx

|

62.5% (-17.5% 🔻)

|

68.97% (-13.79% 🔻)

|

66.67% (-33.33% 🔻)

|

64.1% (-17.95% 🔻)

| | 🔴 |

`...` / utils.ts

|

0% (-100% 🔻)

| 100% |

0% (-100% 🔻)

|

0% (-100% 🔻)

|

Test suite run failed

Failed tests: 1/50. Failed suites: 1/32.

``` ● Welcome › should call api with filled fields TestingLibraryElementError: Unable to find a label with the text of: /dispaly name/i Ignored nodes: comments, script, style

• Dashboard
• Docs
• Blog
• GitHub

Report generated by 🧪jest coverage report action from 362fe81ac8c3e2e04422460436c22552ebae308c

• © Githubissues.
• Githubissues is a development platform for aggregating issues.