@owlmeans/web-panel 0.1.0

package/src/auth/plugins/tunnel-consumer.tsx

@@ -0,0 +1,65 @@
+import LinearProgress from '@mui/material/LinearProgress'
+import { AuthenticationStage } from '@owlmeans/auth'
+import type { RelyToken } from '@owlmeans/auth'
+import type { TunnelAuthenticationRenderer } from '@owlmeans/client-auth/manager/plugins'
+import { PinSchema } from '@owlmeans/client-auth/manager/plugins'
+import { Form } from '../../components/form/component.js'
+import { TextInput } from '../../components/form/text/component.js'
+// import { Text } from '../../components/text.js'
+import { useMemo } from 'react'
+import { EnvelopeKind, makeEnvelopeModel } from '@owlmeans/basic-envelope'
+import { Block } from '../../components/block.js'
+import { BlockScaling } from '@owlmeans/client-panel'
+import { Status } from '../../components/status.js'
+import type { SxProps } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
+import { Button } from '../../components/form/button/component.js'
+import { QRCodeCanvas } from 'qrcode.react'
+import Box from '@mui/material/Box'
+
+export const TunnelConsumerUIPlugin: TunnelAuthenticationRenderer = ({ type, stage, control, params, submit }) => {
+  const rely = useMemo(() => {
+    if (control.allowance == null) {
+      return null
+    }
+    return makeEnvelopeModel<RelyToken>(
+      makeEnvelopeModel<string>(control.allowance.challenge, EnvelopeKind.Wrap).message(true)
+      , EnvelopeKind.Wrap
+    ).message()
+  }, [stage])
+
+  const theme = useTheme()
+  const prefix = "prefix" in params ? params.prefix as string : ""
+  const i18n = { ns: "lib", resource: 'client-panel-auth' }
+
+  const loadingStyle: SxProps = {
+    width: { xs: '100%', sm: '100%', md: '50%' }
+  }
+
+  switch (stage) {
+    case AuthenticationStage.Authenticate:
+      return <Form decorate name={type} validation={PinSchema} onSubmit={submit} i18n={i18n}>
+        <Box width="fit-content" margin="auto">
+          {rely?.token != null && <QRCodeCanvas size={256}
+            value={`${prefix}${rely?.token ?? ""}`}
+            fgColor={theme.palette.primary.dark}
+            bgColor={theme.palette.background.paper}
+          />}
+        </Box>
+        {/* <Text>{rely?.token}</Text> */}
+        <TextInput name="pin" label hint />
+      </Form>
+    case AuthenticationStage.Error:
+      return <Block horizontal={BlockScaling.Half} i18n={i18n} Actions={() =>
+        // @TODO document reload looks a bit dirty - cause we can loose the flow
+        <Button label="reset" onClick={async () => { document.location.reload() }} />
+        // <Button label="reset" onClick={async () => { 
+        //   await control.updateStage(AuthenticationStage.Authenticate)
+        //  }} />
+      }>
+        <Status error={control.error} ok={false} />
+      </Block>
+  }
+
+  return <LinearProgress sx={loadingStyle} />
+}

package/src/auth/types.ts

@@ -0,0 +1,11 @@
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from '@owlmeans/client'
+import type { WithFlowConfig } from '@owlmeans/flow'
+import type { FlowService } from '@owlmeans/web-flow'
+
+export interface AppConfig extends ClientConfig, WithFlowConfig {
+}
+
+export interface AppContext<C extends AppConfig = AppConfig> extends ClientContext<C> {
+  flow: () => FlowService
+}

