hfs 0.26.8 → 0.27.2

package/admin/src/addFiles.ts

@@ -1,59 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { alertDialog, newDialog, promptDialog } from './dialog'
-import { createElement as h, Fragment } from 'react'
-import { Box } from '@mui/material'
-import { VfsNode, reloadVfs } from './VfsPage'
-import { state } from './state'
-import { apiCall } from './api'
-import FilePicker from './FilePicker'
-import { onlyTruthy } from './misc'
-
-export default function addFiles() {
-    const close = newDialog({
-        title: "Add files or folders",
-        dialogProps: { sx:{ minWidth: 'min(90vw, 40em)', minHeight: 'calc(100vh - 9em)' } },
-        Content() {
-            const under = getUnder()
-            return h(Fragment, {},
-                h(Box, { sx:{ typography: 'body1', px: 1, py: 2 } },
-                    "Selected elements will be added to virtual path " + (under || '(home)')),
-                h(FilePicker, {
-                    async onSelect(sel) {
-                        let failed = await Promise.all(sel.map(source =>
-                            apiCall('add_vfs', { under, source }).then(() => '', () => source) ))
-                        failed = onlyTruthy(failed)
-                        if (failed.length)
-                            await alertDialog("Some elements have been rejected: "+failed.join(', '), 'error')
-                        reloadVfs()
-                        close()
-                    }
-                })
-            )
-        }
-    })
-}
-
-export async function addVirtual() {
-    try {
-        const name = await promptDialog("Enter folder name")
-        if (!name) return
-        const under = getUnder()
-        await apiCall('add_vfs', { under, name })
-        reloadVfs([ (under||'') + '/' + name ])
-        await alertDialog(`Folder "${name}" created`, 'success')
-    }
-    catch(e) {
-        await alertDialog(e as Error)
-    }
-}
-
-function getUnder() {
-    let f: VfsNode | undefined = state.selectedFiles[0]
-    if (!f)
-        return ''
-    if (f.type !== 'folder')
-        f = f.parent
-    const { id } = f!
-    return id === '/' ? '' : id
-}

package/admin/src/api.ts

