@koine/react 2.0.0-beta.5 → 2.0.0-beta.51

package/Forms/Toggle/useToggle.d.ts

@@ -1,46 +0,0 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
-import { FormControl } from "../helpers";
-export type UseToggleProps = Omit<FormControl, "value"> & {
-    value?: boolean;
-    valueTrue?: string;
-    valueFalse?: string;
-    options?: Option[];
-};
-/**
- * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */
-export declare function useToggle(props: UseToggleProps, ref: React.ForwardedRef<HTMLInputElement>): {
-    Inputs: import("react/jsx-runtime").JSX.Element;
-    rootProps: {
-        htmlFor: string | undefined;
-    };
-    label: any;
-    value: any;
-};

package/Forms/Toggle/useToggle.js

@@ -1,139 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useToggle", {
-    enumerable: true,
-    get: function() {
-        return useToggle;
-    }
-});
-const _react = require("react");
-const _reacthookform = require("react-hook-form");
-const _styles = require("../styles");
-function useToggle(props, ref) {
-    const { name, control, register, label, options, value: propValue, ...restProps } = props;
-    let { id, valueTrue, valueFalse, // defaultChecked,
-    // defaultValue,
-    // eslint-disable-next-line prefer-const
-    ...remainingInputProps } = restProps;
-    // use options data convention to pass on the true/false values
-    if (options) {
-        valueTrue = options.filter((opt)=>opt.value === "true")[0].label.toString();
-        valueFalse = options.filter((opt)=>opt.value === "false")[0].label.toString();
-    }
-    id = `switch-${name}`;
-    const idTrue = `${id}-true`;
-    const idFalse = `${id}-false`;
-    const isRadio = !!(valueTrue && valueFalse);
-    // // manage default values for both toggle modes
-    // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
-    // // TODO: maybe throw an error if the defaultValue that arrives here is not
-    // // a valid value
-    // defaultValue =
-    //   defaultValue === valueTrue || defaultValue === valueFalse
-    //     ? defaultValue
-    //     : valueFalse;
-    // get the value either from the uncontrolled watched input or from the given
-    // prop to control the component
-    let value = (0, _reacthookform.useWatch)({
-        name,
-        control
-    });
-    if (propValue) {
-        value = propValue;
-    }
-    // get the input props needed by react-hook-form, first check if we have
-    // a `register` function, then check if we have a `control` object or just
-    // rely on the `name` prop and `ref`, they probably would be passed alongside
-    // an `onChange` prop that is spreaded on the inputs
-    const inputProps = (0, _react.useMemo)(()=>{
-        return register ? register(name) : control ? control.register(name) : {
-            name,
-            ref
-        };
-    }, [
-        register,
-        control,
-        name,
-        ref
-    ]);
-    /**
-   * Accessibility.
-   *
-   * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-   * Without this *only* the arrow keys would change the checkbox state
-   */ const handleKeyDown = (0, _react.useCallback)((event)=>{
-        if (event.key === " ") {
-            event.preventDefault();
-            event.stopPropagation();
-            const firstInput = event.target;
-            const next = firstInput.nextElementSibling;
-            const prev = firstInput.previousElementSibling;
-            const secondInput = next?.tagName === "INPUT" ? next : prev;
-            let target = firstInput;
-            if (firstInput.checked) {
-                target = secondInput;
-            } else {
-                if (!secondInput.checked) {
-                    target = firstInput.value === valueTrue ? firstInput : secondInput;
-                }
-            }
-            if (target) target.click();
-        }
-    }, [
-        valueTrue
-    ]);
-    // collect all the return values that are dependent on the current value
-    // of the input
-    const valueDependentProps = (0, _react.useMemo)(()=>({
-            rootProps: {
-                htmlFor: isRadio ? !value || value === valueFalse ? idTrue : idFalse : id
-            },
-            label: label ? label : value,
-            value
-        }), [
-        value,
-        valueFalse,
-        isRadio,
-        id,
-        idTrue,
-        idFalse,
-        label
-    ]);
-    const Inputs = (0, _react.useMemo)(()=>isRadio ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
-            id: idFalse,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueFalse
-        }), /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
-            id: idTrue,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueTrue
-        })) : /*#__PURE__*/ React.createElement(_styles.InputInvisible, {
-            id: id,
-            type: "checkbox",
-            ...inputProps,
-            ...remainingInputProps
-        }), [
-        inputProps,
-        remainingInputProps,
-        handleKeyDown,
-        isRadio,
-        idFalse,
-        idTrue,
-        valueFalse,
-        valueTrue,
-        id
-    ]);
-    // console.log("useToggle: render", value);
-    return {
-        ...valueDependentProps,
-        Inputs
-    };
-}

