Docs: change import to lib-esm for drafts

[siddharthkp]

Fix import path in docs/examples. draft components cannot be imported from @primer/react/drafts, you have to mention the format as well: @primer/react/lib-esm/drafts or @primer/react/lib/drafts.

More context: #1768

// before: 
import {Button} from '@primer/react/drafts'

// after: 
import {Button} from '@primer/react/lib-esm/drafts'

// before: 

<drafts.Button>Default</drafts.Button>

// after:

// import {Button} from '@primer/react/lib-esm/drafts'
const {Button} = drafts // ignore docs silliness; import like that ↑

render(<Button>Default</Button>)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 13aec68

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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	59.92 KB (0%)
dist/browser.umd.js	60.28 KB (0%)

[rezrah]

Can we remove these lines altogether, as it's duplicated in the Installation section at the top of this page?

[siddharthkp]

I've kept them around for now because the next line isn't how you would import in the application, but that's how we do it in the docs.

const {ActionList} = drafts // ignore docs silliness; import like that ↑

I'd like to hide that implementation detail silliness altogether. Don't know how to do it yet, would work on it on another PR

[rezrah]

Yeah, was suggesting we remove both import lines here.. as the live code snippet works fine without them.

Something like this 👇 , although would be nice to get rid of the render function too if we can.

[siddharthkp]

If we remove both those lines, it picks Button v1 from @primer/components, not the one from drafts 😅, that's we import from drafts.

This PR would help remove the lines though - #1785 :)

[rezrah]

How do you feel about the IA here @siddharthkp? For easier discovery, would it make sense to co-locate it to the original component docs page under an experimental tab/panel/label?

[siddharthkp]

Ooh, I like that idea, but I'm not 100% sure 🤔

We loose the section heading of "Drafts", but that's probably okay. what do you think?

Different section	Collocated

[siddharthkp]

I thought about it a bit more and decided that we should put all the drafts together. When a draft component is ready to be used in production (design and a11y reviewed, then we should move it out of drafts and deprecate the previous one.)

[rezrah]

Looks good.

Only other question I have is what the plan is for the CommonJS version? Your docs only cover lib-esm import methods now, which may be most popular mechanism but raises others concerns.

The DX is quite poor if we need to ask user to add lib-esm to path each time. If we don't export these components in CJS, or if we have low utilisation, shouldn't we scrap the CommonJS folder or flip them so that lib-esm is the default format.

[siddharthkp]

Your docs only cover lib-esm import methods now, which may be most popular mechanism but raises others concerns.

We do have it export it as commonjs as well (package on unpkg), but we don't have that in the docs. I think we can add it to the top in the first import?

[siddharthkp]

Closed in favor of #1785