@api-client/ui 0.0.17 → 0.1.0

package/src/apps/services/OrganizationService.ts

@@ -1,138 +0,0 @@
-import { Service } from '../../core/Service.js'
-import { IOrganization } from '@api-client/core/browser.js'
-import { CurrentOrganizationKey } from '../../lib/StoreKeys.js'
-import services from '../api_service.js'
-
-enum State {
-  NotChecked,
-  Checking,
-  Checked,
-}
-
-export enum CompletionState {
-  /**
-   * The user has at least one organization and the current organization is selected.
-   */
-  OK,
-  /**
-   * The user has at leas two organizations and no valid selection.
-   */
-  NotSelected,
-  /**
-   * The user have no organizations. Setup is needed.
-   */
-  NoOrganizations,
-  /**
-   * Unable to determine the state due to an error.
-   */
-  Error,
-}
-
-export default class OrganizationService extends Service {
-  static override key = 'api-service/organization'
-
-  state: State = State.NotChecked
-  organizations: IOrganization[] = []
-  organizationId: string | undefined
-
-  /**
-   * A hidden value for the `updateComplete` getter.
-   */
-  #updateComplete?: Promise<CompletionState>
-
-  /**
-   * The resolver to call when the update completes.
-   */
-  #updateResolver?: (state: CompletionState) => void
-
-  async currentOrganization(): Promise<IOrganization | undefined> {
-    if (!this.organizationId) {
-      return undefined
-    }
-    // TODO: we will store the orgs list in the local/session store
-    // so we won't be pinging server with every page reload.
-    return this.organizations.find((i) => i.key === this.organizationId)
-  }
-
-  /**
-   * Forces to get the list of organizations from the server.
-   *
-   * Returns one of the following states:
-   *
-   * - `CompletionState.OK` - The user has at least one organization and the current organization is selected.
-   * - `CompletionState.NotSelected` - The user has at leas two organizations and no valid selection.
-   * - `CompletionState.NoOrganizations` - The user have no organizations. Setup is needed.
-   * - `CompletionState.Error` - Unable to determine the state due to an error.
-   *
-   * @returns The state of the organization creation.
-   */
-  revalidate(): Promise<CompletionState> {
-    if (this.state === State.Checking) {
-      return this.#updateComplete as Promise<CompletionState>
-    }
-    if (this.organizationId) {
-      return Promise.resolve(CompletionState.OK)
-    }
-    this.state = State.Checking
-    this.#updateComplete = new Promise<CompletionState>((resolver) => {
-      this.#updateResolver = resolver
-    })
-    this.#callOrganizations()
-    return this.#updateComplete
-  }
-
-  async #callOrganizations(): Promise<void> {
-    const sdk = await services.get('sdk')
-    try {
-      const orgs = await sdk.organization.list()
-      this.organizations = orgs.items || []
-    } catch {
-      this.#updateResolver?.(CompletionState.Error)
-      this.#updateResolver = undefined
-      this.#updateComplete = undefined
-      return
-    }
-    const result = await this.#readState()
-    this.state = State.Checked
-    this.#updateResolver?.(result)
-    this.#updateResolver = undefined
-    this.#updateComplete = undefined
-  }
-
-  async #readState(): Promise<CompletionState> {
-    const config = await services.get('config')
-    const selected = (await config.local.get(CurrentOrganizationKey)) as string | undefined
-    const hasSelected = this.organizations.some((i) => i.key === selected)
-    let result: CompletionState
-    if (selected && hasSelected) {
-      this.organizationId = selected
-      result = CompletionState.OK
-    } else if (this.organizations.length === 1) {
-      const key = this.organizations[0].key
-      await config.local.set(CurrentOrganizationKey, key)
-      this.organizationId = key
-      result = CompletionState.OK
-    } else if (this.organizations.length) {
-      result = CompletionState.NotSelected
-    } else {
-      result = CompletionState.NoOrganizations
-    }
-    return result
-  }
-
-  /**
-   * When the user has no organizations, it set the organization as the only one
-   * and persists the organization id as the selected organization.
-   * @param org The organization to add.
-   */
-  async setupUserOrganization(org: IOrganization): Promise<void> {
-    if (this.organizations.length) {
-      this.organizations.push(org)
-      return
-    }
-    this.organizations = [org]
-    const config = await services.get('config')
-    await config.local.set(CurrentOrganizationKey, org.key)
-    this.organizationId = org.key
-  }
-}

