stargazer-ui 1.5.21 → 1.5.23

package/src/styles/forms/_FormSelect.scss

@@ -0,0 +1,222 @@
+
+.sg-form-select-tag {
+    --input-text-color: #{$input-text-color};
+    --input-background-color: #{$input-background-color};
+    --input-border-color: #{$input-border-color};
+    --input-border-color-focus: #{$input-border-color-focus};
+    --input-border-color-invalid: #{$input-border-color-invalid};
+    --input-disabled-color: #{$input-disabled-color};
+
+    position: relative;
+    display: block;
+    width: 100%;
+    padding-block: $input-padding-x;
+    padding-inline: $input-padding-y calc(3 * $input-padding-y);
+    color: var(--input-text-color);
+
+    background-color: var(--input-background-color);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right $input-padding-x center;
+    background-size: 1em 0.75em;
+
+    border: $input-border-width $input-border-style var(--input-border-color);
+    border-radius: $input-border-radius;
+
+    appearance: none;
+
+    &:focus-visible, &:focus {
+        //@include sg-focus-visible()
+        border-color: var(--input-border-color-focus);
+        outline: 0;
+        box-shadow: 0;
+    }
+    &[multiple], &[size]:not([size="1"]) {
+        padding-right: $input-padding-x;
+        background-image: none;
+    }
+    &:disabled, .disabled {
+        --input-background-color: rgba(255, 255, 255, 0.04);
+        --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        cursor:not-allowed;
+        opacity: 1;
+    }
+    &.invalid, &:user-invalid, &[aria-invalid="true"] {
+        box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+        z-index: 2;
+    }
+}
+
+
+.sg-form-select {
+    --input-text-color: #{$input-text-color};
+    --input-background-color: #{$input-background-color};
+    --input-border-color: #{$input-border-color};
+    --input-border-color-focus: #{$input-border-color-focus};
+    --input-border-color-invalid: #{$input-border-color-invalid};
+    --input-border-width: #{$input-border-width};
+    --input-disabled-color: #{$input-disabled-color};
+
+    position: relative;
+    display: block;
+    
+    height: calc(1.4rem + $input-padding-x + $input-padding-x);
+    min-width: min(12rem, 100%);
+    max-width: 15rem;
+    
+    padding-block: $input-padding-x;
+    padding-inline: $input-padding-y calc(3 * $input-padding-y);
+    color: var(--input-text-color);
+
+    background-color: var(--input-background-color);
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%236e7b80ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>');
+    //background-image: ("./down_caret.svg");
+    background-repeat: no-repeat;
+    background-position: right $input-padding-x center;
+    background-size: 1em 0.75em;
+    border: $input-border-width outset var(--input-border-color);
+    border-radius: $input-border-radius;
+
+    font-size: 0.85rem;
+    line-height: 1.4;
+
+    span {
+        pointer-events:visible;
+        display: inline-block;
+        width: 100%;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    &:focus-within {
+        //@include sg-focus-visible()
+        border-color: var(--input-border-color-focus);
+        outline: 0;
+        box-shadow: 0;
+    }
+    .disabled {
+        --input-background-color: rgba(255, 255, 255, 0.04);
+        --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+    }
+}
+
+.sg-select-control {
+    text-align: start;
+
+    cursor: default;
+
+    &:disabled {
+        --input-background-color: rgba(255, 255, 255, 0.04);
+        --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+        cursor: not-allowed;
+        opacity: 1;
+    }
+    &:user-invalid, &.invalid, &[aria-invalid="true"] {
+        //outline: 2px solid $input-border-color-invalid;
+        box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+    }
+}
+
+.sg-select-input {
+    background-color: inherit;
+    border: none;
+    height: 100%;
+    max-width: 80%;
+    color: inherit;
+
+    &[multiple], &[size]:not([size="1"]) {
+        padding-right: $input-padding-x;
+        background-image: none;
+    }
+    &:disabled {
+        color: inherit;
+        background-color: inherit;
+        opacity: 1;
+    }
+    &:focus, &:focus-within, &:focus-visible {
+        border-color: transparent;
+        outline: none;
+    }
+    &::placeholder {
+        color: $input-placeholder-color;
+        opacity: 1;
+      }
+    
+}
+
+.sg-select-list {
+    --input-text-color: #{$input-text-color};
+    --input-background-color: #{$input-background-color};
+    --input-border-color: #{$input-border-color};
+    --input-border-color-focus: #{$input-border-color-focus};
+    --input-border-color-invalid: #{$input-border-color-invalid};
+    --input-border-width: #{$input-border-width};
+    --input-disabled-color: #{$input-disabled-color};
+    --bg-color: #{$input-background-color};
+    --txt-color: black;
+    --z-index: #{$zindex-dropdown};
+    overflow-y: auto;
+
+    background-color: var(--bg-color);
+    color: inherit;
+
+    position: absolute;
+    top: calc(100% + var(--input-border-width)*1px);
+    left: 0;
+    width: 100%;
+    padding: 0;
+
+    border-radius: 0;// 0.375rem;
+    //border: 1px solid color-mix(in srgb, currentColor, white);
+    border: 2px outset color-mix(in oklab, $sg-body-bg, white 60%);
+
+    list-style-type: none;
+
+    z-index: var(--z-index);
+}
+
+.sg-select-list-item {
+    --z-index: #{$zindex-dropdown};
+    --padding-right: 3ex;
+    position: relative;
+    padding: 0.25rem 0.5rem;
+    padding-right: var(--padding-right);
+    font-size: 0.85rem;    
+    user-select: none;
+
+    z-index: calc( var(--z-index) + 1); 
+
+    &.focus {
+        background-color: color-mix(in oklab, var(--input-background-color), white 20%);
+        &:active {
+            background-color: color-mix(in oklab, var(--input-background-color), white 25%);
+        }
+    }
+
+    &:first-child {
+        border-top-right-radius: inherit;
+        border-top-left-radius: inherit;
+    }
+    &:last-child {
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+    .sg-form-select-check-icon-wrapper {
+        height: 100%;
+        width: var(--padding-right);
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: grid;
+        place-items: center;
+    }
+    .sg-form-select-check-icon {
+        
+        margin-block: auto;
+    }
+}

package/src/styles/forms/_FormSlider.scss

@@ -0,0 +1,116 @@
+@mixin slider-cap {
+    --cap-height: calc( 1 - 2*var(--padding-block-fraction));
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    top: calc(100% * var(--padding-block-fraction));
+    height: calc( 100% * var(--cap-height));
+    width: calc(var(--slider-thumb-width) * 0.5);
+    // give background-color and the position of the pseudo element as a content block
+    @content 
+}
+
+.sg-form-slider {
+    --slider-height: #{$slider-height};
+
+    --slider-filled-color: #{$slider-filled-color};
+    --slider-filled-border-color: #{$slider-filled-border-color};
+
+    --slider-empty-color: #{$slider-empty-color};
+    --slider-empty-border-color: #{$slider-empty-border-color};
+
+    --padding-block-fraction: 1/3;
+
+    --slider-thumb-width: #{$slider-thumb-width};
+    --slider-thumb-height: #{$slider-thumb-height};
+    --slider-thumb-border-color: #{$input-border-color};
+    --filled: 40%;
+
+    &:focus-within {
+        //outline: 2px outset $danger;
+    }
+
+    display: grid;
+    grid-template-columns: var(--filled) auto calc(100% - var(--filled));
+    position: relative;
+    height: var(--slider-height);
+    //border: $input-border-width $input-border-style $input-border-color;
+    padding-block: calc(var(--slider-height)*var(--padding-block-fraction));
+    padding-inline: calc(var(--slider-thumb-width) * 0.5);
+
+    &:hover {
+        --slider-filled-color: #{$slider-filled-hover-color};
+        --slider-filled-border-color: #{$slider-filled-border-hover-color};
+        --slider-empty-color: #{$slider-empty-bover-color};
+        --slider-empty-border-color: #{$slider-empty-border-hover-color};
+    }
+
+    .sg-form-slider-filled {
+        display: block;
+        background-color: var(--slider-filled-color);
+        border: $slider-border-width outset var(--slider-filled-border-color);
+        border-left: none;
+        border-right: none;
+        height: 100%;
+        width: 100%;
+        &::before {
+            @include slider-cap {
+                background-color: var(--slider-filled-color);
+                border: $slider-border-width outset var(--slider-filled-border-color);
+                border-right: none;
+                left: 0;
+            }
+        }
+    }
+    .sg-form-slider-thumb {
+        cursor: grab;
+        &[data-grabbing="true"] {
+            cursor: grabbing;
+        }
+        position: relative;
+        display: block;
+        
+        height: 100%;
+        //width: var(--slider-thumb-width);
+        
+        &:focus-visible {
+            --slider-thumb-border-color: white;
+        }
+        &::before {
+            content: "";
+            position: absolute;
+            box-sizing: border-box;
+            left: calc(var(--slider-thumb-width) * -0.5);
+            top:  calc(-1 * var(--padding-block-fraction)*100% );
+            height: calc( (2*var(--padding-block-fraction) + 1) * 100%);
+            width: var(--slider-thumb-width);
+            background-color: $input-border-color;// transparent;// $danger;
+            //background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="'+$farbe+'" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>');
+            border: $input-border-width $input-border-style var(--slider-thumb-border-color);
+        }
+        &:focus-visible {
+            --focus-outline: 2px outset $danger;
+            outline: 0;
+            box-shadow: none;
+        }
+    }
+    .sg-form-slider-empty {
+        display: block;
+        background-color: var(--slider-empty-color);
+        border: $slider-border-width outset var(--slider-empty-border-color);
+        border-left: none;
+        border-right: none;
+        height: 100%;
+        width: 100%;
+
+        &::after {
+            @include slider-cap {
+                background-color: var(--slider-empty-color);
+                border: $slider-border-width outset var(--slider-empty-border-color);
+                border-left: none;
+                right: 0;
+                z-index: -1;
+            }
+        }
+    }
+}

package/src/styles/forms/_FormText.scss

@@ -0,0 +1,6 @@
+.sg-form-text {
+    font-size: 0.75em;
+    padding-inline: 0.5em;
+    opacity: 0.8;
+    margin-top: 0.25em;
+}

package/{utils/BaseTypes.d.ts → src/utils/BaseTypes.ts}

@@ -1,25 +1,32 @@
-import React from "react";
-type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-type BaseDialogType = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
-type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
-type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
-type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
-type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
-type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-type BaseMeterType = React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
-type BaseNavType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
-type BaseProgressBarType = React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
-type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-type BaseSliderType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-type BaseSVGType = React.SVGProps<SVGSVGElement>;
-type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
-type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
-type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-type BaseElementType2 = React.DetailedHTMLProps<React.HTMLAttributes<Element>, Element>;
-export { BaseAnchorType, BaseButtonType, BaseDialogType, BaseDivType, BaseElementType, BaseElementType2, BaseFormType, BaseHeadingType, BaseHrType, BaseInputType, BaseLItemType, BaseLabelType, BaseSliderType, BaseMeterType, BaseNavType, BaseParagraphType, BaseProgressBarType, BaseSelectType, BaseSmallType, BaseSpanType, BaseSVGType, BaseTableType, BaseUListType };
+import React from "react";
+
+type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type BaseDialogType = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>;
+type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
+type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
+type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+type BaseMeterType = React.DetailedHTMLProps<React.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>;
+type BaseNavType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+type BaseProgressBarType = React.DetailedHTMLProps<React.ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>;
+type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+type BaseSliderType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+type BaseSVGType = React.SVGProps<SVGSVGElement>
+type BaseTableType = React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
+type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+
+type BaseElementType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+type BaseElementType2 = React.DetailedHTMLProps<React.HTMLAttributes<Element>, Element>;
+
+export { 
+    BaseAnchorType, BaseButtonType, BaseDialogType, BaseDivType, BaseElementType, BaseElementType2, BaseFormType, BaseHeadingType, BaseHrType,
+    BaseInputType, BaseLItemType, BaseLabelType, BaseSliderType, BaseMeterType, BaseNavType, BaseParagraphType, BaseProgressBarType, BaseSelectType, BaseSmallType, BaseSpanType,
+    BaseSVGType, BaseTableType, BaseUListType
+}

package/src/utils/ContrastingColor.ts

@@ -0,0 +1,25 @@
+export default function contrastingColor(color: string)
+{
+    return (luma(color) >= 165) ? '000' : 'fff';
+}
+
+function luma(color: string) // color can be a hx string or an array of RGB values 0-255
+{
+    let rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
+    return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
+}
+
+function hexToRGBArray(color: string)
+{
+    if(color.startsWith("#")) {
+        color = color.replace("#", "")
+    }
+    if (color.length === 3) 
+        color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
+    else if (color.length !== 6)
+        throw new Error('Invalid hex color: ' + color)
+    let rgb = [];
+    for (let i = 0; i <= 2; i++)
+        rgb[i] = parseInt(color.substr(i * 2, 2), 16)
+    return rgb;
+}

package/src/utils/CreateSyntheticEvent.ts

@@ -0,0 +1,30 @@
+const createSyntheticEvent = <T extends Element, E extends Event>(event: E): React.SyntheticEvent<T, E> => {
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = () => {
+      isDefaultPrevented = true;
+      event.preventDefault();
+    }
+    const stopPropagation = () => {
+      isPropagationStopped = true;
+      event.stopPropagation();
+    }
+    return {
+      nativeEvent: event,
+      currentTarget: event.currentTarget as EventTarget & T,
+      target: event.target as EventTarget & T,
+      bubbles: event.bubbles,
+      cancelable: event.cancelable,
+      defaultPrevented: event.defaultPrevented,
+      eventPhase: event.eventPhase,
+      isTrusted: event.isTrusted,
+      preventDefault,
+      isDefaultPrevented: () => isDefaultPrevented,
+      stopPropagation,
+      isPropagationStopped: () => isPropagationStopped,
+      persist: () => {},
+      timeStamp: event.timeStamp,
+      type: event.type,
+    };
+} 
+export default createSyntheticEvent

package/src/utils/FileImportExport.js

@@ -0,0 +1,50 @@
+const downloadFile = ({ data, fileName, fileType }) => {
+	// Create a blob with the data we want to download as a file
+	const blob = new Blob([data], { type: fileType })
+	// Create an anchor element and dispatch a click event on it
+	// to trigger a download
+	const a = document.createElement('a')
+	a.download = fileName
+	a.href = window.URL.createObjectURL(blob)
+	const clickEvt = new MouseEvent('click', {
+		view: window,
+		bubbles: true,
+		cancelable: true,
+	})
+	a.dispatchEvent(clickEvt)
+	a.remove()
+}
+
+export const exportToJson = (event, charName, currentState) => {
+	event.preventDefault()
+	let test = ""
+	if(charName === "") {
+		test = "character"
+	}
+	else {
+		let test1 = charName.split(" ")
+		test1.map(word => (
+			test += word
+		))
+	}
+	downloadFile({
+		data: JSON.stringify(currentState, null, "\t"),
+		fileName: test +'.json',
+		fileType: 'text/json',
+	})
+}
+
+export const readFileOnUpload = (uploadedFile, onUploadFunction) => {
+   const fileReader = new FileReader();
+   fileReader.onloadend = () => {
+	  try {
+		//dispatch(importState(JSON.parse(fileReader.result), dispatch))
+		onUploadFunction(fileReader.result)
+		} catch(e) {
+			console.log("**Not valid JSON file!**");
+		}
+	}
+	if( uploadedFile!== undefined) {
+	  fileReader.readAsText(uploadedFile);
+	}
+}

package/src/utils/IsInputKey.ts

@@ -0,0 +1,18 @@
+export type InputKeyType = {id:string, alt?:boolean, shift?: boolean, ctrl?: boolean}
+
+export const isValidInputKey = (event: React.KeyboardEvent | KeyboardEvent, inputKeys: InputKeyType[]) => {
+    const isValidKey = inputKeys.find(inputKey => inputKey.id === event.key)
+    if(!isValidKey) return
+
+    let isCtrl = true, isAlt = true, isShift = true
+    if (event.altKey && !isValidKey.alt) {
+        isAlt = false
+    }
+    if (event.ctrlKey && !isValidKey.ctrl) {
+        isCtrl = false
+    }
+    if (event.shiftKey && !isValidKey.shift) {
+        isShift = false
+    }
+    return isValidKey && isAlt && isCtrl && isShift
+}

package/src/utils/MergeClassnames.ts

@@ -0,0 +1,5 @@
+const mergeClassnames = (...args: (string | undefined)[]) => {
+    return args.filter(arg => arg != undefined).join(" ")
+}
+
+export default mergeClassnames

package/src/utils/MergeRefs.ts

@@ -0,0 +1,12 @@
+export default function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>
+  ): React.RefCallback<T> {
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value)
+        } else if (ref != null) {
+          (ref as React.MutableRefObject<T | null>).current = value;
+        }
+      })
+    }
+}

