shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-19 05:46:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Release 0.12 (#143)

Browse Source 
* changed tb imports

* cleanup: replace console.log/warn with $console, remove commented-out code

Removed various commented-out code and replaced direct `console.log` and `console.warn` usage across the codebase with `$console` from "core" for standardized logging. Also adjusted linting rules in biome.json to enable warnings for `console.log` usage.

* ts: enable incremental

* fix imports in test files

reorganize imports to use "@sinclair/typebox" directly, replacing local utility references, and add missing "override" keywords in test classes.

* added media permissions (#142)

* added permissions support for media module

introduced `MediaPermissions` for fine-grained access control in the media module, updated routes to enforce these permissions, and adjusted permission registration logic.

* fix: handle token absence in getUploadHeaders and add tests for transport modes

ensure getUploadHeaders does not set Authorization header when token is missing. Add unit tests to validate behavior for different token_transport options.

* remove console.log on DropzoneContainer.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* add bcrypt and refactored auth resolve (#147)

* reworked auth architecture with improved password handling and claims

Refactored password strategy to prepare supporting bcrypt, improving hashing/encryption flexibility. Updated authentication flow with enhanced user resolution mechanisms, safe JWT generation, and consistent profile handling. Adjusted dependencies to include bcryptjs and updated lock files accordingly.

* fix strategy forms handling, add register route and hidden fields

Refactored strategy forms to include hidden fields for type and name. Added a registration route with necessary adjustments to the admin controller and routes. Corrected field handling within relevant forms and components.

* refactored auth handling to support bcrypt, extracted user pool

* update email regex to allow '+' and '_' characters

* update test stub password for AppAuth spec

* update data exceptions to use HttpStatus constants, adjust logging level in AppUserPool

* rework strategies to extend a base class instead of interface

* added simple bcrypt test

* add validation logs and improve data validation handling (#157)

Added warning logs for invalid data during mutator validation, refined field validation logic to handle undefined values, and adjusted event validation comments for clarity. Minor improvements include exporting events from core and handling optional chaining in entity field validation.

* modify MediaApi to support custom fetch implementation, defaults to native fetch (#158)

* modify MediaApi to support custom fetch implementation, defaults to native fetch

added an optional `fetcher` parameter to allow usage of a custom fetch function in both `upload` and `fetcher` methods. Defaults to the standard `fetch` if none is provided.

* fix tests and improve api fetcher types

* update admin basepath handling and window context integration (#155)

Refactored `useBkndWindowContext` to include `admin_basepath` and updated its usage in routing. Improved type consistency with `AdminBkndWindowContext` and ensured default values are applied for window context.

* trigger `repository-find-[one|many]-[before|after]` based on `limit` (#160)

* refactor error handling in authenticator and password strategy (#161)

made `respondWithError` method public, updated login and register routes in `PasswordStrategy` to handle errors using `respondWithError` for consistency.

* add disableSubmitOnError prop to NativeForm and export getFlashMessage (#162)

Introduced a `disableSubmitOnError` prop to NativeForm to control submit button behavior when errors are present. Also exported `getFlashMessage` from the core for external usage.

* update dependencies in package.json (#156)

moved several dependencies between devDependencies and dependencies for better categorization and removed redundant entries.

* update imports to adjust nodeTestRunner path and remove unused export (#163)

updated imports in test files to reflect the correct path for nodeTestRunner. removed redundant export of nodeTestRunner from index file to clean up module structure. In some environments this could cause issues requiring to exclude `node:test`, just removing it for now.

* fix sync events not awaited (#164)

* refactor(dropzone): extract DropzoneInner and unify state management with zustand (#165)

Simplified Dropzone implementation by extracting inner logic to a new component, `DropzoneInner`. Replaced local dropzone state logic with centralized state management using zustand. Adjusted API exports and props accordingly for consistency and maintainability.

* replace LiquidJs rendering with simplified renderer (#167)

* replace LiquidJs rendering with simplified renderer

Removed dependency on LiquidJS and replaced it with a custom templating solution using lodash `get`. Updated corresponding components, editors, and tests to align with the new rendering approach. Removed unused filters and tags.

* remove liquid js from package json

* feat/cli-generate-types (#166)

* init types generation

* update type generation for entities and fields

Refactored `EntityTypescript` to support improved field types and relations. Added `toType` method overrides for various fields to define accurate TypeScript types. Enhanced CLI `types` command with new options for output style and file handling. Removed redundant test files.

* update type generation code and CLI option description

removed unused imports definition, adjusted formatting in EntityTypescript, and clarified the CLI style option description.

* fix json schema field type generation

* reworked system entities to prevent recursive types

* reworked system entities to prevent recursive types

* remove unused object function

* types: use number instead of Generated

* update data hooks and api types

* update data hooks and api types

* update data hooks and api types

* update data hooks and api types

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
dswbx
2025-05-01 10:12:18 +02:00
committed by GitHub
parent d6f94a2ce1
commit 372f94d22a
186 changed files with 2617 additions and 1997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/ui/Admin.tsx
View File

@@ -7,7 +7,6 @@ import { Logo } from "ui/components/display/Logo";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { ClientProvider, type ClientProviderProps } from "./client";
import { createMantineTheme } from "./lib/mantine/theme";
import { BkndModalsProvider } from "./modals";
import { Routes } from "./routes";
export type BkndAdminProps = {

19
app/src/ui/client/ClientProvider.tsx
View File

@@ -1,6 +1,7 @@
import { Api, type ApiOptions, type TApiUser } from "Api";
import { isDebug } from "core";
import { createContext, type ReactNode, useContext } from "react";
import type { AdminBkndWindowContext } from "modules/server/AdminController";
const ClientContext = createContext<{ baseUrl: string; api: Api }>({
baseUrl: undefined,
@@ -68,16 +69,18 @@ export const useBaseUrl = () => {
return context.baseUrl;
};
type BkndWindowContext = {
user?: TApiUser;
logout_route: string;
};
export function useBkndWindowContext(): BkndWindowContext {
export function useBkndWindowContext(): AdminBkndWindowContext {
const defaults = {
logout_route: "/api/auth/logout",
admin_basepath: "",
};
if (typeof window !== "undefined" && window.__BKND__) {
return window.__BKND__ as any;
} else {
return {
logout_route: "/api/auth/logout",
...defaults,
...window.__BKND__,
};
}
return defaults;
}

105
app/src/ui/client/api/use-entity.ts
View File

@@ -1,9 +1,10 @@
import type { DB, PrimaryFieldType } from "core";
import { objectTransform } from "core/utils/objects";
import { encodeSearch } from "core/utils/reqres";
import type { EntityData, RepoQueryIn } from "data";
import type { ModuleApi, ResponseObject } from "modules/ModuleApi";
import useSWR, { type SWRConfiguration, mutate } from "swr";
import type { EntityData, RepoQueryIn, RepositoryResponse } from "data";
import type { Insertable, Selectable, Updateable } from "kysely";
import type { FetchPromise, ModuleApi, ResponseObject } from "modules/ModuleApi";
import useSWR, { type SWRConfiguration, type SWRResponse, mutate } from "swr";
import { type Api, useApi } from "ui/client";
export class UseEntityApiError<Payload = any> extends Error {
@@ -23,6 +24,26 @@ export class UseEntityApiError<Payload = any> extends Error {
}
}
interface UseEntityReturn<
Entity extends keyof DB | string,
Id extends PrimaryFieldType | undefined,
Data = Entity extends keyof DB ? DB[Entity] : EntityData,
Response = ResponseObject<RepositoryResponse<Selectable<Data>>>,
> {
create: (input: Insertable<Data>) => Promise<Response>;
read: (
query?: RepoQueryIn,
) => Promise<
ResponseObject<
RepositoryResponse<Id extends undefined ? Selectable<Data>[] : Selectable<Data>>
>
>;
update: Id extends undefined
? (input: Updateable<Data>, id: Id) => Promise<Response>
: (input: Updateable<Data>) => Promise<Response>;
_delete: Id extends undefined ? (id: Id) => Promise<Response> : () => Promise<Response>;
}
export const useEntity = <
Entity extends keyof DB | string,
Id extends PrimaryFieldType | undefined = undefined,
@@ -30,28 +51,26 @@ export const useEntity = <
>(
entity: Entity,
id?: Id,
) => {
): UseEntityReturn<Entity, Id, Data> => {
const api = useApi().data;
return {
create: async (input: Omit<Data, "id">) => {
const res = await api.createOne(entity, input);
create: async (input: Insertable<Data>) => {
const res = await api.createOne(entity, input as any);
if (!res.ok) {
throw new UseEntityApiError(res, `Failed to create entity "${entity}"`);
}
return res;
return res as any;
},
read: async (query: RepoQueryIn = {}) => {
read: async (query?: RepoQueryIn) => {
const res = id ? await api.readOne(entity, id!, query) : await api.readMany(entity, query);
if (!res.ok) {
throw new UseEntityApiError(res as any, `Failed to read entity "${entity}"`);
}
// must be manually typed
return res as unknown as Id extends undefined
? ResponseObject<Data[]>
: ResponseObject<Data>;
return res as any;
},
update: async (input: Partial<Omit<Data, "id">>, _id: PrimaryFieldType | undefined = id) => {
// @ts-ignore
update: async (input: Updateable<Data>, _id: PrimaryFieldType | undefined = id) => {
if (!_id) {
throw new Error("id is required");
}
@@ -59,8 +78,9 @@ export const useEntity = <
if (!res.ok) {
throw new UseEntityApiError(res, `Failed to update entity "${entity}"`);
}
return res;
return res as any;
},
// @ts-ignore
_delete: async (_id: PrimaryFieldType | undefined = id) => {
if (!_id) {
throw new Error("id is required");
@@ -70,7 +90,7 @@ export const useEntity = <
if (!res.ok) {
throw new UseEntityApiError(res, `Failed to delete entity "${entity}"`);
}
return res;
return res as any;
},
};
};
@@ -91,6 +111,19 @@ export function makeKey(
);
}
interface UseEntityQueryReturn<
Entity extends keyof DB | string,
Id extends PrimaryFieldType | undefined = undefined,
Data = Entity extends keyof DB ? Selectable<DB[Entity]> : EntityData,
Return = Id extends undefined ? ResponseObject<Data[]> : ResponseObject<Data>,
> extends Omit<SWRResponse<Return>, "mutate">,
Omit<ReturnType<typeof useEntity<Entity, Id>>, "read"> {
mutate: (id?: PrimaryFieldType) => Promise<any>;
mutateRaw: SWRResponse<Return>["mutate"];
api: Api["data"];
key: string;
}
export const useEntityQuery = <
Entity extends keyof DB | string,
Id extends PrimaryFieldType | undefined = undefined,
@@ -99,11 +132,11 @@ export const useEntityQuery = <
id?: Id,
query?: RepoQueryIn,
options?: SWRConfiguration & { enabled?: boolean; revalidateOnMutate?: boolean },
) => {
): UseEntityQueryReturn<Entity, Id> => {
const api = useApi().data;
const key = makeKey(api, entity as string, id, query);
const { read, ...actions } = useEntity<Entity, Id>(entity, id);
const fetcher = () => read(query);
const fetcher = () => read(query ?? {});
type T = Awaited<ReturnType<typeof fetcher>>;
const swr = useSWR<T>(options?.enabled === false ? null : key, fetcher as any, {
@@ -112,8 +145,8 @@ export const useEntityQuery = <
...options,
});
const mutateAll = async () => {
const entityKey = makeKey(api, entity as string);
const mutateFn = async (id?: PrimaryFieldType) => {
const entityKey = makeKey(api, entity as string, id);
return mutate((key) => typeof key === "string" && key.startsWith(entityKey), undefined, {
revalidate: true,
});
@@ -126,7 +159,7 @@ export const useEntityQuery = <
// mutate all keys of entity by default
if (options?.revalidateOnMutate !== false) {
await mutateAll();
await mutateFn();
}
return res;
};
@@ -135,7 +168,8 @@ export const useEntityQuery = <
return {
...swr,
...mapped,
mutate: mutateAll,
mutate: mutateFn,
// @ts-ignore
mutateRaw: swr.mutate,
api,
key,
@@ -144,8 +178,8 @@ export const useEntityQuery = <
export async function mutateEntityCache<
Entity extends keyof DB | string,
Data = Entity extends keyof DB ? Omit<DB[Entity], "id"> : EntityData,
>(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Data>) {
Data = Entity extends keyof DB ? DB[Entity] : EntityData,
>(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Selectable<Data>>) {
function update(prev: any, partialNext: any) {
if (
typeof prev !== "undefined" &&
@@ -176,28 +210,37 @@ export async function mutateEntityCache<
);
}
interface UseEntityMutateReturn<
Entity extends keyof DB | string,
Id extends PrimaryFieldType | undefined = undefined,
Data = Entity extends keyof DB ? DB[Entity] : EntityData,
> extends Omit<ReturnType<typeof useEntityQuery<Entity, Id>>, "mutate"> {
mutate: Id extends undefined
? (id: PrimaryFieldType, data: Partial<Selectable<Data>>) => Promise<void>
: (data: Partial<Selectable<Data>>) => Promise<void>;
}
export const useEntityMutate = <
Entity extends keyof DB | string,
Id extends PrimaryFieldType | undefined = undefined,
Data = Entity extends keyof DB ? Omit<DB[Entity], "id"> : EntityData,
Data = Entity extends keyof DB ? DB[Entity] : EntityData,
>(
entity: Entity,
id?: Id,
options?: SWRConfiguration,
) => {
): UseEntityMutateReturn<Entity, Id, Data> => {
const { data, ...$q } = useEntityQuery<Entity, Id>(entity, id, undefined, {
...options,
enabled: false,
});
const _mutate = id
? (data) => mutateEntityCache($q.api, entity, id, data)
: (id, data) => mutateEntityCache($q.api, entity, id, data);
? (data: Partial<Selectable<Data>>) => mutateEntityCache($q.api, entity, id, data)
: (id: PrimaryFieldType, data: Partial<Selectable<Data>>) =>
mutateEntityCache($q.api, entity, id, data);
return {
...$q,
mutate: _mutate as unknown as Id extends undefined
? (id: PrimaryFieldType, data: Partial<Data>) => Promise<void>
: (data: Partial<Data>) => Promise<void>,
};
mutate: _mutate,
} as any;
};

4
app/src/ui/client/schema/data/use-bknd-data.ts
View File

@@ -1,4 +1,4 @@
import { Type, TypeInvalidError, parse, transformObject } from "core/utils";
import { TypeInvalidError, parse, transformObject } from "core/utils";
import { constructEntity } from "data";
import {
type TAppDataEntity,
@@ -13,6 +13,8 @@ import {
import { useBknd } from "ui/client/bknd";
import type { TSchemaActions } from "ui/client/schema/actions";
import { bkndModals } from "ui/modals";
import * as tb from "@sinclair/typebox";
const { Type } = tb;
export function useBkndData() {
const { config, app, schema, actions: bkndActions } = useBknd();

18
app/src/ui/components/canvas/panels/index.tsx
View File

@@ -35,16 +35,14 @@ export function Panels({ children, ...props }: PanelsProps) {
)}
<Panel unstyled position="bottom-right">
{props.zoom && (
<>
<Panel.Wrapper className="px-1.5">
<Panel.IconButton Icon={TbPlus} round onClick={handleZoomIn} />
<Panel.Text className="px-2" mono onClick={handleZoomReset}>
{percent}%
</Panel.Text>
<Panel.IconButton Icon={TbMinus} round onClick={handleZoomOut} />
<Panel.IconButton Icon={TbMaximize} round onClick={handleZoomReset} />
</Panel.Wrapper>
</>
<Panel.Wrapper className="px-1.5">
<Panel.IconButton Icon={TbPlus} round onClick={handleZoomIn} />
<Panel.Text className="px-2" mono onClick={handleZoomReset}>
{percent}%
</Panel.Text>
<Panel.IconButton Icon={TbMinus} round onClick={handleZoomOut} />
<Panel.IconButton Icon={TbMaximize} round onClick={handleZoomReset} />
</Panel.Wrapper>
)}
{props.minimap && (
<>

7
app/src/ui/components/code/CodeEditor.tsx
View File

@@ -1,12 +1,12 @@
import { default as CodeMirror, type ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { json } from "@codemirror/lang-json";
import { type LiquidCompletionConfig, liquid } from "@codemirror/lang-liquid";
import { html } from "@codemirror/lang-html";
import { useTheme } from "ui/client/use-theme";
export type CodeEditorProps = ReactCodeMirrorProps & {
_extensions?: Partial<{
json: boolean;
liquid: LiquidCompletionConfig;
html: boolean;
}>;
};
@@ -31,7 +31,8 @@ export default function CodeEditor({
case "json":
return json();
case "liquid":
return liquid(config);
case "html":
return html(config);
}
return undefined;
})

23
app/src/ui/components/code/HtmlEditor.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Suspense, lazy } from "react";
import { twMerge } from "tailwind-merge";
import type { CodeEditorProps } from "./CodeEditor";
const CodeEditor = lazy(() => import("./CodeEditor"));
export function HtmlEditor({ editable, ...props }: CodeEditorProps) {
return (
<Suspense fallback={null}>
<CodeEditor
className={twMerge(
"flex w-full border border-muted bg-white rounded-lg",
!editable && "opacity-70",
)}
editable={editable}
_extensions={{
html: true,
}}
{...props}
/>
</Suspense>
);
}

125
app/src/ui/components/code/LiquidJsEditor.tsx
View File

@@ -1,125 +0,0 @@
import { Suspense, lazy } from "react";
import { twMerge } from "tailwind-merge";
import type { CodeEditorProps } from "./CodeEditor";
const CodeEditor = lazy(() => import("./CodeEditor"));
const filters = [
{ label: "abs" },
{ label: "append" },
{ label: "array_to_sentence_string" },
{ label: "at_least" },
{ label: "at_most" },
{ label: "capitalize" },
{ label: "ceil" },
{ label: "cgi_escape" },
{ label: "compact" },
{ label: "concat" },
{ label: "date" },
{ label: "date_to_long_string" },
{ label: "date_to_rfc822" },
{ label: "date_to_string" },
{ label: "date_to_xmlschema" },
{ label: "default" },
{ label: "divided_by" },
{ label: "downcase" },
{ label: "escape" },
{ label: "escape_once" },
{ label: "find" },
{ label: "find_exp" },
{ label: "first" },
{ label: "floor" },
{ label: "group_by" },
{ label: "group_by_exp" },
{ label: "inspect" },
{ label: "join" },
{ label: "json" },
{ label: "jsonify" },
{ label: "last" },
{ label: "lstrip" },
{ label: "map" },
{ label: "minus" },
{ label: "modulo" },
{ label: "newline_to_br" },
{ label: "normalize_whitespace" },
{ label: "number_of_words" },
{ label: "plus" },
{ label: "pop" },
{ label: "push" },
{ label: "prepend" },
{ label: "raw" },
{ label: "remove" },
{ label: "remove_first" },
{ label: "remove_last" },
{ label: "replace" },
{ label: "replace_first" },
{ label: "replace_last" },
{ label: "reverse" },
{ label: "round" },
{ label: "rstrip" },
{ label: "shift" },
{ label: "size" },
{ label: "slice" },
{ label: "slugify" },
{ label: "sort" },
{ label: "sort_natural" },
{ label: "split" },
{ label: "strip" },
{ label: "strip_html" },
{ label: "strip_newlines" },
{ label: "sum" },
{ label: "times" },
{ label: "to_integer" },
{ label: "truncate" },
{ label: "truncatewords" },
{ label: "uniq" },
{ label: "unshift" },
{ label: "upcase" },
{ label: "uri_escape" },
{ label: "url_decode" },
{ label: "url_encode" },
{ label: "where" },
{ label: "where_exp" },
{ label: "xml_escape" },
];
const tags = [
{ label: "assign" },
{ label: "capture" },
{ label: "case" },
{ label: "comment" },
{ label: "cycle" },
{ label: "decrement" },
{ label: "echo" },
{ label: "else" },
{ label: "elsif" },
{ label: "for" },
{ label: "if" },
{ label: "include" },
{ label: "increment" },
{ label: "layout" },
{ label: "liquid" },
{ label: "raw" },
{ label: "render" },
{ label: "tablerow" },
{ label: "unless" },
{ label: "when" },
];
export function LiquidJsEditor({ editable, ...props }: CodeEditorProps) {
return (
<Suspense fallback={null}>
<CodeEditor
className={twMerge(
"flex w-full border border-muted bg-white rounded-lg",
!editable && "opacity-70",
)}
editable={editable}
_extensions={{
liquid: { filters, tags },
}}
{...props}
/>
</Suspense>
);
}

6
app/src/ui/components/form/json-schema/fields/LiquidJsField.tsx → app/src/ui/components/form/json-schema/fields/HtmlField.tsx
View File

@@ -1,9 +1,9 @@
import type { FieldProps } from "@rjsf/utils";
import { LiquidJsEditor } from "../../../code/LiquidJsEditor";
import { Label } from "../templates/FieldTemplate";
import { HtmlEditor } from "ui/components/code/HtmlEditor";
// @todo: move editor to lazy loading component
export default function LiquidJsField({
export default function HtmlField({
formData,
onChange,
disabled,
@@ -20,7 +20,7 @@ export default function LiquidJsField({
return (
<div className="flex flex-col gap-2">
<Label label={props.name} id={id} />
<LiquidJsEditor value={formData} editable={!isDisabled} onChange={handleChange} />
<HtmlEditor value={formData} editable={!isDisabled} onChange={handleChange} />
</div>
);
}

4
app/src/ui/components/form/json-schema/fields/index.ts
View File

@@ -1,10 +1,10 @@
import JsonField from "./JsonField";
import LiquidJsField from "./LiquidJsField";
import MultiSchemaField from "./MultiSchemaField";
import HtmlField from "./HtmlField";
export const fields = {
AnyOfField: MultiSchemaField,
OneOfField: MultiSchemaField,
JsonField,
LiquidJsField,
HtmlField,
};

6
app/src/ui/components/form/json-schema/templates/BaseInputTemplate.tsx
View File

@@ -55,7 +55,7 @@ export default function BaseInputTemplate<
...getInputProps<T, S, F>(schema, type, options),
};
let inputValue;
let inputValue: any;
if (inputProps.type === "number" || inputProps.type === "integer") {
inputValue = value || value === 0 ? value : "";
} else {
@@ -68,11 +68,11 @@ export default function BaseInputTemplate<
[onChange, options],
);
const _onBlur = useCallback(
({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value),
({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target?.value),
[onBlur, id],
);
const _onFocus = useCallback(
({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target?.value),
[onFocus, id],
);

40
app/src/ui/components/form/native-form/NativeForm.tsx
View File

@@ -28,6 +28,7 @@ export type NativeFormProps = {
ctx: { event: FormEvent<HTMLFormElement> },
) => Promise<void> | void;
onError?: (errors: InputError[]) => void;
disableSubmitOnError?: boolean;
onChange?: (
data: any,
ctx: { event: ChangeEvent<HTMLFormElement>; key: string; value: any; errors: InputError[] },
@@ -50,6 +51,7 @@ export function NativeForm({
onSubmitInvalid,
onError,
clean,
disableSubmitOnError = true,
...props
}: NativeFormProps) {
const formRef = useRef<HTMLFormElement>(null);
@@ -74,7 +76,7 @@ export function NativeForm({
onError?.(errors);
}, [errors]);
const validateElement = useEvent((el: InputElement | null, opts?: { report?: boolean }) => {
const validateElement = (el: InputElement | null, opts?: { report?: boolean }) => {
if (props.noValidate || !el || !("name" in el)) return;
const errorElement = formRef.current?.querySelector(
errorFieldSelector?.(el.name) ?? `[data-role="input-error"][data-name="${el.name}"]`,
@@ -104,9 +106,9 @@ export function NativeForm({
}
return;
});
};
const validate = useEvent((opts?: { report?: boolean }) => {
const validate = (opts?: { report?: boolean }) => {
if (!formRef.current || props.noValidate) return [];
const errors: InputError[] = [];
@@ -118,10 +120,20 @@ export function NativeForm({
}
});
return errors;
});
if (disableSubmitOnError) {
formRef.current.querySelectorAll("[type=submit]").forEach((submit) => {
if (errors.length > 0) {
submit.setAttribute("disabled", "disabled");
} else {
submit.removeAttribute("disabled");
}
});
}
const getFormValues = useEvent(() => {
return errors;
};
const getFormValues = () => {
if (!formRef.current) return {};
const formData = new FormData(formRef.current);
@@ -148,15 +160,15 @@ export function NativeForm({
if (typeof clean === "undefined") return obj;
return cleanObject(obj, clean === true ? undefined : clean);
});
};
const handleChange = useEvent(async (e: ChangeEvent<HTMLFormElement>) => {
const handleChange = async (e: ChangeEvent<HTMLFormElement>) => {
const form = formRef.current;
if (!form) return;
const target = getFormTarget(e);
if (!target) return;
if (validateOn === "change") {
if (validateOn === "change" || errors.length > 0) {
validateElement(target, { report: true });
}
@@ -168,9 +180,9 @@ export function NativeForm({
errors,
});
}
});
};
const handleSubmit = useEvent(async (e: FormEvent<HTMLFormElement>) => {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const form = formRef.current;
if (!form) return;
@@ -186,9 +198,9 @@ export function NativeForm({
} else {
form.submit();
}
});
};
const handleKeyDown = useEvent((e: KeyboardEvent) => {
const handleKeyDown = (e: KeyboardEvent) => {
if (!formRef.current) return;
// if is enter key, submit is disabled, report errors
@@ -198,7 +210,7 @@ export function NativeForm({
formRef.current.reportValidity();
}
}
});
};
return (
<form

3
app/src/ui/elements/auth/AuthForm.tsx
View File

@@ -1,6 +1,5 @@
import type { AppAuthOAuthStrategy, AppAuthSchema } from "auth/auth-schema";
import clsx from "clsx";
import { Type } from "core/utils";
import { Form } from "json-schema-form-react";
import { transform } from "lodash-es";
import type { ComponentPropsWithoutRef } from "react";
@@ -10,6 +9,8 @@ import { SocialLink } from "./SocialLink";
import type { ValueError } from "@sinclair/typebox/value";
import { type TSchema, Value } from "core/utils";
import type { Validator } from "json-schema-form-react";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
class TypeboxValidator implements Validator<ValueError> {
async validate(schema: TSchema, data: any) {

466
app/src/ui/elements/media/Dropzone.tsx
View File

@@ -1,20 +1,21 @@
import type { DB } from "core";
import {
type ComponentPropsWithRef,
type ComponentPropsWithoutRef,
createContext,
type ReactNode,
type RefObject,
memo,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { TbDots, TbExternalLink, TbTrash, TbUpload } from "react-icons/tb";
import { twMerge } from "tailwind-merge";
import { IconButton } from "ui/components/buttons/IconButton";
import { Dropdown, type DropdownItem } from "ui/components/overlay/Dropdown";
import { type FileWithPath, useDropzone } from "./use-dropzone";
import { formatNumber } from "core/utils";
import { checkMaxReached } from "./helper";
import { DropzoneInner } from "./DropzoneInner";
import { createDropzoneStore } from "ui/elements/media/dropzone-state";
import { useStore } from "zustand";
export type FileState = {
body: FileWithPath | string;
@@ -29,27 +30,23 @@ export type FileState = {
export type FileStateWithData = FileState & { data: DB["media"] };
export type DropzoneRenderProps = {
store: ReturnType<typeof createDropzoneStore>;
wrapperRef: RefObject<HTMLDivElement | null>;
inputProps: ComponentPropsWithRef<"input">;
state: {
files: FileState[];
isOver: boolean;
isOverAccepted: boolean;
showPlaceholder: boolean;
};
actions: {
uploadFile: (file: FileState) => Promise<void>;
deleteFile: (file: FileState) => Promise<void>;
uploadFile: (file: { path: string }) => Promise<void>;
deleteFile: (file: { path: string }) => Promise<void>;
openFileInput: () => void;
};
onClick?: (file: FileState) => void;
showPlaceholder: boolean;
onClick?: (file: { path: string }) => void;
footer?: ReactNode;
dropzoneProps: Pick<DropzoneProps, "maxItems" | "placeholder" | "autoUpload" | "flow">;
};
export type DropzoneProps = {
getUploadInfo: (file: FileWithPath) => { url: string; headers?: Headers; method?: string };
handleDelete: (file: FileState) => Promise<boolean>;
getUploadInfo: (file: { path: string }) => { url: string; headers?: Headers; method?: string };
handleDelete: (file: { path: string }) => Promise<boolean>;
initialItems?: FileState[];
flow?: "start" | "end";
maxItems?: number;
@@ -57,7 +54,7 @@ export type DropzoneProps = {
overwrite?: boolean;
autoUpload?: boolean;
onRejected?: (files: FileWithPath[]) => void;
onDeleted?: (file: FileState) => void;
onDeleted?: (file: { path: string }) => void;
onUploaded?: (files: FileStateWithData[]) => void;
onClick?: (file: FileState) => void;
placeholder?: {
@@ -65,7 +62,7 @@ export type DropzoneProps = {
text?: string;
};
footer?: ReactNode;
children?: (props: DropzoneRenderProps) => ReactNode;
children?: ReactNode | ((props: DropzoneRenderProps) => ReactNode);
};
function handleUploadError(e: unknown) {
@@ -94,30 +91,21 @@ export function Dropzone({
onClick,
footer,
}: DropzoneProps) {
const [files, setFiles] = useState<FileState[]>(initialItems);
const [uploading, setUploading] = useState<boolean>(false);
const store = useRef(createDropzoneStore()).current;
const files = useStore(store, (state) => state.files);
const setFiles = useStore(store, (state) => state.setFiles);
const getFilesLength = useStore(store, (state) => state.getFilesLength);
const setUploading = useStore(store, (state) => state.setUploading);
const setIsOver = useStore(store, (state) => state.setIsOver);
const uploading = useStore(store, (state) => state.uploading);
const setFileState = useStore(store, (state) => state.setFileState);
const removeFile = useStore(store, (state) => state.removeFile);
const inputRef = useRef<HTMLInputElement>(null);
const [isOverAccepted, setIsOverAccepted] = useState(false);
function isMaxReached(added: number): boolean {
if (!maxItems) {
console.log("maxItems is undefined, never reached");
return false;
}
const current = files.length;
const remaining = maxItems - current;
console.log("isMaxReached", { added, current, remaining, maxItems, overwrite });
// if overwrite is set, but added is bigger than max items
if (overwrite) {
console.log("added > maxItems, stop?", added > maxItems);
return added > maxItems;
}
console.log("remaining > added, stop?", remaining > added);
// or remaining doesn't suffice, stop
return added > remaining;
}
useEffect(() => {
// @todo: potentially keep pending ones
setFiles(() => initialItems);
}, [initialItems.length]);
function isAllowed(i: DataTransferItem | DataTransferItem[] | File | File[]): boolean {
const items = Array.isArray(i) ? i : [i];
@@ -135,31 +123,41 @@ export function Dropzone({
});
}
const { isOver, handleFileInputChange, ref } = useDropzone({
const { handleFileInputChange, ref } = useDropzone({
onDropped: (newFiles: FileWithPath[]) => {
console.log("onDropped", newFiles);
if (!isAllowed(newFiles)) return;
let to_drop = 0;
const added = newFiles.length;
if (maxItems) {
if (isMaxReached(added)) {
if (onRejected) {
onRejected(newFiles);
} else {
console.warn("maxItems reached");
// Check max files using the current state, not a stale closure
setFiles((currentFiles) => {
let to_drop = 0;
if (maxItems) {
const $max = checkMaxReached({
maxItems,
overwrite,
added,
current: currentFiles.length,
});
if ($max.reject) {
if (onRejected) {
onRejected(newFiles);
} else {
console.warn("maxItems reached");
}
// Return current state unchanged if rejected
return currentFiles;
}
return;
to_drop = $max.to_drop;
}
to_drop = added;
}
console.log("files", newFiles, { to_drop });
setFiles((prev) => {
// drop amount calculated
const _prev = prev.slice(to_drop);
const _prev = currentFiles.slice(to_drop);
// prep new files
const currentPaths = _prev.map((f) => f.path);
@@ -175,24 +173,35 @@ export function Dropzone({
progress: 0,
}));
return flow === "start" ? [...filteredFiles, ..._prev] : [..._prev, ...filteredFiles];
});
const updatedFiles =
flow === "start" ? [...filteredFiles, ..._prev] : [..._prev, ...filteredFiles];
if (autoUpload) {
setUploading(true);
}
if (autoUpload && filteredFiles.length > 0) {
// Schedule upload for the next tick to ensure state is updated
setTimeout(() => setUploading(true), 0);
}
return updatedFiles;
});
},
onOver: (items) => {
if (!isAllowed(items)) {
setIsOverAccepted(false);
setIsOver(true, false);
return;
}
const max_reached = isMaxReached(items.length);
setIsOverAccepted(!max_reached);
const current = getFilesLength();
const $max = checkMaxReached({
maxItems,
overwrite,
added: items.length,
current,
});
console.log("--files in onOver", current, $max);
setIsOver(true, !$max.reject);
},
onLeave: () => {
setIsOverAccepted(false);
setIsOver(false, false);
},
});
@@ -223,40 +232,6 @@ export function Dropzone({
}
}, [uploading]);
function setFileState(path: string, state: FileState["state"], progress?: number) {
setFiles((prev) =>
prev.map((f) => {
//console.log("compare", f.path, path, f.path === path);
if (f.path === path) {
return {
...f,
state,
progress: progress ?? f.progress,
};
}
return f;
}),
);
}
function replaceFileState(prevPath: string, newState: Partial<FileState>) {
setFiles((prev) =>
prev.map((f) => {
if (f.path === prevPath) {
return {
...f,
...newState,
};
}
return f;
}),
);
}
function removeFileFromState(path: string) {
setFiles((prev) => prev.filter((f) => f.path !== path));
}
function uploadFileProgress(file: FileState): Promise<FileStateWithData> {
return new Promise((resolve, reject) => {
if (!file.body) {
@@ -273,7 +248,7 @@ export function Dropzone({
return;
}
const uploadInfo = getUploadInfo(file.body);
const uploadInfo = getUploadInfo({ path: file.body.path! });
console.log("dropzone:uploadInfo", uploadInfo);
const { url, headers, method = "POST" } = uploadInfo;
@@ -322,7 +297,7 @@ export function Dropzone({
state: "uploaded",
};
replaceFileState(file.path, newState);
setFileState(file.path, newState.state);
resolve({ ...response, ...file, ...newState });
} catch (e) {
setFileState(file.path, "uploaded", 1);
@@ -349,7 +324,7 @@ export function Dropzone({
});
}
async function deleteFile(file: FileState) {
const deleteFile = useCallback(async (file: FileState) => {
console.log("deleteFile", file);
switch (file.state) {
case "uploaded":
@@ -358,232 +333,97 @@ export function Dropzone({
console.log('setting state to "deleting"', file);
setFileState(file.path, "deleting");
await handleDelete(file);
removeFileFromState(file.path);
removeFile(file.path);
onDeleted?.(file);
}
break;
}
}
}, []);
async function uploadFile(file: FileState) {
const uploadFile = useCallback(async (file: FileState) => {
const result = await uploadFileProgress(file);
onUploaded?.([result]);
}
}, []);
const openFileInput = () => inputRef.current?.click();
const showPlaceholder = Boolean(
placeholder?.show === true || !maxItems || (maxItems && files.length < maxItems),
const openFileInput = useCallback(() => inputRef.current?.click(), [inputRef]);
const showPlaceholder = useMemo(
() =>
Boolean(placeholder?.show === true || !maxItems || (maxItems && files.length < maxItems)),
[placeholder, maxItems, files.length],
);
const renderProps: DropzoneRenderProps = {
wrapperRef: ref,
inputProps: {
ref: inputRef,
type: "file",
multiple: !maxItems || maxItems > 1,
onChange: handleFileInputChange,
},
state: {
files,
isOver,
isOverAccepted,
const renderProps = useMemo(
() => ({
store,
wrapperRef: ref,
inputProps: {
ref: inputRef,
type: "file",
multiple: !maxItems || maxItems > 1,
onChange: handleFileInputChange,
},
showPlaceholder,
},
actions: {
uploadFile,
deleteFile,
openFileInput,
},
dropzoneProps: {
maxItems,
placeholder,
autoUpload,
flow,
},
onClick,
footer,
};
actions: {
uploadFile,
deleteFile,
openFileInput,
},
dropzoneProps: {
maxItems,
placeholder,
autoUpload,
flow,
},
onClick,
footer,
}),
[maxItems, flow, placeholder, autoUpload, footer],
) as unknown as DropzoneRenderProps;
return children ? children(renderProps) : <DropzoneInner {...renderProps} />;
return (
<DropzoneContext.Provider value={renderProps}>
{children ? (
typeof children === "function" ? (
children(renderProps)
) : (
children
)
) : (
<DropzoneInner {...renderProps} />
)}
</DropzoneContext.Provider>
);
}
const DropzoneInner = ({
wrapperRef,
inputProps,
state: { files, isOver, isOverAccepted, showPlaceholder },
actions: { uploadFile, deleteFile, openFileInput },
dropzoneProps: { placeholder, flow },
onClick,
footer,
}: DropzoneRenderProps) => {
const Placeholder = showPlaceholder && (
<UploadPlaceholder onClick={openFileInput} text={placeholder?.text} />
);
const DropzoneContext = createContext<DropzoneRenderProps>(undefined!);
async function uploadHandler(file: FileState) {
try {
return await uploadFile(file);
} catch (e) {
handleUploadError(e);
}
}
export function useDropzoneContext() {
return useContext(DropzoneContext);
}
return (
<div
ref={wrapperRef}
className={twMerge(
"dropzone w-full h-full align-start flex flex-col select-none",
isOver && isOverAccepted && "bg-green-200/10",
isOver && !isOverAccepted && "bg-red-200/40 cursor-not-allowed",
)}
>
<div className="hidden">
<input {...inputProps} />
</div>
<div className="flex flex-1 flex-col">
<div className="flex flex-row flex-wrap gap-2 md:gap-3">
{flow === "start" && Placeholder}
{files.map((file) => (
<Preview
key={file.path}
file={file}
handleUpload={uploadHandler}
handleDelete={deleteFile}
onClick={onClick}
/>
))}
{flow === "end" && Placeholder}
{footer}
</div>
</div>
</div>
);
export const useDropzoneState = () => {
const { store } = useDropzoneContext();
const files = useStore(store, (state) => state.files);
const isOver = useStore(store, (state) => state.isOver);
const isOverAccepted = useStore(store, (state) => state.isOverAccepted);
return {
files,
isOver,
isOverAccepted,
};
};
const UploadPlaceholder = ({ onClick, text = "Upload files" }) => {
return (
<div
className="w-[49%] aspect-square md:w-60 flex flex-col border-2 border-dashed border-muted relative justify-center items-center text-primary/30 hover:border-primary/30 hover:text-primary/50 hover:cursor-pointer hover:bg-muted/20 transition-colors duration-200"
onClick={onClick}
>
<span className="">{text}</span>
</div>
);
};
export type PreviewComponentProps = {
file: FileState;
fallback?: (props: { file: FileState }) => ReactNode;
className?: string;
onClick?: () => void;
onTouchStart?: () => void;
};
const Wrapper = ({ file, fallback, ...props }: PreviewComponentProps) => {
if (file.type.startsWith("image/")) {
return <ImagePreview {...props} file={file} />;
}
if (file.type.startsWith("video/")) {
return <VideoPreview {...props} file={file} />;
}
return fallback ? fallback({ file }) : null;
};
export const PreviewWrapperMemoized = memo(
Wrapper,
(prev, next) => prev.file.path === next.file.path,
);
type PreviewProps = {
file: FileState;
handleUpload: (file: FileState) => Promise<void>;
handleDelete: (file: FileState) => Promise<void>;
onClick?: (file: FileState) => void;
};
const Preview = ({ file, handleUpload, handleDelete, onClick }: PreviewProps) => {
const dropdownItems = [
file.state === "uploaded" &&
typeof file.body === "string" && {
label: "Open",
icon: TbExternalLink,
onClick: () => {
window.open(file.body as string, "_blank");
},
},
["initial", "uploaded"].includes(file.state) && {
label: "Delete",
destructive: true,
icon: TbTrash,
onClick: () => handleDelete(file),
},
["initial", "pending"].includes(file.state) && {
label: "Upload",
icon: TbUpload,
onClick: () => handleUpload(file),
},
] satisfies (DropdownItem | boolean)[];
return (
<div
className={twMerge(
"w-[49%] md:w-60 aspect-square flex flex-col border border-muted relative hover:bg-primary/5 cursor-pointer transition-colors",
file.state === "failed" && "border-red-500 bg-red-200/20",
file.state === "deleting" && "opacity-70",
)}
onClick={() => {
if (onClick) {
onClick(file);
}
}}
>
<div className="absolute top-2 right-2">
<Dropdown items={dropdownItems} position="bottom-end">
<IconButton Icon={TbDots} />
</Dropdown>
</div>
{file.state === "uploading" && (
<div className="absolute w-full top-0 left-0 right-0 h-1">
<div
className="bg-blue-600 h-1 transition-all duration-75"
style={{ width: (file.progress * 100).toFixed(0) + "%" }}
/>
</div>
)}
<div className="flex bg-primary/5 aspect-[1/0.78] overflow-hidden items-center justify-center">
<PreviewWrapperMemoized
file={file}
fallback={FallbackPreview}
className="max-w-full max-h-full"
/>
</div>
<div className="flex flex-col px-1.5 py-1">
<p className="truncate select-text">{file.name}</p>
<div className="flex flex-row justify-between text-sm font-mono opacity-50 text-nowrap gap-2">
<span className="truncate select-text">{file.type}</span>
<span>{formatNumber.fileSize(file.size)}</span>
</div>
</div>
</div>
);
};
const ImagePreview = ({
file,
...props
}: { file: FileState } & ComponentPropsWithoutRef<"img">) => {
const objectUrl = typeof file.body === "string" ? file.body : URL.createObjectURL(file.body);
return <img {...props} src={objectUrl} />;
};
const VideoPreview = ({
file,
...props
}: { file: FileState } & ComponentPropsWithoutRef<"video">) => {
const objectUrl = typeof file.body === "string" ? file.body : URL.createObjectURL(file.body);
return <video {...props} src={objectUrl} />;
};
const FallbackPreview = ({ file }: { file: FileState }) => {
return <div className="text-xs text-primary/50 text-center">{file.type}</div>;
export const useDropzoneFileState = <R = any>(
pathOrFile: string | FileState,
selector: (file: FileState) => R,
): R | undefined => {
const { store } = useDropzoneContext();
return useStore(store, (state) => {
const file =
typeof pathOrFile === "string"
? state.files.find((f) => f.path === pathOrFile)
: state.files.find((f) => f.path === pathOrFile.path);
return file ? selector(file) : undefined;
});
};

52
app/src/ui/elements/media/DropzoneContainer.tsx
View File

@@ -2,23 +2,14 @@ import type { Api } from "bknd/client";
import type { RepoQueryIn } from "data";
import type { MediaFieldSchema } from "media/AppMedia";
import type { TAppMediaConfig } from "media/media-schema";
import {
type ReactNode,
createContext,
useContext,
useId,
useEffect,
useRef,
useState,
} from "react";
import { useId, useEffect, useRef, useState } from "react";
import { useApi, useApiInfiniteQuery, useApiQuery, useInvalidate } from "ui/client";
import { useEvent } from "ui/hooks/use-event";
import { Dropzone, type DropzoneProps, type DropzoneRenderProps, type FileState } from "./Dropzone";
import { Dropzone, type DropzoneProps } from "./Dropzone";
import { mediaItemsToFileStates } from "./helper";
import { useInViewport } from "@mantine/hooks";
export type DropzoneContainerProps = {
children?: ReactNode;
initialItems?: MediaFieldSchema[] | false;
infinite?: boolean;
entity?: {
@@ -29,16 +20,13 @@ export type DropzoneContainerProps = {
media?: Pick<TAppMediaConfig, "entity_name" | "storage">;
query?: RepoQueryIn;
randomFilename?: boolean;
} & Omit<Partial<DropzoneProps>, "children" | "initialItems">;
const DropzoneContainerContext = createContext<DropzoneRenderProps>(undefined!);
} & Omit<Partial<DropzoneProps>, "initialItems">;
export function DropzoneContainer({
initialItems,
media,
entity,
query,
children,
randomFilename,
infinite = false,
...props
@@ -51,34 +39,28 @@ export function DropzoneContainer({
const defaultQuery = (page: number) => ({
limit: pageSize,
offset: page * pageSize,
sort: "-id",
});
const entity_name = (media?.entity_name ?? "media") as "media";
//console.log("dropzone:baseUrl", baseUrl);
const selectApi = (api: Api, page: number = 0) =>
entity
? api.data.readManyByReference(entity.name, entity.id, entity.field, {
...query,
where: {
reference: `${entity.name}.${entity.field}`,
entity_id: entity.id,
...query?.where,
},
...defaultQuery(page),
...query,
})
: api.data.readMany(entity_name, {
...query,
...defaultQuery(page),
...query,
});
const $q = infinite
? useApiInfiniteQuery(selectApi, {})
: useApiQuery(selectApi, {
enabled: initialItems !== false && !initialItems,
revalidateOnFocus: false,
});
const getUploadInfo = useEvent((file) => {
const getUploadInfo = useEvent((file: { path: string }) => {
const url = entity
? api.media.getEntityUploadUrl(entity.name, entity.id, entity.field)
: api.media.getFileUploadUrl(randomFilename ? undefined : file);
@@ -94,7 +76,7 @@ export function DropzoneContainer({
await invalidate($q.promise.key({ search: false }));
});
const handleDelete = useEvent(async (file: FileState) => {
const handleDelete = useEvent(async (file: { path: string }) => {
return api.media.deleteFile(file.path);
});
@@ -109,8 +91,8 @@ export function DropzoneContainer({
key={id + key}
getUploadInfo={getUploadInfo}
handleDelete={handleDelete}
onUploaded={refresh}
onDeleted={refresh}
/* onUploaded={refresh}
onDeleted={refresh} */
autoUpload
initialItems={_initialItems}
footer={
@@ -127,15 +109,7 @@ export function DropzoneContainer({
)
}
{...props}
>
{children
? (props) => (
<DropzoneContainerContext.Provider value={props}>
{children}
</DropzoneContainerContext.Provider>
)
: undefined}
</Dropzone>
/>
);
}
@@ -164,7 +138,3 @@ const Footer = ({ items = 0, length = 0, onFirstVisible }) => {
/>
));
};
export function useDropzone() {
return useContext(DropzoneContainerContext);
}

276
app/src/ui/elements/media/DropzoneInner.tsx Normal file
View File

@@ -0,0 +1,276 @@
import { type ComponentPropsWithoutRef, memo, type ReactNode, useCallback, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { useRenderCount } from "ui/hooks/use-render-count";
import { TbDots, TbExternalLink, TbTrash, TbUpload } from "react-icons/tb";
import { Dropdown, type DropdownItem } from "ui/components/overlay/Dropdown";
import { IconButton } from "ui/components/buttons/IconButton";
import { formatNumber } from "core/utils";
import type { DropzoneRenderProps, FileState } from "ui/elements";
import { useDropzoneFileState, useDropzoneState } from "./Dropzone";
function handleUploadError(e: unknown) {
if (e && e instanceof XMLHttpRequest) {
const res = JSON.parse(e.responseText) as any;
alert(`Upload failed with code ${e.status}: ${res.error}`);
} else {
alert("Upload failed");
}
}
export const DropzoneInner = ({
wrapperRef,
inputProps,
showPlaceholder,
actions: { uploadFile, deleteFile, openFileInput },
dropzoneProps: { placeholder, flow },
onClick,
footer,
}: DropzoneRenderProps) => {
const { files, isOver, isOverAccepted } = useDropzoneState();
const Placeholder = showPlaceholder && (
<UploadPlaceholder onClick={openFileInput} text={placeholder?.text} />
);
const uploadHandler = useCallback(
async (file: { path: string }) => {
try {
return await uploadFile(file);
} catch (e) {
handleUploadError(e);
}
},
[uploadFile],
);
return (
<div
ref={wrapperRef}
className={twMerge(
"dropzone w-full h-full align-start flex flex-col select-none",
isOver && isOverAccepted && "bg-green-200/10",
isOver && !isOverAccepted && "bg-red-200/40 cursor-not-allowed",
)}
>
<div className="hidden">
<input {...inputProps} />
</div>
<div className="flex flex-1 flex-col">
<div className="flex flex-row flex-wrap gap-2 md:gap-3">
{flow === "start" && Placeholder}
{files.map((file) => (
<Preview
key={file.path}
file={file}
handleUpload={uploadHandler}
handleDelete={deleteFile}
onClick={onClick}
/>
))}
{flow === "end" && Placeholder}
{footer}
</div>
</div>
</div>
);
};
const UploadPlaceholder = ({ onClick, text = "Upload files" }) => {
return (
<div
className="w-[49%] aspect-square md:w-60 flex flex-col border-2 border-dashed border-muted relative justify-center items-center text-primary/30 hover:border-primary/30 hover:text-primary/50 hover:cursor-pointer hover:bg-muted/20 transition-colors duration-200"
onClick={onClick}
>
<span className="">{text}</span>
</div>
);
};
type ReducedFile = Pick<FileState, "body" | "type" | "path" | "name" | "size">;
export type PreviewComponentProps = {
file: ReducedFile;
fallback?: (props: { file: ReducedFile }) => ReactNode;
className?: string;
onClick?: () => void;
onTouchStart?: () => void;
};
const Wrapper = ({ file, fallback, ...props }: PreviewComponentProps) => {
if (file.type.startsWith("image/")) {
return <ImagePreview {...props} file={file} />;
}
if (file.type.startsWith("video/")) {
return <VideoPreview {...props} file={file} />;
}
return fallback ? fallback({ file }) : null;
};
export const PreviewWrapperMemoized = memo(
Wrapper,
(prev, next) => prev.file.path === next.file.path,
);
type PreviewProps = {
file: FileState;
handleUpload: (file: FileState) => Promise<void>;
handleDelete: (file: FileState) => Promise<void>;
onClick?: (file: { path: string }) => void;
};
const Preview = memo(
({ file: _file, handleUpload, handleDelete, onClick }: PreviewProps) => {
const rcount = useRenderCount();
const file = useDropzoneFileState(_file, (file) => {
const { progress, ...rest } = file;
return rest;
});
if (!file) return null;
const onClickHandler = useCallback(() => {
if (onClick) {
onClick(file);
}
}, [onClick, file.path]);
return (
<div
className={twMerge(
"w-[49%] md:w-60 aspect-square flex flex-col border border-muted relative hover:bg-primary/5 cursor-pointer transition-colors",
file.state === "failed" && "border-red-500 bg-red-200/20",
file.state === "deleting" && "opacity-70",
)}
onClick={onClickHandler}
>
<div className="absolute top-2 right-2">
<PreviewDropdown
file={file as any}
handleDelete={handleDelete}
handleUpload={handleUpload}
/>
</div>
<PreviewUploadProgress file={file} />
<div className="flex bg-primary/5 aspect-[1/0.78] overflow-hidden items-center justify-center">
<PreviewWrapperMemoized
file={file}
fallback={FallbackPreview}
className="max-w-full max-h-full"
/>
</div>
<div className="flex flex-col px-1.5 py-1">
<div className="flex flex-row gap-2 items-center">
<p className="truncate select-text w-[calc(100%-10px)]">{file.name}</p>
<StateIndicator file={file} />
</div>
<div className="flex flex-row justify-between text-sm font-mono opacity-50 text-nowrap gap-2">
<span className="truncate select-text">{file.type}</span>
<span>{formatNumber.fileSize(file.size)}</span>
</div>
</div>
</div>
);
},
(prev, next) => prev.file.path === next.file.path && prev.file.state === next.file.state,
);
const PreviewUploadProgress = ({ file: _file }: { file: { path: string } }) => {
const fileState = useDropzoneFileState(_file.path, (file) => ({
state: file.state,
progress: file.progress,
}));
if (!fileState) return null;
if (fileState.state !== "uploading") return null;
return (
<div className="absolute w-full top-0 left-0 right-0 h-1">
<div
className="bg-blue-600 h-1 transition-all duration-75"
style={{ width: (fileState.progress * 100).toFixed(0) + "%" }}
/>
</div>
);
};
const PreviewDropdown = memo(
({
file: _file,
handleDelete,
handleUpload,
}: {
file: FileState;
handleDelete: (file: FileState) => Promise<void>;
handleUpload: (file: FileState) => Promise<void>;
}) => {
const file = useDropzoneFileState(_file.path, (file) => {
const { progress, ...rest } = file;
return rest;
});
if (!file) return null;
const dropdownItems = useMemo(
() =>
[
file.state === "uploaded" &&
typeof file.body === "string" && {
label: "Open",
icon: TbExternalLink,
onClick: () => {
window.open(file.body as string, "_blank");
},
},
["initial", "uploaded"].includes(file.state) && {
label: "Delete",
destructive: true,
icon: TbTrash,
onClick: () => handleDelete(file as any),
},
["initial", "pending"].includes(file.state) && {
label: "Upload",
icon: TbUpload,
onClick: () => handleUpload(file as any),
},
] satisfies (DropdownItem | boolean)[],
[file, handleDelete, handleUpload],
);
return (
<Dropdown items={dropdownItems} position="bottom-end">
<IconButton Icon={TbDots} />
</Dropdown>
);
},
(prev, next) => prev.file.path === next.file.path,
);
const StateIndicator = ({ file: _file }: { file: { path: string } }) => {
const fileState = useDropzoneFileState(_file.path, (file) => file.state);
if (!fileState) return null;
if (fileState === "uploaded") {
return null;
}
const color =
{
failed: "bg-red-500",
deleting: "bg-orange-500 animate-pulse",
uploading: "bg-blue-500 animate-pulse",
}[fileState] ?? "bg-primary/50";
return <div className={"w-2 h-2 rounded-full mt-px " + color} title={fileState} />;
};
const ImagePreview = ({
file,
...props
}: { file: ReducedFile } & ComponentPropsWithoutRef<"img">) => {
const objectUrl = typeof file.body === "string" ? file.body : URL.createObjectURL(file.body);
return <img {...props} src={objectUrl} />;
};
const VideoPreview = ({
file,
...props
}: { file: ReducedFile } & ComponentPropsWithoutRef<"video">) => {
const objectUrl = typeof file.body === "string" ? file.body : URL.createObjectURL(file.body);
return <video {...props} src={objectUrl} />;
};
const FallbackPreview = ({ file }: { file: ReducedFile }) => {
return <div className="text-xs text-primary/50 text-center">{file.type}</div>;
};

42
app/src/ui/elements/media/dropzone-state.ts Normal file
View File

@@ -0,0 +1,42 @@
import { createStore } from "zustand";
import { combine } from "zustand/middleware";
import type { FileState } from "./Dropzone";
export const createDropzoneStore = () => {
return createStore(
combine(
{
files: [] as FileState[],
isOver: false,
isOverAccepted: false,
uploading: false,
},
(set, get) => ({
setFiles: (fn: (files: FileState[]) => FileState[]) =>
set(({ files }) => ({ files: fn(files) })),
getFilesLength: () => get().files.length,
setIsOver: (isOver: boolean, isOverAccepted: boolean) =>
set({ isOver, isOverAccepted }),
setUploading: (uploading: boolean) => set({ uploading }),
setIsOverAccepted: (isOverAccepted: boolean) => set({ isOverAccepted }),
reset: () => set({ files: [], isOver: false, isOverAccepted: false }),
addFile: (file: FileState) => set((state) => ({ files: [...state.files, file] })),
removeFile: (path: string) =>
set((state) => ({ files: state.files.filter((f) => f.path !== path) })),
removeAllFiles: () => set({ files: [] }),
setFileProgress: (path: string, progress: number) =>
set((state) => ({
files: state.files.map((f) => (f.path === path ? { ...f, progress } : f)),
})),
setFileState: (path: string, newState: FileState["state"], progress?: number) =>
set((state) => ({
files: state.files.map((f) =>
f.path === path
? { ...f, state: newState, progress: progress ?? f.progress }
: f,
),
})),
}),
),
);
};

63
app/src/ui/elements/media/helper.spec.ts Normal file
View File

@@ -0,0 +1,63 @@
import { describe, test, expect } from "bun:test";
import { checkMaxReached } from "./helper";
describe("media helper", () => {
test("checkMaxReached", () => {
expect(
checkMaxReached({
added: 1,
}),
).toEqual({ reject: false, to_drop: 0 });
expect(
checkMaxReached({
maxItems: 1,
added: 1,
}),
).toEqual({ reject: false, to_drop: 0 });
expect(
checkMaxReached({
maxItems: 1,
added: 2,
}),
).toEqual({ reject: true, to_drop: 2 });
expect(
checkMaxReached({
maxItems: 2,
overwrite: true,
added: 4,
}),
).toEqual({ reject: true, to_drop: 4 });
expect(
checkMaxReached({
maxItems: 2,
current: 2,
overwrite: true,
added: 2,
}),
).toEqual({ reject: false, to_drop: 2 });
expect(
checkMaxReached({
maxItems: 6,
current: 5,
overwrite: true,
added: 1,
}),
).toEqual({ reject: false, to_drop: 0 });
expect(
checkMaxReached({
maxItems: 6,
current: 6,
overwrite: true,
added: 1,
}),
).toEqual({ reject: false, to_drop: 1 });
console.log(
checkMaxReached({
maxItems: 6,
current: 0,
overwrite: true,
added: 1,
}),
);
});
});

23
app/src/ui/elements/media/helper.ts
View File

@@ -29,3 +29,26 @@ export function mediaItemsToFileStates(
): FileState[] {
return items.map((item) => mediaItemToFileState(item, options));
}
export function checkMaxReached({
maxItems,
current = 0,
overwrite,
added,
}: { maxItems?: number; current?: number; overwrite?: boolean; added: number }) {
if (!maxItems) {
return {
reject: false,
to_drop: 0,
};
}
const remaining = maxItems - current;
const to_drop = added > remaining ? added : added - remaining > 0 ? added - remaining : 0;
const reject = overwrite ? added > maxItems : remaining - added < 0;
return {
reject,
to_drop,
};
}

24
app/src/ui/elements/media/index.ts
View File

@@ -1,19 +1,21 @@
import { PreviewWrapperMemoized } from "./Dropzone";
import { DropzoneContainer, useDropzone } from "./DropzoneContainer";
import { PreviewWrapperMemoized } from "./DropzoneInner";
import { DropzoneContainer } from "./DropzoneContainer";
import { useDropzoneContext, useDropzoneFileState, useDropzoneState } from "./Dropzone";
export const Media = {
Dropzone: DropzoneContainer,
Preview: PreviewWrapperMemoized,
useDropzone: useDropzone,
useDropzone: useDropzoneContext,
useDropzoneState,
useDropzoneFileState,
};
export { useDropzone as useMediaDropzone };
export {
useDropzoneContext as useMediaDropzone,
useDropzoneState as useMediaDropzoneState,
useDropzoneFileState as useMediaDropzoneFileState,
};
export type {
PreviewComponentProps,
FileState,
FileStateWithData,
DropzoneProps,
DropzoneRenderProps,
} from "./Dropzone";
export type { FileState, FileStateWithData, DropzoneProps, DropzoneRenderProps } from "./Dropzone";
export type { PreviewComponentProps } from "./DropzoneInner";
export type { DropzoneContainerProps } from "./DropzoneContainer";

7
app/src/ui/hooks/use-render-count.ts Normal file
View File

@@ -0,0 +1,7 @@
import { useRef } from "react";
export function useRenderCount() {
const count = useRef(0);
count.current++;
return count.current;
}

1
app/src/ui/hooks/use-search.ts
View File

@@ -2,7 +2,6 @@ import {
type Static,
type StaticDecode,
type TSchema,
Type,
decodeSearch,
encodeSearch,
parseDecode,

3
app/src/ui/modules/data/components/EntityForm.tsx
View File

@@ -257,6 +257,9 @@ function EntityMediaFormField({
id: entityId,
field: field.name,
}}
query={{
sort: "-id",
}}
/>
</Formy.Group>
);

20
app/src/ui/modules/data/components/canvas/EntityTableNode.tsx
View File

@@ -1,4 +1,4 @@
import { Handle, type Node, type NodeProps, Position, useReactFlow } from "@xyflow/react";
import { Handle, type Node, type NodeProps, Position } from "@xyflow/react";
import type { TAppDataEntity } from "data/data-schema";
import { useState } from "react";
@@ -24,8 +24,6 @@ function NodeComponent(props: NodeProps<Node<TAppDataEntity & { label: string }>
const { data } = props;
const fields = props.data.fields ?? {};
const field_count = Object.keys(fields).length;
//const flow = useReactFlow();
//const flow = useTestContext();
return (
<DefaultNode selected={props.selected}>
@@ -92,15 +90,13 @@ const TableRow = ({
<div className="flex opacity-60">{field.type}</div>
{handles && (
<>
<Handle
type="target"
title={handleId}
id={handleId}
position={Position.Right}
style={{ top: handleTop, right: -5, ...handleStyle }}
/>
</>
<Handle
type="target"
title={handleId}
id={handleId}
position={Position.Right}
style={{ top: handleTop, right: -5, ...handleStyle }}
/>
)}
</div>
);

4
app/src/ui/modules/data/components/schema/create-modal/CreateModal.tsx
View File

@@ -1,6 +1,6 @@
import type { ModalProps } from "@mantine/core";
import type { ContextModalProps } from "@mantine/modals";
import { type Static, StringEnum, StringIdentifier, Type } from "core/utils";
import { type Static, StringEnum, StringIdentifier } from "core/utils";
import { entitiesSchema, fieldsSchema, relationsSchema } from "data/data-schema";
import { useState } from "react";
import { type Modal2Ref, ModalBody, ModalFooter, ModalTitle } from "ui/components/modal/Modal2";
@@ -11,6 +11,8 @@ import { StepEntityFields } from "./step.entity.fields";
import { StepRelation } from "./step.relation";
import { StepSelect } from "./step.select";
import Templates from "./templates/register";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
export type CreateModalRef = Modal2Ref;

12
app/src/ui/modules/data/components/schema/create-modal/step.relation.tsx
View File

@@ -2,15 +2,9 @@ import { typeboxResolver } from "@hookform/resolvers/typebox";
import { Switch, TextInput } from "@mantine/core";
import { TypeRegistry } from "@sinclair/typebox";
import { IconDatabase } from "@tabler/icons-react";
import {
type Static,
StringEnum,
StringIdentifier,
Type,
registerCustomTypeboxKinds,
} from "core/utils";
import { type Static, StringEnum, StringIdentifier, registerCustomTypeboxKinds } from "core/utils";
import { ManyToOneRelation, type RelationType, RelationTypes } from "data";
import { type ReactNode, startTransition, useEffect } from "react";
import type { ReactNode } from "react";
import { type Control, type FieldValues, type UseFormRegister, useForm } from "react-hook-form";
import { TbRefresh } from "react-icons/tb";
import { useBknd } from "ui/client/bknd";
@@ -20,6 +14,8 @@ import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelec
import { useStepContext } from "ui/components/steps/Steps";
import { useEvent } from "ui/hooks/use-event";
import { ModalBody, ModalFooter, type TCreateModalSchema } from "./CreateModal";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
// @todo: check if this could become an issue
registerCustomTypeboxKinds(TypeRegistry);

11
app/src/ui/modules/data/components/schema/create-modal/templates/media/template.media.component.tsx
View File

@@ -1,13 +1,6 @@
import { typeboxResolver } from "@hookform/resolvers/typebox";
import { Radio, TextInput } from "@mantine/core";
import {
Default,
type Static,
StringEnum,
StringIdentifier,
Type,
transformObject,
} from "core/utils";
import { Default, type Static, StringEnum, StringIdentifier, transformObject } from "core/utils";
import type { MediaFieldConfig } from "media/MediaField";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@@ -22,6 +15,8 @@ import {
type TFieldCreate,
useStepContext,
} from "../../CreateModal";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
const schema = Type.Object({
entity: StringIdentifier,

4
app/src/ui/modules/flows/components/TriggerComponent.tsx
View File

@@ -1,9 +1,11 @@
import { Handle, type Node, type NodeProps, Position } from "@xyflow/react";
import { Const, Type, transformObject } from "core/utils";
import { Const, transformObject } from "core/utils";
import { type Trigger, TriggerMap } from "flows";
import type { IconType } from "react-icons";
import { TbCircleLetterT } from "react-icons/tb";
import { JsonSchemaForm } from "ui/components/form/json-schema";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
export type TaskComponentProps = NodeProps<Node<{ trigger: Trigger }>> & {
Icon?: IconType;

2
app/src/ui/modules/flows/components/tasks/RenderTaskComponent.tsx
View File

@@ -10,7 +10,7 @@ export function RenderTaskComponent(props: TaskComponentProps) {
onChange={console.log}
uiSchema={{
render: {
"ui:field": "LiquidJsField",
"ui:field": "HtmlField",
},
}}
/>

3
app/src/ui/modules/flows/components2/nodes/tasks/FetchTaskNode.tsx
View File

@@ -4,7 +4,6 @@ import { useToggle } from "@mantine/hooks";
import { IconMinus, IconPlus, IconWorld } from "@tabler/icons-react";
import type { Node, NodeProps } from "@xyflow/react";
import type { Static } from "core/utils";
import { Type } from "core/utils";
import { FetchTask } from "flows";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
@@ -15,6 +14,8 @@ import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelec
import { type TFlowNodeData, useFlowSelector } from "../../../hooks/use-flow";
import { KeyValueInput } from "../../form/KeyValueInput";
import { BaseNode } from "../BaseNode";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
const schema = Type.Composite([
FetchTask.schema,

4
app/src/ui/modules/flows/components2/nodes/tasks/RenderNode.tsx
View File

@@ -1,12 +1,12 @@
import { IconWorld } from "@tabler/icons-react";
import { LiquidJsEditor } from "ui/components/code/LiquidJsEditor";
import { BaseNode } from "../BaseNode";
import { HtmlEditor } from "ui/components/code/HtmlEditor";
export function RenderNode(props) {
return (
<BaseNode {...props} onChangeName={console.log} Icon={IconWorld} className="w-[400px]">
<form className="flex flex-col gap-3">
<LiquidJsEditor value={props.params.render} onChange={console.log} />
<HtmlEditor value={props.params.render} onChange={console.log} />
</form>
</BaseNode>
);

17
app/src/ui/modules/flows/components2/nodes/triggers/TriggerNode.tsx
View File

@@ -1,20 +1,9 @@
import { typeboxResolver } from "@hookform/resolvers/typebox";
import { TextInput } from "@mantine/core";
import { TypeRegistry } from "@sinclair/typebox";
import { Clean } from "@sinclair/typebox/value";
import { type Node, type NodeProps, Position } from "@xyflow/react";
import {
Const,
type Static,
StringEnum,
Type,
registerCustomTypeboxKinds,
transformObject,
} from "core/utils";
import type { Node, NodeProps } from "@xyflow/react";
import { Const, type Static, registerCustomTypeboxKinds, transformObject } from "core/utils";
import { TriggerMap } from "flows";
import type { TAppFlowTriggerSchema } from "flows/AppFlows";
import { isEqual } from "lodash-es";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { JsonViewer } from "ui/components/code/JsonViewer";
import { MantineSegmentedControl } from "ui/components/form/hook-form-mantine/MantineSegmentedControl";
@@ -22,6 +11,8 @@ import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelec
import { useFlowCanvas, useFlowSelector } from "../../../hooks/use-flow";
import { BaseNode } from "../BaseNode";
import { Handle } from "../Handle";
import * as tb from "@sinclair/typebox";
const { Type, TypeRegistry } = tb;
// @todo: check if this could become an issue
registerCustomTypeboxKinds(TypeRegistry);

2
app/src/ui/routes/auth/auth.settings.tsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import { isDebug } from "core";
import { TbAlertCircle, TbChevronDown, TbChevronUp } from "react-icons/tb";
import { TbChevronDown, TbChevronUp } from "react-icons/tb";
import { useBknd } from "ui/client/BkndProvider";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { Button } from "ui/components/buttons/Button";

1
app/src/ui/routes/data/data.$entity.$id.tsx
View File

@@ -52,7 +52,6 @@ export function DataEntityUpdate({ params }) {
}
async function onSubmitted(changeSet?: EntityData) {
console.log("update:changeSet", changeSet);
//return;
if (!changeSet) {
goBack();

3
app/src/ui/routes/data/data.$entity.create.tsx
View File

@@ -1,4 +1,3 @@
import { Type } from "core/utils";
import type { EntityData } from "data";
import { useState } from "react";
import { useEntityMutate } from "ui/client";
@@ -12,6 +11,8 @@ import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
import { routes } from "ui/lib/routes";
import { EntityForm } from "ui/modules/data/components/EntityForm";
import { useEntityForm } from "ui/modules/data/hooks/useEntityForm";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
export function DataEntityCreate({ params }) {
const { $data } = useBkndData();

3
app/src/ui/routes/data/data.$entity.index.tsx
View File

@@ -1,4 +1,3 @@
import { Type } from "core/utils";
import { type Entity, querySchema } from "data";
import { Fragment } from "react";
import { TbDots } from "react-icons/tb";
@@ -15,6 +14,8 @@ import * as AppShell from "ui/layouts/AppShell/AppShell";
import { routes, useNavigate } from "ui/lib/routes";
import { useCreateUserModal } from "ui/modules/auth/hooks/use-create-user-modal";
import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
// @todo: migrate to Typebox
const searchSchema = Type.Composite(

3
app/src/ui/routes/data/forms/entity.fields.form.tsx
View File

@@ -5,7 +5,6 @@ import {
Default,
type Static,
StringIdentifier,
Type,
objectCleanEmpty,
ucFirstAllSnakeToPascalWithSpaces,
} from "core/utils";
@@ -27,6 +26,8 @@ import { type SortableItemProps, SortableList } from "ui/components/list/Sortabl
import { Popover } from "ui/components/overlay/Popover";
import { type TFieldSpec, fieldSpecs } from "ui/modules/data/components/fields-specs";
import { dataFieldsUiSchema } from "../../settings/routes/data.settings";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
const fieldsSchemaObject = originalFieldsSchemaObject;
const fieldsSchema = Type.Union(Object.values(fieldsSchemaObject));

10
app/src/ui/routes/flows/components/FlowCreateModal.tsx
View File

@@ -2,13 +2,7 @@ import { typeboxResolver } from "@hookform/resolvers/typebox";
import { TextInput } from "@mantine/core";
import { useFocusTrap } from "@mantine/hooks";
import { TypeRegistry } from "@sinclair/typebox";
import {
type Static,
StringEnum,
StringIdentifier,
Type,
registerCustomTypeboxKinds,
} from "core/utils";
import { type Static, StringEnum, StringIdentifier, registerCustomTypeboxKinds } from "core/utils";
import { TRIGGERS } from "flows/flows-schema";
import { forwardRef, useState } from "react";
import { useForm } from "react-hook-form";
@@ -22,6 +16,8 @@ import {
ModalTitle,
} from "../../../components/modal/Modal2";
import { Step, Steps, useStepContext } from "../../../components/steps/Steps";
import * as tbbox from "@sinclair/typebox";
const { Type } = tbbox;
registerCustomTypeboxKinds(TypeRegistry);

5
app/src/ui/routes/index.tsx
View File

@@ -11,6 +11,7 @@ import SettingsRoutes from "./settings";
import { FlashMessage } from "ui/modules/server/FlashMessage";
import { AuthRegister } from "ui/routes/auth/auth.register";
import { BkndModalsProvider } from "ui/modals";
import { useBkndWindowContext } from "ui/client";
// @ts-ignore
const TestRoutes = lazy(() => import("./test"));
@@ -20,11 +21,13 @@ export function Routes({
basePath = "",
}: { BkndWrapper: ComponentType<{ children: ReactNode }>; basePath?: string }) {
const { theme } = useTheme();
const ctx = useBkndWindowContext();
const actualBasePath = basePath || ctx.admin_basepath;
return (
<div id="bknd-admin" className={theme + " antialiased"}>
<FlashMessage />
<Router base={basePath}>
<Router base={actualBasePath}>
<Switch>
<Route path="/auth/login" component={AuthLogin} />
<Route path="/auth/register" component={AuthRegister} />

2
app/src/ui/routes/media/media.index.tsx
View File

@@ -35,7 +35,7 @@ export function MediaIndex() {
return (
<AppShell.Scrollable>
<div className="flex flex-1 p-3">
<Media.Dropzone onClick={onClick} infinite />
<Media.Dropzone onClick={onClick} infinite query={{ sort: "-id" }} />
</div>
</AppShell.Scrollable>
);

2
app/src/ui/routes/settings/routes/flows.settings.tsx
View File

@@ -90,7 +90,7 @@ export const FlowsSettings = ({ schema, config }) => {
uiSchema={{
params: {
render: {
"ui:field": "LiquidJsField",
"ui:field": "HtmlField",
},
},
}}

22
app/src/ui/routes/test/tests/appshell-accordions-test.tsx
View File

@@ -73,18 +73,16 @@ export default function AppShellAccordionsTest() {
<div className="flex flex-col h-full">
<AppShell.SectionHeader
right={
<>
<Dropdown
items={[
{
label: "Settings",
},
]}
position="bottom-end"
>
<IconButton Icon={TbDots} />
</Dropdown>
</>
<Dropdown
items={[
{
label: "Settings",
},
]}
position="bottom-end"
>
<IconButton Icon={TbDots} />
</Dropdown>
}
className="pl-3"
>

73
app/src/ui/routes/test/tests/dropzone-element-test.tsx
View File

@@ -5,7 +5,7 @@ export default function DropzoneElementTest() {
return (
<Scrollable>
<div className="flex flex-col w-full h-full p-4 gap-4">
<div>
{/*<div>
<b>Dropzone no auto avif only</b>
<Media.Dropzone autoUpload={false} allowedMimeTypes={["image/avif"]} />
@@ -17,18 +17,28 @@ export default function DropzoneElementTest() {
>
<CustomUserAvatarDropzone />
</Media.Dropzone>
</div>*/}
<div>
<b>Dropzone User Avatar 1 (overwrite)</b>
<Media.Dropzone
entity={{ name: "models", id: 38, field: "inputs" }}
maxItems={6}
autoUpload={false}
/>
</div>
<div>
<b>Dropzone User Avatar 1 (overwrite)</b>
<Media.Dropzone
entity={{ name: "models", id: 38, field: "outputs" }}
maxItems={6}
autoUpload={false}
>
<Custom />
</Media.Dropzone>
</div>
{/*<div>
<b>Dropzone User Avatar 1 (overwrite)</b>
<Media.Dropzone
entity={{ name: "users", id: 1, field: "avatar" }}
maxItems={1}
overwrite
/>
</div>
<div>
<b>Dropzone User Avatar 1</b>
<Media.Dropzone entity={{ name: "users", id: 1, field: "avatar" }} maxItems={1} />
</div>
@@ -38,7 +48,7 @@ export default function DropzoneElementTest() {
<Media.Dropzone query={{ limit: 2 }} />
</div>*/}
<div>
{/*<div>
<b>Dropzone Container blank</b>
<Media.Dropzone />
</div>
@@ -46,7 +56,7 @@ export default function DropzoneElementTest() {
<div>
<b>Dropzone Post 12</b>
<Media.Dropzone entity={{ name: "posts", id: 12, field: "images" }} />
</div>
</div>*/}
</div>
</Scrollable>
);
@@ -56,10 +66,14 @@ function CustomUserAvatarDropzone() {
const {
wrapperRef,
inputProps,
state: { files, isOver, isOverAccepted, showPlaceholder },
showPlaceholder,
actions: { openFileInput },
} = Media.useDropzone();
const file = files[0];
const {
isOver,
isOverAccepted,
files: [file] = [],
} = Media.useDropzoneState();
return (
<div
@@ -80,3 +94,34 @@ function CustomUserAvatarDropzone() {
</div>
);
}
function Custom() {
const {
wrapperRef,
inputProps,
showPlaceholder,
actions: { openFileInput },
} = Media.useDropzone();
const { isOver, isOverAccepted, files } = Media.useDropzoneState();
return (
<div
ref={wrapperRef}
className="size-32 rounded-full border border-gray-200 flex justify-center items-center leading-none overflow-hidden"
>
<div className="hidden">
<input {...inputProps} />
</div>
<span>asdf</span>
{showPlaceholder && <>{isOver && isOverAccepted ? "let it drop" : "drop here"}</>}
{files.map((file) => (
<Media.Preview
key={file.path}
file={file}
className="object-cover w-full h-full"
onClick={openFileInput}
/>
))}
</div>
);
}

4
app/src/ui/routes/test/tests/liquid-js-test.tsx
View File

@@ -1,12 +1,12 @@
import { TextInput } from "@mantine/core";
import { LiquidJsEditor } from "../../../components/code/LiquidJsEditor";
import * as Formy from "../../../components/form/Formy";
import { HtmlEditor } from "ui/components/code/HtmlEditor";
export function LiquidJsTest() {
return (
<div className="flex flex-col p-4 gap-3">
<h1>LiquidJsTest</h1>
<LiquidJsEditor />
<HtmlEditor />
<TextInput />
<Formy.Input />

34
app/src/ui/routes/test/tests/swr-and-data-api.tsx
View File

@@ -45,8 +45,40 @@ function QueryMutateDataApi() {
);
}
function QueryMutateDataApi2() {
const { mutate } = useEntityMutate("users");
const { data, ...r } = useEntityQuery("users", undefined, {
limit: 2,
});
return (
<div>
bla
<pre>{JSON.stringify(r.key)}</pre>
{r.error && <div>failed to load</div>}
{r.isLoading && <div>loading...</div>}
{data && <pre>{JSON.stringify(data, null, 2)}</pre>}
{data && (
<div>
{data.map((user) => (
<input
key={String(user.id)}
type="text"
value={user.email}
onChange={async (e) => {
await mutate(user.id, { email: e.target.value });
}}
className="border border-black"
/>
))}
</div>
)}
</div>
);
}
function QueryDataApi() {
const { data, update, ...r } = useEntityQuery("comments", undefined, {
const { data, update, ...r } = useEntityQuery("users", undefined, {
sort: { by: "id", dir: "asc" },
limit: 3,
});