stargazer-ui 1.2.1 → 1.2.2

package/src/Form/Form.tsx

@@ -1,445 +0,0 @@
-import React, { forwardRef, useContext, createContext, useMemo, useState, useRef, useEffect, InvalidEvent } from "react";
-
-import { FormCheckType, FormContextType, FormControlType, FormGroupType, FormLabelType, FormSliderType, FormTextType, FormType, FormSelectType, FormSelectControlType, FormSelectInputType, FormSelectListType, FormSelectListItemType, SelectContextType, SliderContextType } from "./Form.types";
-import useClassname from "../hooks/useClassname";
-import mergeRefs from "../utils/MergeRefs";
-import contrastingColor from "../utils/ContrastingColor";
-import { debounce } from "lodash";
-
-export const FormContext = createContext<FormContextType | null>(null)
-export const FormContextProvider = ({children, value} : {children: React.ReactNode, value:FormContextType}) => {
-    return (
-        <FormContext.Provider value={value}>
-            {children}
-        </FormContext.Provider>
-    )
-}
-export const useFormContext = () => {
-    const context = useContext(FormContext)
-    if(!context) {
-        return { controlId: null}
-    }
-    return context
-}
-
-
-const Form = forwardRef<HTMLFormElement, FormType>(({children, ...restProps}, ref) => {
-    return (
-        <form ref={ref} {...restProps}>
-            {children}
-        </form>
-    )
-})
-Form.displayName = "Form"
-
-
-const Control = forwardRef<HTMLInputElement, FormControlType>( (
-        {as = "input", className = "", plaintext = false, id="", type = "text", autoFocus=false, ...restProps}, ref
-) => {
-    let Component = as
-
-    const { controlId } = useFormContext()
-
-    let elementId = controlId ?? id
-
-    let computedClassName = (plaintext ? "sg-form-control-plaintext" : "sg-form-control") + (className != "" ? " "+className : "") + (type == "color" ? " sg-form-control-color" : "")
-
-    return (
-        <Component autoFocus={autoFocus} ref={ref} id={elementId} type={type} className={computedClassName} {...restProps} />
-    )
-})
-Control.displayName = "FormControl"
-
-const Group = forwardRef<HTMLDivElement, FormGroupType>( ({children, className, controlId, vertical, ...restProps}, ref) => {
-    const context = useMemo(() => {
-        return {controlId: controlId}
-    }, [controlId])
-    return (
-        <div ref={ref} className={`sg-form-group${className ? " "+className : ""}${vertical ? " sg-form-group-vertical":""}`} {...restProps}>
-            <FormContextProvider value={context}>
-                {children}
-            </FormContextProvider>
-        </div>
-    )
-})
-Group.displayName = "FormGroup"
- 
-const Label = forwardRef<HTMLLabelElement, FormLabelType>( ({children, className, htmlFor}, ref) => {
-    const { controlId } = useFormContext()
-
-    let elementHtmlFor = controlId ?? htmlFor
-    return (
-        <label ref={ref} htmlFor={elementHtmlFor} className={`sg-form-label${className ? " "+className : ""}`}>
-            {children}
-        </label>
-    )
-})
-Label.displayName = "FormLabel"
-
-const Check = forwardRef<HTMLInputElement, FormCheckType>( ({ children,
-        classNameContainer, containerRef, containerId, styleContainer,
-        classNameLabel, labelRef, label, labelId, styleLabel,
-        className, type="checkbox", id, reverse=false, style, onChange, ...restProps 
-    } , ref) => {
-    const { controlId } = useFormContext()
-    
-    const typeComputed = !["radio", "checkbox", "color"].includes(type) ? "checkbox" :  type
-
-    const [contrastColor, setContrastColor] = useState<React.CSSProperties>({})
-    const onChangeInternal = (event: React.ChangeEvent<HTMLInputElement>) => {
-        //setContrastColor({backgroundColor: "#"+contrastingColor(event.target.value)})
-        if(onChange) onChange(event)
-    }
-
-
-    return (
-        <div ref={containerRef} id={containerId} style={styleContainer} className={`sg-form-check${reverse ? " sg-form-check-reverse":""}${classNameContainer ? " "+classNameContainer : ""}${type === "switch" ? " sg-form-switch":""}`} >
-            {
-                controlId ?
-                    <input id={controlId} ref={ref} type={typeComputed} style={style} className={`sg-form-check-input${className ? " "+className : ""}`} onChange={event => onChangeInternal(event)} {...restProps} />
-                :
-                    <label ref={labelRef} id={labelId} style={styleLabel} className={`sg-form-check-label${classNameLabel ? " "+classNameLabel : ""}`}>
-                        {reverse ?
-                            <>
-                                <span>{children ?? label}</span>
-                                <input ref={ref} type={typeComputed} style={style} className={`sg-form-check-input${className ? " "+className : ""}`} onChange={event => onChangeInternal(event)} {...restProps} />
-                            </>
-                        :
-                            <>
-                                <input ref={ref} type={typeComputed} style={style} className={`sg-form-check-input${className ? " "+className : ""}`} onChange={event => onChangeInternal(event)} {...restProps} />
-                                <span>{children ?? label}</span>
-                            </>
-                        }
-                    </label>
-            }
-        </div>
-    )
-})
-Check.displayName = "FormCheck"
-
-const Text = forwardRef<HTMLElement, FormTextType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <small ref={ref} className={`sg-form-text${className ? " "+className:""}`} {...restProps}>
-            {children}
-        </small>
-    )
-})
-Check.displayName = "FormText"
-
-export const SliderContext = createContext<SliderContextType | null>(null)
-export const SliderContextProvider = ({children, value} : {children: React.ReactNode, value:SliderContextType}) => {
-    return (
-        <SliderContext.Provider value={value}>
-            {children}
-        </SliderContext.Provider>
-    )
-}
-export const useSliderContext = () => {
-    const context = useContext(SliderContext)
-    if(!context) {
-        throw new Error("UseSliderContext must be used within a SliderContextProvider!")
-    }
-    return context
-}
-
-const Slider = forwardRef<HTMLSpanElement, FormSliderType>( ({className, style, controlId, min=1, max=10, step=1, defaultValue=6, value, onChange, ...restProps}, ref) => {
-    const internalRef = useRef<HTMLDivElement>(null)
-    //if(internalRef.current) console.log(internalRef.current)
-    const trackEmpty = useRef<HTMLDivElement>(null)
-    const trackFilled = useRef<HTMLDivElement>(null)
-    const thumbRef = useRef<HTMLSpanElement>(null)
-    const [ internalValue, setInternalValue ] = useState(value ? value + 1 - min : defaultValue - min)
-    if(value && value != internalValue + min) {
-        setInternalValue(value - min)
-    }
-    const internalMin = min < 1 ? 1 : min
-    const internalMax = min < 1 ? max + 1 - min : max
-
-    const [ isGrabbing, setIsGrabbing ] = useState(false)
-    const updateValue = (value: number) => {
-        let parsedValue = value < internalMin - 1 ? internalMin - 1 : value
-        parsedValue = parsedValue > internalMax - internalMin ? internalMax - internalMin : parsedValue
-        if(parsedValue === internalValue) return
-
-        setInternalValue(parsedValue)
-        if(onChange) {
-            onChange(Math.abs(parsedValue) + min)
-        }
-    }
-    const getNearestStep = (event: React.PointerEvent, targetElement: HTMLElement) => {
-        const { pageX } = event
-        const paddingLeft = parseFloat(window.getComputedStyle(targetElement, null).getPropertyValue('padding-left'))
-        const leftEdge = targetElement.getBoundingClientRect().left + paddingLeft
-
-        const width = targetElement.scrollWidth - 2*paddingLeft
-        const thresholdDeltaX = width*(step)/(internalMax-internalMin)
-
-        const relativeMousePositionX = (pageX - leftEdge)/thresholdDeltaX < 0 ? 0 : (pageX - leftEdge)/thresholdDeltaX
-        const nearestStep = Math.round((pageX - leftEdge)/thresholdDeltaX)
-        return { relativeMousePositionX, nearestStep }
-    }
-
-    const onPointerDownTrack = (event: React.PointerEvent) => {
-        if(!internalRef.current) return
-        const { nearestStep } = getNearestStep(event, internalRef.current)
-        updateValue(nearestStep*step)
-    }
-    const onPointerDown = (event: React.PointerEvent) => {
-        (event.target as HTMLElement).setPointerCapture(event.pointerId)
-        setIsGrabbing(true)
-        if(!thumbRef.current) return
-        
-    }
-    
-    const onPointerMove = (event: React.PointerEvent) => {
-        if(!isGrabbing) return
-        if(!internalRef.current) return
-        const { relativeMousePositionX, nearestStep } = getNearestStep(event, internalRef.current)
-        //console.log(nearestStep)
-        const lowerBoundary = nearestStep === 0 || relativeMousePositionX === 0? -0.05 : 0.95*nearestStep
-        const upperBoundary = nearestStep === 0 || relativeMousePositionX === 0? 0.05 : 1.05*nearestStep
-        if(lowerBoundary < relativeMousePositionX && relativeMousePositionX < upperBoundary) {
-            updateValue(nearestStep*step)
-        }
-
-    }
-
-    const onPointerUp = (event: React.PointerEvent) => {
-        setIsGrabbing(false)
-    }
-
-    const onKeyDown = (event: React.KeyboardEvent) => {
-        let caseTrue = false
-        switch (event.key) {
-            case "ArrowLeft":
-            case "ArrowDown":
-                updateValue(internalValue - 1)
-                event.preventDefault()
-                break
-            case "ArrowRight":
-            case "ArrowUp":
-                updateValue(internalValue + 1)
-                event.preventDefault()
-                break
-            case "End":
-                updateValue(internalMax - 1)
-                event.preventDefault()
-                break
-            case "Home":
-                updateValue(internalMin - 1)
-                event.preventDefault()
-                break
-        }
-    }
-    const filled = (internalValue)/(internalMax-internalMin)
-    const pointerActions = {onPointerDown, onPointerMove, onPointerUp}
-    return (
-        <div  onPointerDown={onPointerDownTrack} ref={mergeRefs([ref, internalRef])} id={controlId} style={{...style, "--filled":filled*100+"%"} as React.CSSProperties} className={useClassname("sg-form-slider", className)}>
-            <span ref={trackFilled} className="sg-form-slider-filled" id={controlId+"-track-filled"}></span>
-            <span 
-                role="slider" tabIndex={0} ref={thumbRef} data-grabbing={isGrabbing} id={controlId+"-track-thumb"}
-                {...pointerActions} onKeyDown={onKeyDown} className="sg-form-slider-thumb"
-                aria-valuenow={internalValue + min} aria-valuemax={max} aria-valuemin={min} {...restProps}
-            ></span>
-            <span ref={trackEmpty} className="sg-form-slider-empty" id={controlId+"-track-empty"}></span>
-        </div>
-    )
-})
-Slider.displayName = "FormSlider"
-
-export const SelectContext = createContext<SelectContextType | null>(null)
-export const SelectContextProvider = ({children, value} : {children: React.ReactNode, value:SelectContextType}) => {
-    return (
-        <SelectContext.Provider value={value}>
-            {children}
-        </SelectContext.Provider>
-    )
-}
-export const useSelectContext = () => {
-    const context = useContext(SelectContext)
-    if(!context) {
-        throw new Error("UseSelectContext must be used within a SelectContextProvider!")
-    }
-    return context
-}
-
-const SelectTag = forwardRef<HTMLSelectElement, FormSelectType>( ({children, className, id, ...restProps}, ref) => {
-    const { controlId } = useFormContext()
-    const elementId = controlId ?? id
-    const classNames = ["sg-form-select-tag", className]
-    return (
-        <select ref={ref} className={`sg-form-select-tag${className ? " "+className : ""}`} id={elementId} {...restProps}>
-            {children}
-        </select>
-    )
-})
-SelectTag.displayName = "FormSelectTag"
-
-const Select = forwardRef<HTMLDivElement, FormSelectType>( ({children, className, id, required="false", ...restProps}, ref) => {
-    const { controlId } = useFormContext()
-
-    const internalSelectRef = useRef<HTMLDivElement>(null)
-
-    const [ showList, setShowList ] = useState<boolean>(false)
-    const [ activeDescendant, setActiveDescendant ] = useState<string>("")
-    const [ inputValue, setInputValue ] = useState<string>("")
-
-    let elementId = controlId ?? id
-
-    const context = useMemo(() => ({
-        internalId: elementId,
-        showList,
-        setShowList,
-        activeDescendant,
-        setActiveDescendant,
-        inputValue,
-        setInputValue
-    }), [showList, activeDescendant, inputValue])
-
-    useEffect(() => {
-        const selectElement = internalSelectRef.current
-        const handleClick = (event: MouseEvent) => {
-            if(!selectElement!.contains(event.target as HTMLElement)) {
-                setShowList(false)
-                document.querySelectorAll(".sg-select-control.focus").forEach(element => {
-                    element.classList.remove("focus")
-                })
-            }
-        }
-        if(selectElement) {
-            document.addEventListener("click", handleClick, true)
-        }
-        const handleSubmit = (event: any) => {
-            console.log(event.target)
-        }
-        document.addEventListener("invalid", handleSubmit, true)
-        return function cleanup() {
-            if(selectElement) {
-                document.removeEventListener("click", handleClick, true)
-            }
-            document.removeEventListener("invalid", handleSubmit, true)
-        }
-    }, [internalSelectRef.current])
-
-    return (
-        <div ref={mergeRefs([ref, internalSelectRef])} className={`sg-form-select${className ? " "+className : ""}`} id={elementId} {...restProps} >
-            <SelectContextProvider value={context}>
-                {children}
-            </SelectContextProvider>
-        </div>
-    )
-})
-Select.displayName = "FormSelect"
-
-const SelectControl = forwardRef<HTMLDivElement, FormSelectControlType>( ({children, className, placeholder="Placeholder...", searchable=false, inputRef, inputOptions, ...restProps}, ref) => {
-    const { setShowList, internalId } = useSelectContext()
-    const selectControlRef = useRef<HTMLDivElement>(null)    
-
-    const handlePointerUp = (event: React.MouseEvent) => {
-        setShowList(prev => !prev);
-        const selectControl = selectControlRef.current
-        if(selectControl) {
-            selectControl.classList.add("focus")
-            const eventTargetChildren = selectControl.children[0] as HTMLElement
-            if(eventTargetChildren) { eventTargetChildren.focus() }
-        }
-    }
-    const inputParams = {...inputOptions, disabled:searchable, placeholder:placeholder, ref:inputRef}
-    
-    return (
-        <div ref={mergeRefs([ref, selectControlRef])} onPointerUp={handlePointerUp} className={useClassname("sg-select-control", className)} {...restProps}>
-            <SelectInput {...inputParams}/>
-        </div>
-    )
-})
-SelectControl.displayName = "FormSelectControl"
-
-const SelectInput = forwardRef<HTMLInputElement, FormSelectInputType>( ({className, id, value, onChange, ...restProps}, ref ) => {
-    const { showList, setShowList, inputValue, setInputValue, internalId } = useSelectContext()
-
-    const debouncedInput = (value: string) => {
-        setTimeout(()=>{
-            setInputValue(value)
-         }, 300)
-    }
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        console.log(event)
-        if(!showList) { setShowList(true) }
-        if(onChange) { onChange(event) }
-        //debouncedInput(event.target.value)
-        setInputValue(event.target.value)
-    }
-    const handleKeyUp = (event: React.KeyboardEvent) => {
-        const key = event.key
-        switch(key) {
-            case "ArrowDown":
-                console.log("down arrow")
-                break
-            case "ArrowUp":
-                console.log("up arrow")
-                break
-        }
-    }
-
-
-    return (
-        <input value={inputValue} ref={ref}
-            onKeyUp={handleKeyUp} onChange={handleChange}
-            className={useClassname("sg-select-input", className)} 
-            {...restProps}
-        />
-    )
-})
-SelectInput.displayName = "FormSelectInput"
-
-const SelectList = forwardRef<HTMLUListElement, FormSelectListType>( ({children, className, id, ...restProps}, ref) => {
-    const { showList, internalId } = useSelectContext()
-
-    const listRef = useRef<HTMLUListElement>(null)
-    
-    return (
-        <ul ref={mergeRefs([ref, listRef])} className={useClassname("sg-select-list", className)} style={showList ? undefined : {display:"none"}} {...restProps}>
-            {children}
-        </ul>
-    )
-})
-SelectList.displayName = "FormSelectList"
-
-const SelectOption = forwardRef<HTMLLIElement, FormSelectListItemType>(({children, className, id, value,...restProps}, ref) => {
-    const { internalId } = useSelectContext()
-    const handlePointerEnter = (event: React.MouseEvent) => {
-        if(!event.target) return
-
-        let element = event.target as HTMLElement
-        let focusElement = document.querySelectorAll(".sg-select-list-item.focus")
-        //console.log(element, focusElement)
-        focusElement.forEach(element => element.classList.remove("focus"))
-        element.classList.add("focus")
-    }
-    const handlePointerUp = (event: React.MouseEvent) => {
-        console.log((event.target as HTMLElement).id)
-    }
-    return (
-        <li onPointerDown={handlePointerUp} onPointerOver={handlePointerEnter} id={value ?? id} className={useClassname("sg-select-list-item", className)} {...restProps}>
-            {children}
-        </li>
-    )
-})
-SelectOption.displayName = "FormSelectOption"
-
-
-export default  Object.assign(Form, {
-    Control: Control,
-    Select:  Object.assign(Select, {
-        Control: SelectControl,
-        Input: SelectInput,
-        Options: SelectList,
-        Option: SelectOption
-    }),
-    SelectTag: SelectTag,
-    Group: Group,
-    Label: Label,
-    Check: Check,
-    Text: Text,
-    Slider: Slider
-})

