WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/dnd/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/dnd",
"version": "0.1.5",
"version": "0.1.6",
"type": "module",
"description": "Stable accessible drag-and-drop primitives for WRNexus.",
"exports": {
packages/dnd/src/manager.ts
+53 -13
View File
@@ -19,7 +19,10 @@ export function createDndManager(options: DndManagerOptions): DndManager {
}
>();
const manager = new DragDropManager();
const zones = new Map<string | number, { droppable: Droppable; location: { group: string | number; index: number } }>();
const zones = new Map<
string | number,
{ droppable: Droppable; location: { group: string | number; index: number } }
>();
let activeIds: Array<string | number> = [];
let generation = 0;
let destroyed = false;
@@ -27,11 +30,14 @@ export function createDndManager(options: DndManagerOptions): DndManager {
const keyboardAligned = (id: string | number, target: HTMLElement) => {
if (!keyboardAxis) return true;
const element = entries.get(id)?.current.element;
const a = element?.getBoundingClientRect?.(), b = target.getBoundingClientRect?.();
const a = element?.getBoundingClientRect?.(),
b = target.getBoundingClientRect?.();
if (!a || !b) return true;
return keyboardAxis === "x" ? Math.min(a.bottom, b.bottom) > Math.max(a.top, b.top) : Math.min(a.right, b.right) > Math.max(a.left, b.left);
return keyboardAxis === "x"
? Math.min(a.bottom, b.bottom) > Math.max(a.top, b.top)
: Math.min(a.right, b.right) > Math.max(a.left, b.left);
};
manager.monitor.addEventListener("dragmove", event => {
manager.monitor.addEventListener("dragmove", (event) => {
const code = (event.nativeEvent as KeyboardEvent | undefined)?.code;
if (code === "ArrowLeft" || code === "ArrowRight") keyboardAxis = "x";
else if (code === "ArrowUp" || code === "ArrowDown") keyboardAxis = "y";
@@ -54,7 +60,10 @@ export function createDndManager(options: DndManagerOptions): DndManager {
const target = event.operation.target as
(typeof event.operation.target & { group?: string | number; index?: number }) | null;
if (!target) return;
const destination = zones.get(target.id)?.location ?? { group: target.group ?? "default", index: target.index ?? 0 };
const destination = zones.get(target.id)?.location ?? {
group: target.group ?? "default",
index: target.index ?? 0,
};
if (options.accept && !options.accept(activeIds, destination)) {
event.preventDefault();
options.announce?.({ type: "invalid", ids: activeIds, location: destination });
@@ -85,7 +94,11 @@ export function createDndManager(options: DndManagerOptions): DndManager {
index: source.initialIndex ?? source.index ?? 0,
},
],
to: { ...(event.operation.target ? zones.get(event.operation.target.id)?.location : undefined) ?? { group: source.group ?? "default", index: source.index ?? 0 } },
to: {
...((event.operation.target
? zones.get(event.operation.target.id)?.location
: undefined) ?? { group: source.group ?? "default", index: source.index ?? 0 }),
},
};
// A pending commit must not own the next gesture's selection or lifecycle.
activeIds = [];
@@ -113,10 +126,30 @@ export function createDndManager(options: DndManagerOptions): DndManager {
return {
registerDropZone(registration) {
if (destroyed) throw new Error("Cannot register a drop zone after manager destruction.");
if (entries.has(registration.id) || zones.has(registration.id)) throw new Error(`Duplicate draggable or drop zone id ${String(registration.id)}.`);
if (!Number.isSafeInteger(registration.index) || registration.index < 0) throw new Error("Drop zone index must be a non-negative safe integer.");
const droppable = new Droppable({ id: registration.id, element: registration.element, accept: source => keyboardAligned(source.id, registration.element) && (!registration.accepts || registration.accepts.some(type => type === source.type)) && (options.accept?.([source.id], { group: registration.group, index: registration.index }) ?? true), disabled: registration.disabled }, manager);
zones.set(registration.id, { droppable, location: { group: registration.group, index: registration.index } });
if (entries.has(registration.id) || zones.has(registration.id))
throw new Error(`Duplicate draggable or drop zone id ${String(registration.id)}.`);
if (!Number.isSafeInteger(registration.index) || registration.index < 0)
throw new Error("Drop zone index must be a non-negative safe integer.");
const droppable = new Droppable(
{
id: registration.id,
element: registration.element,
accept: (source) =>
keyboardAligned(source.id, registration.element) &&
(!registration.accepts || registration.accepts.some((type) => type === source.type)) &&
(options.accept?.([source.id], {
group: registration.group,
index: registration.index,
}) ??
true),
disabled: registration.disabled,
},
manager,
);
zones.set(registration.id, {
droppable,
location: { group: registration.group, index: registration.index },
});
return () => {
if (zones.get(registration.id)?.droppable !== droppable) return;
droppable.destroy();
@@ -140,10 +173,17 @@ export function createDndManager(options: DndManagerOptions): DndManager {
const origin = entries.get(source.id)?.current.element;
// A nested ancestor overlaps its own descendants and must not steal
// their next keyboard/pointer target just because its box is larger.
if (source.id !== registration.id && origin && registration.element.contains?.(origin)) return false;
if (registration.accepts && !registration.accepts.some(type => type === source.type)) return false;
if (source.id !== registration.id && origin && registration.element.contains?.(origin))
return false;
if (registration.accepts && !registration.accepts.some((type) => type === source.type))
return false;
const target = entries.get(registration.id)?.sortable;
return options.accept?.([source.id], { group: target?.group ?? registration.group, index: target?.index ?? registration.index }) ?? true;
return (
options.accept?.([source.id], {
group: target?.group ?? registration.group,
index: target?.index ?? registration.index,
}) ?? true
);
},
disabled: registration.disabled,
transition: reducedMotion ? null : undefined,
packages/dnd/test/manager-lifecycle.test.ts
+60 -13
View File
@@ -56,7 +56,8 @@ function fixture(overrides: Partial<DndManagerOptions> = {}) {
instances,
move: (code: string) => listeners.dragmove!({ nativeEvent: { code } }),
start: (id: string) => listeners.dragstart!(event(id)),
end: (id: string, target?: { id: string }) => listeners.dragend!({ ...event(id), operation: { ...event(id).operation, target } }),
end: (id: string, target?: { id: string }) =>
listeners.dragend!({ ...event(id), operation: { ...event(id).operation, target } }),
over: (target: { id?: string; group?: string; index?: number }) => {
let prevented = false;
listeners.dragover!({
@@ -97,10 +98,26 @@ test("late drop resolution cannot clear or announce a newer gesture", async () =
test("keyboard candidates stay in the requested geometric row or column", () => {
const f = fixture();
const element = (left: number, top: number, right: number, bottom: number) => ({ getBoundingClientRect: () => ({ left, top, right, bottom }) }) as HTMLElement;
f.manager.registerSortable({ id: "source", group: "a", index: 0, element: element(0, 100, 100, 150) });
f.manager.registerDropZone({ id: "right", group: "b", index: 0, element: element(110, 100, 200, 160) });
f.manager.registerSortable({ id: "above", group: "c", index: 0, element: element(0, 0, 300, 90) });
const element = (left: number, top: number, right: number, bottom: number) =>
({ getBoundingClientRect: () => ({ left, top, right, bottom }) }) as HTMLElement;
f.manager.registerSortable({
id: "source",
group: "a",
index: 0,
element: element(0, 100, 100, 150),
});
f.manager.registerDropZone({
id: "right",
group: "b",
index: 0,
element: element(110, 100, 200, 160),
});
f.manager.registerSortable({
id: "above",
group: "c",
index: 0,
element: element(0, 0, 300, 90),
});
const source = { id: "source", type: "text" };
f.start("source");
f.move("ArrowRight");
@@ -117,10 +134,32 @@ test("keyboard candidates stay in the requested geometric row or column", () =>
test("collision candidates exclude overlapping ancestors and invalid destinations before sorting", () => {
const f = fixture({ accept: (_ids, to) => to.group !== "blocked" });
const child = {} as HTMLElement;
f.manager.registerSortable({ id: "child", group: "content", index: 0, element: child, type: "text" });
f.manager.registerSortable({ id: "parent", group: "root", index: 0, element: { contains: (element: unknown) => element === child } as HTMLElement });
f.manager.registerSortable({ id: "sibling", group: "content", index: 1, element: {} as HTMLElement, accepts: ["text"] });
f.manager.registerSortable({ id: "invalid", group: "blocked", index: 0, element: {} as HTMLElement });
f.manager.registerSortable({
id: "child",
group: "content",
index: 0,
element: child,
type: "text",
});
f.manager.registerSortable({
id: "parent",
group: "root",
index: 0,
element: { contains: (element: unknown) => element === child } as HTMLElement,
});
f.manager.registerSortable({
id: "sibling",
group: "content",
index: 1,
element: {} as HTMLElement,
accepts: ["text"],
});
f.manager.registerSortable({
id: "invalid",
group: "blocked",
index: 0,
element: {} as HTMLElement,
});
const source = { id: "child", type: "text" };
expect(f.instances[1]!.input.accept(source)).toBe(false);
expect(f.instances[2]!.input.accept(source)).toBe(true);
@@ -131,7 +170,12 @@ test("collision candidates exclude overlapping ancestors and invalid destination
test("empty drop zones use explicit locations for acceptance and commit", async () => {
const commits: unknown[] = [];
const f = fixture({ accept: (_ids, to) => to.group === "empty", onMoveIntent: intent => { commits.push(intent.to); } });
const f = fixture({
accept: (_ids, to) => to.group === "empty",
onMoveIntent: (intent) => {
commits.push(intent.to);
},
});
const registration = { id: "zone", group: "empty", index: 0, element: {} as HTMLElement };
const cleanup = f.manager.registerDropZone(registration);
f.start("block");
@@ -144,15 +188,18 @@ test("empty drop zones use explicit locations for acceptance and commit", async
f.manager.registerDropZone(registration);
cleanup();
expect(() => f.manager.registerDropZone(registration)).toThrow("Duplicate");
f.manager.destroy(); f.manager.destroy();
expect(f.instances.map(instance => instance.destroyed)).toEqual([1, 1]);
f.manager.destroy();
f.manager.destroy();
expect(f.instances.map((instance) => instance.destroyed)).toEqual([1, 1]);
expect(() => f.manager.registerDropZone(registration)).toThrow("destruction");
});
test("invalid drop zone indices are rejected before backend registration", () => {
const f = fixture();
for (const index of [-1, 0.5, Infinity, Number.MAX_SAFE_INTEGER + 1]) {
expect(() => f.manager.registerDropZone({ id: "zone", group: "empty", index, element: {} as HTMLElement })).toThrow("index");
expect(() =>
f.manager.registerDropZone({ id: "zone", group: "empty", index, element: {} as HTMLElement }),
).toThrow("index");
}
expect(f.instances).toEqual([]);
});