package/Forms/Toggle/useToggle.mjs

@@ -1,157 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { useWatch } from "react-hook-form";
-import { InputInvisible } from "../styles";
-/**
- * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */ export function useToggle(props, ref) {
-    const { name, control, register, label, options, value: propValue, ...restProps } = props;
-    let { id, valueTrue, valueFalse, // defaultChecked,
-    // defaultValue,
-    // eslint-disable-next-line prefer-const
-    ...remainingInputProps } = restProps;
-    // use options data convention to pass on the true/false values
-    if (options) {
-        valueTrue = options.filter((opt)=>opt.value === "true")[0].label.toString();
-        valueFalse = options.filter((opt)=>opt.value === "false")[0].label.toString();
-    }
-    id = `switch-${name}`;
-    const idTrue = `${id}-true`;
-    const idFalse = `${id}-false`;
-    const isRadio = !!(valueTrue && valueFalse);
-    // // manage default values for both toggle modes
-    // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
-    // // TODO: maybe throw an error if the defaultValue that arrives here is not
-    // // a valid value
-    // defaultValue =
-    //   defaultValue === valueTrue || defaultValue === valueFalse
-    //     ? defaultValue
-    //     : valueFalse;
-    // get the value either from the uncontrolled watched input or from the given
-    // prop to control the component
-    let value = useWatch({
-        name,
-        control
-    });
-    if (propValue) {
-        value = propValue;
-    }
-    // get the input props needed by react-hook-form, first check if we have
-    // a `register` function, then check if we have a `control` object or just
-    // rely on the `name` prop and `ref`, they probably would be passed alongside
-    // an `onChange` prop that is spreaded on the inputs
-    const inputProps = useMemo(()=>{
-        return register ? register(name) : control ? control.register(name) : {
-            name,
-            ref
-        };
-    }, [
-        register,
-        control,
-        name,
-        ref
-    ]);
-    /**
-   * Accessibility.
-   *
-   * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-   * Without this *only* the arrow keys would change the checkbox state
-   */ const handleKeyDown = useCallback((event)=>{
-        if (event.key === " ") {
-            event.preventDefault();
-            event.stopPropagation();
-            const firstInput = event.target;
-            const next = firstInput.nextElementSibling;
-            const prev = firstInput.previousElementSibling;
-            const secondInput = next?.tagName === "INPUT" ? next : prev;
-            let target = firstInput;
-            if (firstInput.checked) {
-                target = secondInput;
-            } else {
-                if (!secondInput.checked) {
-                    target = firstInput.value === valueTrue ? firstInput : secondInput;
-                }
-            }
-            if (target) target.click();
-        }
-    }, [
-        valueTrue
-    ]);
-    // collect all the return values that are dependent on the current value
-    // of the input
-    const valueDependentProps = useMemo(()=>({
-            rootProps: {
-                htmlFor: isRadio ? !value || value === valueFalse ? idTrue : idFalse : id
-            },
-            label: label ? label : value,
-            value
-        }), [
-        value,
-        valueFalse,
-        isRadio,
-        id,
-        idTrue,
-        idFalse,
-        label
-    ]);
-    const Inputs = useMemo(()=>isRadio ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(InputInvisible, {
-            id: idFalse,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueFalse
-        }), /*#__PURE__*/ React.createElement(InputInvisible, {
-            id: idTrue,
-            ...inputProps,
-            ...remainingInputProps,
-            onKeyDown: handleKeyDown,
-            type: "radio",
-            value: valueTrue
-        })) : /*#__PURE__*/ React.createElement(InputInvisible, {
-            id: id,
-            type: "checkbox",
-            ...inputProps,
-            ...remainingInputProps
-        }), [
-        inputProps,
-        remainingInputProps,
-        handleKeyDown,
-        isRadio,
-        idFalse,
-        idTrue,
-        valueFalse,
-        valueTrue,
-        id
-    ]);
-    // console.log("useToggle: render", value);
-    return {
-        ...valueDependentProps,
-        Inputs
-    };
-}

