@owlmeans/client-panel 0.1.0

package/src/auth/i18n/en.json

@@ -0,0 +1,56 @@
+{
+  "basic-ed25519": {
+    "entityId": {
+      "label": "Organization id"
+    },
+    "address": {
+      "label": "User DID"
+    },
+    "privateKey": {
+      "label": "Private key"
+    },
+    "submit": "Authenticate"
+  },
+  "re-captcha": {
+    "guideline": "We need to make sure that you are not a robot. Please click in the white box below to prove that you are a human."
+  },
+  "wallet-provider": {
+    "pin": {
+      "loading": "Loading...",
+      "guideline": "Use this pin-code on any resource supporting wallet-base authorization"
+    }
+  },
+  "wallet-consumer": {
+    "pin": {
+      "label": "Pin-code",
+      "hint": "Scan the QR code or genereta a pin-code with your OwlMeans ID app"
+    },
+    "submit": "Proceed with pin"
+  },
+  "oidp-auth": {
+    "reset": "Reset",
+    "error": {
+      "socket": {
+        "timeout": {
+          "rely": "Authentication window expired. Please refresh to try again."
+        }
+      }
+    }
+  },
+  "oidp-create-id": {
+    "error": {
+      "socket": {
+        "timeout": {
+          "call": "Action timeout! For security reason we set a time limit on authentication actions. Please try again.",
+          "rely": "Authentication code expired. Please try again."
+        }
+      },
+      "auth": {
+        "authorization": {
+          "sequence": "Auhtentcation process was interupted by the authentication app you use."
+        }
+      }
+    },
+    "reset": "Reload"
+  }
+}

package/src/auth/i18n.ts

@@ -0,0 +1,5 @@
+import { addI18nLib } from '@owlmeans/i18n'
+
+import en from './i18n/en.json'
+
+addI18nLib('en', 'client-panel-auth', en)

package/src/auth/index.ts

@@ -0,0 +1,2 @@
+
+export * from './i18n.js'

package/src/auth/plugins/consts.ts

@@ -0,0 +1,15 @@
+import { JSONSchemaType } from 'ajv'
+import { Ed22519BasicAuthUIPluginForm } from './types.js'
+
+// @TODO Move to some abstract layer cause this validation is the same for both client
+// and server
+export const Ed22519BasicAuthUIPluginFormSchema: JSONSchemaType<Ed22519BasicAuthUIPluginForm> = {
+  type: 'object',
+  properties: {
+    entityId: { type: 'string', minLength: 1, maxLength: 255, default: '' },
+    address: { type: 'string', minLength: 1, maxLength: 255, default: '' },
+    privateKey: { type: 'string', minLength: 1, maxLength: 512, default: '' }
+  },
+  required: ['entityId', 'address', 'privateKey'],
+  additionalProperties: false,
+}

package/src/auth/plugins/exports.ts

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

package/src/auth/plugins/types.ts

@@ -0,0 +1,6 @@
+
+export interface Ed22519BasicAuthUIPluginForm {
+  entityId: string
+  address: string
+  privateKey: string
+}

package/src/components/consts.ts

@@ -0,0 +1,6 @@
+
+export enum BlockScaling {
+  Full = 'full',
+  Half = 'half',
+  Wide = 'wide',
+}

package/src/components/context.tsx

