@bareboard/react-native 0.0.0-stage → 0.1.0

package/dist/machine.d.ts

@@ -0,0 +1,33 @@
+export declare abstract class Machine<State, Event extends {
+    type: number | string;
+}> {
+    #private;
+    disposables: {
+        requestAnimationFrame(callback: (time: number) => void): () => void;
+        nextFrame(callback: (time: number) => void): () => void;
+        setTimeout(callback: (_: void) => void, delay?: number | undefined): () => void;
+        microTask(cb: () => void): () => void;
+        group(cb: (d: {
+            requestAnimationFrame(callback: (time: number) => void): () => void;
+            nextFrame(callback: (time: number) => void): () => void;
+            setTimeout(callback: (_: void) => void, delay?: number | undefined): () => void;
+            microTask(cb: () => void): () => void;
+            group(cb: (d: /*elided*/ any) => void): () => void;
+            add(cb: () => void): () => void;
+            dispose(): void;
+        }) => void): () => void;
+        add(cb: () => void): () => void;
+        dispose(): void;
+    };
+    constructor(initialState: State);
+    dispose(): void;
+    get state(): Readonly<State>;
+    abstract reduce(state: Readonly<State>, event: Event): Readonly<State>;
+    subscribe<Slice>(selector: (state: Readonly<State>) => Slice, callback: (state: Slice) => void): () => void;
+    on<T extends Event['type']>(type: T, callback: (state: State, event: Extract<Event, {
+        type: T;
+    }>) => void): () => void;
+    send(event: Event): void;
+}
+export declare function shallowEqual(a: any, b: any): boolean;
+export declare function batch<F extends (...args: any[]) => void, P extends any[] = Parameters<F>>(setup: () => [callback: F, handle: () => void]): (...args: P) => void;

package/dist/machine.js

