@operato/shell 8.0.0-alpha.51 → 8.0.0-beta.1

package/src/app/pages/page-404.ts

@@ -1,62 +0,0 @@
-import { css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { PageView } from './page-view'
-
-@customElement('page-404')
-export class Page404 extends PageView {
-  static styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      background-color: var(--md-sys-color-background);
-      --spacing-large: 15%;
-    }
-
-    section {
-      padding: var(--spacing-large) 0 0 0;
-      text-align: center;
-      color: var(--md-sys-color-on-background);
-    }
-
-    md-icon {
-      --md-icon-size: 120px;
-      color: var(--md-sys-color-error);
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-    }
-
-    h2 {
-      margin: 0 auto;
-      font-size: 2.5em;
-      text-transform: capitalize;
-      color: var(--md-sys-color-primary);
-    }
-
-    @media only screen and (max-width: 460px) {
-      md-icon {
-        padding-top: 25%;
-        --md-icon-size: 90px;
-      }
-
-      h2 {
-        font-size: 2em;
-      }
-    }
-  `
-
-  get context() {
-    return {
-      title: 'Page Not Found'
-    }
-  }
-
-  render() {
-    return html`
-      <section>
-        <md-icon>error_outline</md-icon>
-        <h2>page not found!</h2>
-        The page you requested cannot be found.
-      </section>
-    `
-  }
-}

package/src/app/pages/page-view.ts

@@ -1,215 +0,0 @@
-import { LitElement, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
-import isEqual from 'lodash-es/isEqual'
-
-import { UPDATE_CONTEXT } from '../../actions/const'
-import { store } from '../../store'
-
-export type PageLifecycle = {
-  active: boolean
-  params: object
-  resourceId?: string
-  page?: string
-}
-
-function diff(after: any, before: any): any {
-  var changed = false
-  var changes: { [key: string]: any } = {}
-
-  Object.getOwnPropertyNames(after).forEach(function (key) {
-    let before_val = before[key]
-    let after_val = after[key]
-
-    if (!isEqual(before_val, after_val)) {
-      changes[key] = after_val
-      changed = true
-    }
-  })
-
-  return changed && changes
-}
-
-/**
- * PageView is a base class for creating page elements with lifecycle management.
- * Subclasses can extend PageView to define custom behavior and handle page lifecycle events.
- */
-export class PageView extends LitElement {
-  /**
-   * Determines whether the page can be deactivated. Subclasses can override this method
-   * to implement custom deactivation logic.
-   * @returns A Promise that resolves to true if the page can be deactivated, or false otherwise.
-   */
-  async canDeactivate(): Promise<boolean> {
-    return true
-  }
-
-  /**
-   * Determines whether the page should update. This method is called whenever there are
-   * changes to the page's properties.
-   * @param changes - A map of changed property values.
-   * @returns True if the page should update, or false otherwise.
-   */
-  shouldUpdate(changes: PropertyValues<this>) {
-    var active = String(this.active) == 'true'
-    var { active: oldActive = false } = this._oldLifecycleInfo$ || {}
-
-    /*
-     * page lifecycle
-     * case 1. page가 새로 activate 되었다.
-     * case 2. page가 active 상태에서 lifecycle 정보가 바뀌었다.
-     **/
-    if (active) {
-      this.pageUpdate({
-        active
-      })
-    } else if (oldActive) {
-      this.pageUpdate({
-        active
-      })
-    }
-
-    return active
-  }
-
-  /**
-   * Indicates whether the page is currently active.
-   */
-  @property({ type: Boolean }) active: boolean = false
-
-  /**
-   * Stores information about the page's lifecycle.
-   */
-  @property({ type: Object }) lifecycle!: PageLifecycle
-
-  /**
-   * The context path for the page.
-   */
-  @property({ type: String, attribute: 'context-path' }) contextPath?: string
-
-  _oldLifecycleInfo$: any
-
-  /* lifecycle */
-
-  /**
-   * Handles page updates and lifecycle events. Subclasses can override this method
-   * to implement custom logic for initializing, updating, and disposing of the page.
-   * @param changes - A map of changed properties.
-   * @param force - If true, forces an update of the page.
-   */
-  async pageUpdate(changes: any = {}, force: boolean = false) {
-    var before = this._oldLifecycleInfo$ || {}
-
-    var after = {
-      ...before,
-      ...this.lifecycle,
-      contextPath: this.contextPath,
-      ...changes
-    }
-
-    if (!('initialized' in changes) && after.active && !before.initialized) {
-      after.initialized = true
-    }
-
-    if (force) {
-      after.updated = Date.now()
-    }
-
-    var changed = diff(after, before)
-    if (!changed) {
-      return
-    }
-
-    this._oldLifecycleInfo$ = after
-
-    /* page의 이미 초기화된 상태에서 contextPath가 바뀐다면, 무조건 page가 리셋되어야 한다. */
-    if (before.initialized && changed.contextPath) {
-      await this.pageReset()
-      return
-    }
-
-    if (changed.initialized) {
-      await this.pageInitialized(after)
-    }
-
-    if ('initialized' in changed) {
-      if (changed.initialized) {
-        /*
-         * 방금 초기화된 경우라면, 엘리먼트들이 만들어지지 않았을 가능성이 있으므로,
-         * 다음 animationFrame에서 pageUpdated 콜백을 호출한다.
-         */
-        requestAnimationFrame(async () => {
-          await this.pageUpdated(changed, after, before)
-          /* active page인 경우에는, page Context 갱신도 필요할 것이다. */
-          after.active && this.updateContext()
-        })
-      } else {
-        await this.pageDisposed(after)
-      }
-    } else {
-      await this.pageUpdated(changed, after, before)
-      /* active page인 경우에는, page Context 갱신도 필요할 것이다. */
-      after.active && this.updateContext()
-    }
-  }
-
-  /**
-   * Resets the page. Subclasses can override this method to perform custom reset logic.
-   */
-  async pageReset() {
-    var { initialized } = this._oldLifecycleInfo$ || {}
-
-    if (initialized) {
-      await this.pageDispose()
-      await this.pageUpdate({}, true)
-    }
-  }
-
-  /**
-   * Disposes of the page. Subclasses can override this method to perform custom disposal logic.
-   */
-  async pageDispose() {
-    await this.pageUpdate({
-      initialized: false
-    })
-  }
-
-  /**
-   * Initializes the page. Subclasses can override this method to perform custom initialization logic.
-   * @param pageInfo - Information about the page's state.
-   */
-  pageInitialized(pageInfo: any) {}
-
-  /**
-   * Handles page updates and changes in properties.
-   * Subclasses can override this method to implement custom update logic.
-   * @param changes - A map of changed properties.
-   * @param after - The current state of the page.
-   * @param before - The previous state of the page.
-   */
-  pageUpdated(changes: any, after: any, before: any) {}
-
-  /**
-   * Handles the disposal of the page. Subclasses can override this method
-   * to implement custom disposal logic.
-   * @param pageInfo - Information about the page's state.
-   */
-  pageDisposed(pageInfo: any) {}
-
-  /* context */
-  updateContext(override?: any) {
-    store.dispatch({
-      type: UPDATE_CONTEXT,
-      context: override ? { ...this.context, ...override } : this.context
-    })
-  }
-
-  /**
-   * Updates the context of the page. Subclasses can override the `context` getter
-   * to provide specific context information for the page. The context will be updated
-   * using the `updateContext` method inherited from PageView.
-   * @param override - An optional object with context properties to override.
-   */
-  get context() {
-    return {}
-  }
-}

package/src/custom-alert.ts

@@ -1,43 +0,0 @@
-import { OxPrompt } from '@operato/popup'
-
-const TYPES_ICON: { [type: string]: string } = {
-  success: 'verified',
-  error: 'error',
-  warning: 'warning',
-  info: 'info',
-  question: 'question_mark'
-}
-
-export async function CustomAlert({
-  type,
-  icon,
-  title,
-  text,
-  confirmButton,
-  cancelButton,
-  callback
-}: {
-  type?: 'info' | 'success' | 'error' | 'warning' | 'question'
-  icon?: string
-  title?: string
-  text?: string
-  confirmButton?: { color?: string; text: string } | string
-  cancelButton?: { color?: string; text: string } | string
-  callback?: (val: { isConfirmed: boolean; isDismissed: boolean; value: boolean }) => any
-}) {
-  const result = await OxPrompt.open({
-    type: type || 'info',
-    icon: (icon && TYPES_ICON[icon]) || icon,
-    title,
-    text,
-    confirmButton: typeof confirmButton == 'string' ? { text: confirmButton } : confirmButton,
-    cancelButton: typeof cancelButton == 'string' ? { text: cancelButton } : cancelButton
-  })
-
-  const val = { isConfirmed: result, isDismissed: !result, value: result }
-  if (callback && typeof callback === 'function') {
-    callback(val)
-  } else {
-    return val
-  }
-}

package/src/entries/public/home.ts

@@ -1,94 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-@customElement('home-page')
-export class HomePage extends LitElement {
-  static styles = css`
-    :host {
-      background-color: var(--md-sys-color-background);
-
-      display: block;
-      position: relative;
-    }
-
-    [home] {
-      position: absolute;
-      left: 20px;
-      top: 20px;
-      font-size: 2em;
-      color: white;
-    }
-
-    [message] {
-      background-color: rgba(50, 66, 97, 0.8);
-      padding: 60px 50px 0 50px;
-      color: #fff;
-      text-align: center;
-      font-size: 20px;
-
-      strong {
-        display: block;
-        font-size: 2.5rem;
-      }
-
-      img {
-        width: 450px;
-        max-width: 90%;
-        display: block;
-        margin: auto;
-        margin-top: 20px;
-      }
-    }
-
-    @media screen and (max-width: 460px) {
-      [message] {
-        padding: 60px 30px 0 30px;
-        color: #fff;
-        text-align: center;
-        font-size: 15px;
-      }
-
-      [message] strong {
-        font-size: 1.6rem;
-      }
-    }
-  `
-
-  _applicationMeta?: {
-    icon: string
-    title: string
-    description: string
-  }
-
-  render() {
-    var { title, description } = this.applicationMeta
-
-    return html`
-      <md-icon home @click=${() => (window.location.href = '/')}>home</md-icon>
-
-      <div message>
-        <strong>${title}</strong>
-        ${description}
-        <img src="/assets/images/home.png" />
-      </div>
-    `
-  }
-
-  get applicationMeta() {
-    if (!this._applicationMeta) {
-      var iconLink = document.querySelector('link[rel="application-icon"]') as HTMLLinkElement
-      var titleMeta = document.querySelector('meta[name="application-name"]') as HTMLMetaElement
-      var descriptionMeta = document.querySelector('meta[name="application-description"]') as HTMLMetaElement
-
-      this._applicationMeta = {
-        icon: iconLink?.href,
-        title: titleMeta ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-      }
-    }
-
-    return this._applicationMeta
-  }
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from './types'
-export * from './store'
-export * from './actions'
-export * from './app/pages/page-view'
-export * from './object-store'
-export * from './custom-alert'

package/src/object-store.ts

@@ -1,173 +0,0 @@
-/*
- * [ Caution ]
- * Since this module is being used by a service worker, be very careful about adding imports or using functions for browsers.
- */
-
-type OxObjectStore = {
-  add: (value: any, key?: IDBValidKey | undefined) => IDBValidKey
-  delete: (query: IDBValidKey | IDBKeyRange) => undefined
-  clear: () => undefined
-  get: (query: IDBValidKey | IDBKeyRange) => any
-  getAll: (query?: IDBValidKey | IDBKeyRange | null | undefined, count?: number | undefined) => any[]
-  getAllKeys: (query?: IDBValidKey | IDBKeyRange | null | undefined, count?: number | undefined) => IDBValidKey[]
-  count: (query?: IDBValidKey | IDBKeyRange | undefined) => number
-  put: (value: any, key?: IDBValidKey | undefined) => IDBValidKey
-  openCursor: (
-    query?: IDBValidKey | IDBKeyRange | null | undefined,
-    direction?: IDBCursorDirection | undefined
-  ) => IDBCursorWithValue | null
-  openKeyCursor: (
-    query?: IDBValidKey | IDBKeyRange | null | undefined,
-    direction?: IDBCursorDirection | undefined
-  ) => IDBCursor | null
-  limit: (limit?: number) => undefined
-}
-
-/* promise queue */
-class Queue {
-  private static queue: {
-    promise: Promise<IDBDatabase>
-    resolve: (db: IDBDatabase) => void
-    reject: (reason?: any) => void
-  }[] = []
-
-  private static workingOnPromise: boolean = false
-
-  static enqueue(promise: Promise<any>) {
-    return new Promise((resolve, reject) => {
-      this.queue.push({
-        promise,
-        resolve,
-        reject
-      })
-      this.dequeue()
-    })
-  }
-
-  static dequeue() {
-    if (this.workingOnPromise) {
-      return false
-    }
-    const item = this.queue.shift()
-    if (!item) {
-      return false
-    }
-    try {
-      this.workingOnPromise = true
-      item.promise
-        .then(value => {
-          this.workingOnPromise = false
-          item.resolve(value)
-          this.dequeue()
-        })
-        .catch(err => {
-          this.workingOnPromise = false
-          item.reject(err)
-          this.dequeue()
-        })
-    } catch (err) {
-      this.workingOnPromise = false
-      item.reject(err)
-      this.dequeue()
-    }
-    return true
-  }
-}
-
-function getStore(storeName: string): OxObjectStore {
-  return [
-    'add',
-    'delete',
-    'clear',
-    'get',
-    'getAll',
-    'getAllKeys',
-    'count',
-    'put',
-    'openCursor',
-    'openKeyCursor'
-  ].reduce(
-    (sum, m) => {
-      sum[m] = async (...params: any) => {
-        const db = (await getIndexDB()) as IDBDatabase
-
-        const transaction = db.transaction(storeName, 'readwrite')
-        const store = transaction.objectStore(storeName)
-        const method: (...p: any) => any = (store as any)[m]
-        const request = method.apply(store, params)
-
-        return await new Promise((resolve, reject) => {
-          request.onsuccess = (event: Event) => {
-            resolve((event.target as IDBRequest)?.result)
-          }
-
-          request.onerror = (event: Event) => {
-            reject(event)
-          }
-        })
-      }
-
-      return sum
-    },
-    {
-      async limit(this: OxObjectStore, limit = 50) {
-        const keys = (await this.getAllKeys()).slice(0, -limit)
-        for (let i = 0; i < keys.length; i++) {
-          await this.delete(keys[i])
-        }
-      }
-    } as any
-  )
-}
-
-function getIndexedDB(): IDBFactory {
-  if (typeof window !== 'undefined') {
-    return window.indexedDB
-  } else {
-    return self.indexedDB
-  }
-}
-
-var db: IDBDatabase
-
-function getIndexDB() {
-  if (db) {
-    return db
-  }
-
-  return Queue.enqueue(
-    new Promise(function (resolve, reject) {
-      const indexedDB = getIndexedDB()
-
-      if (!indexedDB) {
-        reject('this browser does not support indexedDB')
-      }
-      const request = indexedDB.open('things-factory-database')
-
-      request.onerror = function (event) {
-        console.log("Why didn't you allow my web app to use IndexedDB?!")
-        reject(event)
-      }
-
-      request.onupgradeneeded = function (event: IDBVersionChangeEvent) {
-        var db: IDBDatabase = (event.target as IDBRequest)?.result
-
-        var store = db.createObjectStore('notifications', { keyPath: 'id', autoIncrement: true })
-        store.createIndex('notification_id_unqiue', 'id', { unique: true })
-
-        var store = db.createObjectStore('client_settings', { keyPath: 'key', autoIncrement: true })
-        store.createIndex('client_setting_key_unqiue', 'key', { unique: true })
-      }
-
-      request.onsuccess = function (event) {
-        console.log('IndexedDB opened successfully')
-        db = request.result
-        resolve(db)
-      }
-    })
-  )
-}
-
-/* ready indexedDB Stores */
-export const clientSettingStore: OxObjectStore = getStore('client_settings')
-export const notificationStore: OxObjectStore = getStore('notifications')

package/src/reducers/app.ts

@@ -1,48 +0,0 @@
-import { getPathInfo } from '@operato/utils'
-
-import { SET_DOMAINS, UPDATE_BASE_URL, UPDATE_CONTEXT_PATH, UPDATE_MODULES } from '../actions/app.js'
-
-const INITIAL_STATE: {
-  baseUrl: string
-  contextPath: string
-  domains: {
-    name: string
-    subdomain: string
-  }[]
-} = {
-  baseUrl: location.origin,
-  contextPath: getPathInfo(location.pathname).contextPath,
-  domains: []
-}
-
-const app = (state = INITIAL_STATE, action: any) => {
-  switch (action.type) {
-    case UPDATE_MODULES:
-      return {
-        ...state,
-        modules: action.modules
-      }
-    case UPDATE_BASE_URL:
-      return {
-        ...state,
-        baseUrl: action.baseUrl
-      }
-    case UPDATE_CONTEXT_PATH:
-      return {
-        ...state,
-        contextPath: action.contextPath
-      }
-
-    case SET_DOMAINS:
-      return {
-        ...state,
-        domains: action.domains,
-        domain: action.domain
-      }
-
-    default:
-      return state
-  }
-}
-
-export default app

package/src/reducers/busy.ts

@@ -1,21 +0,0 @@
-import { UPDATE_BUSY } from '../actions/busy.js'
-
-const INITIAL_STATE: {
-  busy: boolean
-} = {
-  busy: false
-}
-
-const busy = (state = INITIAL_STATE, action: any) => {
-  switch (action.type) {
-    case UPDATE_BUSY:
-      return {
-        busy: action.busy
-      }
-
-    default:
-      return state
-  }
-}
-
-export default busy