feat!: refactor field component API

[joshuaellis]

What does it do?

• refactors the Field API to be a composite component
• uses a default value so you can use our inputs in and out of the Field component

Related issue(s)/PR(s)

• resolves DX-1386

[changeset-bot]

🦋 Changeset detected

Latest commit: e54aaa9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@strapi/design-system	Major
@strapi/icons	Major
@strapi/ui-primitives	Major

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
design_system_v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2024 2:49pm
design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2024 2:49pm
design-system-website	❌ Failed (Inspect)			May 3, 2024 2:49pm

[github-actions]

Size Change: +1.16 kB (0%)

Total Size: 297 kB

Filename	Size	Change
packages/design-system/dist/index.js	98.9 kB	+639 B (+1%)
packages/design-system/dist/index.mjs	97.5 kB	+516 B (+1%)

ℹ️ View Unchanged

Filename	Size
packages/icons/dist/index.js	22.1 kB
packages/icons/dist/index.mjs	21.7 kB
packages/icons/dist/symbols-index.js	11.9 kB
packages/icons/dist/symbols-index.mjs	11.8 kB
packages/primitives/dist/index.js	16.6 kB
packages/primitives/dist/index.mjs	16.1 kB

_{compressed-size-action}

[simotae14]

Why did you add this?

[joshuaellis]

typescript manages this for us, and there were weird errors where eslint thought there was an issue with dual exports but it wasn't an issue since we use TS namespacing 🤔

[simotae14]

Great work as always

I saw there are part of code repeated in some input fields

const hasError = Boolean(error) || hasErrorProp;
    const id = field.id ?? idProp;
    const required = field.required || requiredProp;

    let ariaDescription: string | undefined;
    if (error) {
      ariaDescription = `${id}-error`;
    } else if (field.hint) {
      ariaDescription = `${id}-hint`;
    }

but to be honest I can find a better way to do it.

[joshuaellis]

Great work as always

I saw there are part of code repeated in some input fields

const hasError = Boolean(error) || hasErrorProp;
    const id = field.id ?? idProp;
    const required = field.required || requiredProp;

    let ariaDescription: string | undefined;
    if (error) {
      ariaDescription = `${id}-error`;
    } else if (field.hint) {
      ariaDescription = `${id}-hint`;
    }

but to be honest I can find a better way to do it.

Yeah I agree, I'll keep it mind when working on other bits, it might be that the API could be made better again 🤔