@api-client/ui 0.0.17 → 0.1.0

package/src/apps/activities/OrganizationSetupActivity.ts

@@ -1,146 +0,0 @@
-import { type CSSResult, html, type TemplateResult } from 'lit'
-import ApiActivity from './ApiActivity.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import { type IUser } from '@api-client/core/browser.js'
-import { DialogBuilder } from '../../builders/DialogBuilder.js'
-import styles from './styles/login.js'
-import state from '../../decorators/state.js'
-
-import '@material/web/progress/linear-progress.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '../../md/button/ui-filled-button.js'
-
-enum SetupStep {
-  Initializing,
-  Login,
-  Loading,
-}
-
-export default class OrganizationSetupActivity extends ApiActivity {
-  static override action = 'app/setup-organization'
-
-  /**
-   * Currently rendered error dialog.
-   */
-  errorDialog?: DialogBuilder
-
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles]
-  }
-
-  @state({ app: false }) accessor step = SetupStep.Initializing
-
-  /**
-   * The current user.
-   */
-  @state({ app: false }) accessor user: IUser | null | undefined
-
-  /**
-   * The user entered organization.
-   */
-  @state({ app: false }) accessor organization: string | undefined
-
-  get userName(): string {
-    return this.user?.name || ''
-  }
-
-  override async onResume(): Promise<void> {
-    if (!this.user) {
-      this.user = await this.services.user.getUser()
-    }
-    super.onResume()
-  }
-
-  private onOrganizationSubmit(e: SubmitEvent): void {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const organization = String(form.organization.value).trim()
-    if (!organization) {
-      return
-    }
-    this.setupOrganization(organization)
-  }
-
-  private async setupOrganization(organization: string): Promise<void> {
-    this.organization = organization
-    this.step = SetupStep.Loading
-    try {
-      const org = await this.services.sdk.organization.create(organization)
-      await this.services.org.setupUserOrganization(org)
-      this.finish()
-    } catch (e) {
-      this.renderErrorDialog(e as Error)
-    }
-  }
-
-  private renderErrorDialog(error: Error): void {
-    this.errorDialog = new DialogBuilder(this)
-      .setDescription(
-        `We are unable to complete your request. Please try again or contact our customer support. Details ${error.message}`
-      )
-      .setTitle('Something went wrong')
-      .setPositiveAction({ label: 'Close' })
-      .setNegativeAction({
-        label: 'Retry',
-        action: () => {
-          if (this.organization) {
-            this.setupOrganization(this.organization)
-          }
-        },
-      })
-      .setRenderAs('error')
-    this.errorDialog.open()
-  }
-  override render(): TemplateResult {
-    return html`
-      <main class="body-medium">
-        <div class="content">
-          <div class="slide account-setup-slide">
-            <h1 class="display-medium">Welcome ${this.userName}.</h1>
-            <p class="title-large">Let's setup your account.</p>
-            ${this.step === SetupStep.Loading
-              ? this.renderOrganizationSetupLoader()
-              : this.renderOrganizationSetupContent()}
-          </div>
-        </div>
-      </main>
-    `
-  }
-
-  private renderOrganizationSetupContent(): TemplateResult {
-    return html`
-      <p class="body-medium">
-        Start with adding an organization to your account. Each organization you create has separate billing, teams, and
-        APIs.
-      </p>
-      ${this.renderOrganizationInput()}
-      <p class="body-small">
-        Expected to join an organization? Click on the registration link in the invitation email to get started.
-      </p>
-    `
-  }
-
-  private renderOrganizationInput(): TemplateResult {
-    const { organization } = this
-    return html`
-      <form class="org-name-form" @submit=${this.onOrganizationSubmit}>
-        <md-outlined-text-field
-          label="Organization name"
-          name="organization"
-          autocomplete="organization"
-          required
-          class="org-input"
-          value="${organization || ''}"
-        ></md-outlined-text-field>
-        <ui-filled-button type="submit">Next</ui-filled-button>
-      </form>
-    `
-  }
-
-  private renderOrganizationSetupLoader(): TemplateResult {
-    return html`
-      <md-linear-progress indeterminate class="login-progress" aria-label="Creating organization"></md-linear-progress>
-    `
-  }
-}

package/src/apps/activities/RenameFileDialogActivity.ts

