@api-client/ui 0.0.17 → 0.1.0

package/src/elements/modeling/internals/DomainEntityEditor.ts

@@ -1,813 +0,0 @@
-import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
-import { live } from 'lit-html/directives/live.js'
-import { property, state } from 'lit/decorators.js'
-import { type ClassInfo, classMap } from 'lit/directives/class-map.js'
-import {
-  DomainAssociation,
-  EventUtils,
-  type DomainEntity,
-  type DomainProperty,
-  DomainPropertyKind,
-  DomainAssociationKind,
-  DomainEntityKind,
-} from '@api-client/core/browser.js'
-import { ModelingElement } from './ModelingElement.js'
-import type { Tabs } from '@material/web/tabs/internal/tabs.js'
-import { getFieldDataTypeLabel, getFieldIcon } from './lib/UiMapping.js'
-import { createRef, ref } from 'lit/directives/ref.js'
-import type { MdMenu } from '@material/web/menu/menu.js'
-import type { MdMenuItem } from '@material/web/menu/menu-item.js'
-import type { KeydownReason, Reason } from '@material/web/menu/internal/controllers/shared.js'
-import { Events } from '../../../events/Events.js'
-import { DATA_DOMAIN_BROWSE } from '../../../apps/quick-api/Intents.js'
-import { bound } from '../../../decorators/bound.js'
-import { IntentFlags, Intent, IntentResult } from '../../../core/ActivityManager.js'
-import type { BrowseDataDomainResult } from '../../../apps/activities/BrowseDataDomainActivity.js'
-import type { EntitySelectDetail } from '../types.js'
-
-import '../../../md/icons/ui-icon.js'
-import '../../../md/button/ui-filled-tonal-button.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/iconbutton/icon-button.js'
-import '@material/web/tabs/tabs.js'
-import '@material/web/tabs/secondary-tab.js'
-import '@material/web/list/list.js'
-import '@material/web/list/list-item.js'
-import '@material/web/icon/icon.js'
-import '@material/web/menu/menu.js'
-import '@material/web/menu/menu-item.js'
-import '@material/web/select/outlined-select.js'
-import '@material/web/select/select-option.js'
-import '@material/web/chips/chip-set.js'
-import '@material/web/chips/input-chip.js'
-
-/**
- * Dispatched when a field (either a `DomainProperty` or a `DomainAssociation`) within the entity is selected.
- *
- * @event DomainEntityEditor#select
- * @type {CustomEvent}
- * @property {object} detail - The event details.
- * @property {string} detail.key - The key of the selected field.
- * @property {string} detail.kind - The kind of the selected field (e.g., `DomainPropertyKind`,
- * `DomainAssociationKind`).
- */
-
-/**
- * Dispatched when the user wants to navigate to a parent entity.
- *
- * @event DomainEntityEditor#openentity
- * @type {CustomEvent}
- * @property {object} detail - The event details.
- * @property {string} detail.key - The key of the parent entity to navigate to.
- * @property {string} detail.kind - The kind of the parent entity. It will always be `DomainEntityKind`.
- */
-
-/**
- * @fires DomainEntityEditor#select - A custom event with the `key` and `type` when a property was selected.
- * @fires DomainEntityEditor#openentity - A custom event with the `key` and `type` when a property was selected.
- */
-export default class DomainEntityEditor extends ModelingElement {
-  protected domainElement: DomainEntity | undefined
-
-  /**
-   * The currently selected tab in the editor.
-   * @attribute
-   */
-  @property({ type: String, reflect: true }) accessor contentTab: 'design' | 'preview' = 'design'
-
-  /**
-   * The key of the currently selected property.
-   * @attribute
-   */
-  @property({ type: String, reflect: true }) accessor selectedProperty: string | undefined
-
-  /**
-   * The mime type of the preview to render.
-   * @attribute
-   */
-  @property({ type: String }) accessor mime = 'application/json'
-  /**
-   * When set, the preview tab will generate example (mock) data.
-   * By default it only render values as defined in the schema.
-   * @attribute
-   */
-  @property({ type: Boolean }) accessor mockValues = false
-
-  /**
-   * The generated schema preview.
-   */
-  @state() accessor schemaPreview: string | undefined
-
-  addMenuRef = createRef<MdMenu>()
-
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('selected') || cp.has('root')) {
-      this.computeEntity()
-    }
-    if (cp.has('mime') || cp.has('mockValues')) {
-      this.generateExample()
-    } else if (cp.has('contentTab')) {
-      this.generateExample()
-    } else if (this.contentTab === 'preview') {
-      this.generateExample()
-    }
-    super.willUpdate(cp)
-  }
-
-  protected computeEntity(): void {
-    const { root, selected } = this
-    if (!root || !selected) {
-      this.domainElement = undefined
-      return
-    }
-    this.domainElement = root.findEntity(selected)
-  }
-
-  handleMetaChange(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const node = e.target as HTMLInputElement
-    const { name, value } = node
-    if (!['name', 'displayName', 'description'].includes(name as string)) {
-      return
-    }
-    if (name === 'name' && !value) {
-      return
-    }
-    domainElement.info[name as 'name' | 'description' | 'displayName'] = value
-    this.notifyChange()
-  }
-
-  handleContentTabChange(e: Event): void {
-    const tabs = e.target as Tabs
-    const tab = tabs.activeTab
-    if (!tab) {
-      return
-    }
-    const { key = '' } = tab.dataset
-    if (!['design', 'preview'].includes(key)) {
-      return
-    }
-    this.contentTab = key as 'design' | 'preview'
-  }
-
-  /**
-   * Generates the example data for the preview tab.
-   */
-  generateExample(): void {
-    const { domainElement: model, mime, mockValues = false, contentTab } = this
-    if (!model || contentTab !== 'preview') {
-      return
-    }
-    const value = model.toExample(mime, { renderMocked: mockValues, renderExamples: true })
-    this.schemaPreview = value as string | undefined
-  }
-
-  override notifyChange(): void {
-    super.notifyChange()
-    this.generateExample()
-  }
-
-  /**
-   * A handler for the mime type change event.
-   */
-  handleMimeChange(e: Event): void {
-    const node = e.currentTarget as HTMLSelectElement
-    const { value } = node
-    if (!value) {
-      return
-    }
-    this.mime = value
-  }
-
-  /**
-   * A handler for the field item click to select a field.
-   * @param e The click event.
-   */
-  handleFieldSelection(e: Event): void {
-    const item = e.currentTarget as HTMLElement
-    const { key, kind } = item.dataset
-    if (!key || !kind) {
-      return
-    }
-    this.select(key, kind)
-  }
-
-  /**
-   * Selects a field in the editor and dispatches a custom event with the key and kind of the field.
-   * @param key The key of the field to select.
-   * @param kind The kind of the field to select.
-   */
-  select(key: string, kind: string): void {
-    const detail: EntitySelectDetail = {
-      key,
-      kind,
-    }
-    this.selectedProperty = key
-    this.dispatchEvent(
-      new CustomEvent('select', {
-        detail,
-      })
-    )
-  }
-
-  addProperty(name?: string): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const prop = domainElement.addProperty({ info: { name: name || 'new_field' } })
-    this.select(prop.key, DomainPropertyKind)
-    this.notifyChange()
-  }
-
-  addAssociation(name?: string): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const prop = domainElement.addAssociation({}, { info: { name: name || 'new_reference' } })
-    this.select(prop.key, DomainAssociationKind)
-    this.notifyChange()
-  }
-
-  handleAddMenuClose(e: CustomEvent<{ initiator: MdMenuItem; reason: Reason; itemPath: MdMenuItem[] }>): void {
-    const { reason, initiator } = e.detail
-    if (reason.kind === 'keydown') {
-      const typedReason = reason as KeydownReason
-      if (typedReason.key === 'Escape') {
-        return
-      }
-    }
-    const { action = '' } = initiator.dataset
-    if (action === 'property') {
-      this.addProperty()
-    } else if (action === 'association') {
-      this.addAssociation()
-    }
-  }
-
-  handleChooseParent(): void {
-    Events.Intent.startActivityForResult(
-      {
-        action: DATA_DOMAIN_BROWSE,
-        flags: IntentFlags.Modal | IntentFlags.ForResult,
-        data: {
-          reason: 'pick',
-          namespaceKey: this.domainElement?.domain.key,
-          allowed: ['entity'],
-          withExternal: false,
-          withRecent: true,
-        },
-      },
-      this.handleSelectTargetEntity,
-      this
-    )
-  }
-
-  handleDeleteParent(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const item = e.currentTarget as HTMLElement
-    const { key } = item.dataset
-    if (!key) {
-      return
-    }
-    domainElement.removeParent(key)
-    this.notifyChange()
-    this.requestUpdate()
-  }
-
-  handleNavigateParent(e: Event): void {
-    const item = e.currentTarget as HTMLElement
-    const { key } = item.dataset
-    if (!key) {
-      return
-    }
-    const detail: EntitySelectDetail = {
-      key,
-      kind: DomainEntityKind,
-    }
-    this.dispatchEvent(new CustomEvent('openentity', { detail }))
-  }
-
-  @bound
-  protected handleSelectTargetEntity(result: IntentResult, intent: Intent): void {
-    if (result === IntentResult.RESULT_CANCELED) {
-      return
-    }
-    const info = intent.data as BrowseDataDomainResult
-    if (info.result !== 'ok') {
-      return
-    }
-    const { kind, selected, namespace } = info
-    if (!kind || !selected || !namespace) {
-      return
-    }
-    const { domainElement, root } = this
-    if (!domainElement || !root) {
-      return
-    }
-    if (root.key === namespace) {
-      domainElement.addParent(selected)
-      this.notifyChange()
-      this.requestUpdate()
-    }
-  }
-
-  protected handleInheritanceDragEnter(e: DragEvent): void {
-    const dt = e.dataTransfer
-    if (!dt) {
-      return
-    }
-    const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase())
-    if (!isDraggedEntity) {
-      return
-    }
-    const zone = e.currentTarget as HTMLElement
-    zone.classList.add('drop-zone')
-    dt.dropEffect = 'link'
-    dt.effectAllowed = 'link'
-  }
-
-  protected handleInheritanceDragOver(e: DragEvent): void {
-    const dt = e.dataTransfer
-    if (!dt) {
-      return
-    }
-    const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase())
-    if (!isDraggedEntity) {
-      return
-    }
-    e.preventDefault()
-  }
-
-  protected handleInheritanceDragLeave(e: DragEvent): void {
-    const dt = e.dataTransfer
-    if (!dt) {
-      return
-    }
-    const zone = e.currentTarget as HTMLElement
-    zone.classList.remove('drop-zone')
-  }
-
-  protected handleInheritanceDrop(e: DragEvent): void {
-    const dt = e.dataTransfer
-    if (!dt) {
-      return
-    }
-    const zone = e.currentTarget as HTMLElement
-    zone.classList.remove('drop-zone')
-    const key = dt.getData('text/key')
-    const kind = dt.getData('text/kind')
-    if (!key || kind !== DomainEntityKind) {
-      return
-    }
-    if (this.domainElement) {
-      this.domainElement.addParent(key)
-      this.notifyChange()
-      this.requestUpdate()
-    }
-  }
-
-  protected override render(): TemplateResult | typeof nothing {
-    const { domainElement } = this
-    if (!domainElement) {
-      return nothing
-    }
-    return html`${this.renderForm(domainElement)}${this.renderIntro()}`
-  }
-
-  protected renderForm(model: DomainEntity): TemplateResult {
-    return html`
-      <form name="entity" @submit="${EventUtils.cancelEvent}" data-key="${model.key}" class="modeling-form">
-        ${this.renderMetaInputs(model)} ${this.renderParentEntity(model)} ${this.renderContentTabs()}
-        ${this.renderTabsContent(model)}
-      </form>
-    `
-  }
-
-  protected renderMetaInputs(model: DomainEntity): TemplateResult {
-    return html`
-      <div class="editor-section">
-        <div class="row">
-          <md-outlined-text-field
-            class="input"
-            name="name"
-            .value="${live(model.info.name || '')}"
-            label="Name"
-            required
-            @change="${this.handleMetaChange}"
-          ></md-outlined-text-field>
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-        <div class="row">
-          <md-outlined-text-field
-            class="input"
-            name="displayName"
-            .value="${live(model.info.displayName || '')}"
-            label="Display name (optional)"
-            @change="${this.handleMetaChange}"
-          ></md-outlined-text-field>
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-        <div class="row">
-          <md-outlined-text-field
-            class="input"
-            name="description"
-            .value="${live(model.info.description || '')}"
-            label="Description (optional)"
-            @change="${this.handleMetaChange}"
-          ></md-outlined-text-field>
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-      </div>
-    `
-  }
-
-  protected renderParentEntity(model: DomainEntity): TemplateResult {
-    return html`
-      <div
-        class="inheritance-section"
-        @dragenter="${this.handleInheritanceDragEnter}"
-        @dragover="${this.handleInheritanceDragOver}"
-        @dragleave="${this.handleInheritanceDragLeave}"
-        @drop="${this.handleInheritanceDrop}"
-      >
-        <div class="section-header">
-          <span class="label-large">Inherits from</span>
-          <ui-filled-tonal-button type="button" class="select" @click="${this.handleChooseParent}"
-            >Choose parent entity</ui-filled-tonal-button
-          >
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-        ${this.renderParentItems(model)}
-      </div>
-    `
-  }
-
-  protected renderParentItems(model: DomainEntity): TemplateResult | typeof nothing {
-    if (!model.hasParents()) {
-      return nothing
-    }
-    const contents: TemplateResult[] = []
-    for (const item of model.listParents()) {
-      const label = item.info.getLabel()
-      contents.push(
-        html`<md-input-chip
-          class="parent-chip"
-          data-key="${item.key}"
-          remove-only
-          title="Open the parent entity"
-          aria-label="Open the parent entity ${label}"
-          @remove="${this.handleDeleteParent}"
-          @click="${this.handleNavigateParent}"
-          >${label}</md-input-chip
-        >`
-      )
-    }
-    return html`<md-chip-set>${contents}</md-chip-set>`
-  }
-
-  protected renderContentTabs(): TemplateResult {
-    return html`
-      <md-tabs @change="${this.handleContentTabChange}">
-        <md-secondary-tab data-key="design" active>Design</md-secondary-tab>
-        <md-secondary-tab data-key="preview">Preview</md-secondary-tab>
-      </md-tabs>
-    `
-  }
-
-  protected renderTabsContent(model: DomainEntity): TemplateResult {
-    const { contentTab } = this
-    switch (contentTab) {
-      case 'design':
-        return this.renderDesignTabContent(model)
-      case 'preview':
-        return this.renderPreviewTabContent()
-      default:
-        return html`<p>Invalid selection.</p>`
-    }
-  }
-
-  protected renderDesignTabContent(model: DomainEntity): TemplateResult {
-    // TODO: Add taxonomy related UI.
-    return this.renderFieldsSection(model)
-  }
-
-  protected renderPreviewTabContent(): TemplateResult {
-    return html`
-      <div class="preview-section">
-        ${this.renderPreviewMimeSelector()}
-        <div class="schema-preview"><pre class="title-small">${this.schemaPreview}</pre></div>
-      </div>
-    `
-  }
-
-  protected renderPreviewMimeSelector(): TemplateResult {
-    const { mime } = this
-    const mimes = ['application/json', 'application/xml']
-    return html`<div class="row">
-      <md-outlined-select
-        label="Media Type"
-        class="input"
-        name="mime"
-        menuPositioning="popover"
-        @change="${this.handleMimeChange}"
-      >
-        ${mimes.map(
-          (item) =>
-            html`<md-select-option ?selected="${mime === item}" value="${item}">
-              <div slot="headline">${item}</div>
-            </md-select-option>`
-        )}
-      </md-outlined-select>
-    </div>`
-  }
-
-  protected renderFieldsSection(model: DomainEntity): TemplateResult {
-    return html`
-      <div class="fields-section">
-        <div class="fields-header">
-          <span class="label-large">Fields</span>
-          ${this.renderFieldAddButton()}
-        </div>
-        ${model.hasFields() ? this.renderFieldsList(model) : this.renderFieldsEmptyState()}
-      </div>
-    `
-  }
-
-  protected renderFieldAddButton(): TemplateResult {
-    return html`<div class="field-add-button">
-      <ui-filled-tonal-button
-        id="field-new-anchor"
-        trailingicon
-        type="button"
-        @click=${() => this.addMenuRef.value?.show()}
-      >
-        Add field
-        <md-icon slot="icon">arrow_drop_down</md-icon>
-      </ui-filled-tonal-button>
-      <md-menu
-        positioning="popover"
-        id="new-field-menu"
-        anchor="field-new-anchor"
-        anchor-corner="end-start"
-        y-offset="8"
-        @close-menu="${this.handleAddMenuClose}"
-        ${ref(this.addMenuRef)}
-      >
-        <md-menu-item data-action="property">
-          <div slot="headline">Property</div>
-          <div slot="supporting-text">Data property in the schema</div>
-        </md-menu-item>
-        <md-menu-item data-action="association">
-          <div slot="headline">Reference</div>
-          <div slot="supporting-text">Connect to another entity object</div>
-        </md-menu-item>
-      </md-menu>
-    </div>`
-  }
-
-  protected renderFieldsEmptyState(): TemplateResult {
-    return html`<div class="empty-fields">
-      <div class="icon-wrapper">
-        <ui-icon class="icon" icon="textFields"></ui-icon>
-      </div>
-      <p class="empty-message body-large">Find your data entities here</p>
-      <p class="empty-message body-large">Add a data entity to describe your schema.</p>
-    </div>`
-  }
-
-  protected renderFieldsList(items: DomainEntity): TemplateResult {
-    const contents: TemplateResult[] = []
-    for (const item of items.listFields()) {
-      contents.push(this.renderField(item))
-    }
-    return html`<md-list class="fields-list">${contents}</md-list>`
-  }
-
-  protected renderField(item: DomainAssociation | DomainProperty): TemplateResult {
-    const selected = this.selectedProperty === item.key
-    const classes: ClassInfo = {
-      'field-item': true,
-      'selected': selected,
-    }
-    const label = item.info.getLabel()
-    const icon = selected ? 'check' : getFieldIcon(item)
-    return html`<md-list-item
-      class="${classMap(classes)}"
-      type="button"
-      data-key="${item.key}"
-      data-kind="${item.kind}"
-      @click="${this.handleFieldSelection}"
-    >
-      <span slot="start"><ui-icon class="icon" icon="${icon}"></ui-icon></span>
-      <span slot="headline">${label}</span>
-      <span slot="trailing-supporting-text">${getFieldDataTypeLabel(item)}</span>
-    </md-list-item>`
-  }
-
-  protected renderIntro(): TemplateResult {
-    return html`
-      <ui-divider class="divider"></ui-divider>
-      <section class="intro body-medium">
-        <h2 class="intro-title title-large">
-          <div class="theme-icon-wrapper">
-            <ui-icon class="icon" icon="schemaEntity"></ui-icon>
-          </div>
-          Defining the Pieces of Your Data: Introducing Data Entities
-        </h2>
-        <p>
-          You've already learned about data namespaces (the folders) and data models (the blueprints). Now, let's dive
-          into the individual pieces of information that make up your data: <strong>data entities</strong>.
-        </p>
-
-        <p>
-          Think of a data entity as a specific type of thing you want to track or manage in your data domain. It's like
-          a template for a particular kind of object. For example, in an online store, you might have data entities like
-          "Customer," "Product," "Order," or "Address."
-        </p>
-
-        <h3 class="title-medium">What is a Data Entity?</h3>
-        <p>
-          A data entity represents a single, distinct type of data. It's a way to describe the characteristics and
-          properties of a specific kind of object. Each data entity has:
-        </p>
-        <ul>
-          <li>
-            <strong>Properties:</strong> These are the individual pieces of information that describe the entity. For
-            example, a "Customer" entity might have properties like "Name," "Email," and "Phone Number."
-          </li>
-          <li>
-            <strong>Associations:</strong> These are the relationships between different entities. For example, a
-            "Customer" entity might be associated with one or more "Order" entities.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">Why Use Data Entities?</h3>
-        <p>Data entities help you:</p>
-        <ul>
-          <li>
-            <strong>Define Your Data Clearly:</strong> They provide a structured way to describe the different types of
-            information you're working with.
-          </li>
-          <li>
-            <strong>Organize Related Information:</strong> They group together all the properties that belong to a
-            specific type of object.
-          </li>
-          <li>
-            <strong>Establish Relationships:</strong> They allow you to define how different types of data are connected
-            to each other.
-          </li>
-          <li>
-            <strong>Create Reusable Structures:</strong> Once you've defined a data entity, you can use it as a template
-            for creating new data entries of that type.
-          </li>
-          <li>
-            <strong>Build Complex Data Domains:</strong> You can create a complex data domain by combining multiple data
-            entities.
-          </li>
-          <li>
-            <strong>Reuse:</strong> You can reuse the same data structures in different contexts. For example, you can
-            reuse the "Address" data entity in both the "Customers" and "Orders" data models.
-          </li>
-          <li>
-            <strong>Extend:</strong> You can extend the existing data structures without breaking the existing data. For
-            example, you can add a new data entity for "Marketing" without breaking the existing data structures.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">Example: The Online Store Data Entities</h3>
-
-        <p>Let's continue with our online store example. Here are some data entities you might define:</p>
-
-        <div class="example">
-          <div class="example-title title-small">Customer:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Name</li>
-                <li>Email</li>
-                <li>Phone Number</li>
-                <li>Date of Birth</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>Orders (a customer can have multiple orders)</li>
-                <li>Address (a customer has an address)</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-
-        <div class="example">
-          <div class="example-title title-small">Product:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Name</li>
-                <li>Description</li>
-                <li>Price</li>
-                <li>SKU</li>
-                <li>Image URL</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>None in this example, but you could have associations to "Category" or "Supplier" entities.</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-
-        <div class="example">
-          <div class="example-title title-small">Order:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Order Number</li>
-                <li>Order Date</li>
-                <li>Total</li>
-                <li>Status</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>Customer (an order belongs to a customer)</li>
-                <li>Order Items (an order has multiple order items)</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-        <div class="example">
-          <div class="example-title title-small">Address:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Street</li>
-                <li>City</li>
-                <li>Zip Code</li>
-                <li>Country</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>Customer (an address belongs to a customer)</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-
-        <h3 class="title-medium">Benefits in this Scenario:</h3>
-        <ul>
-          <li>
-            <strong>Clear Definitions:</strong> You have a clear definition of what a "Customer," "Product," "Order,"
-            and "Address" are in your system.
-          </li>
-          <li>
-            <strong>Organized Information:</strong> All the relevant information about a customer is grouped within the
-            "Customer" entity.
-          </li>
-          <li>
-            <strong>Understanding Relationships:</strong> You can see that a "Customer" can have multiple "Orders" and
-            that an "Order" is associated with a "Customer."
-          </li>
-          <li>
-            <strong>Complex Data Domains:</strong> You can create a complex data domain by combining multiple data
-            entities.
-          </li>
-          <li>
-            <strong>Reuse:</strong> You can reuse the "Address" data entity in both the "Customers" and "Orders" data
-            models.
-          </li>
-          <li>
-            <strong>Extend:</strong> You can add a new data entity for "Marketing" without breaking the existing data
-            structures.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">In Summary</h3>
-
-        <p>
-          Data entities are the core building blocks of your data domain. They allow you to define the specific types of
-          information you need to manage, organize related data, and establish relationships between different types of
-          data.
-        </p>
-      </section>
-    `
-  }
-}