@@ -1,246 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, useCallback, useEffect, useMemo, useRef } from 'react'
-import { Dict, err2msg, Falsy, getCookie, IconBtn, spinner, useStateMounted, wantArray } from './misc'
-import { Alert } from '@mui/material'
-import _ from 'lodash'
-import { state } from './state'
-import { Refresh } from '@mui/icons-material'
-import produce, { Draft } from 'immer'
-
-export function useApiEx<T=any>(...args: Parameters<typeof useApi>) {
-    const [data, error, reload] = useApi<T>(...args)
-    const cmd = args[0]
-    const loading = data === undefined
-    const element = useMemo(() =>
-            !cmd ? null
-                : error ? h(Alert, { severity: 'error' }, String(error), h(IconBtn, { icon: Refresh, onClick: reload, sx: { m:'-8px 0 -8px 16px' } }))
-                    : loading ? spinner()
-                        : null,
-        [error, cmd, loading, reload])
-    return { data, error, reload, loading, element }
-}
-
-const PREFIX = '/~/api/'
-
-const timeoutByApi: Dict = {
-    get_status: 20 // can be lengthy on slow machines because of the find-process-on-busy-port feature
-}
-export function apiCall(cmd: string, params?: Dict, { timeout=undefined }={}) : Promise<any> {
-    const csrf = getCsrf()
-    if (csrf)
-        params = { csrf, ...params }
-
-    const controller = new AbortController()
-    if (timeout !== false)
-        setTimeout(() => controller.abort('timeout'), 1000*(timeoutByApi[cmd] ?? timeout ?? 10))
-    return fetch(PREFIX+cmd, {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        signal: controller.signal,
-        body: params && JSON.stringify(params),
-    }).then(async res => {
-        if (res.ok)
-            return res.json().then(json => {
-                console.debug('API', cmd, params, '>>', json)
-                return json
-            })
-        const msg = await res.text() || 'Failed API ' + cmd
-        console.warn(msg + (params ? ' ' + JSON.stringify(params) : ''))
-        if (res.status === 401)
-            state.loginRequired = true
-        throw new ApiError(res.status, msg)
-    }, err => {
-        if (err?.message?.includes('fetch'))
-            throw Error("Network error")
-        throw err
-    })
-}
-
-export class ApiError extends Error {
-    constructor(readonly code:number, message: string) {
-        super(message);
-    }
-}
-
-export function useApi<T=any>(cmd: string | Falsy, params?: object) : [T | undefined, undefined | Error, ()=>void] {
-    const [ret, setRet] = useStateMounted<T | undefined>(undefined)
-    const [err, setErr] = useStateMounted<Error | undefined>(undefined)
-    const [forcer, setForcer] = useStateMounted(0)
-    const loadingRef = useRef(false)
-    useEffect(()=>{
-        setRet(undefined)
-        setErr(undefined)
-        if (!cmd) return
-        loadingRef.current = true
-        apiCall(cmd, params)
-            .then(setRet, setErr)
-            .finally(()=> loadingRef.current = false)
-    }, [cmd, JSON.stringify(params), forcer]) //eslint-disable-line -- json-ize to detect deep changes
-    const reload = useCallback(()=> loadingRef.current || setForcer(v => v+1), [setForcer])
-    return [ret, err, reload]
-}
-
-type EventHandler = (type:string, data?:any) => void
-
-export function apiEvents(cmd: string, params: Dict, cb:EventHandler) {
-    console.debug('API EVENTS', cmd, params)
-    const csrf = getCsrf()
-    const processed: Record<string,string> = { csrf: csrf && JSON.stringify(csrf) }
-    for (const k in params) {
-        const v = params[k]
-        if (v === undefined) continue
-        processed[k] = JSON.stringify(v)
-    }
-    const source = new EventSource(PREFIX + cmd + '?' + new URLSearchParams(processed))
-    source.onopen = () => cb('connected')
-    source.onerror = err => cb('error', err)
-    source.onmessage = ({ data }) => {
-        if (!data) {
-            cb('closed')
-            return source.close()
-        }
-        try { data = JSON.parse(data) }
-        catch {
-            return cb('string', data)
-        }
-        console.debug('SSE msg', data)
-        cb('msg', data)
-    }
-    return source
-}
-
-function getCsrf() {
-    return getCookie('csrf')
-}
-
-export function useApiEvents(cmd: string, params: Dict={}) {
-    const [data, setData] = useStateMounted<any>(undefined)
-    const [error, setError] = useStateMounted<any>(undefined)
-    const [loading, setLoading] = useStateMounted(false)
-    useEffect(() => {
-        const src = apiEvents(cmd, params, (type, data) => {
-            switch (type) {
-                case 'error':
-                    setError("Connection error")
-                    return stop()
-                case 'closed':
-                    return stop()
-                case 'msg':
-                    if (src?.readyState === src?.CLOSED)
-                        return stop()
-                    return setData(data)
-            }
-        })
-        return () => {
-            src.close()
-            stop()
-        }
-
-        function stop() {
-            setLoading(false)
-        }
-    }, [cmd, JSON.stringify(params)]) //eslint-disable-line
-    return { data, loading, error }
-}
-
-export function useApiList<T=any>(cmd:string|Falsy, params: Dict={}, { addId=false, map=((x:any)=>x) }={}) {
-    const [list, setList] = useStateMounted<T[]>([])
-    const [error, setError] = useStateMounted<any>(undefined)
-    const [connecting, setConnecting] = useStateMounted(true)
-    const [loading, setLoading] = useStateMounted(false)
-    const [initializing, setInitializing] = useStateMounted(true)
-    const idRef = useRef(0)
-    useEffect(() => {
-        if (!cmd) return
-        const buffer: T[] = []
-        const apply = _.debounce(() => {
-            const chunk = buffer.splice(0, Infinity)
-            if (chunk.length)
-                setList(list => [ ...list, ...chunk ])
-        }, 1000, { maxWait: 1000 })
-        setError(undefined)
-        setLoading(true)
-        setConnecting(true)
-        setInitializing(true)
-        setList([])
-        const src = apiEvents(cmd, params, (type, data) => {
-            switch (type) {
-                case 'connected':
-                    setConnecting(false)
-                    return setTimeout(() => apply.flush()) // this trick we'll cause first entries to be rendered almost immediately, while the rest will be subject to normal debouncing
-                case 'error':
-                    setError("Connection error")
-                    return stop()
-                case 'closed':
-                    return stop()
-                case 'msg':
-                    wantArray(data).forEach(data => {
-                        if (data === 'ready') {
-                            apply.flush()
-                            setInitializing(false)
-                            return
-                        }
-                        if (data.error)
-                            return setError(err2msg(data.error))
-                        if (data.add) {
-                            const rec = map(data.add)
-                            if (addId)
-                                rec.id = ++idRef.current
-                            buffer.push(rec)
-                            apply()
-                            return
-                        }
-                        if (data.remove) {
-                            const matchOnList: ReturnType<typeof _.matches>[] = []
-                            // first remove from the buffer
-                            for (const key of data.remove) {
-                                const match1 = _.matches(key)
-                                if (_.isEmpty(_.remove(buffer, match1)))
-                                    matchOnList.push(match1)
-                            }
-                            // then work the hooked state
-                            if (_.isEmpty(matchOnList))
-                                return
-                            setList(list => {
-                                const filtered = list.filter(rec => !matchOnList.some(match1 => match1(rec)))
-                                return filtered.length < list.length ? filtered : list // avoid unnecessary changes
-                            })
-                            return
-                        }
-                        if (data.update) {
-                            apply.flush() // avoid treating buffer
-                            setList(list => {
-                                const modified = [...list]
-                                for (const { search, change } of data.update) {
-                                    const idx = modified.findIndex(_.matches(search))
-                                    if (idx >= 0)
-                                        modified[idx] = { ...modified[idx], ...change }
-                                }
-                                return modified
-                            })
-                            return
-                        }
-                        console.debug('unknown api event', type, data)
-                    })
-                    if (src?.readyState === src?.CLOSED)
-                        stop()
-            }
-        })
-
-        return () => src.close()
-
-        function stop() {
-            setInitializing(false)
-            setLoading(false)
-            apply.flush()
-        }
-    }, [cmd, JSON.stringify(params)]) //eslint-disable-line
-    return { list, loading, error, initializing, connecting, setList, updateList }
-
-    function updateList(cb: (toModify: Draft<typeof list>) => void) {
-        setList(produce(list, x => {
-            cb(x)
-        }))
-    }
-}

