@api-client/ui 0.0.17 → 0.1.0

package/src/apps/quick-api/SchemaEditorApp.ts

@@ -1,60 +0,0 @@
-import { CSSResult } from 'lit'
-import { Application } from '../../core/Application.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import globalStyles from '../../styles/global-styles.js'
-import typography from '../../styles/m3/typography.module.js'
-import tokens from '../../styles/m3/tokens.js'
-import theme from '../../styles/m3/theme.js'
-import dialogStyles from '../../styles/m3/dialog.module.js'
-import type { ThemeType } from '../../core/ThemeManager.js'
-import type { AppInfo } from '../types.js'
-import AppStartActivity, { type AppStartIntentData } from '../activities/AppStartActivity.js'
-import LoginActivity from '../activities/LoginActivity.js'
-import services from '../api_service.js'
-import {
-  APP_START,
-  DATA_DOMAIN_BROWSE,
-  QUICK_API_SCHEMA,
-  RENAME_FILE,
-  APP_LOGIN,
-  DATA_DOMAIN_DELETE,
-} from './Intents.js'
-import SchemaScreenActivity from './SchemaScreenActivity.js'
-import appStyles from './Schema.styles.js'
-import RenameFileDialogActivity from '../activities/RenameFileDialogActivity.js'
-import BrowseDataDomainActivity from '../activities/BrowseDataDomainActivity.js'
-import DeleteDataDomainActivity from '../activities/DeleteDataDomainActivity.js'
-
-export default class SchemaEditorApp extends Application {
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [globalStyles, typography, tokens, theme, dialogStyles, appStyles]
-  }
-
-  override async onStart(): Promise<void> {
-    this.manager.registerActivity(APP_START, AppStartActivity)
-    this.manager.registerActivity(QUICK_API_SCHEMA, SchemaScreenActivity)
-    this.manager.registerActivity(APP_LOGIN, LoginActivity)
-    this.manager.registerActivity(DATA_DOMAIN_BROWSE, BrowseDataDomainActivity)
-    this.manager.registerActivity(RENAME_FILE, RenameFileDialogActivity)
-    this.manager.registerActivity(DATA_DOMAIN_DELETE, DeleteDataDomainActivity)
-
-    const config = await services.get('config')
-    const theme = (await config.local.get('theme')) as ThemeType | undefined
-    if (theme) {
-      this.theme.setUserTheme(theme)
-    }
-    const intentData: AppStartIntentData = {
-      main: QUICK_API_SCHEMA,
-      allowSetup: false,
-    }
-    this.manager.startActivity({ action: APP_START, data: intentData })
-  }
-
-  getAppInfo(): AppInfo {
-    return {
-      app: 'quick-api',
-      appVersion: '1',
-    }
-  }
-}

package/src/apps/quick-api/SchemaScreenActivity.ts