package/src/apps/services/SdkService.ts

@@ -1,45 +0,0 @@
-import { Service } from '../../core/Service.js'
-import { UiSdk } from '../../sdk/UiSdk.js'
-
-export default class SdkService extends Service {
-  static override key = 'api-service/sdk'
-  sdk!: UiSdk
-  protected url: string
-
-  constructor(url: string) {
-    super()
-    this.url = url
-  }
-
-  override async onCreate(): Promise<void> {
-    this.sdk = new UiSdk(this.url)
-  }
-
-  override async onStart(): Promise<void> {
-    await this.sdk.initialize()
-  }
-
-  get organization(): UiSdk['organization'] {
-    return this.sdk.organization
-  }
-
-  get user(): UiSdk['user'] {
-    return this.sdk.user
-  }
-
-  get auth(): UiSdk['auth'] {
-    return this.sdk.auth
-  }
-
-  get file(): UiSdk['file'] {
-    return this.sdk.file
-  }
-
-  get shared(): UiSdk['shared'] {
-    return this.sdk.shared
-  }
-
-  get trash(): UiSdk['trash'] {
-    return this.sdk.trash
-  }
-}

package/src/apps/services/TransmitService.ts

@@ -1,21 +0,0 @@
-import { Transmit } from '@adonisjs/transmit-client'
-import { Service } from '../../core/Service.js'
-
-export default class TransmitService extends Service {
-  static override key = 'api-service/transmit'
-
-  transmit!: Transmit
-
-  protected url: string
-
-  constructor(url: string) {
-    super()
-    this.url = url
-  }
-
-  protected override async onCreate(): Promise<void> {
-    this.transmit = new Transmit({
-      baseUrl: this.url,
-    })
-  }
-}

package/src/apps/services/UserService.ts

@@ -1,69 +0,0 @@
-import type { IUser } from '@api-client/core/browser.js'
-import { Service } from '../../core/Service.js'
-import services from '../api_service.js'
-
-enum CheckState {
-  NotChecked,
-  Checking,
-  Checked,
-}
-
-export default class UserService extends Service {
-  static override key = 'api-service/user'
-
-  /**
-   * Tells yhe current state of checking for user session.
-   */
-  status = CheckState.NotChecked
-
-  /**
-   * The currently logged in user.
-   */
-  #user?: IUser
-
-  /**
-   * A hidden value for the `updateComplete` getter.
-   */
-  #updateComplete?: Promise<IUser | null>
-
-  /**
-   * The resolver to call when the update completes.
-   */
-  #updateResolver?: (state: IUser | null) => void
-
-  /**
-   * Checks whether user is logged in and exists.
-   * @returns `true`
-   */
-  get isLoggedIn(): boolean {
-    return !!this.#user
-  }
-
-  async getUser(): Promise<IUser | null> {
-    if (this.#user) {
-      return Promise.resolve(this.#user)
-    }
-    if (this.status === CheckState.Checking) {
-      return this.#updateComplete as Promise<IUser | null>
-    }
-    this.status = CheckState.Checking
-    this.#updateComplete = new Promise<IUser | null>((resolver) => {
-      this.#updateResolver = resolver
-    })
-    this.#callUser()
-    return this.#updateComplete
-  }
-
-  async #callUser(): Promise<void> {
-    const sdk = await services.get('sdk')
-    try {
-      this.#user = await sdk.user.me()
-    } catch {
-      //
-    }
-    this.status = CheckState.Checked
-    this.#updateResolver?.(this.#user || null)
-    this.#updateResolver = undefined
-    this.#updateComplete = undefined
-  }
-}

package/src/apps/transmit_client.ts

@@ -1,5 +0,0 @@
-import { Transmit } from '@adonisjs/transmit-client'
-
-export const transmit = new Transmit({
-  baseUrl: window.location.origin,
-})

