fixing imports and ssr support + updated remix/nextjs/astro examples

This commit is contained in:
dswbx
2024-12-07 19:31:12 +01:00
parent 94cc4042d3
commit 3932396084
40 changed files with 125 additions and 130 deletions

View File

@@ -2,8 +2,9 @@ import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import type { ModuleConfigs } from "modules";
import React from "react";
import { BkndProvider, useBknd } from "ui/client/bknd";
import { FlashMessage } from "ui/modules/server/FlashMessage";
import { BkndProvider, ClientProvider, type ClientProviderProps, useBknd } from "./client";
import { ClientProvider, type ClientProviderProps } from "./client";
import { createMantineTheme } from "./lib/mantine/theme";
import { BkndModalsProvider } from "./modals";
import { Routes } from "./routes";

View File

@@ -1,4 +1,3 @@
//import { notifications } from "@mantine/notifications";
import { getDefaultConfig, getDefaultSchema } from "modules/ModuleManager";
import { createContext, startTransition, useContext, useEffect, useRef, useState } from "react";
import type { ModuleConfigs, ModuleSchemas } from "../../modules";
@@ -101,20 +100,6 @@ export function BkndProvider({
);
}
type BkndWindowContext = {
user?: object;
logout_route: string;
};
export function useBkndWindowContext(): BkndWindowContext {
if (typeof window !== "undefined" && window.__BKND__) {
return window.__BKND__ as any;
} else {
return {
logout_route: "/api/auth/logout"
};
}
}
export function useBknd({ withSecrets }: { withSecrets?: boolean } = {}): BkndContext {
const ctx = useContext(BkndContext);
if (withSecrets) ctx.requireSecrets();

View File

@@ -1,7 +1,7 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { TApiUser } from "Api";
import { createContext, useContext, useEffect, useState } from "react";
import { useBkndWindowContext } from "ui/client/BkndProvider";
//import { useBkndWindowContext } from "ui/client/BkndProvider";
import { AppQueryClient } from "./utils/AppQueryClient";
const ClientContext = createContext<{ baseUrl: string; client: AppQueryClient }>({
@@ -89,3 +89,17 @@ export const useBaseUrl = () => {
const context = useContext(ClientContext);
return context.baseUrl;
};
type BkndWindowContext = {
user?: object;
logout_route: string;
};
export function useBkndWindowContext(): BkndWindowContext {
if (typeof window !== "undefined" && window.__BKND__) {
return window.__BKND__ as any;
} else {
return {
logout_route: "/api/auth/logout"
};
}
}

View File

@@ -0,0 +1 @@
export { BkndProvider, useBknd } from "./BkndProvider";

View File

@@ -1,5 +1,10 @@
export { ClientProvider, type ClientProviderProps, useClient, useBaseUrl } from "./ClientProvider";
export { BkndProvider, useBknd } from "./BkndProvider";
export {
ClientProvider,
useBkndWindowContext,
type ClientProviderProps,
useClient,
useBaseUrl
} from "./ClientProvider";
export { useAuth } from "./schema/auth/use-auth";
export { Api } from "../../Api";

View File

@@ -1,4 +1,4 @@
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
export function useBkndAuth() {
//const client = useClient();

View File

@@ -11,7 +11,7 @@ import {
fieldsSchema,
relationsSchema
} from "data/data-schema";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import type { TSchemaActions } from "ui/client/schema/actions";
export function useBkndData() {

View File

@@ -1,4 +1,4 @@
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
export function useBkndSystem() {
const { config, schema, actions: bkndActions } = useBknd();

View File

@@ -1,4 +1,4 @@
import { useBknd } from "ui";
import { useBknd } from "ui/client/bknd";
export function useTheme(): { theme: "light" | "dark" } {
const b = useBknd();

View File

@@ -1,6 +1,6 @@
import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { Suspense, lazy } from "react";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
export default function CodeEditor({ editable, basicSetup, ...props }: ReactCodeMirrorProps) {

View File

@@ -1,14 +1,4 @@
export { default as Admin, type BkndAdminProps } from "./Admin";
export { Button } from "./components/buttons/Button";
export { Context } from "./components/Context";
export {
useClient,
ClientProvider,
BkndProvider,
useBknd,
useAuth,
useBaseUrl
} from "./client";
export {
EntitiesContainer,
useEntities,

View File

@@ -1,21 +1,19 @@
import { Menu, Popover, SegmentedControl, Tooltip } from "@mantine/core";
import { SegmentedControl, Tooltip } from "@mantine/core";
import { IconKeyOff, IconSettings, IconUser } from "@tabler/icons-react";
import {
TbDatabase,
TbFingerprint,
TbHierarchy2,
TbMenu2,
TbMoon,
TbPhoto,
TbSelector,
TbSun,
TbUser,
TbX
} from "react-icons/tb";
import { Button } from "ui";
import { useAuth, useBknd } from "ui/client";
import { useBkndWindowContext } from "ui/client/BkndProvider";
import { useAuth, useBkndWindowContext } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { useBkndSystemTheme } from "ui/client/schema/system/use-bknd-system";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { Logo } from "ui/components/display/Logo";
import { Dropdown, type DropdownItem } from "ui/components/overlay/Dropdown";

View File

@@ -1,5 +1,5 @@
import { useRef, useState } from "react";
import { Button } from "ui";
import { Button } from "ui/components/buttons/Button";
import {
JsonSchemaForm,
type JsonSchemaFormProps,

View File

@@ -3,7 +3,7 @@ import { Type } from "core/utils";
import type { ComponentPropsWithoutRef } from "react";
import { useForm } from "react-hook-form";
import { twMerge } from "tailwind-merge";
import { Button } from "ui";
import { Button } from "ui/components/buttons/Button";
import * as Formy from "ui/components/form/Formy";
export type LoginFormProps = Omit<ComponentPropsWithoutRef<"form">, "onSubmit"> & {

View File

@@ -4,8 +4,9 @@ import { ucFirst } from "core/utils";
import type { EntityData, RelationField } from "data";
import { useEffect, useRef, useState } from "react";
import { TbEye } from "react-icons/tb";
import { Button } from "ui";
import { useBknd, useClient } from "ui/client";
import { useClient } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import * as Formy from "ui/components/form/Formy";
import { Popover } from "ui/components/overlay/Popover";
import { useEntities } from "ui/container";

View File

@@ -11,7 +11,7 @@ import {
import { ManyToOneRelation, type RelationType, RelationTypes } from "data";
import { type ReactNode, useEffect } from "react";
import { type Control, type FieldValues, type UseFormRegister, useForm } from "react-hook-form";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { MantineNumberInput } from "ui/components/form/hook-form-mantine/MantineNumberInput";
import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
import { useStepContext } from "ui/components/steps/Steps";

View File

@@ -10,7 +10,7 @@ import {
} from "core/utils";
import type { MediaFieldConfig } from "media/MediaField";
import { useForm } from "react-hook-form";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { MantineNumberInput } from "ui/components/form/hook-form-mantine/MantineNumberInput";
import { MantineRadio } from "ui/components/form/hook-form-mantine/MantineRadio";
import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";

View File

@@ -8,7 +8,7 @@ import { Type } from "core/utils";
import { FetchTask } from "flows";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "ui";
import { Button } from "ui/components/buttons/Button";
import { JsonViewer } from "ui/components/code/JsonViewer";
import { SegmentedControl } from "ui/components/form/SegmentedControl";
import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";

View File

@@ -5,7 +5,7 @@ import { selectAtom } from "jotai/utils";
import { isEqual } from "lodash-es";
import type { ModuleSchemas } from "modules/ModuleManager";
import { createContext, useCallback, useContext, useEffect } from "react";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
export type TFlowNodeData = {
label: string;

View File

@@ -1,6 +1,6 @@
import { IconFingerprint } from "@tabler/icons-react";
import { TbSettings } from "react-icons/tb";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { IconButton } from "ui/components/buttons/IconButton";
import { Empty } from "ui/components/display/Empty";
import { Link } from "ui/components/wouter/Link";

View File

@@ -1,4 +1,5 @@
import { useBknd, useClient } from "ui/client";
import { useClient } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { Alert } from "ui/components/display/Alert";
import { routes } from "ui/lib/routes";

View File

@@ -1,7 +1,7 @@
import { notifications } from "@mantine/notifications";
import { useRef } from "react";
import { TbDots } from "react-icons/tb";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";

View File

@@ -1,6 +1,6 @@
import { cloneDeep, omit } from "lodash-es";
import { useEffect, useRef } from "react";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { Button } from "ui/components/buttons/Button";

View File

@@ -1,5 +1,5 @@
import { cloneDeep, omit } from "lodash-es";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import { JsonSchemaForm } from "ui/components/form/json-schema/JsonSchemaForm";
import * as AppShell from "../../layouts/AppShell/AppShell";

View File

@@ -2,10 +2,10 @@ import { typeboxResolver } from "@hookform/resolvers/typebox";
import { Input, Switch, Tooltip } from "@mantine/core";
import { guardRoleSchema } from "auth/auth-schema";
import { type Static, ucFirst } from "core/utils";
import type { TAppDataEntityFields } from "data/data-schema";
import { forwardRef, useImperativeHandle } from "react";
import { type UseControllerProps, useController, useForm } from "react-hook-form";
import { Button, useBknd } from "ui";
import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import { MantineSwitch } from "ui/components/form/hook-form-mantine/MantineSwitch";
const schema = guardRoleSchema;

View File

@@ -2,12 +2,12 @@ import { SegmentedControl } from "@mantine/core";
import { IconDatabase } from "@tabler/icons-react";
import type { Entity, TEntityType } from "data";
import { twMerge } from "tailwind-merge";
import { useBknd } from "../../client";
import { Empty } from "../../components/display/Empty";
import { Link } from "../../components/wouter/Link";
import { useBrowserTitle } from "../../hooks/use-browser-title";
import * as AppShell from "../../layouts/AppShell/AppShell";
import { routes, useNavigate } from "../../lib/routes";
import { useBknd } from "ui/client/bknd";
import { Empty } from "ui/components/display/Empty";
import { Link } from "ui/components/wouter/Link";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { routes, useNavigate } from "ui/lib/routes";
export function DataRoot({ children }) {
// @todo: settings routes should be centralized

View File

@@ -1,24 +1,21 @@
import { encodeSearch, ucFirst } from "core/utils";
import type { Entity, EntityData } from "data";
import type { EntityRelation } from "data";
import { Fragment, memo, useState } from "react";
import { TbArrowLeft, TbDots } from "react-icons/tb";
import { ucFirst } from "core/utils";
import type { Entity, EntityData, EntityRelation } from "data";
import { Fragment, useState } from "react";
import { TbDots } from "react-icons/tb";
import { useClient } from "ui/client";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { Dropdown } from "ui/components/overlay/Dropdown";
import { useEntity } from "ui/container";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
import { routes, useNavigate } from "ui/lib/routes";
import { bkndModals } from "ui/modals";
import { EntityForm } from "ui/modules/data/components/EntityForm";
import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
import { useEntityForm } from "ui/modules/data/hooks/useEntityForm";
import { useClient } from "../../client";
import { useBknd } from "../../client";
import { Button } from "../../components/buttons/Button";
import { IconButton } from "../../components/buttons/IconButton";
import { Dropdown } from "../../components/overlay/Dropdown";
import { useEntity } from "../../container";
import { useBrowserTitle } from "../../hooks/use-browser-title";
import * as AppShell from "../../layouts/AppShell/AppShell";
import { SectionHeaderLink } from "../../layouts/AppShell/AppShell";
import { Breadcrumbs2 } from "../../layouts/AppShell/Breadcrumbs2";
import { routes, useNavigate } from "../../lib/routes";
import { bkndModals } from "../../modals";
export function DataEntityUpdate({ params }) {
const { $data, relations } = useBkndData();

View File

@@ -2,18 +2,16 @@ import { Type } from "core/utils";
import { querySchema } from "data";
import { TbDots } from "react-icons/tb";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { Empty } from "ui/components/display/Empty";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { Message } from "ui/components/display/Message";
import { Dropdown } from "ui/components/overlay/Dropdown";
import { EntitiesContainer } from "ui/container";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import { useSearch } from "ui/hooks/use-search";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { routes, useNavigate } from "ui/lib/routes";
import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
import { useBknd } from "../../client";
import { Button } from "../../components/buttons/Button";
import { IconButton } from "../../components/buttons/IconButton";
import { Dropdown } from "../../components/overlay/Dropdown";
import { EntitiesContainer } from "../../container";
import { useBrowserTitle } from "../../hooks/use-browser-title";
import { useSearch } from "../../hooks/use-search";
import * as AppShell from "../../layouts/AppShell/AppShell";
import { routes, useNavigate } from "../../lib/routes";
// @todo: migrate to Typebox
const searchSchema = Type.Composite(

View File

@@ -18,9 +18,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle } from "react";
import { type FieldArrayWithId, type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
import { TbGripVertical, TbSettings, TbTrash } from "react-icons/tb";
import { twMerge } from "tailwind-merge";
import { Button } from "ui";
import { useBknd } from "ui/client";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { JsonViewer } from "ui/components/code/JsonViewer";
import { MantineSwitch } from "ui/components/form/hook-form-mantine/MantineSwitch";

View File

@@ -1,5 +1,5 @@
import { Suspense, lazy } from "react";
import { useBknd } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { Route, Router, Switch } from "wouter";
import { AuthLogin } from "./auth/auth.login";
import { Root, RootEmpty } from "./root";

View File

@@ -1,7 +1,6 @@
import { IconFingerprint, IconHome } from "@tabler/icons-react";
import { isDebug } from "core";
import { Suspense, lazy, useEffect } from "react";
import { useAuth } from "ui";
import { IconHome } from "@tabler/icons-react";
import { Suspense, useEffect } from "react";
import { useAuth } from "ui/client";
import { Empty } from "../components/display/Empty";
import { useBrowserTitle } from "../hooks/use-browser-title";
import * as AppShell from "../layouts/AppShell/AppShell";

View File

@@ -3,23 +3,21 @@ import { type TObject, ucFirst } from "core/utils";
import { omit } from "lodash-es";
import { type ReactNode, useMemo, useRef, useState } from "react";
import { TbSettings } from "react-icons/tb";
import { useAuth } from "ui";
import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { Alert } from "ui/components/display/Alert";
import { Link, Route, useLocation } from "wouter";
import { useBknd } from "../../../client/BkndProvider";
import { Button } from "../../../components/buttons/Button";
import { IconButton } from "../../../components/buttons/IconButton";
import { Empty } from "../../../components/display/Empty";
import { Empty } from "ui/components/display/Empty";
import {
JsonSchemaForm,
type JsonSchemaFormRef
} from "../../../components/form/json-schema/JsonSchemaForm";
import { Dropdown } from "../../../components/overlay/Dropdown";
import { DataTable } from "../../../components/table/DataTable";
import { useEvent } from "../../../hooks/use-event";
import * as AppShell from "../../../layouts/AppShell/AppShell";
import { SectionHeaderTabs } from "../../../layouts/AppShell/AppShell";
import { Breadcrumbs } from "../../../layouts/AppShell/Breadcrumbs";
} from "ui/components/form/json-schema/JsonSchemaForm";
import { Dropdown } from "ui/components/overlay/Dropdown";
import { DataTable } from "ui/components/table/DataTable";
import { useEvent } from "ui/hooks/use-event";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { Breadcrumbs } from "ui/layouts/AppShell/Breadcrumbs";
import { Link, Route, useLocation } from "wouter";
import { extractSchema } from "../utils/schema";
import { SettingNewModal, type SettingsNewModalProps } from "./SettingNewModal";
import { SettingSchemaModal, type SettingsSchemaModalRef } from "./SettingSchemaModal";

View File

@@ -1,13 +1,11 @@
import { modals } from "@mantine/modals";
import { IconSettings } from "@tabler/icons-react";
import { ucFirst } from "core/utils";
import { useBknd } from "ui/client/bknd";
import { Empty } from "ui/components/display/Empty";
import { Link } from "ui/components/wouter/Link";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { Route, Switch } from "wouter";
import { useBknd } from "../../client";
import { Empty } from "../../components/display/Empty";
import { Link } from "../../components/wouter/Link";
import { useBrowserTitle } from "../../hooks/use-browser-title";
import * as AppShell from "../../layouts/AppShell/AppShell";
import { bkndModals } from "../../modals";
import { Setting } from "./components/Setting";
import { AuthSettings } from "./routes/auth.settings";
import { DataSettings } from "./routes/data.settings";

View File

@@ -1,8 +1,8 @@
import { cloneDeep, transform } from "lodash-es";
import type { ModuleConfigs, ModuleSchemas } from "modules";
import { useBknd } from "ui/client/bknd";
import { fieldSpecs } from "ui/modules/data/components/fields-specs";
import { Route, Switch } from "wouter";
import type { ModuleConfigs, ModuleSchemas } from "../../../../modules";
import { useBknd } from "../../../client";
import { Setting } from "../components/Setting";
export const dataFieldsUiSchema = {

View File

@@ -1,5 +1,5 @@
import { cloneDeep } from "lodash-es";
import { useBknd } from "ui";
import { useBknd } from "ui/client/bknd";
import { Setting } from "ui/routes/settings/components/Setting";
import { Route } from "wouter";

View File

@@ -45,7 +45,7 @@ export const ALL = serve({
connection: {
type: "libsql",
config: {
url: "http://127.0.0.1:8080"
url: "file:data.db"
}
}
});
@@ -74,7 +74,7 @@ export const prerender = false;
<Admin
withProvider={{ user }}
config={{ basepath: "/admin", color_scheme: "dark" }}
client:load
client:only
/>
</body>
</html>

View File

@@ -15,7 +15,7 @@ export const prerender = false;
<Admin
withProvider={{ user }}
config={{ basepath: "/admin", color_scheme: "dark" }}
client:load
client:only
/>
</body>
</html>

View File

@@ -6,7 +6,7 @@ export const ALL = serve({
connection: {
type: "libsql",
config: {
url: "http://127.0.0.1:8080"
url: "file:test.db"
}
}
});

View File

@@ -1,9 +1,20 @@
import { adminPage, getServerSideProps } from "bknd/adapter/nextjs";
import { withApi } from "bknd/adapter/nextjs";
import dynamic from "next/dynamic";
import "bknd/dist/styles.css";
export { getServerSideProps };
export default adminPage({
config: {
basepath: "/admin"
}
const Admin = dynamic(() => import("bknd/ui").then((mod) => mod.Admin), {
ssr: false
});
export const getServerSideProps = withApi(async (context) => {
return {
props: {
user: context.api.getUser()
}
};
});
export default function AdminPage() {
if (typeof document === "undefined") return null;
return <Admin withProvider config={{ basepath: "/admin" }} />;
}

View File

@@ -4,7 +4,7 @@ const handler = serve({
connection: {
type: "libsql",
config: {
url: "http://localhost:8080"
url: "file:test.db"
}
}
});