@@ -1,319 +0,0 @@
-import { TemplateResult, html } from 'lit'
-import { ref, createRef } from 'lit/directives/ref.js'
-import { type Subscription } from '@adonisjs/transmit-client'
-import {
-  DataDomain,
-  type ServerEvent,
-  type ServerPatchEvent,
-  type DomainImpactKinds,
-  DomainImpactAnalysis,
-  type DomainNamespace,
-  type DomainModel,
-  type DomainEntity,
-} from '@api-client/core/browser.js'
-import { IntentFlags, IntentResult, type Intent } from '../../core/ActivityManager.js'
-import { getRoute, readRouteParams } from '../../core/ApplicationRoute.js'
-import { DATA_DOMAIN_DELETE, QUICK_API_SCHEMA } from './Intents.js'
-import ApiActivity from '../activities/ApiActivity.js'
-import SchemaHeaderFragment from './fragments/SchemaHeaderFragment.js'
-import SchemaNavigationFragment from './fragments/SchemaNavigationFragment.js'
-import PatchableRawContentModel from '../../data/PatchableRawContentModel.js'
-import SchemaEditorHost from './fragments/SchemaEditorHost.js'
-import { SchemaScreenViewModel } from './SchemaScreenViewModel.js'
-import type { CommandExecuteOptions, ContextMenuCommand } from '../../elements/contextual-menu/internals/types.js'
-import { SchemaContextualMenu } from './lib/SchemaContextualMenu.js'
-import { deleteOutline, schemaEntity, schemaModel, schemaNamespace } from '../../md/icons/Icons.js'
-import type { DeleteDataDomainIntent } from '../activities/DeleteDataDomainActivity.js'
-import { DataDomainSchema } from 'node_modules/@api-client/core/build/src/modeling/DataDomain.js'
-import { SnackNotifications } from '../../md/notification/SnackNotifications.js'
-import { bound } from '../../decorators/bound.js'
-
-export interface SchemaEditorIntentData {
-  /**
-   * The key of the file to open.
-   */
-  fid: string
-  /**
-   * The organization id.
-   */
-  oid: string
-}
-
-export default class SchemaScreenActivity extends ApiActivity {
-  static override action = QUICK_API_SCHEMA
-
-  header = createRef<HTMLHeadingElement>()
-  navigation = createRef<HTMLElement>()
-  main = createRef<HTMLElement>()
-  viewModel = new SchemaScreenViewModel()
-
-  subscription?: Subscription
-
-  oid: string | undefined
-  fid: string | undefined
-
-  get root(): DataDomain {
-    const { viewModel } = this
-    if (!viewModel.model) {
-      throw new Error('No model loaded')
-    }
-    if (!viewModel.model.value) {
-      throw new Error('No model value loaded')
-    }
-    return viewModel.model.value
-  }
-
-  menu?: SchemaContextualMenu
-
-  override async onCreate(intent?: Intent): Promise<void> {
-    await super.onCreate(intent)
-    const result = readRouteParams([`/schema/(?<oid>.*)/(?<fid>.*)`], getRoute())
-    if (!result) {
-      throw new Error(`Fix me, show an error.`)
-    }
-    this.oid = result.oid as string
-    this.fid = result.fid as string
-    const { viewModel } = this
-    viewModel.user = (await this.services.user.getUser()) || undefined
-    viewModel.org = (await this.services.org.currentOrganization()) || undefined
-    viewModel.fid = this.fid
-    const model = await this.loadMedia(this.oid, this.fid)
-    viewModel.model = model
-    document.title = model.value?.info.getLabel() || 'Schema Editor'
-    await this.setupTransmit(this.oid, this.fid)
-
-    this.addFragment('header', new SchemaHeaderFragment({ parent: this }), viewModel)
-    this.addFragment('navigation', new SchemaNavigationFragment({ parent: this }), viewModel)
-    this.addFragment('main', new SchemaEditorHost({ parent: this }), viewModel)
-
-    this.registerSchemaMenu()
-  }
-
-  override onResume(): void | Promise<void> {
-    this.requestUpdate()
-  }
-
-  override onStop(): void | Promise<void> {
-    this.menu?.disconnect()
-  }
-
-  async loadMedia(oid: string, fid: string): Promise<PatchableRawContentModel<DataDomain>> {
-    const model = new PatchableRawContentModel<DataDomain>({
-      fid,
-      oid,
-      sdk: this.services.sdk,
-      initialize: (value) => {
-        // TODO: Figure out passing dependencies
-        return new DataDomain(value as DataDomainSchema)
-      },
-    })
-    model.addEventListener('error', this.handlePatchError as EventListenerOrEventListenerObject)
-    await model.read()
-    return model
-  }
-
-  override onFirstRender(): void {
-    this.showFragment('header', this.header.value)
-    this.showFragment('navigation', this.navigation.value)
-    this.showFragment('main', this.main.value)
-  }
-
-  override async onDestroy(): Promise<void> {
-    if (this.subscription) {
-      await this.subscription.delete()
-    }
-  }
-
-  async setupTransmit(oid: string, fid: string): Promise<void> {
-    const route = `orgs/${oid}/files/${fid}`
-    const subscription = this.services.transmit.transmit.subscription(route)
-    await subscription.create()
-    this.subscription = subscription
-    subscription.onMessage(this.handleServerEvent.bind(this))
-  }
-
-  @bound
-  handlePatchError(error: CustomEvent<Error>): void {
-    SnackNotifications.notify('Unable to apply patch', {
-      persistent: true,
-      cancellable: true,
-      actionLabel: 'Show details',
-      actionCallback: () => {
-        // eslint-disable-next-line no-console
-        console.error('Unable to apply patch', error.detail)
-      },
-    })
-  }
-
-  handleServerEvent(data: ServerEvent): void {
-    const { viewModel } = this
-    if (!viewModel.model) {
-      return
-    }
-    if (data.kind === 'patch') {
-      const patch = data as ServerPatchEvent
-      if (patch.uid === viewModel.user?.key) {
-        return
-      }
-      viewModel.model.applyServerPatch(patch.value.patch)
-    }
-  }
-
-  registerSchemaMenu(): void {
-    const container = document.body.querySelector('#app') as HTMLElement | null
-    if (!container) {
-      this.services.logger.error('SchemaScreenActivity', 'registerSchemaMenu', 'Container not found')
-      return
-    }
-    const instance = new SchemaContextualMenu(container)
-    // instance.debug = true
-    instance.registerCommands(this.buildMenuCommands())
-    instance.connect()
-  }
-
-  buildMenuCommands(): ContextMenuCommand[] {
-    const commands: ContextMenuCommand[] = [
-      // Namespace menu item
-      {
-        target: ['namespace', 'domain-navigation'],
-        label: 'New namespace',
-        title: 'Adds a new sub-namespace to this namespace',
-        icon: schemaNamespace,
-        id: 'new-namespace',
-        execute: this.handleCreateDomainObject.bind(this),
-      },
-      {
-        target: 'namespace',
-        label: 'New data model',
-        title: 'Adds a data model to this namespace',
-        icon: schemaModel,
-        id: 'new-data-model',
-        execute: this.handleCreateDomainObject.bind(this),
-      },
-      {
-        target: 'namespace',
-        type: 'separator',
-      },
-      {
-        target: 'namespace',
-        label: 'Remove',
-        title: 'Deletes this namespace and its content',
-        icon: deleteOutline,
-        execute: this.handleDeleteDomainObject.bind(this),
-      },
-      // Data model menu item
-      {
-        target: 'model',
-        label: 'New entity',
-        title: 'Adds a new entity to this data model',
-        icon: schemaEntity,
-        id: 'new-entity',
-        execute: this.handleCreateDomainObject.bind(this),
-      },
-      {
-        target: 'model',
-        type: 'separator',
-      },
-      {
-        target: 'model',
-        label: 'Remove',
-        title: 'Deletes this data model and its content',
-        icon: deleteOutline,
-        execute: this.handleDeleteDomainObject.bind(this),
-      },
-      // Data entity menu item
-      {
-        target: 'entity',
-        label: 'Remove',
-        title: 'Deletes this entity',
-        icon: deleteOutline,
-        execute: this.handleDeleteDomainObject.bind(this),
-      },
-    ]
-    return commands
-  }
-
-  handleCreateDomainObject(args: CommandExecuteOptions): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    const { target, item } = args
-    const { key } = target.dataset
-    // When creating on the navigation, there's no key or kind
-    // if (!key || !kind) {
-    //   return
-    // }
-    let created: DomainNamespace | DomainModel | DomainEntity | undefined
-    if (item.id === 'new-namespace') {
-      created = this.root.addNamespace(undefined, key)
-    } else if (item.id === 'new-data-model') {
-      created = this.root.addModel(undefined, key)
-    } else if (item.id === 'new-entity') {
-      if (!key) {
-        return
-      }
-      created = this.root.addEntity(key)
-    }
-    if (created) {
-      viewModel.model?.handleChange()
-      viewModel.selection = {
-        key: created.key,
-        kind: created.kind,
-      }
-      this.requestUpdate()
-    }
-  }
-
-  handleDeleteDomainObject(args: CommandExecuteOptions): void {
-    const { target } = args
-    const { key, kind } = target.dataset
-    if (!key || !kind) {
-      return
-    }
-    this.deleteNamespaceObject(key, kind)
-  }
-
-  deleteNamespaceObject(key: string, kind: string, force = false): void {
-    if (!force && !this.isSafeDelete(key, kind as DomainImpactKinds)) {
-      this.services.logger.warn('Cannot safely delete object', 'Starting delete confirm activity.')
-      return
-    }
-    this.root.removeDomainElement(key, kind)
-    this.viewModel?.model?.handleChange()
-  }
-
-  isSafeDelete(key: string, kind: DomainImpactKinds): boolean {
-    const { root } = this
-    const analyzer = new DomainImpactAnalysis(root)
-    const report = analyzer.deleteAnalysis(key, kind)
-    if (!report.canProceed) {
-      const intent: Intent = {
-        action: DATA_DOMAIN_DELETE,
-        flags: IntentFlags.Modal | IntentFlags.ForResult,
-        data: { report } as DeleteDataDomainIntent,
-      }
-      this.startActivityForResult(intent)
-    }
-    return report.canProceed
-  }
-
-  override async onActivityResult(requestCode: number, resultCode: IntentResult, intent: Intent): Promise<void> {
-    await super.onActivityResult(requestCode, resultCode, intent)
-    if (resultCode === IntentResult.RESULT_CANCELED) {
-      return
-    }
-    if (intent.action === DATA_DOMAIN_DELETE) {
-      const data = intent.data as DeleteDataDomainIntent
-      this.deleteNamespaceObject(data.report.key, data.report.kind, true)
-    }
-  }
-
-  override render(): TemplateResult {
-    return html`
-      <header ${ref(this.header)}></header>
-      <nav aria-label="Main" class="navigation" ${ref(this.navigation)}></nav>
-      <main class="schema-editor" ${ref(this.main)}></main>
-    `
-  }
-}