@@ -1,156 +0,0 @@
-import { html, css, type TemplateResult, type CSSResult } from 'lit'
-import { File, type IFile, PatchClient } from '@api-client/core/browser.js'
-import { ModalActivity } from '../../core/ModalActivity.js'
-import { ActivityState, Intent, IntentResult } from '../../core/ActivityManager.js'
-import state from '../../decorators/state.js'
-import { type Application } from '../../core/Application.js'
-import { FilesystemFragmentInteraction } from '../quick-api/fragments/FilesystemFragment.js'
-import { Patch } from '@api-client/json'
-import services from '../api_service.js'
-import { RENAME_FILE } from '../quick-api/Intents.js'
-import { adaptStatic } from '../../decorators/styles.js'
-
-import '@material/web/progress/circular-progress.js'
-import '@material/web/textfield/outlined-text-field.js'
-
-const dialogStyles = css`
-  .centered {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-`
-
-export default class RenameFileDialogActivity extends ModalActivity {
-  static override action = RENAME_FILE
-
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [dialogStyles]
-  }
-
-  /**
-   * The file we are changing the name for.
-   */
-  @state() accessor file: File | undefined
-
-  /**
-   * A flag set when making API request.
-   */
-  @state() accessor loading = false
-
-  get dialogTitle(): string {
-    const { file } = this
-    if (file) {
-      return file.isFile() ? 'Rename file' : 'Rename folder'
-    }
-    return 'Rename file'
-  }
-
-  override async onCreate(intent?: Intent): Promise<void> {
-    if (!intent) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    this.setupIntent(intent)
-    if (this.state === ActivityState.Destroyed) {
-      return
-    }
-    await super.onCreate(intent)
-  }
-
-  override onNewIntent(intent: Intent): void | Promise<void> {
-    if (!intent) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    super.onNewIntent(intent)
-    this.setupIntent(intent)
-  }
-
-  private setupIntent(intent: Intent): void {
-    const { data } = intent
-    if (!data) {
-      this.finish()
-      return
-    }
-    const definition = data as IFile
-    this.file = new File().new(definition)
-  }
-
-  protected override handleSubmit(e: SubmitEvent): void {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const formData = new FormData(form)
-    const newName = formData.get('name') as string
-    if (!newName) {
-      return
-    }
-    if (!this.file) {
-      return
-    }
-    this.loading = true
-    this.rename(this.file, newName)
-  }
-
-  /**
-   * Updates a name on a file. This includes renaming the contents.
-   * @param file The file object
-   * @param newName The new name of the file.
-   */
-  async rename(file: File, newName: string): Promise<void> {
-    const app = this.getApplication() as Application & FilesystemFragmentInteraction
-    const info = app.getAppInfo()
-    const sdk = await services.get('sdk')
-    const org = await services.get('org')
-    const currentOrganization = await org.currentOrganization()
-    if (!currentOrganization) {
-      return
-    }
-    const patch = new Patch.Builder(file.toJSON()).replace('/info/name', newName).build()
-    const client = new PatchClient({ app: info.app, appVersion: info.appVersion, document: {} })
-    const patches = client.generatePatch(patch)
-    const result = await sdk.file.patch(currentOrganization.key, file.key, patches)
-    this.setResult(IntentResult.RESULT_OK, result)
-    this.finish()
-  }
-
-  override render(): TemplateResult {
-    const { file, loading = false } = this
-    if (loading) {
-      return this.#renderContent(this.#renderLoader())
-    }
-    return this.#renderContent(file ? this.renderForm(this.#renderFormContent(file)) : this.#renderNoFile())
-  }
-
-  #renderContent(content: TemplateResult): TemplateResult {
-    return html`${this.renderTitle(this.dialogTitle)} ${content} ${this.renderNegativeButton()}
-    ${this.renderPositiveButton({ label: 'Save' })}`
-  }
-
-  #renderNoFile(): TemplateResult {
-    return html`<p>Application error: The File is not set.</p>`
-  }
-
-  #renderFormContent(file: File): TemplateResult {
-    const { name = '' } = file.info
-    const isFile = file.isFile()
-    const label = isFile ? 'File name' : 'Folder name'
-    return html`<md-outlined-text-field
-      .label="${label}"
-      required
-      name="name"
-      .value="${name}"
-    ></md-outlined-text-field>`
-  }
-
-  #renderLoader(): TemplateResult {
-    return html`
-      <div class="rename-dialog centered">
-        <md-circular-progress indeterminate></md-circular-progress>
-        <p>One second...</p>
-      </div>
-    `
-  }
-}

package/src/apps/activities/styles/BrowseDataDomain.styles.ts

