@hanzo/ui 0.5.23 → 0.6.15

package/src/location.ts

@@ -0,0 +1,259 @@
+//
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import { Analytics } from '@hanzo/analytics'
+import { clone, type Ref, type Space } from '@hanzo/core'
+import { type Plugin } from '@hanzo/platform'
+import { derived, get, writable } from 'svelte/store'
+
+import { closePopup } from './popups'
+import { type Location as PlatformLocation } from './types'
+
+export function locationToUrl (location: PlatformLocation): string {
+  let result = '/'
+  if (location.path != null) {
+    result += location.path.map((p) => encodeURIComponent(p)).join('/')
+  }
+  if (location.query != null) {
+    const queryValue = Object.entries(location.query)
+      .map((e) => {
+        if (e[1] != null) {
+          // Had value
+          return e[0] + '=' + e[1]
+        } else {
+          return e[0]
+        }
+      })
+      .join('&')
+    if (queryValue.length > 0) {
+      result += '?' + queryValue
+    }
+  }
+  if (location.fragment != null && location.fragment.length > 0) {
+    result += '#' + location.fragment
+  }
+
+  return result
+}
+
+export function parseLocation (location: Location | URL): PlatformLocation {
+  return {
+    path: parsePath(location.pathname),
+    query: parseQuery(location.search),
+    fragment: parseHash(location.hash)
+  }
+}
+
+function parseQuery (query: string): Record<string, string | null> | undefined {
+  query = query.trim()
+  if (query.length === 0 || !query.startsWith('?')) {
+    return
+  }
+  query = decodeURIComponent(query).substring(1)
+  const vars = query.split('&')
+  const result: Record<string, string | null> = {}
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split('=')
+    const key = pair[0]
+    if (key.length > 0) {
+      if (pair.length > 1) {
+        const value = pair[1]
+        result[key] = value
+      } else {
+        result[key] = null
+      }
+    }
+  }
+  return result
+}
+
+function parsePath (path: string): string[] {
+  const split = path.split('/').map((ps) => decodeURIComponent(ps))
+  if (split.length >= 1) {
+    if (split[0] === '') {
+      split.splice(0, 1)
+    }
+  }
+  if (split.length >= 1) {
+    if (split[split.length - 1] === '') {
+      split.splice(split.length - 1, 1)
+    }
+  }
+  return split
+}
+
+function parseHash (hash: string): string {
+  if (hash.startsWith('#')) {
+    return decodeURIComponent(hash.substring(1))
+  }
+  return decodeURIComponent(hash)
+}
+
+// ------------------------
+
+export function getRawCurrentLocation (): PlatformLocation {
+  return parseLocation(window.location)
+}
+
+export function getCurrentResolvedLocation (): PlatformLocation {
+  return clone(resolvedLocation)
+}
+
+declare global {
+  interface Window {
+    desktopPlatform?: boolean
+  }
+}
+
+function isRunningInElectron (): boolean {
+  // Renderer process
+  if (
+    typeof window !== 'undefined' &&
+    typeof (window as any).process === 'object' &&
+    (window as any).process.type === 'renderer'
+  ) {
+    return true
+  }
+
+  // Detect the user agent when the `nodeIntegration` option is set to true
+  if (
+    typeof navigator === 'object' &&
+    typeof navigator.userAgent === 'string' &&
+    navigator.userAgent.includes('Electron')
+  ) {
+    return true
+  }
+
+  return false
+}
+
+export const desktopPlatform = window.desktopPlatform ?? isRunningInElectron()
+const locationWritable = writable(getRawCurrentLocation())
+
+console.log('desktopPlatform', window.desktopPlatform)
+
+if (!desktopPlatform) {
+  window.addEventListener('popstate', () => {
+    locationWritable.set(getRawCurrentLocation())
+  })
+} else {
+  window.addEventListener('popstate', (state) => {
+    if (state.state.location !== undefined) {
+      locationWritable.set(state.state.location)
+    }
+  })
+}
+
+export const location = derived(locationWritable, (loc) => clone(loc))
+
+/**
+ * Unlike {@link location}, exposes raw browser location as seen in URL
+ */
+export const rawLocation = derived(locationWritable, () => getCurrentLocation())
+
+export const workspaceId = derived(location, (loc) => loc.path[1])
+
+/**
+ * @public
+ */
+export function getLocation (): PlatformLocation {
+  return clone(get(location))
+}
+
+export const resolvedLocationStore = writable(getRawCurrentLocation())
+let resolvedLocation = getRawCurrentLocation()
+
+export function setResolvedLocation (location: PlatformLocation): void {
+  resolvedLocation = location
+  resolvedLocationStore.set(clone(location))
+}
+
+export function getCurrentLocation (): PlatformLocation {
+  if (desktopPlatform) {
+    return clone(get(locationWritable))
+  }
+  return getRawCurrentLocation()
+}
+
+/**
+ * @public
+ */
+export let locationStorageKeyId = 'platform_last_loc'
+
+export function setLocationStorageKey (storageKey: string): void {
+  locationStorageKeyId = storageKey
+}
+
+export function navigate (location: PlatformLocation, replace = false): boolean {
+  closePopup()
+  const cur = locationToUrl(getCurrentLocation())
+  const url = locationToUrl(location)
+  if (cur !== url) {
+    const data = !desktopPlatform ? null : { location }
+    const _url = !desktopPlatform ? url : undefined
+    Analytics.navigate(url)
+    if (replace) {
+      history.replaceState(data, '', _url)
+    } else {
+      history.pushState(data, '', _url)
+    }
+    localStorage.setItem(locationStorageKeyId, JSON.stringify(location))
+    if (location.path[1] !== undefined) {
+      localStorage.setItem(`${locationStorageKeyId}_${location.path[1]}`, JSON.stringify(location))
+    }
+    locationWritable.set(location)
+    return true
+  }
+  return false
+}
+
+const COLLAPSED = 'COLLAPSED'
+export const getCollapsedKey = (_id: string, prefix?: string): string =>
+  `${getCurrentLocation().path[1]}_${prefix !== undefined && prefix !== '' ? prefix + '_###_' + _id : _id}_collapsed`
+
+export const getTreeCollapsed = (_id: any, prefix?: string): boolean => {
+  if (_id === undefined || _id === 'undefined') return false
+  return localStorage.getItem(getCollapsedKey(_id as string, prefix)) === COLLAPSED
+}
+
+export const setTreeCollapsed = (_id: any, collapsed: boolean, prefix?: string): void => {
+  if (_id === undefined || _id === 'undefined') return
+  const key = getCollapsedKey(_id, prefix)
+  collapsed ? localStorage.setItem(key, COLLAPSED) : localStorage.removeItem(key)
+}
+
+export function isSameSegments (a: PlatformLocation, b: PlatformLocation, len = 2): boolean {
+  return a.path.slice(0, len).every((segment, index) => segment === b.path[index])
+}
+
+export function restoreLocation (loc: PlatformLocation, app: Plugin): void {
+  const last = localStorage.getItem(`${locationStorageKeyId}_${app}`)
+
+  if (last !== null) {
+    const newLocation: PlatformLocation = JSON.parse(last)
+
+    if (newLocation.path[1] === loc.path[1] && newLocation.path[3] != null) {
+      loc.path[3] = newLocation.path[3] as Ref<Space>
+      loc.path[4] = newLocation.path[4]
+      if (loc.path[4] == null) {
+        loc.path.length = 4
+      } else {
+        loc.path.length = 5
+      }
+
+      navigate(loc)
+    }
+  }
+}