package/src/components/block.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { FC } from 'react'
+import type { BlockProps } from './types.js'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import { PanelContext, usePanelHelper } from '@owlmeans/client-panel'
+import type { SxProps } from '@mui/material/styles'
+import useTheme from '@mui/material/styles/useTheme.js'
+import CardActions from '@mui/material/CardActions'
+import { scalingToStyles } from './helper.js'
+
+export const Block: FC<BlockProps> = ({ children, horizontal, vertical, Actions, i18n, styles }) => {
+  const theme = useTheme()
+
+  const style: SxProps = useMemo(() => scalingToStyles(horizontal, vertical, theme), [horizontal])
+
+  const panelProps = { ...usePanelHelper(), ...i18n }
+
+  return <PanelContext {...panelProps}>
+    <Card sx={{ ...style, ...styles } as SxProps}>
+      <CardContent>{children}</CardContent>
+      {Actions != null && <CardActions sx={{ flexDirection: "row", justifyContent: "flex-end", pr: 2, pb: 2 }}>
+        <Actions />
+      </CardActions>}
+    </Card>
+  </PanelContext>
+}

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+
+export * from './selector.js'
+export type * from './types.js'

package/src/components/button/selector.tsx

@@ -0,0 +1,16 @@
+
+import ButtonGroup from '@mui/material/ButtonGroup'
+import type { FC } from 'react'
+import type { SelectorProps } from './types.js'
+import { Button } from '../form/button/component.js'
+
+export const ButtonSelector: FC<SelectorProps> = ({ name, options, current, onSelect }) => {
+  const prefix = name != null ? `${name}.` : ''
+  return <ButtonGroup>
+    {options.map(
+      option => <Button key={option} label={`${prefix}${option}`}
+        onClick={() => onSelect?.(option)}
+        variant={current === option ? 'contained' : 'outlined'} />
+    )}
+  </ButtonGroup>
+}

package/src/components/button/types.ts

@@ -0,0 +1,7 @@
+
+export interface SelectorProps<T = any> {
+  name?: string
+  current: T
+  options: T[]
+  onSelect?: (value: T) => void
+}

package/src/components/form/button/component.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react'
+import type { FC } from 'react'
+import { memo } from 'react'
+import type { ButtonProps, SubmitProps } from './types'
+
+import MUIButton from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+
+import { useFormContext } from 'react-hook-form'
+import { I18nProps, useCommonI18n, useI18nApp, useI18nLib } from '@owlmeans/client-i18n'
+import { useContext } from '@owlmeans/client'
+import { useFormI18n, usePanelHelper } from '@owlmeans/client-panel'
+
+export const Button: FC<ButtonProps> = memo(({ label, onClick, i18n, loader, size, fullWidth, variant = 'contained' }) => {
+  const context = useContext()
+  const panel = usePanelHelper()
+  const t = useCommonI18n(
+    i18n?.resource ?? panel.resource ?? context.cfg.service,
+    i18n?.ns ?? panel.ns,
+    i18n?.prefix ?? panel.prefix
+  )
+  const appT = useI18nApp(context.cfg.service, 'buttons')
+  const libT = useI18nLib('client-panel', 'buttons')
+  label = useMemo(() => i18n?.suppress ? label : t(label, {
+    defaultValue: appT(label, { defaultValue: libT(label) })
+  }), [i18n?.suppress, label])
+
+  size = size ?? 'medium'
+  const progressSize = size === 'large'
+    ? 20
+    : size === 'medium' ? 16 : 14
+
+  return <MUIButton variant={variant as any} size={size} fullWidth={fullWidth}
+    startIcon={loader != null && loader.opened === true ? <CircularProgress size={progressSize} /> : undefined}
+    disabled={loader != null && loader.opened === true}
+    onClick={onClick}>{label}</MUIButton>
+})
+
+export const SubmitButton: FC<SubmitProps> = memo((props) => {
+  let { i18n, label } = props
+  const { handleSubmit } = useFormContext()
+  const t = useFormI18n()
+
+  label = label ?? 'submit'
+  const _i18n: I18nProps["i18n"] = { ...i18n }
+  _i18n.suppress = true
+
+  return <Button {...props} label={t(label)} i18n={_i18n}
+    onClick={handleSubmit(
+      props.onSubmit ?? props.onClick ?? (() => { console.info('Empty submit') }),
+      problem => console.error('Failed to submit form with error: ', problem)
+    )} />
+})

package/src/components/form/button/index.ts

@@ -0,0 +1,3 @@
+
+export * from './component.js'
+export * from './types.js'

package/src/components/form/button/types.ts