package/src/utils/createFastContext.tsx

@@ -0,0 +1,119 @@
+import { type ReactNode, useRef, useMemo, useCallback, createContext, useContext, useSyncExternalStore } from "react";
+import { isEqual } from "lodash";
+//type Store = {first:string, last:string, isAllowed?: boolean, number?: number}
+
+const createFastContext = <Store,>() => {
+    type SelectorType = (store: Store) => (Store[keyof Store] | Store | Array<Store[keyof Store]>)
+    type IsEqualFunction = (oldValue: ReturnType<SelectorType>, newValue: ReturnType<SelectorType>) => boolean
+    type SetStore = Partial<Store> | ( (store: Store) => Store )
+    type GetStoreReturn<T> = T extends SelectorType ? ReturnType<T>:  T extends undefined ? Store : never
+    type SetStoreReturn = (setProp: SetStore) => void
+
+
+    function useStoreData(initialState:Store, refreshKeys: Array<keyof Store> = []) : {
+        get: () => Store, 
+        set: (setProp: SetStore) => void, 
+        subscribe: (callback: () => void) => () => void,
+    } {
+        const store = useRef(initialState)
+        const subscribers = useRef(new Set<() => void>())
+        
+        refreshKeys.forEach(key => {
+            if(initialState[key] != store.current[key]) store.current[key] = initialState[key]
+        })
+        const get = useCallback( () => {
+            return store.current
+        }, [])
+        const set = useCallback( (setProp: SetStore) => {
+            if( typeof setProp === "function") {
+                store.current = setProp(store.current)
+            }
+            else store.current = {...store.current, ...setProp}
+            subscribers.current.forEach((callback) => callback())
+        }, [])
+        const subscribe = useCallback( (callback: any) => {
+            subscribers.current.add(callback)
+            return () => {subscribers.current.delete(callback)}
+        }, [])
+        return {get, set, subscribe}
+    }
+
+
+    const StoreContext = createContext<ReturnType<typeof useStoreData> | null>(null);
+    const StoreContextProvider = ({children, initialState, refreshKeys}:{children:ReactNode, initialState: Store, refreshKeys?: Array<keyof Store>}) => {
+        return(
+            <StoreContext.Provider value={useStoreData(initialState, refreshKeys)}>
+                {children}
+            </StoreContext.Provider>
+        )
+    }
+
+    function getStore<T extends SelectorType, >(selector: T, equalityFunction?:IsEqualFunction, id?: string): GetStoreReturn<T>
+    function getStore<T extends undefined, >(selector?: T, equalityFunction?:IsEqualFunction, id?: string): GetStoreReturn<T>
+    function getStore<T extends SelectorType, >(selector: T, equalityFunction?:IsEqualFunction, id?: string): GetStoreReturn<T> {
+        const store = useContext(StoreContext)
+        if(!store) {
+            throw new Error("You have to use useStore within the proper provider!")
+        }
+        const storeGet:SelectorType = (store) => {
+            return store
+        }
+        
+        let getSnapshot = useMemo(() => {
+            const selectorInternal = selector !== undefined ? selector : storeGet
+            //memoization through closures
+            let hasMemo = false
+            let memoState: Store | undefined
+            let memoSelected: ReturnType<SelectorType>
+            const memoSelector = (newState: Store) => {
+                if(!hasMemo) {
+                    hasMemo = true
+                    memoState = newState
+                    memoSelected = selectorInternal(newState)
+                    return memoSelected
+                }
+                const oldState = memoState
+                if(isEqual(oldState, newState)) return memoSelected
+                const oldSelected = memoSelected
+                const newSelected = selectorInternal(newState)
+                if(id) console.log(id, oldSelected == newSelected)
+                if(equalityFunction && equalityFunction(oldSelected, newSelected)) {
+                    //console.log(oldSelected, newSelected, equalityFunction(oldSelected, newSelected))
+                    return memoSelected
+                }
+                if(isEqual(oldSelected, newSelected)) return memoSelected
+                memoState = newState
+                memoSelected = newSelected
+                return newSelected
+            }
+
+            return () => memoSelector(store.get()) as GetStoreReturn<T>
+        }, [selector])
+        
+        //const getSnapshot = () => (selectorInternal!(store.get()) as GetStoreReturn<T>)
+
+        const state = useSyncExternalStore< GetStoreReturn<T> >(store.subscribe, getSnapshot)
+        return state
+    }
+    function setStore(): SetStoreReturn {
+        const store = useContext(StoreContext)
+        if(!store) {
+            throw new Error("You have to use useStore within the proper provider!")
+        }
+        return store.set
+    }
+    function checkContext():boolean {
+        const store = useContext(StoreContext)
+        console.log("check ", store != null)
+        return store != null
+    }
+
+    return {
+        Provider: StoreContextProvider,
+        getStore: getStore,
+        setStore: setStore,
+        checkContext
+    }
+}
+export default createFastContext
+export type StoreType = Parameters<ReturnType<typeof createFastContext>["Provider"]>[0]["initialState"]