package/Forms/antispam.d.ts

@@ -1,47 +0,0 @@
-import { type ObjectShape } from "@kuus/yup";
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */
-export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
-    encodedSchema: import("@kuus/yup").ObjectSchema<{
-        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
-            readonly key: string;
-            readonly isContext: boolean;
-            readonly isValue: boolean;
-            readonly isSibling: boolean;
-            readonly path: any;
-            readonly getter: (data: unknown) => unknown;
-            readonly map?: ((value: unknown) => infer T) | undefined;
-            readonly __isYupRef: boolean;
-            getValue(value: any, parent?: {} | undefined, context?: {} | undefined): infer T;
-            cast(value: any, options?: {
-                parent?: {} | undefined;
-                context?: {} | undefined;
-            } | undefined): infer T;
-            resolve(): any;
-            describe(): import("@kuus/yup").SchemaRefDescription;
-            toString(): string;
-        } ? T : unknown;
-    }, import("@kuus/yup").AnyObject, {
-        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, import("@kuus/yup").AnyObject, any, any> ? T[keyof T]["__default"] : undefined;
-    }, "">;
-    encodedNames: Record<keyof T, string>;
-};
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
-export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;

package/Forms/antispam.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    encodeForm: function() {
-        return encodeForm;
-    },
-    decodeForm: function() {
-        return decodeForm;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _yup = require("@kuus/yup");
-const _decode = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/decode"));
-const _encode = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/encode"));
-const _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
-function encodeForm(validationRules) {
-    const encoded = {};
-    const encodedNames = {};
-    for(const name in validationRules){
-        if (!name.startsWith("_")) {
-            const encodedName = (0, _encode.default)(name);
-            encoded[encodedName] = validationRules[name];
-            encodedNames[name] = encodedName;
-        }
-    }
-    // we need `.required()` to correctly infer the type @see
-    // https://github.com/jquense/yup/issues/946
-    const encodedSchema = (0, _yup.object)(encoded).required();
-    return {
-        encodedSchema,
-        encodedNames
-    };
-}
-function decodeForm(formData) {
-    const json = {};
-    for(const encodedName in formData){
-        const decodedName = (0, _decode.default)(encodedName);
-        // always add underscore prefixed names as they are treated as internal
-        // private inputs outside of the honeypot system, normalise them here removing
-        // the underscore prefix
-        if (encodedName.startsWith("_")) {
-            // @ts-expect-error nevermind
-            json[encodedName.substring(1)] = formData[encodedName];
-        } else if (!(0, _isUndefined.default)(formData[encodedName]) && formData[decodedName] === "") {
-            // @ts-expect-error nevermind
-            json[decodedName] = formData[encodedName];
-        }
-    }
-    // console.log(formData, decoded, json);
-    return json;
-}

package/Forms/antispam.mjs

@@ -1,58 +0,0 @@
-import { object } from "@kuus/yup";
-import decode from "@koine/utils/decode";
-import encode from "@koine/utils/encode";
-import isUndefined from "@koine/utils/isUndefined";
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */ export function encodeForm(validationRules) {
-    const encoded = {};
-    const encodedNames = {};
-    for(const name in validationRules){
-        if (!name.startsWith("_")) {
-            const encodedName = encode(name);
-            encoded[encodedName] = validationRules[name];
-            encodedNames[name] = encodedName;
-        }
-    }
-    // we need `.required()` to correctly infer the type @see
-    // https://github.com/jquense/yup/issues/946
-    const encodedSchema = object(encoded).required();
-    return {
-        encodedSchema,
-        encodedNames
-    };
-}
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */ export function decodeForm(formData) {
-    const json = {};
-    for(const encodedName in formData){
-        const decodedName = decode(encodedName);
-        // always add underscore prefixed names as they are treated as internal
-        // private inputs outside of the honeypot system, normalise them here removing
-        // the underscore prefix
-        if (encodedName.startsWith("_")) {
-            // @ts-expect-error nevermind
-            json[encodedName.substring(1)] = formData[encodedName];
-        } else if (!isUndefined(formData[encodedName]) && formData[decodedName] === "") {
-            // @ts-expect-error nevermind
-            json[decodedName] = formData[encodedName];
-        }
-    }
-    // console.log(formData, decoded, json);
-    return json;
-}

package/Forms/helpers.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
-import type { Option } from "../types";
-type FormControlNativeType = "input" | "select" | "textarea";
-type FormControlFieldValues = Record<string, any>;
-export type FormControlNative<T extends FormControlNativeType = "input"> = Omit<React.ComponentPropsWithRef<T>, "name">;
-export type FormControlProps<T extends FormControlFieldValues = any> = {
-    label?: React.ReactNode;
-    name: string;
-    control?: Control<T>;
-    register?: UseFormRegister<T>;
-    setValue?: UseFormSetValue<T>;
-};
-export type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
-export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
-export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
-/**
- * We are faking the native input `onChange` event
- */
-export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-export declare function triggerChange(input: HTMLInputElement, value?: string): void;
-export {};

package/Forms/helpers.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    normaliseOptions: function() {
-        return normaliseOptions;
-    },
-    defaultOptionsFilterFn: function() {
-        return defaultOptionsFilterFn;
-    },
-    triggerOnChange: function() {
-        return triggerOnChange;
-    },
-    triggerChange: function() {
-        return triggerChange;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _isString = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isString"));
-const _matchSorter = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/matchSorter"));
-const normaliseOptions = (options = [])=>{
-    return options.map((option)=>{
-        return (0, _isString.default)(option) ? {
-            label: option,
-            value: option
-        } : option;
-    });
-};
-function defaultOptionsFilterFn(options, inputValue) {
-    if (!inputValue) {
-        return options;
-    }
-    return (0, _matchSorter.default)(options, inputValue, {
-        keys: [
-            "value",
-            "label"
-        ]
-    });
-}
-function triggerOnChange(onChange, name, value) {
-    // @ts-expect-error nevermind
-    if (onChange) onChange({
-        target: {
-            name,
-            value
-        }
-    });
-}
-function triggerChange(input, value) {
-    const obj = window.Object;
-    if (!obj) {
-        if (process.env["NODE_ENV"] !== "production") {
-            console.warn("[@koine/react:Forms:triggerChange] window.Object does not exists, bailing.");
-        }
-        return;
-    }
-    // @ts-expect-error nevermind
-    const nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
-    // @ts-expect-error nevermind
-    nativeInputValueSetter.call(input, value);
-    const inputEvent = new Event("input", {
-        bubbles: true
-    });
-    input.dispatchEvent(inputEvent);
-}

package/Forms/helpers.mjs

@@ -1,52 +0,0 @@
-import isString from "@koine/utils/isString";
-import matchSorter from "@koine/utils/matchSorter";
-export const normaliseOptions = (options = [])=>{
-    return options.map((option)=>{
-        return isString(option) ? {
-            label: option,
-            value: option
-        } : option;
-    });
-};
-export function defaultOptionsFilterFn(options, inputValue) {
-    if (!inputValue) {
-        return options;
-    }
-    return matchSorter(options, inputValue, {
-        keys: [
-            "value",
-            "label"
-        ]
-    });
-}
-/**
- * We are faking the native input `onChange` event
- */ export function triggerOnChange(onChange, name, value) {
-    // @ts-expect-error nevermind
-    if (onChange) onChange({
-        target: {
-            name,
-            value
-        }
-    });
-}
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */ export function triggerChange(input, value) {
-    const obj = window.Object;
-    if (!obj) {
-        if (process.env["NODE_ENV"] !== "production") {
-            console.warn("[@koine/react:Forms:triggerChange] window.Object does not exists, bailing.");
-        }
-        return;
-    }
-    // @ts-expect-error nevermind
-    const nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
-    // @ts-expect-error nevermind
-    nativeInputValueSetter.call(input, value);
-    const inputEvent = new Event("input", {
-        bubbles: true
-    });
-    input.dispatchEvent(inputEvent);
-}

package/Forms/index.d.ts

@@ -1,15 +0,0 @@
-export * from "./antispam";
-export * from "./Checkbox";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./Feedback";
-export * from "./Field";
-export * from "./InputGroup";
-export * from "./Label";
-export * from "./Password";
-export * from "./Radio";
-export * from "./Switch";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./helpers";
-export * from "./styles";