feat: handle imported/exported components

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.

[KaiVandivier]

Updates the CLI to only generate docs for components that are exported from a library

Instead of specifying one or more directories to parse all JS files for component definitions, you can specify one or more package entrypoints that export components. For the UI library, this might look like ./components/**/src/index.js. This script will find the definitions of all those exported components and generate docs for them.

The current React Docgen alpha version includes an importer that resolves imported types and values, which can be used to traverse imports to find exported component definitions. Tools that are built in to React Docgen already support parsing some exported components, but only when they use this syntax:

import{Component}from'./Component.js'export{Component}

Most of the exports in the UI library are in this syntax though, which is not currently handled in React Docgen:

export{Component}from'./Component.js'

I added a custom resolver for React Docgen to use when resolving component definitions that handles that latter syntax.

I also added a custom handler that adds each component's filepath to its documentation object.

SIDE NOTE: I noticed in the UI library that there are a few components whose display names don't match their exported names - I propose that we make sure those match for documentation purposes and for clarity when inspecting a component tree. These are what I noticed:

1. CenteredContent: display name = Center
2. ComponentCover: display name = Cover
3. Table elements in DataTable (TableBody, TableFoot, TableHead, and TableToolbar): exported as DataTable___, but display name = Table___
   • I realize these aren't as straightforward to name, and they might become the basic table components anyway. I think it's okay to give them the DataTable_ display names until then, though

[mediremi]

Let's add ast-types as an explicit dependency:

Suggested change

	"react-docgen": "^6.0.0-alpha.0",
	"react-docgen": "^6.0.0-alpha.0",
	"ast-types": "^0.14.2",

[KaiVandivier]

Woops! Thought I did 😅

[mediremi]

This is a really big improvement to our existing docs 🥇

Thanks for this Kai!

---

Since the only change I think needs to be done is adding ast-types to package.json I'll approve now.