@weser/forms 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# @weser/hooks
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser%2Fhooks.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/hooks.svg"> <a href="https://bundlephobia.com/result?p=@weser/hooks@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/hooks.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/hooks
+# yarn
+yarn add @weser/hooks
+# pnpm
+pnpm add @weser/hooks
+```
+
+## Documentation
+
+## License
+
+@weser/hooks is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/defaultFormatErrorMessage.d.ts

@@ -0,0 +1,2 @@
+import { ZodIssue } from 'zod';
+export default function defaultFormatErrorMessage(error: ZodIssue): string;

package/dist/defaultFormatErrorMessage.js

@@ -0,0 +1,3 @@
+export default function defaultFormatErrorMessage(error) {
+    return error.message;
+}

package/dist/defaultParseValue.d.ts

@@ -0,0 +1,2 @@
+import { ChangeEvent } from 'react';
+export default function defaultParseValue<T>(e: ChangeEvent<HTMLInputElement>): T;

package/dist/defaultParseValue.js

@@ -0,0 +1,3 @@
+export default function defaultParseValue(e) {
+    return e.target.value;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as useForm } from './useForm.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as useForm } from './useForm.js';

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+import { ZodIssue } from 'zod';
+export type Field<T> = {
+    value: T;
+    disabled: boolean;
+    touched: boolean;
+    dirty: boolean;
+    valid: boolean;
+    errorMessage?: string;
+};
+export type Options<T> = {
+    name?: string;
+    value?: T;
+    disabled?: boolean;
+    touched?: boolean;
+    showValidationOn?: 'submit' | 'blur' | 'change';
+    parseValue?: (e: any) => T;
+    formatErrorMessage?: (error: ZodIssue, name?: string) => string;
+    _onUpdateValue?: (value: T, dirty: boolean) => void;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useClickAway.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useClickAway(ref: RefObject<HTMLElement | null>, callback: () => void, active?: boolean): void;

package/dist/useClickAway.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useClickAway(ref, callback, active = true) {
+    useEffect(() => {
+        const onClickAway = (e) => {
+            if (active && ref.current) {
+                const isClickOnInner = ref.current.contains(e.target);
+                if (!isClickOnInner) {
+                    setTimeout(callback, 0);
+                }
+            }
+        };
+        document.addEventListener('mousedown', onClickAway);
+        document.addEventListener('touchstart', onClickAway);
+        return () => {
+            document.removeEventListener('mousedown', onClickAway);
+            document.removeEventListener('touchstart', onClickAway);
+        };
+    }, [ref, active, callback]);
+}

package/dist/useClientOnly.d.ts

@@ -0,0 +1 @@
+export default function useClientSide(): boolean;

package/dist/useClientOnly.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export default function useClientSide() {
+    const [isClientSide, setClientSide] = useState(false);
+    useEffect(() => setClientSide(true), []);
+    return isClientSide;
+}

package/dist/useDisclosure.d.ts

@@ -0,0 +1,16 @@
+export default function useDisclosure(defaultExpanded?: boolean): {
+    toggleProps: {
+        id: string;
+        onClick: void;
+        type: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+    };
+    contentProps: {
+        id: string;
+        'aria-hidden': boolean;
+        'aria-labelledby': string;
+    };
+    isExpanded: boolean;
+    toggle: void;
+};

package/dist/useDisclosure.js

@@ -0,0 +1,25 @@
+import { useState, useEffect, useId } from 'react';
+export default function useDisclosure(defaultExpanded = false) {
+    const [isExpanded, setExpanded] = useState(defaultExpanded);
+    const id = useId();
+    useEffect(() => setExpanded(defaultExpanded), [defaultExpanded]);
+    const toggle = setExpanded((isExpanded) => !isExpanded);
+    const toggleProps = {
+        id: id + '-toggle',
+        onClick: toggle,
+        type: 'button',
+        'aria-expanded': isExpanded,
+        'aria-controls': id + '-content',
+    };
+    const contentProps = {
+        id: id + '-content',
+        'aria-hidden': !isExpanded,
+        'aria-labelledby': id + '-toggle',
+    };
+    return {
+        toggleProps,
+        contentProps,
+        isExpanded,
+        toggle,
+    };
+}

package/dist/useField.d.ts

@@ -0,0 +1,62 @@
+import { ChangeEvent } from 'react';
+import { ZodSchema } from 'zod';
+import { Field, Options } from './types.js';
+export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodSchema, { name, value, disabled, touched, showValidationOn, parseValue, formatErrorMessage, _onUpdateValue, }?: Options<T>): {
+    required: boolean;
+    valid: boolean;
+    update: (data: Partial<Field<T>>) => void;
+    reset: () => void;
+    errorMessage: string | undefined;
+    inputProps: {
+        onFocus: () => void;
+        onBlur: () => void;
+        value: T;
+        disabled: boolean;
+        required: boolean;
+        name: string | undefined;
+        'data-valid': boolean;
+        onChange: (e: C) => void;
+    } | {
+        onFocus: () => void;
+        onBlur?: undefined;
+        value: T;
+        disabled: boolean;
+        required: boolean;
+        name: string | undefined;
+        'data-valid': boolean;
+        onChange: (e: C) => void;
+    };
+    initial: {
+        value: T;
+        disabled: boolean;
+        touched: boolean;
+        dirty: boolean;
+        valid: boolean;
+        errorMessage: string | undefined;
+    };
+    props: {
+        onFocus: () => void;
+        onBlur: () => void;
+        value: T;
+        disabled: boolean;
+        name: string | undefined;
+        valid: boolean;
+        required: boolean;
+        errorMessage: string | undefined;
+        onChange: (e: C) => void;
+    } | {
+        onFocus: () => void;
+        onBlur?: undefined;
+        value: T;
+        disabled: boolean;
+        name: string | undefined;
+        valid: boolean;
+        required: boolean;
+        errorMessage: string | undefined;
+        onChange: (e: C) => void;
+    };
+    value: T;
+    disabled: boolean;
+    touched: boolean;
+    dirty: boolean;
+};

package/dist/useField.js

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
+import defaultParseValue from './defaultParseValue.js';
+export default function useField(schema, { name, value = '', disabled = false, touched = false, showValidationOn = 'submit', parseValue = (defaultParseValue), formatErrorMessage = defaultFormatErrorMessage, _onUpdateValue, } = {}) {
+    const isOptional = schema.isOptional();
+    function validate(value) {
+        const res = schema.safeParse(value);
+        if (res.success) {
+            return;
+        }
+        else {
+            return formatErrorMessage(res.error.errors[0], name);
+        }
+    }
+    const message = validate(value);
+    const initialField = {
+        value,
+        disabled,
+        touched,
+        dirty: false,
+        valid: !message,
+        errorMessage: message,
+    };
+    const [field, setField] = useState(initialField);
+    function update(data) {
+        if (data.value !== undefined) {
+            const dirty = data.value !== initialField.value;
+            const errorMessage = validate(data.value);
+            if (_onUpdateValue) {
+                _onUpdateValue(data.value, dirty);
+            }
+            setField((field) => ({
+                ...field,
+                touched: showValidationOn === 'change' ? dirty : field.touched,
+                dirty,
+                ...data,
+                errorMessage,
+                valid: !errorMessage,
+            }));
+        }
+        else {
+            setField((field) => ({
+                ...field,
+                ...data,
+            }));
+        }
+    }
+    function reset() {
+        setField(initialField);
+    }
+    function onChange(e) {
+        update({ value: parseValue(e) });
+    }
+    const required = !isOptional;
+    // Only show validation error when is touched
+    const valid = !field.touched ? true : !field.errorMessage;
+    // Only show errrorMessage and validation styles if the field is touched according to the config
+    const errorMessage = field.touched ? field.errorMessage : undefined;
+    const touch = () => update({ touched: false });
+    const untouch = () => update({ touched: false });
+    function getListeners() {
+        if (showValidationOn === 'blur') {
+            return {
+                onFocus: touch,
+                onBlur: untouch,
+            };
+        }
+        return {
+            onFocus: touch,
+        };
+    }
+    const inputProps = {
+        value: field.value,
+        disabled: field.disabled,
+        required,
+        name,
+        'data-valid': valid,
+        onChange,
+        ...getListeners(),
+    };
+    const props = {
+        value: field.value,
+        disabled: field.disabled,
+        name,
+        valid,
+        required,
+        errorMessage,
+        onChange,
+        ...getListeners(),
+    };
+    return {
+        ...field,
+        required,
+        valid,
+        update,
+        reset,
+        errorMessage,
+        inputProps,
+        initial: initialField,
+        props,
+    };
+}

package/dist/useFocusTrap.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Config = {
+    visible?: boolean;
+    autoFocus?: boolean;
+};
+export default function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, config?: Config): void;
+export {};

package/dist/useFocusTrap.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import useKeyDown from './useKeyDown.js';
+const focusableSelector = `:is(
+  a[href], 
+  area[href], 
+  input:not([disabled]), 
+  select:not([disabled]), 
+  textarea:not([disabled]), 
+  button:not([disabled]), 
+  [tabindex]:not([tabindex="-1"]), 
+  [contenteditable]
+)`;
+export default function useFocusTrap(ref, active, config = {}) {
+    const { visible, autoFocus = true } = config;
+    useKeyDown('Tab', (e) => {
+        const element = ref.current;
+        if (!active || !element) {
+            return;
+        }
+        const focusables = [
+            ...element.querySelectorAll(focusableSelector),
+        ].filter((el) => el.hasAttribute('tabindex')
+            ? el.getAttribute('tabindex') !== '-1'
+            : true);
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        let nextElement;
+        if (activeElement && focusables.includes(activeElement)) {
+            const index = focusables.indexOf(activeElement);
+            if (e.shiftKey) {
+                if (index === 0) {
+                    nextElement = lastFocusable;
+                }
+            }
+            else {
+                if (index === focusables.length - 1) {
+                    nextElement = firstFocusable;
+                }
+            }
+        }
+        else {
+            if (e.shiftKey) {
+                nextElement = lastFocusable;
+            }
+            else {
+                nextElement = firstFocusable;
+            }
+        }
+        if (nextElement) {
+            ;
+            nextElement.focus();
+            e.preventDefault();
+        }
+    }, {
+        active,
+    });
+    useEffect(() => {
+        const element = ref.current;
+        if (!autoFocus || !visible || !element) {
+            return;
+        }
+        const autoFocusElement = element.querySelector('[data-autofocus="true"]' + focusableSelector);
+        if (autoFocusElement) {
+            // @ts-ignore
+            autoFocusElement.focus();
+            return;
+        }
+        const nodeList = element.querySelectorAll(focusableSelector);
+        const elements = Array.from(nodeList);
+        const focusableElements = elements.filter((element) => !element.hasAttribute('tabindex') ||
+            element.getAttribute('tabindex') === '0');
+        // 1. focus the first focusable
+        // @ts-ignore, TODO: fix typing
+        focusableElements[0]?.focus();
+    }, [visible, ref, autoFocus]);
+}

package/dist/useForm.d.ts

@@ -0,0 +1,70 @@
+import { FormEvent, ChangeEvent } from 'react';
+import { z, ZodObject, ZodError, ZodRawShape, ZodIssue } from 'zod';
+import { Field, Options } from './types.js';
+export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, formatErrorMessage?: (error: ZodIssue, name?: string) => string): {
+    useFormField: <T = string>(name: keyof S, options?: Omit<Options<T>, 'formatErrorMessage' | 'name' | '_onUpdateValue'>) => {
+        reset: () => void;
+        required: boolean;
+        valid: boolean;
+        update: (data: Partial<Field<T>>) => void;
+        errorMessage: string | undefined;
+        inputProps: {
+            onFocus: () => void;
+            onBlur: () => void;
+            value: T;
+            disabled: boolean;
+            required: boolean;
+            name: string | undefined;
+            'data-valid': boolean;
+            onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        } | {
+            onFocus: () => void;
+            onBlur?: undefined;
+            value: T;
+            disabled: boolean;
+            required: boolean;
+            name: string | undefined;
+            'data-valid': boolean;
+            onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        };
+        initial: {
+            value: T;
+            disabled: boolean;
+            touched: boolean;
+            dirty: boolean;
+            valid: boolean;
+            errorMessage: string | undefined;
+        };
+        props: {
+            onFocus: () => void;
+            onBlur: () => void;
+            value: T;
+            disabled: boolean;
+            name: string | undefined;
+            valid: boolean;
+            required: boolean;
+            errorMessage: string | undefined;
+            onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        } | {
+            onFocus: () => void;
+            onBlur?: undefined;
+            value: T;
+            disabled: boolean;
+            name: string | undefined;
+            valid: boolean;
+            required: boolean;
+            errorMessage: string | undefined;
+            onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        };
+        value: T;
+        disabled: boolean;
+        touched: boolean;
+        dirty: boolean;
+    };
+    handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (error: ZodError) => void) => (e: FormEvent<HTMLFormElement>) => void;
+    formProps: {
+        noValidate: boolean;
+    };
+    isDirty: () => boolean;
+    reset: () => void;
+};

package/dist/useForm.js

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from 'react';
+import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
+import useField from './useField.js';
+function mapFieldsToData(fields) {
+    const obj = {};
+    for (const name in fields) {
+        obj[name] = fields[name].ref.current.value;
+    }
+    return obj;
+}
+// TODO: accept refined schemas, not possible due to https://github.com/colinhacks/zod/issues/2474
+export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
+    const [fields, setFields] = useState({});
+    function useFormField(name, options = {}) {
+        const shape = schema.shape[name];
+        // @ts-ignore
+        const field = useField(shape, {
+            ...options,
+            name: name,
+            formatErrorMessage,
+            _onUpdateValue: (value, dirty) => {
+                ref.current = {
+                    value,
+                    dirty,
+                };
+            },
+        });
+        const ref = useRef({
+            value: field.value,
+            dirty: false,
+        });
+        function reset() {
+            ref.current = {
+                value: field.initial.value,
+                dirty: false,
+            };
+            field.reset();
+        }
+        useEffect(() => setFields((fields) => ({
+            ...fields,
+            [name]: {
+                ref,
+                update: field.update,
+                reset,
+            },
+        })), []);
+        return {
+            ...field,
+            reset,
+        };
+    }
+    function touchFields() {
+        for (const name in fields) {
+            fields[name].update({ touched: true });
+        }
+    }
+    function reset() {
+        for (const name in fields) {
+            fields[name].reset();
+        }
+    }
+    function isDirty() {
+        for (const name in fields) {
+            if (fields[name].ref.current.dirty) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function handleSubmit(onSubmit, onError) {
+        return (e) => {
+            e.preventDefault();
+            touchFields();
+            const data = mapFieldsToData(fields);
+            const parsed = schema.safeParse(data);
+            if (parsed.success) {
+                onSubmit(parsed.data);
+            }
+            else {
+                if (onError) {
+                    onError(parsed.error);
+                }
+            }
+        };
+    }
+    const formProps = {
+        noValidate: true,
+    };
+    return {
+        useFormField,
+        handleSubmit,
+        formProps,
+        isDirty,
+        reset,
+    };
+}

package/dist/useKeyDown.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Options = {
+    target?: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export default function useKeyDown(keyCode: string | Array<string>, callback: (e: KeyboardEvent) => void, options?: Options): void;
+export {};

package/dist/useKeyDown.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export default function useKeyDown(keyCode, callback, options = {}) {
+    const { active = true, target } = options;
+    const keyCodes = [].concat(keyCode);
+    useEffect(() => {
+        if (!active || target === null || target?.current === null) {
+            return;
+        }
+        const hasRef = target && target.current;
+        const element = hasRef ? target.current : document;
+        if (element) {
+            const handleKeyDown = (e) => {
+                if (keyCodes.includes(e.code) &&
+                    (!hasRef || (hasRef && document.activeElement === element))) {
+                    callback(e);
+                }
+            };
+            element.addEventListener('keydown', handleKeyDown);
+            return () => element.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [target, callback, active, keyCode]);
+}

package/dist/useRouteChange.d.ts

@@ -0,0 +1 @@
+export default function useRouteChange(onRouteChange: (path: string) => void, pathname?: string): void;

package/dist/useRouteChange.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useRouteChange(onRouteChange, pathname) {
+    useEffect(() => {
+        if (pathname) {
+            onRouteChange(pathname);
+        }
+    }, [pathname]);
+    // track clicks on links with the current path
+    useEffect(() => {
+        const onClick = (e) => {
+            const target = e.target;
+            if (target.tagName === 'A' && target.href === pathname) {
+                onRouteChange(pathname);
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => window.removeEventListener('click', onClick);
+    }, []);
+}

package/dist/useScrollBlocking.d.ts

@@ -0,0 +1 @@
+export default function useScrollBlocking(active: boolean): void;

package/dist/useScrollBlocking.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+let scrollTop;
+function blockScrolling(scrollElement) {
+    scrollTop = window.scrollY;
+    scrollElement.style.overflow = 'hidden';
+    scrollElement.style.position = 'fixed';
+    scrollElement.style.width = '100%';
+    scrollElement.style.top = -scrollTop + 'px';
+}
+function enableScrolling(scrollElement) {
+    scrollElement.style.removeProperty('position');
+    scrollElement.style.removeProperty('overflow');
+    scrollElement.style.removeProperty('top');
+    scrollElement.style.removeProperty('width');
+    window.scrollTo(0, scrollTop);
+}
+function toggleScrolling(isBlocked) {
+    const scrollElement = document.scrollingElement;
+    if (isBlocked) {
+        blockScrolling(scrollElement);
+    }
+    else {
+        enableScrolling(scrollElement);
+    }
+}
+export default function useScrollBlocking(active) {
+    useEffect(() => toggleScrolling(active), [active]);
+}

package/dist/useTrigger.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Props = {
+    defaultVisible?: boolean;
+    getTrigger?: () => HTMLElement | null;
+};
+export default function useTrigger({ defaultVisible, getTrigger, }?: Props): [boolean, (visible: boolean) => void, RefObject<HTMLElement>];
+export {};

package/dist/useTrigger.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+export default function useTrigger({ defaultVisible = false, getTrigger, } = {}) {
+    const triggerRef = useRef(null);
+    const [isVisible, _setVisible] = useState(false);
+    function getTriggerElement() {
+        if (getTrigger) {
+            return getTrigger();
+        }
+        return triggerRef.current;
+    }
+    function setVisible(visible) {
+        if (isVisible !== visible) {
+            _setVisible(visible);
+            if (!visible) {
+                const trigger = getTriggerElement();
+                if (trigger) {
+                    trigger.focus();
+                }
+            }
+        }
+    }
+    useEffect(() => _setVisible(defaultVisible), [defaultVisible]);
+    return [isVisible, setVisible, triggerRef];
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@weser/forms",
+  "version": "0.0.3",
+  "description": "React hooks for forms with zod schemas",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "echo 1"
+  },
+  "keywords": [
+    "react",
+    "react-hook",
+    "react hooks",
+    "hooks",
+    "forms",
+    "zod"
+  ],
+  "peerDependencies": {
+    "react": ">16.3.0",
+    "zod": ">=3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "ava": "^6.1.3",
+    "react": "canary",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.5"
+  },
+  "gitHead": "de1f00e9f6100c1e0ccfdb8145af827e027c280a"
+}