package/src/apps/types.ts

@@ -1,10 +0,0 @@
-export interface AppInfo {
-  /**
-   * The application name
-   */
-  app: string
-  /**
-   * The application version.
-   */
-  appVersion: string
-}

package/src/boot.ts

@@ -1,18 +0,0 @@
-import type { Application } from './core/Application.js'
-import services from './apps/api_service.js'
-import UserService from '../src/apps/services/UserService.js'
-import OrganizationService from '../src/apps/services/OrganizationService.js'
-import SdkService from '../src/apps/services/SdkService.js'
-import ConfigurationService from '../src/apps/services/ConfigurationService.js'
-import TransmitService from './apps/services/TransmitService.js'
-import LoggingService from './apps/services/LoggingService.js'
-
-export default async function bootApplication(app: Application): Promise<void> {
-  services.register('user', new UserService())
-  services.register('org', new OrganizationService())
-  services.register('sdk', new SdkService(`http://localhost:3333`))
-  services.register('transmit', new TransmitService(`http://localhost:3333`))
-  services.register('config', new ConfigurationService())
-  services.register('logger', new LoggingService())
-  await app.run()
-}

package/src/builders/DialogBuilder.ts

@@ -1,248 +0,0 @@
-import { CSSResultOrNative, type TemplateResult } from 'lit'
-import type { Activity } from '../core/Activity.js'
-import type { Fragment } from '../core/Fragment.js'
-import { RenderFunction, type UiDialogClosingReason } from '../md/dialog/internals/Dialog.js'
-import { UiDialogElement } from '../md/dialog/ui-dialog.js'
-import { bound } from '../decorators/bound.js'
-
-import '../md/dialog/ui-dialog.js'
-
-export type RenderAs = 'message' | 'error' | 'picker'
-
-export interface ActionOptions {
-  /**
-   * The label to show on the action button.
-   * Default labels are `OK` for the positive action and `Cancel` for the negative action.
-   */
-  label?: string
-
-  /**
-   * The action to call when the positive action is triggered.
-   * @param value Optional value returned by the dialog.
-   */
-  action?: (value?: unknown) => void
-}
-
-export interface PositiveActionOptions extends ActionOptions {
-  /**
-   * When set it sets the value on the positive action button.
-   */
-  value?: string
-}
-
-/**
- * A programmatic access to the dialog UI.
- * It hook ups to the `Activity` lifecycle methods to control the dialog.
- * When the activity is destroyed, the dialog is destroyed along with it.
- * When the activity is paused, the dialog is hidden, but not removed from the DOM.
- * THe dialog then becomes visible again when the activity resumes.
- */
-export class DialogBuilder {
-  private title: string | undefined
-  private description: string | undefined
-  private positiveAction: PositiveActionOptions | undefined
-  private negativeAction: ActionOptions | undefined
-  /**
-   * When rendered, it sets the corresponding class name to the dialog.
-   */
-  private renderAs: RenderAs = 'message'
-  private dialogTemplate?: TemplateResult | RenderFunction
-  #formCallback?: (e: SubmitEvent) => void
-  dialog?: UiDialogElement
-  /**
-   * The styles to be ingected into the dialog's shadow DOM.
-   */
-  dialogStyles?: CSSResultOrNative[]
-
-  constructor(private parent: Activity | Fragment) {
-    parent.addEventListener('activity:destroy', this.handleActivityDestroy)
-    parent.addEventListener('activity:pause', this.handleActivityPause)
-    parent.addEventListener('activity:resume', this.handleActivityResume)
-    parent.addEventListener('fragment:destroy', this.handleActivityDestroy)
-    parent.addEventListener('fragment:pause', this.handleActivityPause)
-    parent.addEventListener('fragment:resume', this.handleActivityResume)
-  }
-
-  /**
-   * Sets the dialog title.
-   * @param title The title of the dialog to set. Undefined/empty to clear.
-   * @returns The instance of this class for chaining.
-   */
-  setTitle(title?: string): this {
-    this.title = title
-    return this
-  }
-
-  /**
-   * Sets the dialog description.
-   * @param title The value to to set. Undefined/empty to clear.
-   * @returns The instance of this class for chaining.
-   */
-  setDescription(description: string): this {
-    this.description = description
-    return this
-  }
-
-  /**
-   * Sets the positive action that closes the dialog.
-   *
-   * @param action The action to call when the positive action is triggered.
-   * @param label The label of the positive button. Default to "OK"
-   * @returns The instance of this class for chaining.
-   */
-  setPositiveAction(options?: PositiveActionOptions): this {
-    this.positiveAction = options
-    return this
-  }
-
-  /**
-   * Sets the negative action that closes the dialog.
-   *
-   * @param action The action to call when the negative action is triggered.
-   * @param label The label of the negative button. Default to "Cancel"
-   * @returns The instance of this class for chaining.
-   */
-  setNegativeAction(options?: ActionOptions): this {
-    this.negativeAction = options
-    return this
-  }
-
-  /**
-   * By default, the dialog is rendered as a message dialog. Set to a different type to
-   * change the rendering.
-   *
-   * @param renderAs The value for the type of the dialog.
-   * @returns The instance of this class for chaining.
-   */
-  setRenderAs(renderAs: RenderAs): this {
-    this.renderAs = renderAs
-    return this
-  }
-
-  /**
-   * Sets the template to render inside the dialog's body.
-   * @param template The lit template to render.
-   * @param host The event target to use for binding
-   * @returns The instance of this class for chaining.
-   */
-  setTemplate(template: TemplateResult | RenderFunction | undefined): this {
-    this.dialogTemplate = template
-    return this
-  }
-
-  setStyles(styles: CSSResultOrNative[]): this {
-    this.dialogStyles = styles
-    return this
-  }
-
-  /**
-   * Wraps the dialog content into a form. The form is submitted by the positive action.
-   * If the event passed in the callback is not cancelled, the positive action is called.
-   * @param callback The function to be called when the form is submitted.
-   * @returns This for chaining
-   */
-  useForm(callback: (e: SubmitEvent) => void): this {
-    this.#formCallback = callback
-    return this
-  }
-
-  /**
-   * Creates the dialog and returns the instance of it.
-   * The dialog is not yet added to the DOM nor it is opened.
-   *
-   * @returns The instance of the dialog class.
-   */
-  build(): UiDialogElement {
-    const dialog = new UiDialogElement()
-    dialog.classList.add('activity-dialog')
-    dialog.classList.add(this.renderAs)
-    dialog.classList.add(this.parent.constructor.name.toLocaleLowerCase())
-    if (this.title) {
-      dialog.innerHTML += `<span slot="title">${this.title}</span>`
-    }
-    if (this.description) {
-      dialog.innerHTML += `<div class="dialog-description">${this.description}</div>`
-    }
-    if (this.dialogTemplate) {
-      dialog.inject(this.dialogTemplate, this.dialogStyles)
-    }
-    if (this.negativeAction) {
-      const { label = 'Cancel' } = this.negativeAction
-      dialog.dismissLabel = label
-    }
-    if (this.positiveAction) {
-      const { label = 'OK' } = this.positiveAction
-      dialog.confirmLabel = label
-      dialog.confirmValue = this.positiveAction.value
-    }
-    if (this.#formCallback) {
-      dialog.useForm = true
-      dialog.addEventListener('submit', this.#formCallback.bind(this.parent))
-    }
-    dialog.addEventListener('close', this.handleDialogClosed)
-    return dialog
-  }
-
-  /**
-   * Creates the dialog by calling the `build()` function,
-   * sets the `dialog` property, appends it to the body,
-   * and finally opens the dialog as modal.
-   *
-   * This method does not return `this` as you can't manipulate the dialog anymore.
-   */
-  open(): void {
-    if (!this.dialog) {
-      this.dialog = this.build()
-      document.body.appendChild(this.dialog)
-    }
-    this.dialog.open = true
-    this.dialog.modal = true
-  }
-
-  /**
-   * Closes the dialog. The dialog behaves like the a negative action was triggered.
-   */
-  close(): void {
-    if (this.dialog) {
-      this.dialog.open = false
-    }
-  }
-
-  @bound private handleActivityDestroy(): void {
-    this.dispose()
-  }
-
-  @bound private handleActivityPause(): void {
-    this.dialog?.classList.add('hidden')
-  }
-
-  @bound private handleActivityResume(): void {
-    this.dialog?.classList.remove('hidden')
-  }
-
-  @bound private handleDialogClosed(event: Event): void {
-    const { cancelled, value } = (event as CustomEvent<UiDialogClosingReason>).detail
-    if (cancelled && this.negativeAction && this.negativeAction.action) {
-      this.negativeAction.action(value)
-    } else if (!cancelled && this.positiveAction && this.positiveAction.action) {
-      this.positiveAction.action(value)
-    }
-    this.dispose()
-  }
-
-  /**
-   * Removes the dialog from the DOM and removes all listeners.
-   * The dialog does not call any lifecycle methods.
-   */
-  dispose(): void {
-    this.dialog?.removeEventListener('close', this.handleDialogClosed)
-    this.dialog?.remove()
-    this.dialog = undefined
-    this.parent.removeEventListener('activity:destroy', this.handleActivityDestroy)
-    this.parent.removeEventListener('activity:pause', this.handleActivityPause)
-    this.parent.removeEventListener('activity:resume', this.handleActivityResume)
-    parent.removeEventListener('fragment:destroy', this.handleActivityDestroy)
-    parent.removeEventListener('fragment:pause', this.handleActivityPause)
-    parent.removeEventListener('fragment:resume', this.handleActivityResume)
-  }
-}

package/src/core/container.ts

@@ -1,15 +0,0 @@
-import type { ConfigurationBindings } from '../bindings/base/ConfigurationBindings.js'
-import type { UiSdk } from '../sdk/UiSdk.js'
-import type UserService from '../apps/services/UserService.js'
-import type OrganizationService from '../apps/services/OrganizationService.js'
-import { Container } from '../core/container/container.js'
-
-interface KnownBindings {
-  config: ConfigurationBindings
-  sdk: UiSdk
-  user: UserService
-  org: OrganizationService
-}
-
-const container = new Container<KnownBindings>()
-export default container

package/src/data/BreadcrumbsModel.ts

@@ -1,69 +0,0 @@
-import { type FileBreadcrumb } from '@api-client/core/browser.js'
-import { Model } from '../core/Model.js'
-import { LiveData } from '../core/LiveData.js'
-import type SdkService from '../apps/services/SdkService.js'
-
-enum ModelState {
-  /**
-   * Not doing anything.
-   */
-  idle,
-  /**
-   * Currently querying for breadcrumb data.
-   */
-  reading,
-}
-
-export default class BreadcrumbsModel extends Model<FileBreadcrumb[]> {
-  /**
-   * The current state of the model.
-   */
-  state: ModelState = ModelState.idle
-
-  /**
-   * The current breadcrumbs
-   */
-  breadcrumbs: LiveData<FileBreadcrumb[]> = new LiveData<FileBreadcrumb[]>([])
-  /**
-   * The parent folder.
-   */
-  parent?: string
-
-  constructor(
-    protected oid: string,
-    protected sdk: SdkService
-  ) {
-    super()
-  }
-
-  reset(): void {
-    this.state = ModelState.idle
-    this.parent = undefined
-    this.breadcrumbs.set([])
-  }
-
-  scheduleQuery(parent?: string): void {
-    this.parent = parent
-    this.debounce(this.#query)
-  }
-
-  async #query(): Promise<void> {
-    if (this.state !== ModelState.idle) {
-      return
-    }
-    if (!this.parent) {
-      this.breadcrumbs.set([])
-      return
-    }
-    this.state = ModelState.reading
-    try {
-      const br = await this.sdk.file.breadcrumbs(this.oid, this.parent)
-      this.breadcrumbs.set(br.items)
-    } catch (e) {
-      const err = e as Error
-      this.notifyError(new Error(`Unable to load breadcrumbs list. ${err.message}`))
-    } finally {
-      this.state = ModelState.idle
-    }
-  }
-}