package/admin/src/dialog.ts

@@ -1,203 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import {
-    Box,
-    Button,
-    CircularProgress,
-    Dialog as MuiDialog,
-    DialogContent,
-    DialogProps,
-    DialogTitle,
-    IconButton
-} from '@mui/material'
-import {
-    createElement as h, Fragment,
-    isValidElement,
-    ReactElement,
-    useEffect,
-    useRef,
-    useState
-} from 'react'
-import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
-import { newDialog, closeDialog, dialogsDefaults, DialogOptions } from '@hfs/shared'
-import { Form, FormProps } from '@hfs/mui-grid-form'
-import { useBreakpoint } from './misc'
-import { Flex } from '@hfs/frontend/src/components'
-export * from '@hfs/shared/lib/dialogs'
-
-dialogsDefaults.Container = function Container(d:DialogOptions) {
-    useEffect(()=>{
-        ref.current?.focus()
-    }, [])
-    const ref = useRef<HTMLElement>()
-    d = { ...dialogsDefaults, ...d }
-    const { sx, root, ...rest } = d.dialogProps||{}
-    const p = d.padding ? 2 : 0
-    return h(MuiDialog, {
-        open: true,
-        maxWidth: 'lg',
-        fullScreen: !useBreakpoint('sm'),
-        ...rest,
-        ...root,
-        onClose: ()=> closeDialog(),
-    },
-        d.title && h(DialogTitle, {}, d.title),
-        h(DialogContent, {
-            ref,
-            sx: { ...sx, px: p, pb: p, display: 'flex', flexDirection: 'column', }
-        }, h(d.Content) )
-    )
-}
-
-type AlertType = 'error' | 'warning' | 'info' | 'success'
-
-const type2ico = {
-    error: ErrorIcon,
-    warning: Warning,
-    info: Info,
-    success: Check,
-}
-export async function alertDialog(msg: ReactElement | string | Error, options?: AlertType | ({ type?:AlertType, icon?: ReactElement } & Partial<DialogOptions>)) {
-    return new Promise(resolve => {
-        const opt = typeof options === 'string' ? { type: options } : (options ?? {})
-        let { type='info', ...rest } = opt
-        if (msg instanceof Error) {
-            msg = msg.message || String(msg)
-            type = 'error'
-        }
-        const close = newDialog({
-            className: 'dialog-alert-' + type,
-            icon: '!',
-            onClose: resolve,
-            ...rest,
-            Content() {
-                return h(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
-                    h(IconButton, {
-                        onClick() {
-                            close()
-                        },
-                        size: 'small',
-                        sx: { position: 'absolute', right: 0, top: 0, opacity: .5 }
-                    }, h(Close)),
-                    opt.icon ?? h(type2ico[type], { color: type, fontSize: 'large' }),
-                    isValidElement(msg) ? msg
-                        : h(Box, { fontSize: 'large', mb: 1, lineHeight: '1.8em' }, String(msg)),
-                )
-            }
-        })
-    })
-}
-
-interface ConfirmOptions { href?: string }
-export async function confirmDialog(msg: string | ReactElement, { href }: ConfirmOptions={}) : Promise<boolean> {
-    return new Promise(resolve => newDialog({
-        className: 'dialog-confirm',
-        icon: '?',
-        onClose: resolve,
-        Content
-    }) )
-
-    function Content() {
-        return h(Fragment, {},
-            h(Box, { mb: 2 }, msg),
-            h(Flex, {},
-                h('a', {
-                    href,
-                    onClick: () => closeDialog(true),
-                }, h(Button, { variant: 'contained' }, "Confirm")),
-                h(Button, { onClick: () => closeDialog(false) }, "Don't"),
-            ),
-        )
-    }
-}
-
-type FormDialog<T> = Pick<DialogProps, 'fullScreen' | 'title'>
-    & Pick<DialogOptions, 'dialogProps'>
-    & Omit<FormProps<T>, 'values' | 'save' | 'set'>
-    & Partial<Pick<FormProps<T>, 'values' | 'save'>>
-    & {
-    onChange?: (values:Partial<T>, extra: { setValues: React.Dispatch<React.SetStateAction<Partial<T>>> }) => void,
-    before?: any
-}
-export async function formDialog<T>({ fullScreen, title, onChange, before, ...props }: FormDialog<T>) : Promise<T> {
-    return new Promise(resolve => newDialog({
-        className: 'dialog-confirm',
-        icon: '?',
-        onClose: resolve,
-        title,
-        Content
-    }) )
-
-    function Content() {
-        const [values, setValues] = useState<Partial<T>>(props.values||{})
-        return h(Fragment, {},
-            before,
-            h(Form, {
-                ...props,
-                values,
-                set(v, k) {
-                    const newV = { ...values, [k]: v }
-                    setValues(newV)
-                    onChange?.(newV, { setValues })
-                },
-                save: {
-                    ...props.save,
-                    onClick() {
-                        closeDialog(values)
-                    }
-                }
-            })
-        )
-    }
-}
-
-export async function promptDialog(msg: string, props:any={}) : Promise<string | undefined> {
-    return formDialog<{ text: string }>({
-        ...props,
-        fields: [
-            { k: 'text', label: null, autoFocus: true,
-                before: h(Box, { mb: 2 }, msg),
-                ...props.field
-            },
-        ],
-        save: {
-            children: "Continue",
-            startIcon: h(Forward),
-            ...props.save,
-        },
-        saveOnEnter: true,
-        barSx: { gap: 2 },
-        addToBar: [
-            h(Button, { onClick: closeDialog }, "Cancel"),
-            ...props.addToBar||[],
-        ]
-    }).then(values => values?.text)
-}
-
-export function waitDialog() {
-    return newDialog({ Content: CircularProgress, closable: false })
-}
-
-export function toast(msg: string | ReactElement, type: AlertType | ReactElement='info') {
-    const ms = 3000
-    const close = newDialog({
-        Content,
-        dialogProps: {
-            PaperProps: {
-                sx: { transition: `opacity ${ms}ms ease-in` },
-                ref(x: HTMLElement) { // we need to set opacity later, to trigger transition
-                    if (x)
-                        x.style.opacity = '0'
-                }
-            }
-        }
-    })
-    setTimeout(close, ms)
-
-    function Content(){
-        return h(Box, { display:'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
-            isValidElement(type) ? type : h(type2ico[type], { color:type }),
-            isValidElement(msg) ? msg : h('div', {}, String(msg))
-        )
-    }
-}

package/admin/src/index.css

@@ -1,21 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  height: 100vh;
-}
-#root { min-height: 100%; display:flex; }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-.MuiTreeItem-content {
-  box-sizing: border-box; /* avoid unwanted scrolling caused by its width:100% + padding */
-}
-
-ol, ul { margin-top: .2em }

package/admin/src/index.ts

@@ -1,10 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import '@hfs/shared/src/min-crypto-polyfill'
-import App from './App'
-
-createRoot(document.getElementById('root')!)
-  .render( h(StrictMode, {}, h(App)) )

package/admin/src/md.ts

@@ -1,31 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, Fragment } from 'react'
-
-// markdown inspired syntax to transform text into react elements: * for bold, / for italic, _ for underline, ` for code
-export default function md(text: string | TemplateStringsArray) {
-    if (typeof text !== 'string')
-        text = text[0]
-    const re = /([`*/_])(.+)\1|(\n)/g
-    const res = []
-    let last = 0
-    let match
-    while (match = re.exec(text)) { //eslint-disable-line no-cond-assign
-        res.push( text.slice(last, match.index) )
-        if (match[3])
-            res.push(h('br'))
-        else {
-            const tag = ({
-                '`': 'code',
-                '*': 'b',
-                '/': 'i',
-                '_': 'u',
-            })[ match[1] ]
-            if (!tag)
-                throw Error("should never happen")
-            res.push( h(tag,{}, match[2]) )
-        }
-        last = match.index + match[0].length
-    }
-    return h(Fragment, {}, ...res, text.slice(last, Infinity))
-}