@api-client/ui 0.0.17 → 0.1.0

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

@@ -1,241 +0,0 @@
-import { html, nothing, PropertyValues, TemplateResult } from 'lit'
-import { live } from 'lit/directives/live.js'
-import { ModelingElement } from './ModelingElement.js'
-import { EventUtils, type DomainModel } from '@api-client/core/browser.js'
-import '../../../md/icons/ui-icon.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/iconbutton/icon-button.js'
-
-/**
- * An UI element that renders an editor for a DomainModel
- */
-export default class DomainModelEditor extends ModelingElement {
-  private domainElement: DomainModel | undefined
-
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('selected')) {
-      this.computeDataModel()
-    }
-    super.willUpdate(cp)
-  }
-
-  protected computeDataModel(): void {
-    const { root, selected } = this
-    if (!root || !selected) {
-      this.domainElement = undefined
-      return
-    }
-    this.domainElement = root.findModel(selected)
-  }
-
-  handleValueChange(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const node = e.target as HTMLInputElement
-    const { name, value } = node
-    if (!['name', 'description'].includes(name as string)) {
-      return
-    }
-    if (name === 'name' && !value) {
-      return
-    }
-    domainElement.info[name as 'name' | 'description'] = value
-    this.notifyChange()
-  }
-
-  protected override render(): TemplateResult | typeof nothing {
-    const { domainElement } = this
-    if (!domainElement) {
-      return nothing
-    }
-    return html`${this.renderForm(domainElement)}${this.renderIntro()}`
-  }
-
-  protected renderForm(model: DomainModel): TemplateResult {
-    return html`
-      <form name="data-model" @submit="${EventUtils.cancelEvent}" data-key="${model.key}" class="modeling-form">
-        <div class="editor-section">
-          <div class="row">
-            <md-outlined-text-field
-              class="input"
-              name="name"
-              .value="${live(model.info.name || '')}"
-              label="Name name"
-              required
-              @change="${this.handleValueChange}"
-            ></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.handleValueChange}"
-            ></md-outlined-text-field>
-            <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-          </div>
-        </div>
-      </form>
-    `
-  }
-
-  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="schemaModel"></ui-icon>
-          </div>
-          Building Blocks of Your Data: Introducing Data Models
-        </h2>
-        <p>
-          You've already learned about data namespaces, which are like folders for organizing your data. Now, let's talk
-          about what goes <em>inside</em> those folders: <strong>data models</strong>.
-        </p>
-
-        <p>
-          Think of a data model as a blueprint or a plan for a specific type of information. It describes what kind of
-          data you'll be working with and how the different pieces of that data relate to each other.
-        </p>
-
-        <h3 class="title-medium">What is a Data Model?</h3>
-        <p>
-          A data model is a collection of related data entities. It's like a detailed plan for a specific area of your
-          data. For example, if you're building an online store, you might have a "Customer" data model, a "Product"
-          data model, and an "Order" data model.
-        </p>
-
-        <h3 class="title-medium">Why Use Data Models?</h3>
-        <ul>
-          <li>
-            <strong>Define Your Data:</strong> Clearly outline what information you need to store and how it should be
-            structured.
-          </li>
-          <li>
-            <strong>Group Related Data:</strong> Bring together all the different pieces of information that belong to a
-            specific area. For example, all the details about a customer (name, address, email, etc.) would be grouped
-            in the "Customer" data model.
-          </li>
-          <li>
-            <strong>Create Reusable Structures:</strong> Once you've defined a data model, you can use it as a template
-            for creating new data entries.
-          </li>
-          <li>
-            <strong>Understand Relationships:</strong> Data models help you see how different types of data are
-            connected. For example, you might see that a "Customer" can have multiple "Orders."
-          </li>
-          <li>
-            <strong>Build Complex Data Domains:</strong> You can create a complex data domain by combining multiple data
-            models.
-          </li>
-          <li>
-            <strong>Reuse:</strong> You can reuse the same data structures in different contexts. For example, you can
-            reuse the "Address" data structure 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 model for "Marketing" without breaking the existing data structures.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">How Data Models Work in Our System</h3>
-        <p>In our system, you'll create data models within your namespaces. Here's how they fit in:</p>
-        <ul>
-          <li><strong>Namespaces:</strong> These are the folders that help you organize your data.</li>
-          <li>
-            <strong>Data Models:</strong> Inside each namespace, you can create data models. Each data model is a
-            collection of related data entities.
-          </li>
-          <li>
-            <strong>Data Entities:</strong> Inside each data model, you define <strong>data entities</strong>. A data
-            entity represents a specific type of data, like a "Customer" or a "Product."
-          </li>
-          <li>
-            <strong>Data Properties:</strong> Inside each data entity, you define <strong>data properties</strong>. A
-            data property is a single piece of information about the entity, like a "Customer's Name" or a "Product's
-            Price."
-          </li>
-          <li>
-            <strong>Data Associations:</strong> Data entities can be associated with each other. For example, a
-            "Customer" entity can be associated with an "Address" entity.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">Example: The Online Store Data Models</h3>
-        <p>Let's go back to our online store example. Here's how you might use data models:</p>
-        <div class="example">
-          <div class="example-title title-small">Customers Data Model Entities:</div>
-          <ul>
-            <li>Customer Profile (with properties like Name, Email, Phone)</li>
-            <li>Address (with properties like Street, City, Zip Code)</li>
-            <li>Order History (with properties like Order Date, Order Total)</li>
-          </ul>
-        </div>
-
-        <div class="example">
-          <div class="example-title title-small">Products Data Model Entities:</div>
-          <ul>
-            <li>Product Details (with properties like Name, Description, Price)</li>
-            <li>Inventory (with properties like Quantity, Location)</li>
-          </ul>
-        </div>
-
-        <div class="example">
-          <div class="example-title title-small">Orders Data Model Entities:</div>
-          <ul>
-            <li>Order Details (with properties like Order Number, Order Date, Total)</li>
-            <li>Order Item (with properties like Product, Quantity, Price)</li>
-          </ul>
-        </div>
-        <div class="example">
-          <div class="example-title title-small">Marketing Data Model Entities:</div>
-          <ul>
-            <li>Campaign (with properties like Name, Start Date, End Date)</li>
-            <li>Promotion (with properties like Name, Discount, Start Date, End Date)</li>
-            <li>Customer Segment (with properties like Name, Description)</li>
-          </ul>
-        </div>
-
-        <h3 class="title-medium">Benefits in this Scenario:</h3>
-        <ul>
-          <li>
-            <strong>Clear Structure:</strong> It's easy to see what information belongs to customers, products, orders,
-            and marketing.
-          </li>
-          <li>
-            <strong>Reusable Blueprints:</strong> You can use the "Customer" data model as a template whenever you need
-            to add a new customer to your system.
-          </li>
-          <li>
-            <strong>Understanding Connections:</strong> You can define that a "Customer" can have multiple "Orders" and
-            that an "Order" contains multiple "Order Items."
-          </li>
-          <li>
-            <strong>Complex Data Domains:</strong> You can create a complex data domain by combining multiple data
-            models.
-          </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 model for "Marketing" without breaking the existing data
-            structures.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">In Summary</h3>
-
-        <p>
-          Data models are the blueprints for your data. They help you define, group, and understand your information. By
-          creating data models, you're building a solid foundation for your data domain.
-        </p>
-      </section>
-    `
-  }
-}

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

@@ -1,207 +0,0 @@
-import { html, nothing, PropertyValues, TemplateResult } from 'lit'
-import { live } from 'lit/directives/live.js'
-import { ModelingElement } from './ModelingElement.js'
-import { EventUtils, type DomainNamespace } from '@api-client/core/browser.js'
-
-import '../../../md/icons/ui-icon.js'
-import '../../../md/divider/ui-divider.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/iconbutton/icon-button.js'
-
-/**
- * An UI element that renders an editor for a DomainNamespace.
- */
-export default class DomainNamespaceEditor extends ModelingElement {
-  private domainElement: DomainNamespace | undefined
-
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('selected')) {
-      this.computeNamespace()
-    }
-    super.willUpdate(cp)
-  }
-
-  protected computeNamespace(): void {
-    const { root, selected } = this
-    if (!root || !selected) {
-      this.domainElement = undefined
-      return
-    }
-    this.domainElement = root.findNamespace(selected)
-  }
-
-  handleValueChange(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const node = e.target as HTMLInputElement
-    const { name, value } = node
-    if (!['name', 'description'].includes(name as string)) {
-      return
-    }
-    if (name === 'name' && !value) {
-      return
-    }
-    domainElement.info[name as 'name' | 'description'] = value
-    this.notifyChange()
-  }
-
-  protected override render(): TemplateResult | typeof nothing {
-    const { domainElement } = this
-    if (!domainElement) {
-      return nothing
-    }
-    return html`${this.renderForm(domainElement)}${this.renderIntro()}`
-  }
-
-  protected renderForm(model: DomainNamespace): TemplateResult {
-    return html`
-      <form name="data-model" @submit="${EventUtils.cancelEvent}" data-key="${model.key}" class="modeling-form">
-        <div class="editor-section">
-          <div class="row">
-            <md-outlined-text-field
-              class="input"
-              name="name"
-              .value="${live(model.info.name || '')}"
-              label="Name name"
-              required
-              @change="${this.handleValueChange}"
-            ></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.handleValueChange}"
-            ></md-outlined-text-field>
-            <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-          </div>
-        </div>
-      </form>
-    `
-  }
-
-  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="schemaNamespace"></ui-icon>
-          </div>
-          Organizing Your Data: Introducing Data Namespaces
-        </h2>
-        <p>
-          Think about how you organize things in your everyday life. You might have separate folders on your computer
-          for "Work," "Personal," and "School." Or you might have different sections in your home, like the "Kitchen,"
-          "Bedroom," and "Living Room." This kind of organization helps you keep things tidy and find what you need
-          quickly.
-        </p>
-        <p>
-          Data namespaces are a similar idea, but for your data. In our system, a namespace is like a container or a
-          folder that helps you group related pieces of data together. It's a way to create clear boundaries between
-          different areas of your data.
-        </p>
-        <h3 class="title-medium">Why Use Data Namespaces?</h3>
-        <p>
-          As you start building your data domain, you'll likely have many different types of information. Without a good
-          way to organize it, things can get messy and confusing. Data namespaces help you:
-        </p>
-        <ul>
-          <li>
-            <b>Keep Things Organized</b>: Group related data together. For example, you might put all your customer
-            information in one namespace and all your product information in another.
-          </li>
-          <li>
-            <b>Avoid Confusion</b>: Imagine you have a "Name" field for both customers and products. Without namespaces,
-            the system wouldn't know which "Name" you meant. Namespaces prevent this kind of confusion by keeping these
-            separate.
-          </li>
-          <li>
-            <b>Make Your Data Easier to Understand</b>: When your data is well-organized, it's much easier to see how
-            everything fits together.
-          </li>
-          <li>
-            <b>Reuse</b>: You can reuse the same data structures in different contexts. For example, you can reuse the
-            "Address" data structure in both the "Customers" and "Orders" namespaces.
-          </li>
-          <li>
-            <b>Extend</b>: You can extend the existing data structures without breaking the existing data. For example,
-            you can add a new namespace for "Marketing" without breaking the existing data structures.
-          </li>
-          <li>
-            <b>Build Complex Data Domains</b>: You can create a complex data domain by combining multiple namespaces.
-          </li>
-        </ul>
-        <h3 class="title-medium">How Namespaces Work in Our System</h3>
-        <p>Our system lets you build your data domain step-by-step. Here's how namespaces fit in:</p>
-        <ul>
-          <li>
-            <b>The Root Namespace</b>: When you start, you'll have a main, top-level namespace. Think of this as the
-            main folder for all your data.
-          </li>
-          <li>
-            <b>Sub-Namespaces</b>: Inside the root namespace, you can create sub-namespaces to further organize your
-            data. You can have many levels of sub-namespaces. It's like creating folders within folders.
-          </li>
-          <li>
-            <b>Data Models</b>: Inside each namespace, you can define data models. A data model is a collection of
-            related data entities. For example, a "Customer" data model might contain entities like "Customer,"
-            "Address," and "Order."
-          </li>
-          <li>
-            <b>Data Entities</b>: Inside each data model, you define data entities. A data entity represents a specific
-            type of data, like a "Customer" or a "Product."
-          </li>
-          <li>
-            <b>Data Properties</b>: Inside each data entity, you define data properties. A data property is a single
-            piece of information about the entity, like a "Customer's Name" or a "Product's Price."
-          </li>
-          <li>
-            <b>Data Associations</b>: Data entities can be associated with each other. For example, a "Customer" entity
-            can be associated with an "Address" entity.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">Example: Building an Online Store</h3>
-        <p>Let's say you're building a data domain for an online store. Here's how you might use namespaces:</p>
-
-        <ol>
-          <li><b>Root Namespace</b>: You start with a root namespace called "My Online Store."</li>
-          <li>
-            <b>Sub-Namespaces</b>: Inside "My Online Store," you create these sub-namespaces:
-            <ul>
-              <li><b>Customers</b>: For all data related to your customers.</li>
-              <li><b>Products</b>: For all data about the products you sell.</li>
-              <li><b>Orders</b>: For all data about customer orders.</li>
-              <li>
-                <b>Marketing</b>: For all data related to marketing, like campaigns, promotions, and customer segments.
-              </li>
-            </ul>
-          </li>
-        </ol>
-
-        <h3 class="title-medium">Benefits in this Scenario:</h3>
-        <ol>
-          <li>
-            <b>Clear Organization</b>: It's obvious where to find customer data (in the "Customers" namespace) and
-            product data (in the "Products" namespace).
-          </li>
-          <li>
-            <b>No Naming Conflicts</b>: You can have a "Name" field in both the "Customer" data and the "Product" data
-            without any problems because they're in different namespaces.
-          </li>
-          <li><b>Reuse</b>: You can reuse the "Address" entity in both the "Customers" and "Orders" namespaces.</li>
-          <li>
-            <b>Extend</b>: You can add a new namespace for "Marketing" without breaking the existing data structures.
-          </li>
-          <li><b>Complex Data Domains</b>: You can create a complex data domain by combining multiple namespaces.</li>
-        </ol>
-      </section>
-    `
-  }
-}