feat: move ID utilities to react-uid

[austingreendev]

Description

Our current ID management solution uses a shared variable that is incremented on each call. This works well for basic use-cases, but is dependent on the render order to be consistent. This can cause issues with SSR and code-splitting scenarios.

We have also seen issues with consumers upgrading dependencies and having duplicate IDs from conflicting container-utilities versions.

Detail

A popular solution seems to be the uuid library, but this isn't viable for SSR and reproducible snapshot testing.

Looking through a react issue I found a reference to https://www.npmjs.com/package/react-uid which seems to match our use-case well.

Some highlights:

• Provides TS types 😄
• Includes SSR viable hooks for consumption in our standard hook containers
• ID seed generation for more advanced use-cases if we need them in the future
• Several context providers for consumers to customize and reset ID's based on their environment

@ryanseddon this seems like it could be a good utility for usage in the product specific codebases.

Checklist

• 🌐 Storybook demo is up-to-date (yarn start)
• ♿ analyzed via axe and evaluated using VoiceOver
• 💂‍♂️ includes new unit tests
• 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

[austingreendev]

Also, this PR is exploratory. There's no need to merge if we don't feel it's the right path.

[jzempel]

Works for me. Will be interested in feedback from @ryanseddon.

[hzhu]

Also, this PR is exploratory. There's no need to merge if we don't feel it's the right path.

There's a pull request to add a useUniqueId hook in React that is under technical discussion at the moment 👀.

[austingreendev]

I've updated this to now include the package name and PACKAGE_VERSION with the UID seed generator. This allows multiple versions of react-uid to coexist correctly.

[ryanseddon]

LGTM will be interesting if this can be superseded by a react built in hook proposed in facebook/react#17322

Is the reason to pull it out of container-utilities to avoid dependency mismatches?

[austingreendev]

will be interesting if this can be superseded by a react built in hook proposed in

This would be the best path since react-dom is a peerDependency and could help ensure we only have a single state. It should be a drop-in replacement once it's ready.

Is the reason to pull it out of container-utilities to avoid dependency mismatches

Yes, but the main fix for that is including the package name and version in the seed generators. Moving to react-uid also helps with our SSR scenarios.