@owlmeans/web-panel 0.1.0

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/module'
+export { addWebService } from '@owlmeans/client-config'
+export { module, elevate, provideRequest, stab } from '@owlmeans/client-module'
+export type { ClientModule as Module } from '@owlmeans/client-module'
+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/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/context.ts","./src/exports.ts","./src/index.ts","./src/main.tsx","./src/modules.ts","./src/types.ts","./src/auth/context.ts","./src/auth/exports.ts","./src/auth/index.ts","./src/auth/modules.ts","./src/auth/types.ts","./src/auth/plugins/basic-ed25519.tsx","./src/auth/plugins/exports.ts","./src/auth/plugins/index.ts","./src/auth/plugins/re-captcha.tsx","./src/auth/plugins/tunnel-consumer.tsx","./src/components/block.tsx","./src/components/helper.ts","./src/components/index.ts","./src/components/link.tsx","./src/components/status.tsx","./src/components/text.tsx","./src/components/types.ts","./src/components/button/index.ts","./src/components/button/selector.tsx","./src/components/button/types.ts","./src/components/form/component.tsx","./src/components/form/index.ts","./src/components/form/types.ts","./src/components/form/button/component.tsx","./src/components/form/button/index.ts","./src/components/form/button/types.ts","./src/components/form/text/component.tsx","./src/components/form/text/index.ts","./src/components/form/text/types.ts","./src/components/layout/component.tsx","./src/components/layout/index.ts","./src/components/layout/types.ts","./src/components/panel-app/component.tsx","./src/components/panel-app/index.ts","./src/components/panel-app/types.ts","./src/components/uploader/image.tsx","./src/components/uploader/index.ts","./src/components/uploader/types.ts"],"version":"5.6.3"}