@@ -0,0 +1,44 @@
+import type { FC } from 'react'
+import { createContext, useContext as useReactContext } from 'react'
+import type { TPanelContext } from './types.js'
+import { I18nProps, useCommonI18n, useI18nLib } from '@owlmeans/client-i18n'
+import { useContext } from '@owlmeans/client'
+import { ResilientError } from '@owlmeans/error'
+
+const PanelContext_ = createContext<TPanelContext>({})
+
+export const PanelContext: FC<TPanelContext> = ({ children, ...props }) => {
+  const parent = usePanelHelper()
+  props = { ...parent, ...props }
+  
+  return <PanelContext_.Provider value={props}>{children}</PanelContext_.Provider>
+}
+
+export const usePanelHelper = () => useReactContext<TPanelContext>(PanelContext_)
+
+export const usePanelI18n = (name?: string, override?: I18nProps["i18n"]) => {
+  const context = useContext()
+  const i18n = { ...usePanelHelper(), ...override }
+  const prefix = (i18n?.prefix ?? '') + (name != null && i18n?.prefix != null ? '.' : '') + (name ?? '')
+
+  return useCommonI18n(
+    i18n?.resource ?? context.cfg.service,
+    i18n?.ns ?? context.cfg.service ?? i18n?.resource,
+    prefix
+  )
+}
+
+export const usePanelError = (name: string, error?: ResilientError) => {
+  const t = usePanelI18n()
+  const key = name
+
+  const libT = useI18nLib('errors')
+
+  return error != null ?
+    error.type != null
+      ? t([`${key}.errors.${error.type}`, `errors.${error.type}`], {
+        defaultValue: libT(error.type ?? 'form-field')
+      }) : t(`${key}.error`, {
+        defaultValue: libT('form-field')
+      }) : undefined
+}

package/src/components/form/context.tsx

@@ -0,0 +1,39 @@
+import type { FC, PropsWithChildren } from 'react'
+import { createContext, useContext as useReactContext } from 'react'
+import { useCommonI18n, useI18nLib } from '@owlmeans/client-i18n'
+import type { FieldError } from 'react-hook-form'
+import { useContext } from '@owlmeans/client'
+import type { TFormContext } from './types.js'
+
+const FormContext_ = createContext<TFormContext>({} as unknown as TFormContext)
+
+export const FormContext: FC<PropsWithChildren<TFormContext>> = ({ children, ...props }) =>
+  <FormContext_.Provider value={props}>{children}</FormContext_.Provider>
+
+export const useClientFormContext = () => useReactContext<TFormContext>(FormContext_)
+
+export const useFormI18n = () => {
+  const context = useContext()
+  const { i18n, name } = useClientFormContext()
+  const prefix = (i18n?.prefix != null ? i18n.prefix + '.' : '') + (name ?? '')
+  return useCommonI18n(
+    i18n?.resource ?? context.cfg.service,
+    i18n?.ns ?? i18n?.resource ?? context.cfg.service,
+    prefix
+  )
+}
+
+export const useFormError = (name: string, error?: FieldError) => {
+  const t = useFormI18n()
+  const key = name
+
+  const libT = useI18nLib('errors')
+
+  return error != null ?
+    error.type != null
+      ? t([`${key}.errors.${error.type}`, `errors.${error.type}`], {
+        defaultValue: libT(error.type ?? 'form-field')
+      }) : t(`${key}.error`, {
+        defaultValue: libT('form-field')
+      }) : undefined
+}

package/src/components/form/helper.ts

@@ -0,0 +1,7 @@
+import { useRef } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import type { FormRef } from './types.js'
+
+export const useFormRef = <T extends FieldValues = FieldValues>() => {
+  return useRef<FormRef<T> | null>(null)
+}

package/src/components/form/index.ts

@@ -0,0 +1,4 @@
+
+export * from './types.js'
+export * from './helper.js'
+export * from './context.js'

package/src/components/form/types.ts