package/src/modals.ts

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store'
+import { type CompAndProps } from './popups'
+import { type LabelAndProps } from './types'
+
+export const modalStore = writable<Array<LabelAndProps | CompAndProps>>([])

package/src/panelup.ts

@@ -0,0 +1,70 @@
+import { writable } from 'svelte/store'
+import { getLocation, navigate } from './location'
+import { type AnyComponent, type PopupAlignment } from './types'
+
+export interface PanelProps {
+  component: AnyComponent
+  _id: string
+  _class: string
+  element?: PopupAlignment
+  rightSection?: AnyComponent
+  refit?: () => void
+}
+
+export const panelstore = writable<{
+  panel?: PanelProps | undefined
+}>({ panel: undefined })
+let currentLocation: string | undefined
+
+export function getPanelURI (component: AnyComponent, _id: string, _class: string, element?: PopupAlignment): string {
+  const panelProps = [component, _id, _class]
+  if (typeof element === 'string') {
+    panelProps.push(element)
+  }
+  return encodeURIComponent(panelProps.join('|'))
+}
+
+export function showPanel (
+  component: AnyComponent,
+  _id: string,
+  _class: string,
+  element?: PopupAlignment,
+  rightSection?: AnyComponent,
+  doNavigate: boolean = true
+): void {
+  openPanel(component, _id, _class, element, rightSection)
+  const loc = getLocation()
+  if (doNavigate && loc.fragment !== currentLocation) {
+    loc.fragment = currentLocation
+    navigate(loc)
+  }
+}
+
+function openPanel (
+  component: AnyComponent,
+  _id: string,
+  _class: string,
+  element?: PopupAlignment,
+  rightSection?: AnyComponent
+): void {
+  const newLoc = getPanelURI(component, _id, _class, element)
+  if (currentLocation === newLoc) {
+    return
+  }
+  currentLocation = newLoc
+  panelstore.update(() => {
+    return { panel: { component, _id, _class, element, rightSection } }
+  })
+}
+
+export function closePanel (shouldRedirect: boolean = true): void {
+  currentLocation = undefined
+  panelstore.update(() => {
+    return { panel: undefined }
+  })
+  if (shouldRedirect) {
+    const loc = getLocation()
+    loc.fragment = undefined
+    navigate(loc)
+  }
+}

