shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-15 20:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

admin: data/auth route-driven settings and collapsible components (#168)

Browse Source 
introduced `useRoutePathState` for managing active states via routes, added `CollapsibleList` for reusable collapsible UI, and updated various components to leverage route awareness for improved navigation state handling. Also adjusted routing for entities, strategies, and schema to support optional sub-paths.
This commit is contained in:
dswbx
2025-05-03 11:05:38 +02:00
committed by GitHub
parent b3f95f9552
commit 6694c63990
8 changed files with 250 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/src/ui/components/list/CollapsibleList.tsx Normal file
View File

@@ -0,0 +1,62 @@
import type { ReactNode } from "react";
import { twMerge } from "tailwind-merge";
export interface CollapsibleListRootProps extends React.HTMLAttributes<HTMLDivElement> {}
const Root = ({ className, ...props }: CollapsibleListRootProps) => (
<div className={twMerge("flex flex-col gap-2 max-w-4xl", className)} {...props} />
);
export interface CollapsibleListItemProps extends React.HTMLAttributes<HTMLDivElement> {
hasError?: boolean;
disabled?: boolean;
}
const Item = ({ className, hasError, disabled, ...props }: CollapsibleListItemProps) => (
<div
className={twMerge(
"flex flex-col border border-muted rounded bg-background",
hasError && "border-error",
className,
)}
{...props}
/>
);
export interface CollapsibleListPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
left?: ReactNode;
right?: ReactNode;
}
const Preview = ({ className, left, right, children, ...props }: CollapsibleListPreviewProps) => (
<div
{...props}
className={twMerge("flex flex-row justify-between p-3 gap-3 items-center", className)}
>
{left && <div className="flex flex-row items-center p-2 bg-primary/5 rounded">{left}</div>}
<div className="font-mono flex-grow flex flex-row gap-3">{children}</div>
{right && <div className="flex flex-row gap-4 items-center">{right}</div>}
</div>
);
export interface CollapsibleListDetailProps extends React.HTMLAttributes<HTMLDivElement> {
open?: boolean;
}
const Detail = ({ className, open, ...props }: CollapsibleListDetailProps) =>
open && (
<div
{...props}
className={twMerge(
"flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4",
className,
)}
/>
);
export const CollapsibleList = {
Root,
Item,
Preview,
Detail,
};

91
app/src/ui/hooks/use-route-path-state.tsx Normal file
View File

@@ -0,0 +1,91 @@
import { use, createContext, useEffect } from "react";
import { useState } from "react";
import { useLocation, useParams } from "wouter";
// extract path segment from path, e.g. /auth/strategies/:strategy? -> "strategy"
function extractPathSegment(path: string): string {
const match = path.match(/:(\w+)\??/);
return match?.[1] ?? "";
}
// get url by replacing path segment with identifier
// e.g. /auth/strategies/:strategy? -> /auth/strategies/x
function getPath(path: string, identifier?: string) {
if (!identifier) {
return path.replace(/\/:\w+\??/, "");
}
return path.replace(/:\w+\??/, identifier);
}
export function useRoutePathState(_path?: string, identifier?: string) {
const ctx = useRoutePathContext(_path ?? "");
const path = _path ?? ctx?.path ?? "";
const segment = extractPathSegment(path);
const routeIdentifier = useParams()[segment];
const [localActive, setLocalActive] = useState(routeIdentifier === identifier);
const active = ctx ? identifier === ctx.activeIdentifier : localActive;
const [, navigate] = useLocation();
function toggle(_open?: boolean) {
const open = _open ?? !localActive;
if (ctx) {
ctx.setActiveIdentifier(identifier!);
}
if (path) {
if (open) {
navigate(getPath(path, identifier));
} else {
navigate(getPath(path));
}
} else {
setLocalActive(open);
}
}
useEffect(() => {
if (!ctx && _path && identifier) {
setLocalActive(routeIdentifier === identifier);
}
}, [routeIdentifier, identifier, _path]);
return {
active,
toggle,
};
}
type RoutePathStateContextType = {
defaultIdentifier: string;
path: string;
activeIdentifier: string;
setActiveIdentifier: (identifier: string) => void;
};
const RoutePathStateContext = createContext<RoutePathStateContextType>(undefined!);
export function RoutePathStateProvider({
children,
defaultIdentifier,
path,
}: Pick<RoutePathStateContextType, "path" | "defaultIdentifier"> & { children: React.ReactNode }) {
const segment = extractPathSegment(path);
const routeIdentifier = useParams()[segment];
const [activeIdentifier, setActiveIdentifier] = useState(routeIdentifier ?? defaultIdentifier);
return (
<RoutePathStateContext.Provider
value={{ defaultIdentifier, path, activeIdentifier, setActiveIdentifier }}
>
{children}
</RoutePathStateContext.Provider>
);
}
function useRoutePathContext(path?: string) {
const ctx = use(RoutePathStateContext);
if (ctx && (!path || ctx.path === path)) {
return ctx;
}
return undefined;
}

