Tablebuilder Redesign

[gosteenBASIS]

I've redesigned the TableBuilder React component. Resolves #266 and #235

The TableBuilder component now has the following features:

• Dramatically simpler syntax
• Handles all of the headings and text for the table sections
• Only loads the JSON data once for all tables
• Doesn't render a section if a table is empty
• Renders all tables with data by default
• Optional "tables" parameter to only render specific tables
• Wraps content in <code> tags if it is wrapped in backticks
• Parses <br> tags as line breaks
• If the component name isn't in the DWC control map file, you can directly specify the tag name
• No parentheses or semicolons in the tag, so Vale won't complain about it

The new syntax is as follows: <TableBuilder name="componentName" /> This will render the following tables: "parts", "slots", "properties", "reflects", "dependencies" It will exclude the entire section for any tables that don't have data.

You can specify only some tables, or change the order, with the following syntax: <TableBuilder name="componentName" tables={["slots", "parts", "dependencies"]} />

If you need a table for a client component that doesn't have a name in the control map file, you can just specify the tag in the name slot: <TableBuilder name="dwc-alert" />

I have updated the Components files with the new syntax, and updated the Client Components files by updating the create-files.js script and re-generating the files.

For all components, I used the default syntax that includes all available tables, even if some of them were not included in the original files. If there is a particular reason to exclude some of these tables from certain components, I can modify it to specify which tables to include.

[gosteenBASIS]

/rebase

[gosteenBASIS]

@MatthewHawkins I believe this is ready for final review now. The one remaining issue/question is how to handle the tables for parent components that don't get instantiated. See the Fields and Option Dialogs pages for examples. Currently, the text renders something like this:

These are the shadow DOM parts for the Field component, which are required for styling with CSS.

Do you think that wording is problematic? I could create some sort of additional parameter for the TableBuilder to take to format this text differently if the component isn't a usable component.

[gosteenBASIS]

/rebase

[MatthewHawkins]

@gosteenBASIS Hey Garrison, when you can, would you please rebase and go through any additional articles that have been added and change them to match what you've done here?

Once that's done, in lieu of separate headings listed in the TOC for each table, if you could please review the component articles using the table and place it under a heading called "Styling" (many will have this already), that would be great. Once that's done, we can merge.

[gosteenBASIS]

/rebase

[gosteenBASIS]

@MatthewHawkins Okay, I believe I correctly resolved the merge conflicts, got the TableBuilder added to the newly-added Icon page, and confirmed that all the Component pages have a "Styling" heading before the tables.