@api-client/ui 0.5.57 → 0.6.0

package/src/modeling/internals/styles/EditorCommon.styles.ts

@@ -0,0 +1,141 @@
+import { css } from 'lit'
+
+/**
+ * Common styles for API modeling editors.
+ * These styles define reusable patterns for editor containers, headers,
+ * tabs, sections, descriptions, and help elements.
+ */
+export default css`
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+
+  /* Editor header section */
+  .intro {
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    align-self: stretch;
+
+    ui-icon {
+      color: var(--md-sys-color-primary);
+    }
+
+    .headline-medium {
+      flex: 1 0 0;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .close-button {
+      color: var(--md-sys-color-on-surface);
+    }
+  }
+
+  .description {
+    color: var(--md-sys-color-on-surface-variant);
+    align-self: stretch;
+  }
+
+  .tabs {
+    align-self: stretch;
+  }
+
+  /* Configuration sections */
+
+  .configuration-tab {
+    display: flex;
+    padding: 12px 20px;
+    flex-direction: column;
+    gap: 20px;
+    align-self: stretch;
+  }
+
+  .config-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+  }
+
+  .config-intro {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    align-self: stretch;
+    color: var(--md-sys-color-on-surface);
+
+    .title-large {
+      flex: 1 0 0;
+    }
+  }
+
+  .section-description {
+    color: var(--md-sys-color-on-surface-variant);
+    align-self: stretch;
+  }
+
+  /* Form elements */
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+  }
+
+  .form-label {
+    color: var(--md-sys-color-on-surface);
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .form-field {
+    align-self: stretch;
+  }
+
+  /* Chips and lists */
+  .fields-list {
+    align-self: stretch;
+
+    .field-list-item::part(surface) {
+      padding-inline: 0;
+    }
+  }
+
+  /* Action buttons */
+  .add-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .access-configuration,
+  .rate-limiting-configuration {
+    padding: 12px 20px;
+  }
+
+  .row {
+    align-self: stretch;
+  }
+`

package/src/modeling/internals/styles/RateLimiting.styles.ts