@@ -0,0 +1,107 @@
+import { DefaultMap } from './utils/default-map';
+import { disposables } from './utils/disposables';
+export class Machine {
+    #state = {};
+    #eventSubscribers = new DefaultMap(() => new Set());
+    #subscribers = new Set();
+    disposables = disposables();
+    constructor(initialState) {
+        this.#state = initialState;
+    }
+    dispose() {
+        this.disposables.dispose();
+    }
+    get state() {
+        return this.#state;
+    }
+    subscribe(selector, callback) {
+        let subscriber = {
+            selector,
+            callback,
+            current: selector(this.#state),
+        };
+        this.#subscribers.add(subscriber);
+        return this.disposables.add(() => {
+            this.#subscribers.delete(subscriber);
+        });
+    }
+    on(type, callback) {
+        this.#eventSubscribers.get(type).add(callback);
+        return this.disposables.add(() => {
+            this.#eventSubscribers.get(type).delete(callback);
+        });
+    }
+    send(event) {
+        let newState = this.reduce(this.#state, event);
+        if (newState === this.#state)
+            return; // No change
+        this.#state = newState;
+        for (let subscriber of this.#subscribers) {
+            let slice = subscriber.selector(this.#state);
+            if (shallowEqual(subscriber.current, slice))
+                continue;
+            subscriber.current = slice;
+            subscriber.callback(slice);
+        }
+        for (let callback of this.#eventSubscribers.get(event.type)) {
+            callback(this.#state, event);
+        }
+    }
+}
+export function shallowEqual(a, b) {
+    // Exact same reference
+    if (Object.is(a, b))
+        return true;
+    // Must be some type of object
+    if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null)
+        return false;
+    // Arrays
+    if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length)
+            return false;
+        return compareEntries(a[Symbol.iterator](), b[Symbol.iterator]());
+    }
+    // Map and Set. Map entries are [key, value] pairs, so they are compared by their parts.
+    if ((a instanceof Map && b instanceof Map) || (a instanceof Set && b instanceof Set)) {
+        if (a.size !== b.size)
+            return false;
+        return compareEntries(a.entries(), b.entries(), pairsAreEqual);
+    }
+    // Plain objects
+    if (isPlainObject(a) && isPlainObject(b)) {
+        return compareEntries(Object.entries(a)[Symbol.iterator](), Object.entries(b)[Symbol.iterator](), pairsAreEqual);
+    }
+    // TODO: Not sure how to compare other types of objects
+    return false;
+}
+function pairsAreEqual(a, b) {
+    return Object.is(a[0], b[0]) && Object.is(a[1], b[1]);
+}
+function compareEntries(a, b, isEqual = Object.is) {
+    let aResult = a.next();
+    let bResult = b.next();
+    while (!aResult.done && !bResult.done) {
+        if (!isEqual(aResult.value, bResult.value))
+            return false;
+        aResult = a.next();
+        bResult = b.next();
+    }
+    // Both iterators must be exhausted together to be equal
+    return aResult.done === bResult.done;
+}
+function isPlainObject(value) {
+    if (Object.prototype.toString.call(value) !== '[object Object]') {
+        return false;
+    }
+    let prototype = Object.getPrototypeOf(value);
+    return prototype === null || Object.getPrototypeOf(prototype) === null;
+}
+export function batch(setup) {
+    let [callback, handle] = setup();
+    let d = disposables();
+    return (...args) => {
+        callback(...args);
+        d.dispose();
+        d.microTask(handle);
+    };
+}

package/dist/machines/stack-machine.d.ts

@@ -0,0 +1,32 @@
+import { Machine } from '../machine';
+import { DefaultMap } from '../utils/default-map';
+type Scope = string | null;
+type Id = string;
+interface State {
+    stack: Id[];
+}
+export declare enum ActionTypes {
+    Push = 0,
+    Pop = 1
+}
+export type Actions = {
+    type: ActionTypes.Push;
+    id: Id;
+} | {
+    type: ActionTypes.Pop;
+    id: Id;
+};
+declare class StackMachine extends Machine<State, Actions> {
+    static new(): StackMachine;
+    reduce(state: Readonly<State>, action: Actions): State;
+    actions: {
+        push: (id: Id) => void;
+        pop: (id: Id) => void;
+    };
+    selectors: {
+        isTop: (state: State, id: Id) => boolean;
+        inStack: (state: State, id: Id) => boolean;
+    };
+}
+export declare const stackMachines: DefaultMap<Scope, StackMachine>;
+export {};

package/dist/machines/stack-machine.js

@@ -0,0 +1,51 @@
+import { Machine } from '../machine';
+import { DefaultMap } from '../utils/default-map';
+import { match } from '../utils/match';
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["Push"] = 0] = "Push";
+    ActionTypes[ActionTypes["Pop"] = 1] = "Pop";
+})(ActionTypes || (ActionTypes = {}));
+let reducers = {
+    [ActionTypes.Push](state, action) {
+        let id = action.id;
+        let stack = state.stack;
+        let idx = state.stack.indexOf(id);
+        // Already in the stack, move it to the top
+        if (idx !== -1) {
+            let copy = state.stack.slice();
+            copy.splice(idx, 1);
+            copy.push(id);
+            stack = copy;
+            return { ...state, stack };
+        }
+        // Not in the stack, add it to the top
+        return { ...state, stack: [...state.stack, id] };
+    },
+    [ActionTypes.Pop](state, action) {
+        let id = action.id;
+        let idx = state.stack.indexOf(id);
+        if (idx === -1)
+            return state; // Not in the stack
+        let copy = state.stack.slice();
+        copy.splice(idx, 1);
+        return { ...state, stack: copy };
+    },
+};
+class StackMachine extends Machine {
+    static new() {
+        return new StackMachine({ stack: [] });
+    }
+    reduce(state, action) {
+        return match(action.type, reducers, state, action);
+    }
+    actions = {
+        push: (id) => this.send({ type: ActionTypes.Push, id }),
+        pop: (id) => this.send({ type: ActionTypes.Pop, id }),
+    };
+    selectors = {
+        isTop: (state, id) => state.stack[state.stack.length - 1] === id,
+        inStack: (state, id) => state.stack.includes(id),
+    };
+}
+export const stackMachines = new DefaultMap(() => StackMachine.new());

package/dist/react-glue.d.ts

@@ -0,0 +1,2 @@
+import { shallowEqual, type Machine } from './machine';
+export declare function useSlice<M extends Machine<any, any>, Slice>(machine: M, selector: (state: Readonly<M extends Machine<infer State, any> ? State : never>) => Slice, compare?: typeof shallowEqual): Slice;

package/dist/react-glue.js

@@ -0,0 +1,9 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+import { useEvent } from './hooks/use-event';
+import { shallowEqual } from './machine';
+export function useSlice(machine, selector, compare = shallowEqual) {
+    return useSyncExternalStoreWithSelector(useEvent((onStoreChange) => machine.subscribe(identity, onStoreChange)), useEvent(() => machine.state), useEvent(() => machine.state), useEvent(selector), compare);
+}
+function identity(value) {
+    return value;
+}

