build: Add exports field and ESM build for bundlers with module field/condition

[emmatown]

This adds an exports field so that AgDS can be imported in Node ESM environments (the exports field is required is in Node ESM for imports like package/something). The exports field also restricts imports to what's specified in it so imports like e.g. @ag.ds-next/react/src/blah don't work, for the imports in the repo where it makes sense to do this, I've changed them to be relative which the exports field doesn't block. All the package.json changes were done with preconstruct fix after adding the "exports": true option the root config. Using the "exports": true option in Preconstruct also enforces that there's an ESM build for bundlers so this adds that as well (I'm pretty sure that was just mistakenly removed in #902), also worth noting that this ESM build is unrelated to Node ESM, it's only used by bundlers and intentionally isn't used in Node for reasons that would take a while to get into.

Checklist

Preflight

• Prefix the PR title with the slug of the package or component - e.g. accordion: Updated padding or docs: Updated header links
• Describe the changes clearly in the PR description
• Read and check your code before tagging someone for review
• Create a changeset file by running yarn changeset. Learn more about change management.

Testing

• Manually test component in various modern browsers at various sizes (use Browserstack)
• Manually test component in various devices (phone, tablet, desktop)
• Manually test component using a keyboard
• Manually test component using a screen reader
• Manually tested in dark mode
• Component meets Web Content Accessibility Guidelines (WCAG) 2.1 standards
• Add any necessary unit tests (HTML validation, snapshots etc)
• Run yarn test to ensure tests are passing. If required, run yarn test -u to update any generated snapshots.

Documentation

• Create or update documentation on the website
• Create or update stories for Storybook
• Create or update stories for Playroom snippets

Creating new component

• Document the component for the website (docs/overview.mdx and docs/code.mdx at a minimum)
• Preconstruct entrypoint has been created (run yarn in the root of the repo to do this)
• Changeset file includes a minor
• Export components for docs site and Playroom (docs/components/designSystemComponents.tsx)
• Add component to Kitchen Sink (.storybook/stories/KitchenSink.tsx)
• Add snippets to Playroom (docs/playroom/snippets.ts)
• Add pictogram to Docs (docs/components/pictograms/index.tsx)

[changeset-bot]

🦋 Changeset detected

Latest commit: aad733f

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

This PR includes changesets to release 1 package

Name	Type
@ag.ds-next/react	Patch

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[stowball]

@emmatown When you plop create a new component (with yarn new:package) it asks "A package.json file does not exist for this entrypoint, would you like to create one automatically?". With this change, it now errors with "error @ag.ds-next/react exports field is invalid, found… Some of the errors above can be fixed automatically by running preconstruct fix".

yarn preconstruct fix does correctly update the package.json, but is it possible to automate this?

[emmatown]

Is this what you're thinking? aad733f

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[stowball]

Is this what you're thinking? aad733f

Awesome! Now it doesn't even ask, it just does it! 🎉

[stowball]

Thank you for this!