Added examples to admin Structure components (Part II)

[davebcn87]

Background

This PR adds comprehensive component examples to the Admin UI Extensions documentation for 5 components in the Structure category (Part II). These examples were automatically parsed and imported from the existing Polaris markdown documentation.

Solution

• Enhanced Documentation Parser: Improved the markdown parsing script to support both .doc.ts and .ab.doc.ts files (App Bridge components)
• Automated Example Generation: Extracted examples from Polaris markdown documentation and generated individual HTML example files
• TypeScript Integration: Updated component documentation files with proper examples sections and TypeScript-safe character escaping

Components Updated

Structure Category - Part II (5 components, 20 examples total):

• Page (4 examples):

  • Basic page layout default base inline size
  • Large inline size for wide content
  • Page with heading
  • Small inline size for focused content

• Section (4 examples):

  • Full width content layout
  • Nested sections with visual level differences
  • Section with accessibility label
  • Top level section with form elements

• Stack (5 examples):

  • Basic block stack vertical
  • Custom alignment
  • Custom spacing
  • Inline stack horizontal
  • Responsive stack with container queries

• Table (5 examples + 1 updated):

  • Advanced table with all list slot types
  • Basic usage
  • Full width product inventory table
  • With loading state
  • With pagination

• UnorderedList (1 example):

  • Store setup checklist

Technical Changes

• Updated .doc.ts files for 4 regular Structure components
• Updated .ab.doc.ts file for Page (App Bridge component)
• Enhanced parsing script with improved comma insertion logic and character escaping
• Preserved existing default.html example files while adding new ones
• Added comprehensive layout and organizational component examples

🎩 Testing Steps

1. Run the documentation build:

   yarn docs:admin examples-structure-2

2. Navigate to shopify-dev repo and test locally at docs/api/app-home/polaris-web-components/structure/

3. Verify the newly added examples are displayed correctly for each component:

   • Page - test different page layouts and sizing options
   • Section - verify nested section hierarchy and accessibility
   • Stack - confirm layout alignment and responsive behavior
   • Table - validate table functionality, loading states, and pagination
   • UnorderedList - test list structure and content organization

4. Test that existing default.html examples still work as expected

Quality Assurance

• All examples are sourced from official Polaris documentation
• Examples include proper descriptions and usage context
• TypeScript compilation passes without errors
• Maintains backward compatibility with existing examples
• Comprehensive coverage of layout patterns, data organization, and structural components

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[sam-b-rose]

Might be better to use s-paragraph here (and for other block-like text content examples)

[sam-b-rose]

Should this be inline or block?

[sam-b-rose]

This one seems to be almost identical to the "Page with heading" example. Might be good to consolidate

Screen.Recording.2025-10-01.at.10.50.24.AM.mov

[sam-b-rose]

We might need to add a new layout here. The page examples are getting squished (maybe due to the container parent)