Add a ID utility function for generating valid IDREFs

[NicholasBoll]

🚀 Feature Proposal

We need a utility function to create valid strings to be added as ids of DOM elements. Perhaps we should make a hook while we're at it.

We will also need to be able to generate stable ids as a result of this feature (#664)

Motivation

We make use of uuid to generate unique ids for accessibility requirements (label/for, input/id, etc). But the output of a uuid is not a valid IDREF. The spec says the id needs to always start with a letter and uuid sometimes returns a string that starts with a number.

The following will throw an error in the browser:

document.querySelector('#1234')

We have to compensate in tests like this:

document.querySelector('[id="1234"]')

A hook would also be nice since we use React.useState(() => uuid()) based on https://codesandbox.io/s/p2ndq

Example

import { generateId, useId } from '@workday/canvas-kit-react-core'

class MyComponent extends React.Component {
  this.inputId = generateId()

  // ...
}

const MyComponent = () => {
  const id = useId();

  return (
    <input id={id} /* ... */ />
  )
}

Edit:
There is a utility: https://github.com/Workday/canvas-kit/blob/master/modules/common/react/lib/utils/useUniqueId.ts

[jpante]

See #664 for additional context.

[NicholasBoll]

Closed by #1408