package/src/apps/quick-api/SchemaScreenViewModel.ts

@@ -1,74 +0,0 @@
-import type { IUser, IOrganization, DataDomain } from '@api-client/core/browser.js'
-import type PatchableRawContentModel from '../../data/PatchableRawContentModel.js'
-import type { ISelectDetail } from '../../elements/navigation/internals/AppNavigationElement.js'
-import { createReactive, unhookReactive, type ChangeEventDetail } from '../../core/reactive/reactive.js'
-
-export interface ISchemaScreenViewModel {
-  /**
-   * The current user.
-   */
-  user?: IUser
-  /**
-   * The user organization.
-   */
-  org?: IOrganization
-  /**
-   * The file id to process.
-   */
-  fid?: string
-  /**
-   * The data model file contents.
-   */
-  model?: PatchableRawContentModel<DataDomain>
-  /**
-   * The navigation selection state.
-   */
-  selection: ISelectDetail
-}
-
-export class SchemaScreenViewModel implements ISchemaScreenViewModel {
-  user?: IUser | undefined
-  org?: IOrganization | undefined
-  fid?: string | undefined
-  model?: PatchableRawContentModel<DataDomain> | undefined
-  private _selection: ISelectDetail = { key: '', kind: '' }
-
-  private _reactive: ISchemaScreenViewModel
-  private _listeners: ((detail: ChangeEventDetail) => void)[] = []
-
-  get selection(): ISelectDetail {
-    return this._selection
-  }
-
-  set selection(value: ISelectDetail) {
-    if (this._selection === value) {
-      return
-    }
-    this._selection = value
-    this.reactive.selection = value
-  }
-
-  constructor(initialData: Partial<ISchemaScreenViewModel> = {}) {
-    Object.assign(this, initialData)
-    this._reactive = createReactive(this, (detail) => {
-      this._listeners.forEach((listener) => listener(detail))
-    })
-  }
-
-  get reactive(): ISchemaScreenViewModel {
-    return this._reactive
-  }
-
-  addListener(listener: (detail: ChangeEventDetail) => void): void {
-    this._listeners.push(listener)
-  }
-
-  removeListener(listener: (detail: ChangeEventDetail) => void): void {
-    this._listeners = this._listeners.filter((l) => l !== listener)
-  }
-
-  destroy(): void {
-    unhookReactive(this._reactive)
-    this._listeners = []
-  }
-}