@@ -0,0 +1,37 @@
+import type { AnySchema } from 'ajv'
+import type { PropsWithChildren, MutableRefObject } from 'react'
+import type { UseFormReturn, FieldValues } from 'react-hook-form'
+import type { I18nProps } from '@owlmeans/client-i18n'
+import type { Toggleable } from '@owlmeans/client'
+import type { BlockScaling } from '../consts.js'
+
+export interface FormProps extends PropsWithChildren<I18nProps> {
+  name?: string
+  formRef?: MutableRefObject<FormRef<any> | null>
+  defaults?: Record<string, any>
+  validation?: AnySchema
+  decorate?: boolean
+  horizontal?: BlockScaling
+  vertical?: BlockScaling
+  onSubmit?: FormOnSubmit<any>
+}
+
+export interface FormRef<T extends FieldValues = FieldValues> {
+  form: UseFormReturn<T>
+  update: (data: T) => void
+  loader: Toggleable
+  error: (error: unknown, target?: string) => void
+}
+
+export interface FormOnSubmit<T> {
+  (data: T, update?: (data: T) => void): Promise<void> | void
+}
+
+export interface TFormContext extends Omit<FormProps, 'defaults' | 'children'> {
+  loader: Toggleable
+}
+
+export interface FormFieldProps {
+  name: string
+  def?: any
+}

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export type * from './types.js'
+
+export * from './form/index.js'
+export * from './layout/index.js'
+export * from './context.js'
+export * from './consts.js'

package/src/components/layout/helper.ts

@@ -0,0 +1,26 @@
+import type { ClientRoute } from '@owlmeans/client-route'
+import type { Location } from 'react-router'
+import type { ClientModule } from '@owlmeans/client-module'
+import type { AbstractRequest } from '@owlmeans/module'
+
+import { useLocation } from 'react-router'
+import { useContext } from '@owlmeans/client'
+import { usePanelI18n } from '../context.js'
+import { useMemo } from 'react'
+
+export const usePanelLayout = <T = {}, R extends AbstractRequest = AbstractRequest>(): ClientModule<T, R> => {
+  const context = useContext()
+  const location: Location<ClientRoute> = useLocation()
+
+  return context.module(location.state.alias)
+}
+
+export const useLayoutTitle = (name?: string, alias?: string): string => {
+  const layout = usePanelLayout()
+  const t = usePanelI18n(name)
+  alias = alias ?? layout.alias
+
+  return useMemo(() => t(`${prepareLayoutTitle(alias)}`), [alias, name])
+}
+
+export const prepareLayoutTitle = (title: string) => `${title.replace(/\W+/g, '.')}.title`

package/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+
+export * from './helper.js'

package/src/components/types.ts

@@ -0,0 +1,7 @@
+import type { Toggleable } from '@owlmeans/client'
+import type { I18nProps } from '@owlmeans/client-i18n'
+import type { PropsWithChildren } from 'react'
+
+export interface TPanelContext extends PropsWithChildren<I18nProps["i18n"]> {
+  loader?: Toggleable
+}

package/src/helper/form.ts

@@ -0,0 +1,7 @@
+
+import type { AnySchema, JSONSchemaType } from 'ajv'
+
+export const schemaToFormDefault = (schema: AnySchema): Record<string, any> => {
+  const _schema: JSONSchemaType<unknown> = schema as JSONSchemaType<unknown>
+  return Object.fromEntries(Object.entries(_schema.properties).map(([key, value]) => [key, (value as any).default ?? '']))
+}

package/src/helper/index.ts

@@ -0,0 +1,2 @@
+
+export * from './form.js'

package/src/index.ts

@@ -0,0 +1,3 @@
+
+export * from './components/index.js'
+export * from './helper/index.js'

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "../tsconfig.default.json",
+    "../tsconfig.react.json",
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/", /* Specify the root folder within your source files. */
+    "outDir": "./build/", /* Specify an output folder for all emitted files. */
+    "moduleResolution": "Bundler"
+  },
+  "exclude": [
+    "./dist/**/*",
+    "./build/**/*",
+    "./*.ts"
+  ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/index.ts","./src/auth/i18n.ts","./src/auth/index.ts","./src/auth/plugins/consts.ts","./src/auth/plugins/exports.ts","./src/auth/plugins/types.ts","./src/components/consts.ts","./src/components/context.tsx","./src/components/index.ts","./src/components/types.ts","./src/components/form/context.tsx","./src/components/form/helper.ts","./src/components/form/index.ts","./src/components/form/types.ts","./src/components/layout/helper.ts","./src/components/layout/index.ts","./src/helper/form.ts","./src/helper/index.ts"],"version":"5.6.3"}