@@ -0,0 +1,16 @@
+import type { Toggleable } from '@owlmeans/client'
+import type { I18nProps } from '@owlmeans/client-i18n'
+
+export interface ButtonProps extends I18nProps {
+  size?: 'small' | 'medium' | 'large'
+  fullWidth?: boolean
+  variant?: string
+  label: string
+  loader?: Toggleable
+  onClick?: () => void
+}
+
+export interface SubmitProps extends Omit<ButtonProps, "label"> {
+  label?: string
+  onSubmit?: (data: any) => Promise<void> | void
+}

package/src/components/form/component.tsx

@@ -0,0 +1,101 @@
+import type { FC } from 'react'
+import { useCallback, useMemo } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { ajvResolver } from '@hookform/resolvers/ajv'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardActions from '@mui/material/CardActions'
+import { FormContext, schemaToFormDefault } from '@owlmeans/client-panel'
+import type { JSONSchemaType } from 'ajv'
+import Ajv from 'ajv'
+import formatsPlugin from 'ajv-formats'
+import type { SxProps } from '@mui/material'
+import { SubmitButton } from './button/component.js'
+import { useToggle } from '@owlmeans/client'
+import { scalingToStyles } from '../helper.js'
+import { ResilientError } from '@owlmeans/error'
+import { Status } from '../status.js'
+import useTheme from '@mui/material/styles/useTheme.js'
+import type { WebFormProps } from './types.js'
+
+const ajv = new Ajv({ coerceTypes: true })
+formatsPlugin(ajv)
+
+export const Form: FC<WebFormProps> = (props) => {
+  const {
+    defaults, children, formRef, validation, name, horizontal, vertical,
+    decorate, onSubmit, i18n, styles
+  } = props
+  const theme = useTheme()
+  const _defaults = useMemo(
+    () => defaults ?? (validation != null ? schemaToFormDefault(validation) : undefined),
+    [name, defaults != null, validation != null]
+  )
+
+  const loader = useToggle(false)
+
+  const form = useForm({
+    mode: 'all',
+    defaultValues: _defaults,
+    resolver: validation
+      ? ajvResolver(validation as JSONSchemaType<unknown>, { formats: ajv.formats, coerceTypes: true })
+      : undefined,
+    delayError: 300
+  })
+
+  const update = useCallback(((data: Record<string, any>) => {
+    const fields = validation != null
+      ? Object.keys((validation as JSONSchemaType<any>).properties)
+      : Object.keys(data)
+    fields.forEach(key => {
+      form.setValue(key, data[key])
+    })
+  }) as <T>(data: T) => void, [name])
+
+  const setError = useCallback((error: unknown, target: string = 'root') => {
+    form.setError(target, {
+      message: ResilientError.ensure(
+        error instanceof Error ? error : `${error}`
+      ).marshal().message
+    })
+  }, [name])
+
+
+  if (formRef != null) {
+    formRef.current = { form, update, loader, error: setError }
+  }
+
+  const style: SxProps = useMemo(() => scalingToStyles(horizontal, vertical, theme), [horizontal])
+
+  const content = () =>
+    <Grid container direction="column" justifyContent="flex-start" alignItems="stretch"
+      rowSpacing={2} sx={!decorate ? style : {}}>{
+        Array.isArray(children)
+          ? children.map((child, index) =>
+            <Grid item key={index}>{child}</Grid>
+          ) : children
+      }</Grid>
+
+  if (decorate === true) {
+    const root = form.getFieldState('root')
+    return <FormProvider {...form}>
+      <FormContext {...props} loader={loader}>
+        <Card sx={{ ...style, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', ...styles } as SxProps}>
+          <CardContent>
+            {content()}
+            {root.invalid && root.error?.message &&
+              <Status ok={false} i18n={i18n} error={ResilientError.ensure(root.error.message)} />}
+          </CardContent>
+          {onSubmit != null ? <CardActions sx={{ flexDirection: 'row', justifyContent: 'flex-end', pr: 2, pb: 2 }}>
+            <SubmitButton loader={loader} onSubmit={async data => onSubmit(data, update)} />
+          </CardActions> : undefined}
+        </Card>
+      </FormContext>
+    </FormProvider>
+  }
+
+  return <FormProvider {...form}>
+    <FormContext {...props} loader={loader}>{content()}</FormContext>
+  </FormProvider>
+}

package/src/components/form/index.ts

@@ -0,0 +1,3 @@
+
+export * from './component.js'
+export type * from './types.js'

package/src/components/form/text/component.tsx

@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+import { useFormContext, Controller } from 'react-hook-form'
+import { TextInputProps } from './types.js'
+
+import TextField from '@mui/material/TextField'
+import { useFormError, useFormI18n } from '@owlmeans/client-panel'
+import { useClientFormContext } from '@owlmeans/client-panel'
+
+export const TextInput: FC<TextInputProps> = ({ name, label, placeholder, hint, type, def, disableAutocomplete }) => {
+  const { control } = useFormContext()
+  const t = useFormI18n()
+  const key = name
+  if (typeof label === 'boolean' && label) {
+    label = t(`${key}.label`)
+  } else {
+    label = undefined
+  }
+  if (typeof placeholder === 'boolean' && placeholder) {
+    placeholder = t(`${key}.placeholder`)
+  } else {
+    placeholder = undefined
+  }
+  if (typeof hint === 'boolean' && hint) {
+    hint = t(`${key}.hint`)
+  } else {
+    hint = undefined
+  }
+
+  return <Controller control={control} name={name} defaultValue={def} render={
+    ({ field, fieldState }) => {
+      const error = useFormError(name, fieldState.error)
+      const { loader } = useClientFormContext()
+
+      return <TextField fullWidth {...field}
+        error={fieldState.error != null}
+        disabled={loader != null && loader.opened === true}
+        label={label}
+        type={type ?? 'text'}
+        placeholder={placeholder}
+        autoComplete={disableAutocomplete ? 'off' : 'on'}
+        helperText={error ?? hint}
+      />
+    }
+  } />
+}

package/src/components/form/text/index.ts

@@ -0,0 +1,3 @@
+
+export * from './component.js'
+export * from './types.js'

package/src/components/form/text/types.ts

@@ -0,0 +1,11 @@
+import type { FormFieldProps } from '@owlmeans/client-panel'
+import type { HTMLInputTypeAttribute } from 'react'
+
+export interface TextInputProps extends FormFieldProps {
+  name: string
+  label?: string | boolean
+  placeholder?: string | boolean
+  hint?: string | boolean
+  type?: HTMLInputTypeAttribute
+  disableAutocomplete?: boolean
+}

package/src/components/form/types.ts

@@ -0,0 +1,6 @@
+import type { SxProps } from '@mui/material/styles'
+import type { FormProps  } from '@owlmeans/client-panel'
+
+export interface WebFormProps extends FormProps {
+  styles?: SxProps
+}

package/src/components/helper.ts

@@ -0,0 +1,79 @@
+import type { SxProps, Theme } from '@mui/material/styles'
+import useTheme from '@mui/material/styles/useTheme'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { BlockScaling } from '@owlmeans/client-panel'
+
+export const scalingToStyles = (
+  horizontal?: BlockScaling,
+  vertical?: BlockScaling,
+  theme?: Theme
+): SxProps => {
+  const style: SxProps = {}
+  switch (horizontal) {
+    case BlockScaling.Half:
+      Object.assign(style, {
+        maxWidth: '50%',
+        [theme?.breakpoints.down('md') ?? 'xs']: {
+          maxWidth: '90%'
+        },
+        flexGrow: 1
+      })
+      break
+    case BlockScaling.Wide:
+      Object.assign(style, { mx: '10%', flexGrow: 1 })
+      break
+    case BlockScaling.Full:
+      Object.assign(style, { flexGrow: 1 })
+      break
+  }
+
+  switch (vertical) {
+    case BlockScaling.Half:
+      Object.assign(style, {
+        maxHeight: '50%',
+        [theme?.breakpoints.down('md') ?? 'xs']: {
+          maxHeight: '90%'
+        },
+        flexGrow: 1
+      })
+      break
+    case BlockScaling.Wide:
+      Object.assign(style, { my: '10%', flexGrow: 1 })
+      break
+    case BlockScaling.Full:
+      Object.assign(style, { height: '100%', flexGrow: 1 })
+      break
+  }
+
+  return style
+}
+
+export const useBreakPoint = () => {
+  const theme = useTheme()
+
+  // Define breakpoints
+  const isXs = useMediaQuery(theme.breakpoints.only('xs'))
+  const isSm = useMediaQuery(theme.breakpoints.only('sm'))
+  const isMd = useMediaQuery(theme.breakpoints.only('md'))
+  const isLg = useMediaQuery(theme.breakpoints.only('lg'))
+  const isXl = useMediaQuery(theme.breakpoints.only('xl'))
+
+  let currentBreakpoint = isXs ? 'xs' : 'unknown' // Default value
+  if (isSm) currentBreakpoint = 'sm'
+  if (isMd) currentBreakpoint = 'md'
+  if (isLg) currentBreakpoint = 'lg'
+  if (isXl) currentBreakpoint = 'xl'
+
+  return currentBreakpoint
+}
+
+export const useMapBreakpoint = <T>(map: Record<string, T>, def?: T, breakpoint?: string): T => {
+  const _breakpoint = useBreakPoint()
+  breakpoint = breakpoint ?? _breakpoint
+  const result = map[breakpoint] ?? def
+  if (result == null) {
+    throw new SyntaxError(`Breakpoint should always return value. We have ${breakpoint}, but ${Object.keys(map).join(', ')} are available`)
+  }
+
+  return result
+}

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export type * from './types.js'
+
+export * from './panel-app/index.js'
+export * from './layout/index.js'
+
+export * from './form/index.js'
+export * from './form/text/index.js'
+export * from './form/button/index.js'
+export * from './uploader/index.js'
+
+export * from './button/index.js'
+
+export * from './block.js'
+export * from './text.js'
+export * from './link.js'
+export * from './helper.js'
+export * from './status.js'

package/src/components/layout/component.tsx

@@ -0,0 +1,7 @@
+import type { FC } from 'react'
+import type { LayoutProps } from './types.js'
+import Box from '@mui/material/Box'
+
+export const Layout: FC<LayoutProps> = ({ children }) => {
+  return <Box>{children}</Box>
+}

package/src/components/layout/index.ts

@@ -0,0 +1,3 @@
+
+export * from './types.js'
+export * from './component.js'

package/src/components/layout/types.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react'
+
+export interface LayoutProps extends PropsWithChildren {
+}

package/src/components/link.tsx

@@ -0,0 +1,34 @@
+import { usePanelI18n } from '@owlmeans/client-panel'
+import type { FC } from 'react'
+import type { LinkProps } from './types.js'
+import MUILink from '@mui/material/Link'
+import type { Variant } from '@mui/material/styles/createTypography.js'
+import { useValue } from '@owlmeans/client'
+import { useContext } from '@owlmeans/web-client'
+import type { ClientModule } from '@owlmeans/client-module'
+
+export const Link: FC<LinkProps> = ({ src, module, name, variant, children, center, open, styles }) => {
+  const t = usePanelI18n()
+  const context = useContext()
+
+  const href = useValue(async () => {
+    if (src != null) {
+      return src
+    }
+    if (module != null) {
+      module = typeof module === 'string' ? context.module<ClientModule<string>>(module) : module
+      const [url] = await module.call<string>()
+
+      return url
+    }
+    return null
+  }, [src, module])
+
+  const label = name != null
+    ? t(name)
+    : children != null || module == null
+      ? undefined : t(`modules.${typeof module == 'string' ? module : module.alias}`)
+  const target = open ? '_blank' : undefined
+  return <MUILink href={href ?? undefined} target={target} variant={variant as Variant}
+    sx={{ textAlign: center ? 'center' : 'inherit', ...styles }}>{label ?? children}</MUILink>
+}

package/src/components/panel-app/component.tsx

@@ -0,0 +1,21 @@
+import type { FC } from 'react'
+import { useMemo } from 'react'
+import type { PanelAppProps } from './types.js'
+
+import { App } from '@owlmeans/client'
+import { I18nContext } from '@owlmeans/client-i18n'
+import CssBaseline from '@mui/material/CssBaseline'
+import ThemeProvider from '@mui/material/styles/ThemeProvider.js'
+import createTheme from '@mui/material/styles/createTheme.js'
+
+export const PanelApp: FC<PanelAppProps> = ({ context, provide, children, theme }) => {
+  theme = useMemo(() => theme ?? createTheme(), [theme])
+  return <ThemeProvider theme={theme}>
+    <I18nContext config={context.cfg}>
+      <App context={context} provide={provide}>
+        <CssBaseline />
+        {children}
+      </App >
+    </I18nContext>
+  </ThemeProvider>
+}

package/src/components/panel-app/index.ts

@@ -0,0 +1,3 @@
+
+export * from './types.js'
+export * from './component.js'

package/src/components/panel-app/types.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '@mui/material/styles'
+import type { AppProps } from '@owlmeans/client'
+
+export interface PanelAppProps extends AppProps {
+    theme?: Theme
+}

package/src/components/status.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react'
+import { useMemo } from 'react'
+import type { StatusProps } from './types.js'
+import { usePanelI18n } from '@owlmeans/client-panel'
+import { ResilientError } from '@owlmeans/error'
+import Alert from '@mui/material/Alert'
+
+const prepareMessage = (msg: string) => msg.replace(/\:/g, '.')
+
+export const Status: FC<StatusProps> = ({ ok, name, i18n, children, variant, message, error }) => {
+  variant = useMemo(() => variant ?? (ok ? 'success' : 'error'), [ok, variant])
+  const t = usePanelI18n(name ?? variant, i18n)
+  message = useMemo(() => {
+    const resilient = error != null ? ResilientError.ensure(error) : null
+    return message != null ? t(message) : resilient != null ? t(
+        [
+          `${resilient.type}.${prepareMessage(resilient.message)}`,
+          prepareMessage(resilient.message)
+        ],
+      ) : t(variant)
+  }, [message, error?.name, ok, variant])
+  return <Alert severity={variant as any}>{children ?? message}</Alert>
+}

package/src/components/text.tsx

@@ -0,0 +1,14 @@
+
+import { usePanelI18n } from '@owlmeans/client-panel'
+import type { FC } from 'react'
+import type { TextProps } from './types.js'
+import Typography from '@mui/material/Typography'
+import type { Variant } from '@mui/material/styles/createTypography.js'
+
+export const Text: FC<TextProps> = ({ variant, name, children, center, styles, nested, i18n }) => {
+  const t = usePanelI18n(undefined, i18n)
+
+  const label = name != null ? t(name) : undefined
+  return <Typography component={nested ? 'span' : 'p'} variant={variant as Variant}
+    sx={{ textAlign: center ? 'center' : 'inherit', ...styles }}>{label ?? children}</Typography>
+}

package/src/components/types.ts

@@ -0,0 +1,35 @@
+import type { SxProps } from '@mui/material/styles'
+import type { I18nProps } from '@owlmeans/client-i18n'
+import type { BlockScaling } from '@owlmeans/client-panel'
+import type { FC, PropsWithChildren } from 'react'
+import type { Variant } from '@mui/material/styles/createTypography'
+import type { ClientModule } from '@owlmeans/client-module'
+
+export interface BlockProps extends PropsWithChildren<I18nProps> {
+  horizontal?: BlockScaling
+  vertical?: BlockScaling
+  Actions?: FC
+  styles?: SxProps
+}
+
+export interface TextProps extends PropsWithChildren<I18nProps> {
+  name?: string
+  variant?: Variant
+  center?: boolean
+  styles?: SxProps
+  nested?: boolean
+}
+
+export interface LinkProps extends TextProps {
+  src?: string
+  module?: string | ClientModule
+  open?: boolean
+}
+
+export interface StatusProps extends PropsWithChildren<I18nProps> {
+  name?: string
+  ok?: boolean
+  variant?: string
+  error?: Error
+  message?: string
+}