@@ -1,28 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .browsedatadomainactivity {
-    --ui-dialog--width: 800px;
-  }
-
-  .browsedatadomainactivity .centered {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .browsedatadomainactivity .select {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-    --md-list-item-top-space: 8px;
-    --md-list-item-bottom-space: 8px;
-  }
-
-  .browsedatadomainactivity .parent-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding-left: 8px;
-  }
-`

package/src/apps/activities/styles/DeleteDataDomain.styles.ts

@@ -1,26 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .deletedatadomainactivity {
-    --ui-dialog-max-width: calc(100vw - 80px);
-    --ui-dialog-max-height: calc(100vh - 40px);
-  }
-
-  .deletedatadomainactivity .blocker .icon {
-    color: var(--md-sys-color-error);
-  }
-
-  .deletedatadomainactivity .non-blocker .icon {
-    color: var(--md-sys-color-primary);
-  }
-
-  .deletedatadomainactivity .switch-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .deletedatadomainactivity .blockers-toggle {
-    margin: 8px 0;
-  }
-`

package/src/apps/activities/styles/login.ts

@@ -1,66 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  main {
-    height: inherit;
-    min-height: inherit;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  }
-
-  .content {
-    background-color: var(--md-sys-color-surface);
-    border: 1px var(--md-sys-color-outline-variant) solid;
-    border-radius: var(--md-sys-shape-corner-medium);
-    overflow: hidden;
-    height: 40vh;
-    width: 60vw;
-    display: flex;
-  }
-
-  .slide {
-    gap: 40px;
-    padding: 80px;
-    display: flex;
-    flex: 1;
-  }
-
-  .intro,
-  .login {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .intro {
-    gap: 40px;
-  }
-
-  .login {
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
-  }
-
-  .login-progress {
-    width: 100%;
-  }
-
-  .account-setup-slide {
-    gap: 20px;
-    flex-direction: column;
-  }
-
-  .org-name-form {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .org-input {
-    width: 400px;
-  }
-`

package/src/apps/api_service.ts

@@ -1,20 +0,0 @@
-import { ServiceManager } from '../core/ServiceManager.js'
-import type UserService from './services/UserService.js'
-import type OrganizationService from './services/OrganizationService.js'
-import type SdkService from './services/SdkService.js'
-import type ConfigurationService from './services/ConfigurationService.js'
-import type TransmitService from './services/TransmitService.js'
-import type LoggingService from './services/LoggingService.js'
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type KnownBindings = {
-  config: ConfigurationService
-  sdk: SdkService
-  user: UserService
-  org: OrganizationService
-  transmit: TransmitService
-  logger: LoggingService
-}
-
-const manager = new ServiceManager<KnownBindings>()
-export { manager as default }

package/src/apps/fragments/loading.ts

@@ -1,84 +0,0 @@
-import { html, type TemplateResult } from 'lit'
-import { Fragment } from '../../core/Fragment.js'
-
-type SupportedTypes = 'init' | 'user-init'
-
-export interface LoaderIntentData {
-  /**
-   * The name of the loader to use.
-   */
-  loader?: SupportedTypes
-  /**
-   * The status message to render.
-   */
-  status?: string
-}
-
-export default class LoadingFragment extends Fragment {
-  #loader = 'init'
-
-  #status = 'Initializing the application...'
-
-  override onCreate(data?: unknown): void | Promise<void> {
-    if (!data) {
-      return
-    }
-    this.#processIntentData(data)
-  }
-
-  override onAttach(data?: unknown): void | Promise<void> {
-    if (!data) {
-      return
-    }
-    this.#processIntentData(data)
-  }
-
-  #processIntentData(data?: unknown): void {
-    if (!data) {
-      return
-    }
-    const typed = data as LoaderIntentData
-    if (typed.loader) {
-      this.#loader = typed.loader
-      this.requestUpdate({ app: false, fragment: false })
-    }
-  }
-
-  override render(): TemplateResult {
-    const loader = this.#loader as SupportedTypes
-    switch (loader) {
-      case 'init':
-        return this.#renderInit()
-      case 'user-init':
-        return this.#renderUserInit()
-      default:
-        return this.#renderNotFound()
-    }
-  }
-
-  #renderNotFound(): TemplateResult {
-    return html`
-      <div class="app-loader body-large">
-        <p class="message">Loader not found</p>
-      </div>
-    `
-  }
-
-  #renderInit(): TemplateResult {
-    return html`
-      <div class="app-loader body-large">
-        <p class="message">Preparing something spectacular</p>
-        <p class="sub-message">${this.#status}</p>
-      </div>
-    `
-  }
-
-  #renderUserInit(): TemplateResult {
-    return html`
-      <div class="app-loader body-large">
-        <p class="message">Preparing something spectacular</p>
-        <p class="sub-message">Checking for a session....</p>
-      </div>
-    `
-  }
-}

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

@@ -1,14 +0,0 @@
-export const RENAME_FILE = 'quick-api/fs/rename-file'
-export const CREATE_FOLDER = 'quick-api/fs/create-folder'
-export const MOVE_FILE = 'quick-api/fs/move-file'
-export const SHARE_FILE = 'quick-api/fs/share-file'
-export const DELETE_FILE = 'quick-api/fs/delete-file'
-
-export const APP_START = 'app/start'
-export const APP_LOGIN = 'app/login'
-
-export const QUICK_API_START = 'quick-api/start'
-export const QUICK_API_SCHEMA = 'quick-api/schema'
-
-export const DATA_DOMAIN_BROWSE = 'data-domain/browse'
-export const DATA_DOMAIN_DELETE = 'data-domain/delete'

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

@@ -1,55 +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 startStyles from './Start.styles.js'
-import type { ThemeType } from '../../core/ThemeManager.js'
-import type { MainFragmentInteraction } from './fragments/MainFragment.js'
-import type { AppInfo } from '../types.js'
-import AppStartActivity, { type AppStartIntentData } from '../activities/AppStartActivity.js'
-import OrganizationSelectionActivity from '../activities/OrganizationSelectionActivity.js'
-import OrganizationSetupActivity from '../activities/OrganizationSetupActivity.js'
-import LoginActivity from '../activities/LoginActivity.js'
-import QuickApiStartScreen from './StartScreenActivity.js'
-import services from '../api_service.js'
-import { APP_LOGIN, APP_START, CREATE_FOLDER, QUICK_API_START, RENAME_FILE } from './Intents.js'
-import RenameFileDialogActivity from '../activities/RenameFileDialogActivity.js'
-import CreateFolderDialogActivity from '../activities/CreateFolderDialogActivity.js'
-
-export default class QuickApiApp extends Application implements MainFragmentInteraction {
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [globalStyles, typography, tokens, theme, dialogStyles, startStyles]
-  }
-
-  override async onStart(): Promise<void> {
-    this.manager.registerActivity(APP_START, AppStartActivity)
-    this.manager.registerActivity(OrganizationSelectionActivity.action, OrganizationSelectionActivity)
-    this.manager.registerActivity(OrganizationSetupActivity.action, OrganizationSetupActivity)
-    this.manager.registerActivity(APP_LOGIN, LoginActivity)
-    this.manager.registerActivity(QUICK_API_START, QuickApiStartScreen)
-    this.manager.registerActivity(CREATE_FOLDER, CreateFolderDialogActivity)
-    this.manager.registerActivity(RENAME_FILE, RenameFileDialogActivity)
-
-    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_START,
-    }
-    this.manager.startActivity({ action: APP_START, data: intentData })
-  }
-
-  getAppInfo(): AppInfo {
-    return {
-      app: 'quick-api',
-      appVersion: '1',
-    }
-  }
-}

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

@@ -1,95 +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:
-      'header header'
-      'nav main';
-  }
-
-  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);
-
-    color: var(--md-sys-color-on-surface);
-  }
-
-  nav {
-    grid-area: nav;
-    width: 360px;
-    height: auto;
-    display: flex;
-    flex-direction: column;
-  }
-
-  nav > .nav {
-    flex: 1;
-    overflow: 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;
-  }
-
-  .gap-icon {
-    margin-left: auto;
-  }
-
-  .empty-screen {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    align-self: stretch;
-    gap: 20px;
-    border-radius: var(--md-sys-shape-corner-medium, 12px);
-    background: var(--md-sys-color-surface);
-  }
-
-  .empty-screen > .empty-message {
-    margin: 0;
-    padding: 0;
-    color: var(--md-sys-color-on-surface);
-  }
-
-  .empty-screen > .icon-wrapper {
-    display: flex;
-    padding: 40px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 60px;
-    background: var(--md-sys-color-primary);
-  }
-
-  .empty-screen > .icon-wrapper > .icon {
-    width: 40px;
-    height: 40px;
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  .editor {
-    color: var(--md-sys-color-on-surface);
-  }
-`