@owlmeans/mui-panel 0.1.3

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 { TypographyOwnProps } from '@mui/material'
+
+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 TypographyOwnProps['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 { TypographyOwnProps } from '@mui/material'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+
+export interface BlockProps extends PropsWithChildren<I18nProps> {
+  horizontal?: BlockScaling
+  vertical?: BlockScaling
+  Actions?: FC
+  styles?: SxProps
+}
+
+export interface TextProps extends PropsWithChildren<I18nProps> {
+  name?: string
+  variant?: TypographyOwnProps['variant']
+  center?: boolean
+  styles?: SxProps
+  nested?: boolean
+}
+
+export interface LinkProps extends TextProps {
+  src?: string
+  module?: string | ClientEntrypoint
+  open?: boolean
+}
+
+export interface StatusProps extends PropsWithChildren<I18nProps> {
+  name?: string
+  ok?: boolean
+  variant?: string
+  error?: Error
+  message?: string
+}

package/src/components/uploader/image.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react'
+import { ImageUploader as Uploader } from '@owlmeans/web-client'
+import Paper from '@mui/material/Paper'
+import type { ImageUploaderProps } from './types.js'
+import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined';
+import Box from '@mui/material/Box'
+
+export const ImageUploader: FC<ImageUploaderProps> = ({ Root, rootProps, previewUrl, ...others }) => {
+  return <Uploader Root={Root ?? Paper} rootProps={{
+    elevation: 2,
+    sx: {
+      width: wrapperSize,
+      height: wrapperSize,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      cursor: 'pointer',
+    },
+    ...rootProps
+  }} {...others}>
+    {
+      previewUrl != null
+        ? <Box component="img" src={previewUrl}
+          sx={{ maxWidth: previewSize, maxHeight: previewSize }} />
+        : <AddPhotoAlternateOutlinedIcon sx={{ fontSize: previewSize }} color="primary" />
+    }
+  </Uploader>
+}
+
+const previewSize = { xs: 60, md: 120, lg: 200 }
+const wrapperSize = { xs: 65, md: 125, lg: 205 }

package/src/components/uploader/index.ts

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

package/src/components/uploader/types.ts

@@ -0,0 +1,6 @@
+
+import type { UploaderProps as BasicUploaderProps } from '@owlmeans/web-client'
+
+export interface ImageUploaderProps extends BasicUploaderProps {
+  previewUrl?: string
+}

package/src/context.ts

@@ -0,0 +1,18 @@
+import { appendFlowService } from '@owlmeans/web-flow'
+import type { AppConfig , AppContext } from './types.js'
+import { makeContext as makeClientContext, useContext as useCtx } from '@owlmeans/web-client'
+import { apiConfigMiddleware } from '@owlmeans/api-config-client'
+
+export const makeContext = <C extends AppConfig, T extends AppContext<C>>(cfg: C): T => {
+  const context = makeClientContext(cfg) as T
+
+  context.registerMiddleware(apiConfigMiddleware)
+
+  appendFlowService<C, T>(context)
+  context.flow = () => context.service('flow')
+
+  return context
+}
+
+export const useContext = <C extends AppConfig = AppConfig,T extends AppContext<C> = AppContext<C>>() =>
+  useCtx<C,T>()

package/src/exports.ts

@@ -0,0 +1,22 @@
+
+export { handler, useNavigate, useValue, useModule } from '@owlmeans/client'
+export { config } from '@owlmeans/client-context'
+export { service } from '@owlmeans/config'
+export { guard, parent } from '@owlmeans/entrypoint'
+export { addWebService } from '@owlmeans/client-config'
+export { entrypoint, elevate, provideRequest, stab } from '@owlmeans/client-entrypoint'
+export type { ClientEntrypoint as Module } from '@owlmeans/client-entrypoint'
+export { route as croute } from '@owlmeans/client-route'
+export { route, frontend } from '@owlmeans/route'
+export { DEFAULT_ALIAS as DAUTH_GUARD, setupExternalAuthentication } from '@owlmeans/client-auth'
+
+export { AppType, HOME, ROOT, BASE, GUEST } from '@owlmeans/context'
+
+export { DISPATCHER, CAUTHEN_FLOW_ENTER } from '@owlmeans/auth'
+export type { AuthToken } from '@owlmeans/auth'
+
+export { useCommonI18n, useI18nApp, useI18nLib } from '@owlmeans/client-i18n'
+export { addCommonI18n, addI18nApp } from '@owlmeans/i18n'
+export { flow, configureFlows } from '@owlmeans/flow'
+export { QUERY_PARAM as FLOW_PARAM, SERVICE_PARAM, useFlow } from '@owlmeans/web-flow'
+export { Dispatcher, appendWebAuthService } from '@owlmeans/web-client'

package/src/index.ts

@@ -0,0 +1,9 @@
+
+export type * from './types.js'
+export * from './main.js'
+export * from './exports.js'
+export * from './context.js'
+export * from './modules.js'
+export * from './components/index.js'
+
+export * from '@owlmeans/client-panel'

package/src/main.tsx

@@ -0,0 +1,19 @@
+import type { RenderOptions, AppContext } from '@owlmeans/web-client'
+import type { ClientConfig, ClientContext } from '@owlmeans/client-context'
+import { render as basicRender, provide } from '@owlmeans/web-client'
+import type { FC } from 'react'
+import { useI18nInstance } from '@owlmeans/client-i18n/utils'
+import detector from 'i18next-browser-languagedetector'
+import { PanelApp } from './components/panel-app/component.js'
+import type { Theme } from '@mui/material/styles'
+
+export const render = <C extends ClientConfig, T extends ClientContext<C>>(context: T, theme?: Theme, opts?: RenderOptions) => {
+  basicRender(<App context={context as unknown as AppContext} theme={theme}/>, opts)
+}
+
+const App: FC<{ context: AppContext<any>, theme?: Theme }> = ({ context, theme }) => {
+  const i18nInstance = useI18nInstance(context.cfg)
+  i18nInstance.use(detector)
+
+  return <PanelApp context={context} provide={provide} theme={theme} />
+}

package/src/modules.ts

@@ -0,0 +1,5 @@
+
+import { modules as list } from '@owlmeans/web-client'
+import { modules as config } from '@owlmeans/api-config-client'
+
+export const modules = [...list, ...config]

package/src/types.ts

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

package/tests/smoke.spec.ts

@@ -0,0 +1,24 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { closeBrowser, mountComponent } from '@owlmeans/test-ui'
+
+const harness = `data:text/html,${encodeURIComponent(`
+<!doctype html>
+<html><body>
+  <h1 id="title">@owlmeans/mui-panel pilot</h1>
+</body></html>
+`)}`
+
+afterAll(async () => {
+  await closeBrowser()
+})
+
+describe('@owlmeans/mui-panel — Playwright-library smoke', () => {
+  test('mounts a static page in chromium and reads the heading', async () => {
+    const { page, close } = await mountComponent({ url: harness })
+    try {
+      expect(await page.locator('#title').textContent()).toBe('@owlmeans/mui-panel pilot')
+    } finally {
+      await close()
+    }
+  })
+})

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "@owlmeans/dep-config/tsconfig.base.json",
+    "@owlmeans/dep-config/tsconfig.react.json"
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./build/"
+  },
+  "exclude": ["./dist/**/*", "./build/**/*", "./tests/**/*", "./*.ts"]
+}