package/src/Form/Form.types.ts

@@ -1,117 +0,0 @@
-import { ReactNode, Dispatch, Children } from "react";
-
-import { BaseDivType, BaseFormType, BaseInputType, BaseLabelType, BaseLItemType, BaseSelectType, BaseSpanType, BaseSliderType, BaseSmallType, BaseUListType } from "../utils/BaseTypes";
-
-export type FormContextType = {
-    controlId: string
-}
-
-export type FormType = {
-    children: ReactNode
-} & BaseFormType
-
-export type FormControlType = {
-    as?: React.ElementType,
-    className?: string,
-    plaintext?: boolean,
-    id?: string,
-    type?: string,
-    autoFocus?: boolean
-} & BaseInputType
-
-// Form Select types
-export type SelectContextType = {
-    internalId?:string,
-    showList: boolean,
-    setShowList: Dispatch<React.SetStateAction<boolean>>,
-    activeDescendant: string,
-    setActiveDescendant: Dispatch<React.SetStateAction<string>>,
-    inputValue: string, 
-    setInputValue: Dispatch<React.SetStateAction<string>>
-}
-export type FormSelectType = {
-    children: ReactNode,
-    className?: string,
-    id?: string,
-    required?: boolean
-} & (BaseSelectType & BaseDivType)
-export type FormSelectControlType = {
-    children?: ReactNode,
-    className?: string,
-    placeholder?: string,
-    searchable?: boolean,
-    inputRef?: React.Ref<HTMLInputElement>,
-    inputOptions?: FormSelectInputType
-} & BaseDivType
-export type FormSelectInputType = {
-    className?: string,
-    id?: string
-} & BaseInputType
-export type FormSelectListType = {
-    children: ReactNode,
-    className?: string,
-    id?: string
-} & BaseUListType
-export type FormSelectListItemType = {
-    children: ReactNode,
-    className?: string,
-    id?: string,
-    value?: string
-} & BaseLItemType
-
-
-export type FormGroupType = {
-    children: ReactNode,
-    className?: string,
-    controlId: string,
-    vertical?: boolean
-} & BaseDivType
-
-export type FormLabelType = {
-    children: ReactNode,
-    className?: string,
-    htmlFor?: string
-} & BaseLabelType
-
-export type FormCheckType = {
-    children?: ReactNode,
-    style?: React.CSSProperties,
-    classNameContainer?:string,
-    containerRef?:React.LegacyRef<HTMLDivElement>,
-    containerId?: string,
-    styleContainer?: React.CSSProperties,
-    classNameLabel?: string,
-    labelRef?: React.LegacyRef<HTMLLabelElement>,
-    label?: string,
-    labelId?: string,
-    styleLabel?: React.CSSProperties,
-    className?: string,
-    type?: string,
-    controlId?: string,
-    reverse?: boolean,
-} & BaseInputType
-
-export type FormTextType = {
-    children: ReactNode,
-    className?: string,
-} & BaseSmallType
-
-export type FormSliderType = {
-    children?: ReactNode,
-    className?: string,
-    style?: React.CSSProperties,
-    controlId: string,
-    min?: number,
-    max?: number,
-    step?: number,
-    defaultValue?: number,
-    value: number,
-    onChange(value :number): () => any
-} & BaseSpanType // BaseSliderType
-export type SliderContextType = {
-    children: ReactNode,
-    controlId: string,
-    min?: number,
-    max?: number,
-    step?: number
-}