package/src/plugin.ts

@@ -0,0 +1,156 @@
+//
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import type { IntlString, Metadata, Plugin } from '@hanzo/platform'
+import { plugin } from '@hanzo/platform'
+import { type AnyComponent } from './types'
+
+/**
+ * @public
+ */
+export const uiId = 'ui' as Plugin
+
+export const uis = plugin(uiId, {
+  string: {
+    EditBoxPlaceholder: '' as IntlString,
+    Ok: '' as IntlString,
+    Cancel: '' as IntlString,
+    Save: '' as IntlString,
+    Publish: '' as IntlString,
+    SaveDraft: '' as IntlString,
+    MinutesAgo: '' as IntlString,
+    HoursAgo: '' as IntlString,
+    DaysAgo: '' as IntlString,
+    MonthsAgo: '' as IntlString,
+    YearsAgo: '' as IntlString,
+    Minutes: '' as IntlString,
+    Hours: '' as IntlString,
+    Days: '' as IntlString,
+    Weeks: '' as IntlString,
+    Months: '' as IntlString,
+    Years: '' as IntlString,
+    Before: '' as IntlString,
+    After: '' as IntlString,
+    MinutesShort: '' as IntlString,
+    HoursShort: '' as IntlString,
+    DaysShort: '' as IntlString,
+    ShowMore: '' as IntlString,
+    ShowLess: '' as IntlString,
+    Search: '' as IntlString,
+    SearchDots: '' as IntlString,
+    SearchResults: '' as IntlString,
+    Suggested: '' as IntlString,
+    TimeTooltip: '' as IntlString,
+    SelectDate: '' as IntlString,
+    None: '' as IntlString,
+    NotSelected: '' as IntlString,
+    Today: '' as IntlString,
+    NoDate: '' as IntlString,
+    StartDate: '' as IntlString,
+    TargetDate: '' as IntlString,
+    Overdue: '' as IntlString,
+    DueDate: '' as IntlString,
+    AddDueDate: '' as IntlString,
+    SetDueDate: '' as IntlString,
+    EditDueDate: '' as IntlString,
+    SaveDueDate: '' as IntlString,
+    NeedsToBeCompletedByThisDate: '' as IntlString,
+    English: '' as IntlString,
+    Russian: '' as IntlString,
+    Spanish: '' as IntlString,
+    Portuguese: '' as IntlString,
+    Chinese: '' as IntlString,
+    French: '' as IntlString,
+    Italian: '' as IntlString,
+    Czech: '' as IntlString,
+    German: '' as IntlString,
+    MinutesBefore: '' as IntlString,
+    HoursBefore: '' as IntlString,
+    DaysBefore: '' as IntlString,
+    WeeksBefore: '' as IntlString,
+    MonthsBefore: '' as IntlString,
+    MinutesAfter: '' as IntlString,
+    HoursAfter: '' as IntlString,
+    DaysAfter: '' as IntlString,
+    WeeksAfter: '' as IntlString,
+    MonthsAfter: '' as IntlString,
+    NoActionsDefined: '' as IntlString,
+    Incoming: '' as IntlString,
+    HoursLabel: '' as IntlString,
+    Back: '' as IntlString,
+    Next: '' as IntlString,
+    DropdownDefaultLabel: '' as IntlString,
+    DD: '' as IntlString,
+    MM: '' as IntlString,
+    YYYY: '' as IntlString,
+    HH: '' as IntlString,
+    DueDatePopupTitle: '' as IntlString,
+    DueDatePopupOverdueTitle: '' as IntlString,
+    DueDatePopupDescription: '' as IntlString,
+    DueDatePopupOverdueDescription: '' as IntlString,
+
+    SmileysAndPeople: '' as IntlString,
+    Components: '' as IntlString,
+    AnimalsAndNature: '' as IntlString,
+    FoodAndDrink: '' as IntlString,
+    TravelAndPlaces: '' as IntlString,
+    Activities: '' as IntlString,
+    Objects: '' as IntlString,
+    Symbols: '' as IntlString,
+    Flags: '' as IntlString,
+    FrequentlyUsed: '' as IntlString,
+    GettingWorkDone: '' as IntlString,
+    DefaultSkinTone: '' as IntlString,
+    NoTone: '' as IntlString,
+    Light: '' as IntlString,
+    MediumLight: '' as IntlString,
+    Medium: '' as IntlString,
+    MediumDark: '' as IntlString,
+    Dark: '' as IntlString,
+    Remove: '' as IntlString,
+    NoResults: '' as IntlString,
+    MoreCount: '' as IntlString,
+    Spacious: '' as IntlString,
+    Compact: '' as IntlString,
+    ThemeLight: '' as IntlString,
+    ThemeDark: '' as IntlString,
+    ThemeSystem: '' as IntlString,
+    NoTimeZonesFound: '' as IntlString,
+    Selected: '' as IntlString,
+    Submit: '' as IntlString,
+    NextStep: '' as IntlString,
+    TypeHere: '' as IntlString,
+
+    NormalSize: '' as IntlString,
+    FullSize: '' as IntlString,
+    UseMaxWidth: '' as IntlString,
+    Sidebar: '' as IntlString,
+    FontSize: '' as IntlString,
+    Language: '' as IntlString,
+    DaysWOValue: '' as IntlString,
+    WeeksWOValue: '' as IntlString,
+    MonthsWOValue: '' as IntlString
+  },
+  metadata: {
+    DefaultApplication: '' as Metadata<AnyComponent>,
+    Routes: '' as Metadata<Map<string, AnyComponent>>,
+    Languages: '' as Metadata<string[]>,
+    PlatformTitle: '' as Metadata<string>,
+    SearchPopup: '' as Metadata<AnyComponent>
+  }
+})
+
+export default uis