package/src/apps/quick-api/Start.styles.ts

@@ -1,125 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  html {
-    --_header-height: 72px;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-    grid-template-areas:
-      'nav header'
-      'nav main';
-    /* grid-template:
-    "nav header" var(--_header-height)
-    "nav content" calc(100vh - var(--_header-height)) / minmax(360px, 2fr) 10fr; */
-  }
-
-  header {
-    grid-area: header;
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    margin: 0;
-    padding: 0;
-    gap: 4px;
-    padding-right: 12px;
-    height: var(--_header-height);
-  }
-
-  nav {
-    grid-area: nav;
-    width: 360px;
-    height: auto;
-  }
-
-  main {
-    overflow: auto;
-    grid-area: main;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: auto;
-    height: auto;
-  }
-
-  .app-title {
-    height: var(--_header-height);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .app-title h1 {
-    white-space: none;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  .main-search {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-radius: var(--md-sys-shape-corner-extra-large);
-    background: var(--md-sys-color-surface-container-high);
-    height: 56px;
-    min-width: 360px;
-    max-width: 720px;
-    flex: 1 0 0;
-    padding: 4px 24px 4px 4px;
-    gap: 4px;
-    position: relative;
-    box-sizing: border-box;
-  }
-  .main-search:hover {
-    background-color: var(--md-sys-color-surface-container-highest-light);
-  }
-
-  .search-icon {
-    color: var(--md-sys-color-on-surface-variant);
-    width: 48px;
-    height: 48px;
-  }
-
-  .search-input {
-    color: var(--md-sys-color-on-surface-variant);
-    align-self: stretch;
-    flex: 1;
-    border: none;
-    background: none;
-    outline: none;
-  }
-
-  .gap-icon {
-    margin-left: auto;
-  }
-
-  .nav-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .navigation-drawer {
-    box-sizing: border-box;
-    padding: 12px;
-  }
-
-  .navigation-section-header {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    flex-direction: row;
-    gap: 12px;
-  }
-
-  .navigation-section-header.title-small {
-    padding: 18px 16px;
-    color: var(--md-sys-color-on-surface-variant);
-  }
-`

package/src/apps/quick-api/StartScreenActivity.ts

@@ -1,102 +0,0 @@
-import { TemplateResult, html } from 'lit'
-import { ref, createRef } from 'lit/directives/ref.js'
-import type { IUser, IOrganization } from '@api-client/core/browser.js'
-import type { Intent } from '../../core/ActivityManager.js'
-import { Activity } from '../../core/Activity.js'
-import HeaderFragment from './fragments/HeaderFragment.js'
-import NavigationFragment from './fragments/NavigationFragment.js'
-import MainFragment from './fragments/MainFragment.js'
-import { QUICK_API_START } from './Intents.js'
-import { LiveData } from '../../core/LiveData.js'
-import services from '../api_service.js'
-import { getRoute } from '../../core/ApplicationRoute.js'
-
-export interface QuickApiStartIntentData {
-  /**
-   * The URI the activity should set.
-   */
-  uri?: string
-}
-
-export interface StartScreenViewModel {
-  /**
-   * The uri read from the route (or a default one)
-   */
-  uri?: string
-  /**
-   * The current user.
-   */
-  user?: IUser
-  /**
-   * Ther user organization.
-   */
-  org?: IOrganization
-}
-
-/**
- * The quick API start screen.
- * Handles:
- * - file browsing
- * - shared file browsing
- * - trashed files browsing
- */
-export default class StartScreenActivity extends Activity {
-  static override action = QUICK_API_START
-
-  header = createRef<HTMLHeadingElement>()
-  navigation = createRef<HTMLElement>()
-  main = createRef<HTMLElement>()
-  viewModel = new LiveData<StartScreenViewModel>({})
-
-  override async onCreate(intent?: Intent): Promise<void> {
-    await super.onCreate(intent)
-    if (intent) {
-      this.processIntent(intent)
-    }
-    const route = getRoute('/content/create')
-    const { viewModel } = this
-    viewModel.value.uri = route
-    const userService = await services.get('user')
-    const orgService = await services.get('org')
-    viewModel.value.user = (await userService.getUser()) || undefined
-    viewModel.value.org = (await orgService.currentOrganization()) || undefined
-
-    this.addFragment('header', new HeaderFragment({ parent: this }), viewModel)
-    this.addFragment('navigation', new NavigationFragment({ parent: this }), viewModel)
-    this.addFragment('main', new MainFragment({ parent: this }), viewModel)
-  }
-
-  override async onNewIntent(intent: Intent): Promise<void> {
-    super.onNewIntent(intent)
-    this.processIntent(intent)
-  }
-
-  async processIntent(intent: Intent): Promise<void> {
-    const info = intent.data as QuickApiStartIntentData | undefined
-    if (!info) {
-      return
-    }
-    const { uri } = info
-    if (uri) {
-      this.viewModel.value.uri = uri
-    }
-  }
-
-  override onFirstRender(): void {
-    this.showFragment('header', this.header.value)
-    this.showFragment('navigation', this.navigation.value)
-    this.showFragment('main', this.main.value)
-  }
-
-  override onResume(): void | Promise<void> {
-    this.requestUpdate()
-  }
-
-  override render(): TemplateResult {
-    return html`
-      <header ${ref(this.header)}></header>
-      <nav aria-label="Main" class="navigation" ${ref(this.navigation)}></nav>
-      <main ${ref(this.main)}></main>
-    `
-  }
-}