package/src/Form/index.ts

@@ -1,4 +0,0 @@
-import Form from "./Form"
-export default Form
-export {FormContextProvider, useFormContext} from "./Form"
-export type {FormCheckType, FormContextType, FormControlType, FormGroupType, FormLabelType, FormSelectType, FormTextType, FormType} from "./Form.types"

package/src/InputGroup/InputGroup.tsx

@@ -1,46 +0,0 @@
-import React, { forwardRef, useMemo } from "react"
-
-import { InputGroupText, InputGroupType, InputGroupGridType } from "./InputGroup.types"
-
-import { FormContextProvider, useFormContext } from "../Form"
-import { useClassname } from "../hooks"
-
-const InputGroup = forwardRef<HTMLDivElement, InputGroupType>(({children, className, controlId,  ...restProps}, ref) => {
-    const context = useMemo(() => {
-        return {controlId: controlId}
-    }, [controlId])
-    return (
-        <div ref={ref} className={useClassname("sg-input-group", className)} {...restProps}>
-            <FormContextProvider value={context}>
-                {children}
-            </FormContextProvider>
-        </div>
-    )
-})
-InputGroup.displayName = "InputGroup"
-
-const Grid = forwardRef<HTMLDivElement, InputGroupGridType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <div ref={ref} className={useClassname("sg-input-group-grid", className)}>
-            {children}
-        </div> 
-    )
-})
-Grid.displayName = "InputGroupGrid"
-
-const Text = forwardRef<HTMLLabelElement, InputGroupText>( ({children, className, htmlFor, ...restProps}, ref) => {
-    const { controlId } = useFormContext()
-
-    const computedHtmlFor = controlId ?? htmlFor
-    return (
-        <label ref={ref} htmlFor={computedHtmlFor} className={useClassname("sg-input-group-text", className)} {...restProps}>
-            {children}
-        </label>
-    )
-})
-Text.displayName = "InputGroupText"
-
-export default  Object.assign(InputGroup, {
-    Text: Text,
-    Grid: Grid
-})

package/src/InputGroup/InputGroup.types.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-
-import { BaseDivType, BaseLabelType } from "../utils/BaseTypes";
-
-export type InputGroupType = {
-    children: ReactNode,
-    className?: string,
-    controlId: string
-} & BaseDivType
-
-export type InputGroupText = {
-    children: ReactNode,
-    className?: string,
-    htmlFor?: string
-} & BaseLabelType
-
-export type InputGroupGridType = {
-    children: ReactNode,
-    className?:string,
-
-} & BaseDivType

package/src/InputGroup/index.ts

@@ -1,4 +0,0 @@
-import InputGroup from "./InputGroup"
-export default InputGroup
-export * from "./InputGroup"
-export type { InputGroupText, InputGroupType} from "./InputGroup.types"