[SPIKE] Configurable Storefront Examples

[henrijoss]

Scope

We want to spike a storefront configurator which embeds a live stackblitz example for each framework.

Notes

Markup options:

• Example Markup is used from codeSamples
• Match and use slots from codeSamples or seperately?
• Keep component props which are configured in example? (e.g. aria) currently example markup is replaced

Example:

• Embed iframe and render vanilla-js example inside
• Maximize button (Render iframe fullscreen or in new tab?)

Props:
For required props a default selection should be made. Props with default value should be preselected in select field but only rendered in markup explicitly if not the default is selected.

• Array: Render as options
• boolean: true | false
• string: Render input?
• aria: No selection, apply by default?
  Hide props which can't be set via attribute but only by property? e.g. string[]

Slots:
Render multi select to add/remove named slots? Render single select for each named slot to provide multiple examples?
Render select with different examples for default slot? e.g. scrollable/non scrollable for flyout/modal

Where to store the slot information?
Slot names and description can be added as JSDocs ionic-team/stencil#1362
Slot example content in separate example?

Render checkbox and description for each slot, default slot always shown

Todo

• Render aria attributes on component markup
• Add theme to iframe
• Fix formatting after converting to frameworks
• Add partials to iframe
• Add required props without defaultValue/default selected props, extract them from example?
• Fullscreen example should not be scrollable/remove border in fullscreen
• Add theme/dir to iframe
• Add Stackblitz button
• Extract slot information from examples?
• Debounce text field inputs

Questions

• How to deal with controlled components state in frameworks?
  • Only render markup and leave out state (Code is not what is rendered)
  • Render component with all props and replace (Unnecessary props applied, controlled state still needs to be matched separately)
  • Leave out frameworks
  • Match all props for each framework and determine if they are controlled props? Apply custom match logic for state (Very complex, error prone, need to define which props are state)
• Keep theme in Props section or add Theme/Dir select like other examples?
• Fullscreen button is overlaying example
• AllowedValues string render input?
• AllowedValues aria do not render but apply automatically?
• Extract slots from codeSamples instead of manual work? All examples must be in full slot config for this to work. Maybe we could set the required props without defaultValue there as well?

Controlled components

• Accordion: (Multiple accordions in example problematic)
  state: open, event: update
• Banner:
  state: open, event: update
• Flyout
  state: open, event: dismiss
• Flyout-Multilevel:
  state: open, event: dismiss, update
• Modal:
  state: open, event: dismiss
• Stepper-Horizontal (state is on the item, complex example)
  state: state event: update
• Switch: (Why completely controlled and not like the other form components?)
  state: checked, event: update
• Tabs-Bar: (Why is tabs not controlled but tabs bar is?)
  state: activeTabIndex, event: update

Some infos

Accordion: Where state is managed in array instead of separate state for each accordion item
Inline-Notification: Could be shown statically without dismiss event
Tag Dimissable: Real example with onClick to dismiss?
Toast (Configurator doesnt make sense)
All Form Components: Example for controlled usage