32
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -13,6 +13,7 @@ import {
import type { IconType } from "react-icons";
import { twMerge } from "tailwind-merge";
import { IconButton } from "ui/components/buttons/IconButton";
import { useRoutePathState } from "ui/hooks/use-route-path-state";
import { AppShellProvider, useAppShell } from "ui/layouts/AppShell/use-appshell";
import { appShellStore } from "ui/store";
import { useLocation } from "wouter";
@@ -376,6 +377,15 @@ export function Scrollable({
);
}
type SectionHeaderAccordionItemProps = {
title: string;
open: boolean;
toggle: () => void;
ActiveIcon?: any;
children?: React.ReactNode;
renderHeaderRight?: (props: { open: boolean }) => React.ReactNode;
};
export const SectionHeaderAccordionItem = ({
title,
open,
@@ -383,14 +393,7 @@ export const SectionHeaderAccordionItem = ({
ActiveIcon = IconChevronUp,
children,
renderHeaderRight,
}: {
title: string;
open: boolean;
toggle: () => void;
ActiveIcon?: any;
children?: React.ReactNode;
renderHeaderRight?: (props: { open: boolean }) => React.ReactNode;
}) => (
}: SectionHeaderAccordionItemProps) => (
<div
style={{ minHeight: 49 }}
className={twMerge(
@@ -422,6 +425,19 @@ export const SectionHeaderAccordionItem = ({
</div>
);
export const RouteAwareSectionHeaderAccordionItem = ({
routePattern,
identifier,
...props
}: Omit<SectionHeaderAccordionItemProps, "open" | "toggle"> & {
// it's optional because it could be provided using the context
routePattern?: string;
identifier: string;
}) => {
const { active, toggle } = useRoutePathState(routePattern, identifier);
return <SectionHeaderAccordionItem {...props} open={active} toggle={toggle} />;
};
export const Separator = ({ className, ...props }: ComponentPropsWithoutRef<"hr">) => (
<hr {...props} className={twMerge("border-muted my-3", className)} />
);

69
app/src/ui/routes/auth/auth.strategies.tsx
View File

@@ -33,6 +33,8 @@ import {
} from "ui/components/form/json-schema-form";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import * as AppShell from "../../layouts/AppShell/AppShell";
import { CollapsibleList } from "ui/components/list/CollapsibleList";
import { useRoutePathState } from "ui/hooks/use-route-path-state";
export function AuthStrategiesList(props) {
useBrowserTitle(["Auth", "Strategies"]);
@@ -104,7 +106,7 @@ function AuthStrategiesListInternal() {
<p className="opacity-70">
Allow users to sign in or sign up using different strategies.
</p>
<div className="flex flex-col gap-2 max-w-4xl">
<CollapsibleList.Root>
<Strategy type="password" name="password" />
<Strategy type="oauth" name="google" />
<Strategy type="oauth" name="github" />
@@ -113,7 +115,7 @@ function AuthStrategiesListInternal() {
<Strategy type="oauth" name="instagram" unavailable />
<Strategy type="oauth" name="apple" unavailable />
<Strategy type="oauth" name="discord" unavailable />
</div>
</CollapsibleList.Root>
</div>
<FormDebug />
</AppShell.Scrollable>
@@ -138,47 +140,40 @@ const Strategy = ({ type, name, unavailable }: StrategyProps) => {
]),
);
const schema = schemas[type];
const [open, setOpen] = useState(false);
const { active, toggle } = useRoutePathState("/strategies/:strategy?", name);
if (!schema) return null;
return (
<FormContextOverride schema={schema} prefix={name}>
<div
className={twMerge(
"flex flex-col border border-muted rounded bg-background",
unavailable && "opacity-20 pointer-events-none cursor-not-allowed",
errors.length > 0 && "border-red-500",
)}
<CollapsibleList.Item
hasError={errors.length > 0}
className={
unavailable ? "opacity-20 pointer-events-none cursor-not-allowed" : undefined
}
>
<div className="flex flex-row justify-between p-3 gap-3 items-center">
<div className="flex flex-row items-center p-2 bg-primary/5 rounded">
<StrategyIcon type={type} provider={name} />
</div>
<div className="font-mono flex-grow flex flex-row gap-3">
<span className="leading-none">{autoFormatString(name)}</span>
</div>
<div className="flex flex-row gap-4 items-center">
<StrategyToggle type={type} />
<IconButton
Icon={TbSettings}
size="lg"
iconProps={{ strokeWidth: 1.5 }}
variant={open ? "primary" : "ghost"}
onClick={() => setOpen((o) => !o)}
/>
</div>
</div>
{open && (
<div
className={twMerge(
"flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4",
)}
>
<StrategyForm type={type} name={name} />
</div>
)}
</div>
<CollapsibleList.Preview
left={<StrategyIcon type={type} provider={name} />}
right={
<>
<StrategyToggle type={type} />
<IconButton
Icon={TbSettings}
size="lg"
iconProps={{ strokeWidth: 1.5 }}
variant={active ? "primary" : "ghost"}
onClick={() => toggle(!active)}
/>
</>
}
>
<span className="leading-none">{autoFormatString(name)}</span>
</CollapsibleList.Preview>
<CollapsibleList.Detail open={active}>
<StrategyForm type={type} name={name} />
</CollapsibleList.Detail>
</CollapsibleList.Item>
</FormContextOverride>
);
};

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

@@ -14,7 +14,7 @@ export default function AuthRoutes() {
<Route path="/users" component={AuthUsersList} />
<Route path="/roles" component={AuthRolesList} />
<Route path="/roles/edit/:role" component={AuthRolesEdit} />
<Route path="/strategies" component={AuthStrategiesList} />
<Route path="/strategies/:strategy?" component={AuthStrategiesList} />
<Route path="/settings" component={AuthSettings} />
</AuthRoot>
);

55
app/src/ui/routes/data/data.schema.$entity.tsx
View File

@@ -30,14 +30,10 @@ import { routes, useNavigate } from "ui/lib/routes";
import { fieldSpecs } from "ui/modules/data/components/fields-specs";
import { extractSchema } from "../settings/utils/schema";
import { EntityFieldsForm, type EntityFieldsFormRef } from "./forms/entity.fields.form";
import { RoutePathStateProvider } from "ui/hooks/use-route-path-state";
export function DataSchemaEntity({ params }) {
const { $data } = useBkndData();
const [value, setValue] = useState("fields");
function toggle(value) {
return () => setValue(value);
}
const [navigate] = useNavigate();
const entity = $data.entity(params.entity as string)!;
@@ -46,7 +42,7 @@ export function DataSchemaEntity({ params }) {
}
return (
<>
<RoutePathStateProvider path={`/entity/${entity.name}/:setting?`} defaultIdentifier="fields">
<AppShell.SectionHeader
right={
<>
@@ -109,13 +105,12 @@ export function DataSchemaEntity({ params }) {
</div>
</AppShell.SectionHeader>
<div className="flex flex-col h-full" key={entity.name}>
<Fields entity={entity} open={value === "fields"} toggle={toggle("fields")} />
<Fields entity={entity} />
<BasicSettings entity={entity} open={value === "2"} toggle={toggle("2")} />
<AppShell.SectionHeaderAccordionItem
<BasicSettings entity={entity} />
<AppShell.RouteAwareSectionHeaderAccordionItem
identifier="relations"
title="Relations"
open={value === "3"}
toggle={toggle("3")}
ActiveIcon={IconCirclesRelation}
>
<Empty
@@ -127,11 +122,10 @@ export function DataSchemaEntity({ params }) {
navigate(routes.settings.path(["data", "relations"]), { absolute: true }),
}}
/>
</AppShell.SectionHeaderAccordionItem>
<AppShell.SectionHeaderAccordionItem
</AppShell.RouteAwareSectionHeaderAccordionItem>
<AppShell.RouteAwareSectionHeaderAccordionItem
identifier="indices"
title="Indices"
open={value === "4"}
toggle={toggle("4")}
ActiveIcon={IconBolt}
>
<Empty
@@ -145,17 +139,13 @@ export function DataSchemaEntity({ params }) {
}),
}}
/>
</AppShell.SectionHeaderAccordionItem>
</AppShell.RouteAwareSectionHeaderAccordionItem>
</div>
</>
</RoutePathStateProvider>
);
}
const Fields = ({
entity,
open,
toggle,
}: { entity: Entity; open: boolean; toggle: () => void }) => {
const Fields = ({ entity }: { entity: Entity }) => {
const [submitting, setSubmitting] = useState(false);
const [updates, setUpdates] = useState(0);
const { actions, $data } = useBkndData();
@@ -174,10 +164,9 @@ const Fields = ({
const initialFields = Object.fromEntries(entity.fields.map((f) => [f.name, f.toJSON()])) as any;
return (
<AppShell.SectionHeaderAccordionItem
<AppShell.RouteAwareSectionHeaderAccordionItem
identifier="fields"
title="Fields"
open={open}
toggle={toggle}
ActiveIcon={IconAlignJustified}
renderHeaderRight={({ open }) =>
open ? (
@@ -192,6 +181,7 @@ const Fields = ({
<div className="animate-fade-in absolute w-full h-full top-0 bottom-0 left-0 right-0 bg-background/65 z-50" />
)}
<EntityFieldsForm
routePattern={`/entity/${entity.name}/fields/:sub?`}
fields={initialFields}
ref={ref}
key={String(updates)}
@@ -237,15 +227,11 @@ const Fields = ({
</div>
)}
</div>
</AppShell.SectionHeaderAccordionItem>
</AppShell.RouteAwareSectionHeaderAccordionItem>
);
};
const BasicSettings = ({
entity,
open,
toggle,
}: { entity: Entity; open: boolean; toggle: () => void }) => {
const BasicSettings = ({ entity }: { entity: Entity }) => {
const d = useBkndData();
const config = d.entities?.[entity.name]?.config;
const formRef = useRef<JsonSchemaFormRef>(null);
@@ -271,10 +257,9 @@ const BasicSettings = ({
}
return (
<AppShell.SectionHeaderAccordionItem
<AppShell.RouteAwareSectionHeaderAccordionItem
identifier="settings"
title="Settings"
open={open}
toggle={toggle}
ActiveIcon={IconSettings}
renderHeaderRight={({ open }) =>
open ? (
@@ -293,6 +278,6 @@ const BasicSettings = ({
className="legacy hide-required-mark fieldset-alternative mute-root"
/>
</div>
</AppShell.SectionHeaderAccordionItem>
</AppShell.RouteAwareSectionHeaderAccordionItem>
);
};

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

@@ -27,6 +27,7 @@ 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";
import { useRoutePathState } from "ui/hooks/use-route-path-state";
const { Type } = tbbox;
const fieldsSchemaObject = originalFieldsSchemaObject;
@@ -63,6 +64,7 @@ export type EntityFieldsFormProps = {
onChange?: (formData: TAppDataEntityFields) => void;
sortable?: boolean;
additionalFieldTypes?: (TFieldSpec & { onClick: () => void })[];
routePattern?: string;
};
export type EntityFieldsFormRef = {
@@ -74,7 +76,10 @@ export type EntityFieldsFormRef = {
};
export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsFormProps>(
function EntityFieldsForm({ fields: _fields, sortable, additionalFieldTypes, ...props }, ref) {
function EntityFieldsForm(
{ fields: _fields, sortable, additionalFieldTypes, routePattern, ...props },
ref,
) {
const entityFields = Object.entries(_fields).map(([name, field]) => ({
name,
field,
@@ -166,6 +171,7 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
errors={errors}
remove={remove}
dnd={dnd}
routePattern={routePattern}
/>
)}
/>
@@ -179,6 +185,7 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
form={formProps}
errors={errors}
remove={remove}
routePattern={routePattern}
/>
))}
</div>
@@ -273,6 +280,7 @@ function EntityField({
remove,
errors,
dnd,
routePattern,
}: {
field: FieldArrayWithId<TFieldsFormSchema, "fields", "id">;
index: number;
@@ -283,11 +291,12 @@ function EntityField({
remove: (index: number) => void;
errors: any;
dnd?: SortableItemProps;
routePattern?: string;
}) {
const [opened, handlers] = useDisclosure(false);
const prefix = `fields.${index}.field` as const;
const type = field.field.type;
const name = watch(`fields.${index}.name`);
const { active, toggle } = useRoutePathState(routePattern ?? "", name);
const fieldSpec = fieldSpecs.find((s) => s.type === type)!;
const specificData = omit(field.field.config, commonProps);
const disabled = fieldSpec.disabled || [];
@@ -300,9 +309,11 @@ function EntityField({
return () => {
if (name.length === 0) {
remove(index);
return;
toggle();
} else if (window.confirm(`Sure to delete "${name}"?`)) {
remove(index);
toggle();
}
window.confirm(`Sure to delete "${name}"?`) && remove(index);
};
}
//console.log("register", register(`${prefix}.config.required`));
@@ -313,7 +324,7 @@ function EntityField({
key={field.id}
className={twMerge(
"flex flex-col border border-muted rounded bg-background mb-2",
opened && "mb-6",
active && "mb-6",
hasErrors && "border-red-500 ",
)}
{...dndProps}
@@ -371,13 +382,13 @@ function EntityField({
Icon={TbSettings}
disabled={is_primary}
iconProps={{ strokeWidth: 1.5 }}
onClick={handlers.toggle}
variant={opened ? "primary" : "ghost"}
onClick={() => toggle()}
variant={active ? "primary" : "ghost"}
/>
</div>
</div>
</div>
{opened && (
{active && (
<div className="flex flex-col border-t border-t-muted px-3 py-2 bg-lightest/50">
{/*<pre>{JSON.stringify(field, null, 2)}</pre>*/}
<Tabs defaultValue="general">

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

@@ -17,7 +17,7 @@ export default function DataRoutes() {
<Route path="/schema" nest>
<Route path="/" component={DataSchemaIndex} />
<Route path="/entity/:entity" component={DataSchemaEntity} />
<Route path="/entity/:entity/:setting?/:sub?" component={DataSchemaEntity} />
</Route>
</Switch>
</DataRoot>