package/dist/utils/calculate-active-index.d.ts

@@ -0,0 +1,25 @@
+export declare enum Focus {
+    /** Focus the first non-disabled item. */
+    First = 0,
+    /** Focus the previous non-disabled item. */
+    Previous = 1,
+    /** Focus the next non-disabled item. */
+    Next = 2,
+    /** Focus the last non-disabled item. */
+    Last = 3,
+    /** Focus a specific item based on the `id` of the item. */
+    Specific = 4,
+    /** Focus no items at all. */
+    Nothing = 5
+}
+export declare function calculateActiveIndex<TItem>(action: {
+    focus: Focus.Specific;
+    id: string;
+} | {
+    focus: Exclude<Focus, Focus.Specific>;
+}, resolvers: {
+    resolveItems(): TItem[];
+    resolveActiveIndex(): number | null;
+    resolveId(item: TItem, index: number, items: TItem[]): string;
+    resolveDisabled(item: TItem, index: number, items: TItem[]): boolean;
+}): number | null;

package/dist/utils/calculate-active-index.js

@@ -0,0 +1,74 @@
+function assertNever(x) {
+    throw new Error('Unexpected object: ' + x);
+}
+export var Focus;
+(function (Focus) {
+    /** Focus the first non-disabled item. */
+    Focus[Focus["First"] = 0] = "First";
+    /** Focus the previous non-disabled item. */
+    Focus[Focus["Previous"] = 1] = "Previous";
+    /** Focus the next non-disabled item. */
+    Focus[Focus["Next"] = 2] = "Next";
+    /** Focus the last non-disabled item. */
+    Focus[Focus["Last"] = 3] = "Last";
+    /** Focus a specific item based on the `id` of the item. */
+    Focus[Focus["Specific"] = 4] = "Specific";
+    /** Focus no items at all. */
+    Focus[Focus["Nothing"] = 5] = "Nothing";
+})(Focus || (Focus = {}));
+export function calculateActiveIndex(action, resolvers) {
+    let items = resolvers.resolveItems();
+    if (items.length <= 0)
+        return null;
+    let currentActiveIndex = resolvers.resolveActiveIndex();
+    let activeIndex = currentActiveIndex ?? -1;
+    switch (action.focus) {
+        case Focus.First: {
+            for (let i = 0; i < items.length; ++i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Previous: {
+            // If nothing is active, focus the last relevant item
+            if (activeIndex === -1)
+                activeIndex = items.length;
+            for (let i = activeIndex - 1; i >= 0; --i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Next: {
+            for (let i = activeIndex + 1; i < items.length; ++i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Last: {
+            for (let i = items.length - 1; i >= 0; --i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Specific: {
+            for (let i = 0; i < items.length; ++i) {
+                if (resolvers.resolveId(items[i], i, items) === action.id) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Nothing:
+            return null;
+        default:
+            assertNever(action);
+    }
+}

package/dist/utils/default-map.d.ts

@@ -0,0 +1,5 @@
+export declare class DefaultMap<T = string, V = any> extends Map<T, V> {
+    private factory;
+    constructor(factory: (key: T) => V);
+    get(key: T): V;
+}

package/dist/utils/default-map.js

@@ -0,0 +1,15 @@
+export class DefaultMap extends Map {
+    factory;
+    constructor(factory) {
+        super();
+        this.factory = factory;
+    }
+    get(key) {
+        let value = super.get(key);
+        if (value === undefined) {
+            value = this.factory(key);
+            this.set(key, value);
+        }
+        return value;
+    }
+}

package/dist/utils/disposables.d.ts

@@ -0,0 +1,31 @@
+export type Disposables = ReturnType<typeof disposables>;
+/**
+ * Disposables are a way to manage functions like `setTimeout` and
+ * `requestAnimationFrame` that need to be cleaned up when they are no longer
+ * needed.
+ *
+ * When you register a disposable function, it is added to a collection of
+ * disposables. Each disposable in the collection provides a `dispose` clean up
+ * function that can be called when it's no longer needed. There is also a
+ * `dispose` function on the collection itself that can be used to clean up all
+ * pending disposables in that collection.
+ *
+ * Event listeners and DOM styles are not managed here: React Native has no DOM.
+ */
+export declare function disposables(): {
+    requestAnimationFrame(callback: (time: number) => void): () => void;
+    nextFrame(callback: (time: number) => void): () => void;
+    setTimeout(callback: (_: void) => void, delay?: number | undefined): () => void;
+    microTask(cb: () => void): () => void;
+    group(cb: (d: {
+        requestAnimationFrame(callback: (time: number) => void): () => void;
+        nextFrame(callback: (time: number) => void): () => void;
+        setTimeout(callback: (_: void) => void, delay?: number | undefined): () => void;
+        microTask(cb: () => void): () => void;
+        group(cb: (d: /*elided*/ any) => void): () => void;
+        add(cb: () => void): () => void;
+        dispose(): void;
+    }) => void): () => void;
+    add(cb: () => void): () => void;
+    dispose(): void;
+};

package/dist/utils/disposables.js

@@ -0,0 +1,68 @@
+import { microTask } from './micro-task';
+/**
+ * Disposables are a way to manage functions like `setTimeout` and
+ * `requestAnimationFrame` that need to be cleaned up when they are no longer
+ * needed.
+ *
+ * When you register a disposable function, it is added to a collection of
+ * disposables. Each disposable in the collection provides a `dispose` clean up
+ * function that can be called when it's no longer needed. There is also a
+ * `dispose` function on the collection itself that can be used to clean up all
+ * pending disposables in that collection.
+ *
+ * Event listeners and DOM styles are not managed here: React Native has no DOM.
+ */
+export function disposables() {
+    let _disposables = [];
+    let api = {
+        requestAnimationFrame(...args) {
+            let raf = requestAnimationFrame(...args);
+            return api.add(() => cancelAnimationFrame(raf));
+        },
+        nextFrame(...args) {
+            return api.requestAnimationFrame(() => {
+                return api.requestAnimationFrame(...args);
+            });
+        },
+        setTimeout(...args) {
+            let timer = setTimeout(...args);
+            return api.add(() => clearTimeout(timer));
+        },
+        microTask(...args) {
+            let task = { current: true };
+            microTask(() => {
+                if (task.current) {
+                    args[0]();
+                }
+            });
+            return api.add(() => {
+                task.current = false;
+            });
+        },
+        group(cb) {
+            let d = disposables();
+            cb(d);
+            return this.add(() => d.dispose());
+        },
+        add(cb) {
+            // Ensure we don't add the same callback twice
+            if (!_disposables.includes(cb)) {
+                _disposables.push(cb);
+            }
+            return () => {
+                let idx = _disposables.indexOf(cb);
+                if (idx >= 0) {
+                    for (let dispose of _disposables.splice(idx, 1)) {
+                        dispose();
+                    }
+                }
+            };
+        },
+        dispose() {
+            for (let dispose of _disposables.splice(0)) {
+                dispose();
+            }
+        },
+    };
+    return api;
+}

package/dist/utils/find-active-index.d.ts

@@ -0,0 +1,3 @@
+export declare function findActiveIndex<T extends {
+    id: string;
+}>(previous: T[], activeIndex: number | null, next: T[]): number | null;

package/dist/utils/find-active-index.js

@@ -0,0 +1,12 @@
+// The active option is tracked by its id, not by its index. When the list is rebuilt, for example
+// by a registration, an unregistration or a new position, the active index moves with its item. It
+// is cleared if the item is gone.
+export function findActiveIndex(previous, activeIndex, next) {
+    if (activeIndex === null)
+        return null;
+    let activeItem = previous[activeIndex];
+    if (activeItem === undefined)
+        return null;
+    let idx = next.findIndex((item) => item.id === activeItem.id);
+    return idx === -1 ? null : idx;
+}

package/dist/utils/match.d.ts

@@ -0,0 +1 @@
+export declare function match<TValue extends string | number = string, TReturnValue = unknown>(value: TValue, lookup: Record<TValue, TReturnValue | ((...args: any[]) => TReturnValue)>, ...args: any[]): TReturnValue;

package/dist/utils/match.js

@@ -0,0 +1,12 @@
+export function match(value, lookup, ...args) {
+    if (value in lookup) {
+        let returnValue = lookup[value];
+        return typeof returnValue === 'function' ? returnValue(...args) : returnValue;
+    }
+    let error = new Error(`Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(lookup)
+        .map((key) => `"${key}"`)
+        .join(', ')}.`);
+    if (Error.captureStackTrace)
+        Error.captureStackTrace(error, match);
+    throw error;
+}

package/dist/utils/micro-task.d.ts

@@ -0,0 +1 @@
+export declare function microTask(cb: () => void): void;

package/dist/utils/micro-task.js

@@ -0,0 +1,13 @@
+// Polyfill
+export function microTask(cb) {
+    if (typeof queueMicrotask === 'function') {
+        queueMicrotask(cb);
+    }
+    else {
+        Promise.resolve()
+            .then(cb)
+            .catch((e) => setTimeout(() => {
+            throw e;
+        }));
+    }
+}

package/dist/utils/render.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+export type RenderChildren<TSlot> = ReactNode | ((slot: TSlot) => ReactNode);
+export declare function resolveChildren<TSlot>(children: RenderChildren<TSlot>, slot: TSlot): ReactNode;

package/dist/utils/render.js

@@ -0,0 +1,4 @@
+// Render-prop children receive the component state, static children are returned as-is.
+export function resolveChildren(children, slot) {
+    return typeof children === 'function' ? children(slot) : children;
+}

package/dist/utils/sort-by-order.d.ts

@@ -0,0 +1,16 @@
+type Orderable = {
+    top?: number;
+    dataRef: {
+        current: {
+            order?: number;
+        };
+    };
+};
+export declare function sortByOrder<T extends Orderable>(items: T[]): T[];
+export declare function placeAtTops<T extends Orderable & {
+    id: string;
+}>(items: T[], tops: {
+    id: string;
+    top: number;
+}[]): T[] | null;
+export {};

package/dist/utils/sort-by-order.js

@@ -0,0 +1,33 @@
+// Compares two optional numbers. A missing value goes after the ones that are set.
+function compareOptional(a, z) {
+    if (a === z)
+        return 0;
+    if (a === undefined)
+        return 1;
+    if (z === undefined)
+        return -1;
+    return a - z;
+}
+// Options sort by their explicit `order` first. Without one, they sort by their position on screen,
+// which is the order a web page gives them in the DOM. `Array.prototype.sort` is stable.
+export function sortByOrder(items) {
+    return items
+        .slice()
+        .sort((a, z) => compareOptional(a.dataRef.current.order, z.dataRef.current.order) ||
+        compareOptional(a.top, z.top));
+}
+// Sets the screen positions of several items at once, then sorts once. Sorting is the expensive
+// part on long lists, so a batch of positions costs a single sort. Returns `null` when no position
+// changed, so the caller can skip the update.
+export function placeAtTops(items, tops) {
+    let topById = new Map(tops.map(({ id, top }) => [id, top]));
+    let changed = false;
+    let placed = items.map((item) => {
+        let top = topById.get(item.id);
+        if (top === undefined || top === item.top)
+            return item;
+        changed = true;
+        return { ...item, top };
+    });
+    return changed ? sortByOrder(placed) : null;
+}

package/dist/utils/typeahead.d.ts

@@ -0,0 +1 @@
+export declare function findSearchMatchIndex<T>(items: T[], activeIndex: number | null, wasAlreadySearching: boolean, matches: (item: T) => boolean): number;

package/dist/utils/typeahead.js

@@ -0,0 +1,11 @@
+// Finds the next item that matches the search, starting after the active item and wrapping around.
+// Returns its index, or `-1` when nothing matches.
+export function findSearchMatchIndex(items, activeIndex, wasAlreadySearching, matches) {
+    // While a search is in progress, the active item can still match, so the search starts on it.
+    let offset = wasAlreadySearching ? 0 : 1;
+    let reordered = activeIndex !== null
+        ? items.slice(activeIndex + offset).concat(items.slice(0, activeIndex + offset))
+        : items;
+    let match = reordered.find(matches);
+    return match ? items.indexOf(match) : -1;
+}

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@bareboard/react-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "A set of completely unstyled, fully accessible UI components for React Native.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jbrxl/bareboard.git",
+    "directory": "packages/react-native"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.5.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.64.1",
+    "@react-native/babel-preset": "0.88.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "~19.3.0",
+    "@types/use-sync-external-store": "^1.5.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-web": "~0.21.4",
+    "react-test-renderer": "19.3.0",
+    "vite": "^5.4.20"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-native": "*"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "vp lint",
+    "test:web": "playwright test -c e2e-web/playwright.config.ts",
+    "typecheck": "tsc --noEmit"
+  }
 }