@@ -0,0 +1,83 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: flex;
+    padding: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+  }
+
+  .intro {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+
+    .header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      align-self: stretch;
+
+      .title-large {
+        flex: 1 0 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .inline-help {
+        align-self: stretch;
+        color: var(--md-sys-color-on-surface);
+      }
+    }
+  }
+
+  .rules {
+    align-self: stretch;
+  }
+
+  .rule-divider {
+    align-self: stretch;
+  }
+
+  .rule {
+    align-self: stretch;
+  }
+
+  .rule-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    color: var(--md-sys-color-on-surface);
+
+    .actions {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .rule-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .row.input-row {
+    display: flex;
+    gap: 12px;
+
+    .input {
+      flex: 1 0 0;
+      min-width: 1px;
+    }
+
+    .select {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+`

package/src/modeling/internals/styles/api.styles.ts

@@ -0,0 +1,146 @@
+// API modeling screen common styles
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .screen-container {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+
+  .screen-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+  }
+
+  .section-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+  }
+
+  .form-section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .config-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .horizontal {
+    flex-direction: row;
+    gap: 12px;
+
+    &.center {
+      align-items: center;
+    }
+  }
+
+  .config-section.horizontal .section-header {
+    flex: 1;
+  }
+
+  .meta-section {
+    max-width: 700px;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+
+    .input {
+      flex: 1;
+    }
+
+    .help {
+      height: 56px;
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  ui-select {
+    min-width: 280px;
+  }
+
+  .checkbox.row {
+    height: 40px;
+
+    .help {
+      height: 40px;
+    }
+  }
+
+  .enum {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .checkbox > .label {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .generate-button {
+    padding-top: 8px;
+    margin-left: 12px;
+  }
+
+  .session-transport-settings {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .transport-settings-item {
+      display: flex;
+      padding: 0 0 0 84px;
+      align-items: flex-start;
+      gap: 10px;
+      align-self: stretch;
+    }
+
+    .transport-settings-item.separate {
+      padding: 8px 0 8px 64px;
+    }
+
+    .transport-settings-group {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+    }
+  }
+
+  .no-property-warning {
+    color: var(--md-sys-color-error);
+    background-color: var(--md-sys-color-error-container);
+    padding: 4px 8px;
+    border-radius: var(--md-sys-shape-corner-small, 4px);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+`

package/src/modeling/internals/styles/form_styles.ts

@@ -0,0 +1,107 @@
+import { css } from 'lit'
+
+export default css`
+  .modeling-form {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    /* align-items: flex-start; */
+
+    .input {
+      flex: 1;
+    }
+
+    .input.chips-input,
+    .input.select {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .help {
+      display: inline-flex;
+      align-items: center;
+      align-content: stretch;
+    }
+
+    &.input-row .help {
+      height: 56px;
+    }
+  }
+
+  /* .checkbox-group > .row > .help,
+  .checkbox.row > .help {
+    height: 40px;
+  } */
+
+  .editor-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .checkbox-group > .row,
+  .checkbox.row {
+    height: 48px;
+    flex: 1;
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .checkbox > .label {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .meta {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .drop-zone {
+    outline: medium var(--md-sys-color-tertiary) dashed;
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+    outline-offset: 2px;
+    border-radius: var(--md-sys-shape-corner-extra-small);
+  }
+
+  .taxonomy-menu .menu-category-title {
+    height: 40px;
+    color: var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface));
+    display: flex;
+    align-items: center;
+    padding: 0 16px !important;
+  }
+
+  .taxonomy-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+
+    .label {
+      flex: 1;
+    }
+  }
+`

package/src/modeling/internals/styles/learning.styles.ts

@@ -0,0 +1,40 @@
+import { css } from 'lit'
+
+export default css`
+  .divider {
+    margin: 40px 0;
+  }
+
+  .intro {
+    user-select: text;
+  }
+
+  .intro-title {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .theme-icon-wrapper {
+    display: inline-flex;
+    padding: 20px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 60px;
+    background: var(--md-sys-color-primary);
+  }
+
+  .theme-icon-wrapper > .icon {
+    width: 40px;
+    height: 40px;
+    fill: var(--md-sys-color-on-primary);
+  }
+
+  .example {
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+    padding: 16px;
+    border-radius: var(--md-sys-shape-corner-large);
+    margin-bottom: 20px;
+  }
+`

package/src/modeling/lib/access_helpers.ts

@@ -0,0 +1,57 @@
+import type {
+  AccessRule,
+  AllowAuthenticatedAccessRule,
+  AllowPublicAccessRule,
+  MatchEmailDomainAccessRule,
+  MatchResourceOwnerAccessRule,
+  MatchUserPropertyAccessRule,
+  MatchUserRoleAccessRule,
+} from '@api-client/core/browser.js'
+
+function createPublicRule(): AllowPublicAccessRule {
+  return { type: 'public' } as AllowPublicAccessRule
+}
+
+function createAuthenticatedRule(): AllowAuthenticatedAccessRule {
+  return { type: 'authenticated' } as AllowAuthenticatedAccessRule
+}
+
+function createResourceOwnerRule(): MatchResourceOwnerAccessRule {
+  return { type: 'resourceOwner', property: '' } as MatchResourceOwnerAccessRule
+}
+
+function createMatchUserRoleRule(): MatchUserRoleAccessRule {
+  return { type: 'matchUserRole', role: [] } as MatchUserRoleAccessRule
+}
+
+function createMatchUserPropertyRule(): MatchUserPropertyAccessRule {
+  return { type: 'matchUserProperty', property: '', value: '' } as MatchUserPropertyAccessRule
+}
+
+function createMatchEmailDomainRule(): MatchEmailDomainAccessRule {
+  return { type: 'matchEmailDomain', domains: [] } as MatchEmailDomainAccessRule
+}
+
+/**
+ * Creates an empty access rule of the given type.
+ * @param rule The rule to create.
+ * @returns The new and empty rule.
+ */
+export function createEmptyAccessRule(rule: AccessRule['type']): AccessRule {
+  switch (rule) {
+    case 'public':
+      return createPublicRule()
+    case 'authenticated':
+      return createAuthenticatedRule()
+    case 'resourceOwner':
+      return createResourceOwnerRule()
+    case 'matchUserRole':
+      return createMatchUserRoleRule()
+    case 'matchUserProperty':
+      return createMatchUserPropertyRule()
+    case 'matchEmailDomain':
+      return createMatchEmailDomainRule()
+    default:
+      throw new Error(`Cannot create access rule of unknown type: ${rule}`)
+  }
+}