budibase/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

<script>
  import {
    ActionMenu,
    ActionGroup,
    ActionButton,
    MenuItem,
  } from "@budibase/bbui"
  import { store, currentAssetName } from "builderStore"
  import structure from "./componentStructure.json"

  $: enrichedStructure = enrichStructure(structure, $store.components)

  const enrichStructure = (structure, definitions) => {
    let enrichedStructure = []
    structure.forEach((item) => {
      if (typeof item === "string") {
        const def = definitions[`@budibase/standard-components/${item}`]
        if (def) {
          enrichedStructure.push({
            ...def,
            isCategory: false,
          })
        }
      } else {
        enrichedStructure.push({
          ...item,
          isCategory: true,
          children: enrichStructure(item.children || [], definitions),
        })
      }
    })
    return enrichedStructure
  }

  const onItemChosen = async (item, idx) => {
    if (item.isCategory) {
      // Select and open this category
      selectedIndex = idx
    } else {
      // Add this component
      await store.actions.components.create(item.component)
    }
  }
</script>

<ActionGroup>
  {#each enrichedStructure as item, idx}
    <ActionMenu disabled={!item.isCategory}>
      <ActionButton
        icon={item.icon}
        xs
        primary
        quiet
        slot="control"
        on:click={() => onItemChosen(item, idx)}
      >
        {item.name}
      </ActionButton>
      {#each item.children || [] as item}
        {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
          <MenuItem
            dataCy={`component-${item.name}`}
            icon={item.icon}
            on:click={() => onItemChosen(item)}
          >
            {item.name}
          </MenuItem>
        {/if}
      {/each}
    </ActionMenu>
  {/each}
</ActionGroup>