stargazer-ui 1.2.1 → 1.3.0

package/src/NavDropdown/NavDropdown.types.ts

@@ -1,6 +0,0 @@
-import { DropdownType } from "../Dropdown/Dropdown.types"
-
-export type NavDropdownType = {
-    toggleProps?: any,
-    menuProps?:any
-} & DropdownType

package/src/NavDropdown/index.ts

@@ -1,3 +0,0 @@
-import NavDropdown from "./NavDropdown"
-export default NavDropdown
-export type { NavDropdownType } from "./NavDropdown.types"

package/src/Overlay/Overlay.tsx

@@ -1,277 +0,0 @@
-import React, { useEffect, useRef, useState, cloneElement, forwardRef, ReactNode, useLayoutEffect } from "react";
-import { createPortal } from "react-dom";
-import { OverlayType, PositionObject } from "./Overlay.types";
-
-import mergeRefs from "../utils/MergeRefs";
-
-const setPosition = (referenceElement:any, overlayElement:any, position:string, arrowElement: any, isArrow: boolean=false, boundaryCorrection: PositionObject = {top:0, left:0, bottom: 0, right: 0}) => {
-    const refCurrent = referenceElement.current as HTMLElement 
-    const overlayCurrent = overlayElement.current as HTMLElement 
-    const arrowCurrent = arrowElement.current as HTMLElement 
-
-    const refTop = refCurrent.getBoundingClientRect().top
-    const refHeight = refCurrent.offsetHeight
-    const refLeft = refCurrent.getBoundingClientRect().left
-    const refWidth = refCurrent.offsetWidth
-
-    const overlayHeight = overlayCurrent.clientHeight
-    const overlayWidth = overlayCurrent.clientWidth
-
-    const arrowHeight = arrowCurrent.clientHeight
-    const arrowWidth = arrowCurrent.clientWidth
-
-    const arrowOffsetHeight = isArrow ? 0 : arrowHeight - 1
-    const arrowOffsetWidth = isArrow ? 0 : arrowWidth - 1
-
-    const correctPosition = (position:string, offset:number, boundary:number) => {
-        const positionKey = position as keyof typeof tempPos
-        if(overlayCurrent.getBoundingClientRect()[positionKey]<= boundary) {
-            return offset
-        }
-        else {
-            return tempPos[positionKey]
-        }
-    }
-
-    let tempPos: PositionObject
-    switch(position) {
-        case "top": 
-            tempPos = { 
-                top: refTop - overlayHeight - arrowOffsetHeight, 
-                left: refLeft + refWidth/2 - overlayWidth/2 
-            }
-            //tempPos.right = correctPosition("right", 12, 0)
-            //tempPos.left = correctPosition("left", 0, 0)
-            return tempPos
-        case "right":
-            tempPos = { 
-                top: refTop + refHeight/2 - overlayHeight/2, 
-                left: refLeft + refWidth + arrowOffsetWidth
-            }
-            //tempPos.bottom = correctPosition("bottom", window.scrollY + window.innerHeight, 0)
-            //tempPos.top = correctPosition("top", window.scrollY, 48)
-            return tempPos
-        case "bottom":
-            tempPos = { 
-                top: refTop + refHeight  + arrowOffsetHeight, 
-                left: refLeft + refWidth/2 - overlayWidth/2 
-            }
-            //tempPos.right = correctPosition("right", 12, 0)
-            //tempPos.left = correctPosition("left", 0, 0)
-            return tempPos
-        case "left":
-            tempPos = { 
-                top: refTop + refHeight/2 - overlayHeight/2, 
-                left: refLeft - overlayWidth - arrowOffsetWidth
-            }
-            //tempPos.bottom = correctPosition("bottom", window.scrollY + window.innerHeight, 0)
-            //tempPos.top = correctPosition("top", window.scrollY, 48)
-            return tempPos
-        default:
-            //this is just top
-            return { top: refTop - overlayHeight - arrowHeight, left: refLeft + refWidth/2 - overlayWidth/2 }
-    }
-}
-
-const updateAutoPosition = (autoPositionRef:any, positionRef:any, overlayRef:any, arrowRef:any) => {
-    let topDistance = positionRef.current.getBoundingClientRect().top
-    let bottomDistance = window.innerHeight - positionRef.current.getBoundingClientRect().bottom
-    let leftDistance = positionRef.current.getBoundingClientRect().left
-    let rightDistance = window.innerWidth - positionRef.current.getBoundingClientRect().right
-
-    let totalOverlayWidth = overlayRef.current.clientWidth + arrowRef.current.clientWidth + 48
-    let totalOverlayHeight = overlayRef.current.clientHeight + arrowRef.current.clientHeight + 48
-    //console.log(autoPositionRef.current, positionRef.current, overlayRef.current, arrowRef.current)
-
-    if(topDistance >= totalOverlayHeight) {
-        return "top"
-    } else if(topDistance >= totalOverlayHeight/2) {
-        return rightDistance >= totalOverlayWidth ? "right" : "left"
-    } else if(bottomDistance >= totalOverlayHeight) {
-        return "bottom"
-    } else {
-        return autoPositionRef.current
-    }
-}
-
-const Overlay = forwardRef<HTMLDivElement, OverlayType>( ({children, overlay, tooltip, show=false, onToggle, position="auto", trigger="click", defaultShow=false}, ref) => {
-    if(Array.isArray(children)) {
-        throw new Error(
-            "Overlay can only wrap a single element, either introduce a wrapper or remove all but one trigger element!"
-        )
-    }
-    
-    const positionRef = useRef<typeof children | null>(null)
-    const overlayRef = useRef<HTMLDivElement | null>(null)
-    const arrowRef = useRef<HTMLDivElement>(null)
-    const [arrowPosition, setArrowPosition] = useState<PositionObject>({top:0, left:0})
-    const [overlayPosition, setOverlayPosition] = useState<PositionObject>({top:0, left:0})
-    const [internalShow, setInternalShow] = useState(defaultShow)
-    const internalShowRef = useRef(internalShow)
-    const setInternalShowRef = (updatedValue: boolean) => {
-        internalShowRef.current = updatedValue
-        setInternalShow(updatedValue)
-    }
-    if(show && show != internalShow) {
-        console.log("show")
-        setInternalShowRef(show)
-    }
-
-    //const positionsList = ["top", "right", "bottom", "left"]
-    const [autoPosition, setAutoPosition] = useState(position === "auto" ? "top" : position)
-    const autoPositionRef = useRef(autoPosition)
-    const setAutoPositionRef = (updatedValue: any) => {
-        autoPositionRef.current = updatedValue
-        setAutoPosition(updatedValue)
-    }
-
-    const [isHovering, setIsHovering] = useState(false)
-    const [isFocused, setIsFocused] = useState(false)
-    const [firstClick, setFirstClick] = useState(true)
-    const triggerArray = Array.isArray(trigger) ? trigger : [trigger]
-
-    const positionSetter = (positionRef:any , overlayRef: any, arrowRef: any) => {
-        setOverlayPosition( setPosition(positionRef, overlayRef, autoPositionRef.current, arrowRef) )
-        setArrowPosition( setPosition(positionRef, arrowRef, autoPositionRef.current, arrowRef, true) )
-    }
-    const handleScroll = () => {
-        if(internalShowRef.current) {
-            positionSetter(positionRef, overlayRef, arrowRef)
-        }
-        if(internalShowRef.current && position === "auto") {
-            let updatedPosition = updateAutoPosition(autoPositionRef, positionRef, overlayRef, arrowRef)
-            setAutoPositionRef(updatedPosition)
-        }
-    }
-    const resizeHandler = () => {
-        if(internalShowRef.current) {
-            positionSetter(positionRef, overlayRef, arrowRef)
-        }
-        if(!internalShowRef.current && position === "auto") {
-            //setAutoPosition(detectAutoPostition(overlayRef, autoPositionRef))
-        }
-    }
-
-    /* Event handler funtions */
-    const onClick = (event: MouseEvent) => {
-        //console.log("click")
-        if(isFocused && firstClick) {
-            //this is needed in case both "focus" and "click" are triggers, otherwise there's weird behaviour
-            setFirstClick(false) 
-            return
-        }
-        setInternalShowRef(!internalShow)
-        if(onToggle) {
-            onToggle(!internalShow)
-        }
-    }
-    const onHover = (event: MouseEvent) => {
-        setInternalShowRef(true)
-        if(!isHovering) {
-            setIsHovering(true)
-            if(onToggle) {
-                onToggle(true)
-            }
-        }
-    }
-    const onFocus = (event: MouseEvent) => {
-        //console.log("focus")
-        setInternalShowRef(true)
-        setIsFocused(true)
-        if(onToggle) {
-            onToggle(true)
-        }
-    }
-    const onBlur = (event: MouseEvent) => {
-        //console.log("blur")
-        if(isHovering) {
-            setIsHovering(false)
-        } else if(isFocused) {
-            setIsFocused(false)
-            setFirstClick(true)
-        }
-        setInternalShowRef(false)
-        if(onToggle) {
-            onToggle(false)
-        }
-    }
-    useLayoutEffect(() => {
-        if(overlayRef.current && arrowRef.current) {
-            positionSetter(positionRef, overlayRef, arrowRef)
-        }
-    }, [])
-
-    useEffect(() => {
-        if(overlayRef.current && arrowRef.current) {
-            positionSetter(positionRef, overlayRef, arrowRef)
-        }
-        //setInternalShowRef(show)
-    },[internalShow, overlayRef, positionRef, autoPosition])
-
-
-    useEffect(() => {
-        window.addEventListener("scroll", handleScroll, true)
-        window.addEventListener("resize", resizeHandler, true)
-        return function cleanup() {
-            window.removeEventListener("scroll", handleScroll, true)
-            window.removeEventListener("resize", resizeHandler, true)
-        }
-    }, [])
-
-    const checkRefPositionStyle = (positionRef: any) => {
-        let elementComputedPositionStyle = getComputedStyle(positionRef.current)["position"]
-        if(elementComputedPositionStyle === "fixed") {
-            return "fixed"
-        } else if(elementComputedPositionStyle === "sticky") {
-            return "sticky"
-        } else {
-            return "absolute"
-        }
-    }
-    return (
-        <>
-            {
-                cloneElement(children as any, {
-                    ref: positionRef,
-                    onClick: triggerArray.find(trigger => trigger === "click") ? onClick : null,
-                    onMouseOver: triggerArray.find(trigger => trigger === "hover") ? onHover : null,
-                    onMouseLeave: triggerArray.find(trigger => trigger === "hover") ? onBlur : null,
-                    onFocus: triggerArray.find(trigger => trigger === "focus") ? onFocus : null,
-                    onBlur: triggerArray.find(trigger => trigger === "focus") ? onBlur : null,
-                })
-            }
-            {internalShow ? createPortal(
-                overlay ?
-                    <>
-                        <div className="sg-overlay-wrapper"
-                            ref={mergeRefs([ref,overlayRef])}
-                            style={{ position:checkRefPositionStyle(positionRef), top:overlayPosition!.top, left:overlayPosition!.left }}
-                        >{overlay}</div>
-                        <div
-                            ref={arrowRef} aria-hidden
-                            className={`sg-overlay-arrow${autoPosition ? " overlay-position-"+autoPosition : ""}`} 
-                            style={{position:checkRefPositionStyle(positionRef), top:arrowPosition!.top, left:arrowPosition!.left,}}>
-                        </div>
-                    </>
-                    :
-                tooltip ? 
-                    <>
-                        <div className="sg-overlay-wrapper sg-tooltip-wrapper"
-                            ref={mergeRefs([ref,overlayRef])}
-                            style={{ position:checkRefPositionStyle(positionRef), top:overlayPosition!.top, left:overlayPosition!.left }}
-                        >{tooltip}</div>
-                        <div
-                            ref={arrowRef} aria-hidden
-                            className={`sg-overlay-arrow sg-tooltip-arrow${autoPosition ? " overlay-position-"+autoPosition : ""}`} 
-                            style={{position:checkRefPositionStyle(positionRef), top:arrowPosition!.top, left:arrowPosition!.left,}}>
-                        </div>
-                    </>
-                    :
-                null
-            , document.body) : null}
-        </>
-    )
-})
-Overlay.displayName = "Overlay"
-
-export default Overlay

package/src/Overlay/Overlay.types.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from "react"
-import { BaseDivType } from "../utils/BaseTypes"
-
-export type OverlayType = {
-    children: ReactNode,
-    overlay?: React.JSX.Element,
-    tooltip?: React.JSX.Element,
-    show?: boolean,
-    onToggle?: Function,
-    position?: string,
-    trigger?: string | string[],
-    defaultShow?: boolean
-} & BaseDivType
-
-export type PositionObject = {
-    top?: number, 
-    bottom?: number, 
-    left?: number, 
-    right?:number
-}

package/src/Popout/Popout.tsx

@@ -1,155 +0,0 @@
-import { createPortal } from "react-dom";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
-
-import mergeRefs from "../utils/MergeRefs";
-
-import { PopoutType, PopoutBodyType, PopoutFooterType, PopoutHeaderType, PopoutTextType, PopoutTitleType } from "./Popout.types";
-/*
-export const useEventListener = (eventType: keyof HTMLElementEventMap, callback: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions | undefined, customOptions: {element: HTMLElement}) => {
-    const element = customOptions ? customOptions.element : document.body
-    useEffect(() => {
-        if(element) {
-            element.addEventListener(eventType, callback, options)
-            return function cleanup() {
-                element.removeEventListener(eventType, callback, options)
-            }
-        }
-    }, [callback, element])
-}
-*/
-
-const Popout = forwardRef<HTMLDialogElement, PopoutType>(({children, initialPosition={top:0, left:0}, id, resize=false, move=false, className, style, ...restProps}, ref) => {
-    const [coordinates, setCoordinates] = useState<{ top?: number, bottom?: number, right?: number, left?: number, offSetTop:number, offSetLeft:number }>({offSetTop:0, offSetLeft:0, ...initialPosition})
-    const resizeComputed = resize ? "true":"false"
-    const moveComputed = move ? "true":"false"
-    
-    const passedRef = useRef(ref)
-    const popupRef = useRef<HTMLDialogElement>(null)
-    const [ isMouseDown, setIsMouseDown ] = useState<boolean>(false)
-    const isMouseDownRef = useRef(isMouseDown)
-    useEffect(() => {
-        isMouseDownRef.current = isMouseDown
-    }, [isMouseDown])
-
-    const onMouseDown = (event: React.PointerEvent<HTMLDialogElement>) => {
-        const eventTarget = event.target as HTMLElement
-        if(move && eventTarget.className.includes("sg-popout-title") || eventTarget.className.includes("sg-popout-header")) {
-            const { top, left} = popupRef.current!.getBoundingClientRect();
-            setCoordinates(prev => ({
-                ...prev,
-                offSetTop:event.clientY - top,
-                offSetLeft:event.clientX - left
-            }))
-            popupRef.current!.style.setProperty("user-select", "none")
-            popupRef.current!.setPointerCapture(event.pointerId)//event.pointerId)//"moveable-popup-"+id);
-            setIsMouseDown(true)
-        }
-    }
-    const onMouseUp = () => {
-        if(move) {
-            popupRef.current!.style.removeProperty("user-select")
-            setIsMouseDown(false)
-        }
-    }
-    const onMouseMove = (event: React.PointerEvent<HTMLDialogElement>) => {
-        if( move && isMouseDownRef.current && popupRef.current ) {
-            const isTopOver = event.clientY - coordinates.offSetTop < 0
-            const isBottomOver = window.innerHeight - (event.clientY - coordinates.offSetTop + popupRef.current.offsetHeight) < 0
-            const isLeftOver = event.clientX - coordinates.offSetLeft < 0
-            const isRightOver = window.innerWidth - (event.clientX - coordinates.offSetLeft + popupRef.current.offsetWidth) < 0
-
-            let topCoordinate = isTopOver ? 0 : event.clientY - coordinates.offSetTop
-            topCoordinate = isBottomOver ? window.innerHeight - popupRef.current.offsetHeight : topCoordinate
-
-            let leftCoordinate = isLeftOver ? 0 : event.clientX - coordinates.offSetLeft
-            leftCoordinate = isRightOver ? window.innerWidth - popupRef.current.offsetWidth : leftCoordinate
-
-            //console.log(event.clientX - coordinates.offSetLeft, event.clientY - coordinates.offSetTop)
-            setCoordinates(prev => ({
-                ...prev,
-                top:topCoordinate,
-                left:leftCoordinate
-            }))
-        }
-    }
-
-    useEffect(() => {
-        document.body.addEventListener("pointerup", () => onMouseUp(), true)
-        return function cleanup() {
-            document.body.removeEventListener("pointerup", () => onMouseUp(), true)
-        }
-    }, [])
-    return (
-        createPortal(
-            <dialog data-resize={resizeComputed} data-move={moveComputed} data-passedref={passedRef}
-                ref={mergeRefs([ref,popupRef])} id={id} className={`sg-moveable-popout${className ? " "+className : ""}`}
-                style={{...style, top:coordinates.top, left:coordinates.left, bottom:coordinates.bottom, right:coordinates.right}}
-                onPointerDown={onMouseDown} onPointerMove={(event) => onMouseMove(event)} {...restProps}
-            >
-                {children}
-            </dialog>
-            , document.body
-        )
-    )
-})
-Popout.displayName = "Popout"
-
-const Header = forwardRef<HTMLDivElement | HTMLSpanElement | HTMLHeadingElement, PopoutHeaderType>(
-        ({ children, className, as = "div", ...restProps}, ref) => 
-    {
-    let validAs = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"]
-    let Component = validAs.find(valid => valid === as) ? as : "div"
-    return (
-        <Component ref={ref} className={`sg-popout-header ${className}`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Header.displayName = "PopoutHeader"
-
-const Title = forwardRef<HTMLHeadingElement, PopoutTitleType>( ({as="h4", className, children, ...restProps}, ref) => {
-    let validAs = ["h1", "h2", "h3", "h4", "h5", "h6"]
-    let Component = validAs.find(valid => valid === as) ? as : "h5"
-    return (
-        <Component ref={ref} className={`sg-popout-title ${className}`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Title.displayName = "PopoutTitle"
-
-const Body = forwardRef<HTMLDivElement, PopoutBodyType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <div ref={ref} className={`sg-popout-body ${className}`} {...restProps}>
-            {children}
-        </div>
-    )
-})
-Body.displayName = "PopoutBody"
-
-const Text = forwardRef<HTMLParagraphElement, PopoutTextType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <p ref={ref} className={`sg-popout-text ${className}`} {...restProps}>
-            {children}
-        </p>
-    )
-})
-Text.displayName = "PopoutText"
-
-const Footer = forwardRef<HTMLDivElement, PopoutFooterType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <div ref={ref} className={`sg-popout-footer ${className}`} {...restProps}>
-            {children}
-        </div>
-    )
-})
-Footer.displayName = "PopoutFooter"
-
-export default  Object.assign(Popout, {
-    Header: Header,
-    Title: Title,
-    Body: Body,
-    Text: Text,
-    Footer: Footer
-})
-

package/src/Popout/Popout.types.ts

@@ -1,42 +0,0 @@
-import { ReactNode } from "react"
-import { BaseDialogType, BaseDivType, BaseHeadingType, BaseParagraphType, BaseSpanType } from "../utils/BaseTypes"
-
-export type PopoutType = {
-    children: ReactNode,
-    initialPosition?: {
-        top?: number,
-        bottom?: number,
-        right?: number,
-        left?: number
-    },
-    id?: string,
-    resize?: boolean,
-    move?: boolean,
-} & BaseDialogType
-
-export type PopoutHeaderType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType
-} & (BaseDivType | BaseHeadingType | BaseSpanType)
-
-export type PopoutTitleType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType
-} & BaseHeadingType
-
-export type PopoutBodyType = {
-    children: ReactNode,
-    className?: string,
-} & BaseDivType
-
-export type PopoutTextType = {
-    children: ReactNode,
-    className?: string,
-} & BaseParagraphType
-
-export type PopoutFooterType = {
-    children: ReactNode,
-    className?: string,
-} & BaseDivType

package/src/Popout/index.ts

@@ -1,3 +0,0 @@
-import Popout from "./Popout"
-export default Popout
-export type {PopoutBodyType, PopoutFooterType, PopoutHeaderType, PopoutTextType, PopoutTitleType, PopoutType} from "./Popout.types"

package/src/Spinner/Spinner.tsx

@@ -1,15 +0,0 @@
-import React, { forwardRef } from "react";
-
-import { SpinnerType } from "./Spinner.types";
-
-const Spinner = forwardRef<HTMLDivElement, SpinnerType>( ({size="1em", color="white", label, className, controlId, ...restProps}, ref) => {
-    return (
-        <>
-            <div aria-labelledby={controlId} role="status" ref={ref} className={`sg-spinner${className ? " "+className : ""}`} style={{width:size, height:size, borderColor:color}} {...restProps}></div>
-            <label id={controlId} className="sg-visually-hidden">{label}</label>
-        </>
-    )
-})
-Spinner.displayName = "Spinner"
-
-export default Spinner

package/src/Spinner/Spinner.types.ts

@@ -1,7 +0,0 @@
-export type SpinnerType = {
-    label: string,
-    size?: string,
-    color?: string,
-    className?: string,
-    controlId?: string,
-}

package/src/Spinner/index.ts

@@ -1,3 +0,0 @@
-import Spinner from "./Spinner"
-export default Spinner
-export type { SpinnerType } from "./Spinner.types"

package/src/Table/Table.tsx

@@ -1,16 +0,0 @@
-import React, { forwardRef } from "react";
-
-import { TableType } from "./Table.types";
-
-
-const Table = forwardRef<HTMLTableElement, TableType>( ({children, size="lg", className, ...restProps}, ref) => {
-    let classesComputed = `sg-table${className ? " "+className:""}${size === "sm" ? " "+"sg-table-sm":""}`
-    return (
-        <table ref={ref} className={classesComputed} {...restProps}>
-            {children}
-        </table>
-    )
-})
-Table.displayName = "Table"
-
-export default Table

package/src/Table/Table.types.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-
-import { BaseTableType } from "../utils/BaseTypes";
-
-export type TableType = {
-    children: ReactNode,
-    size?: string,
-    className?: string,
-} & BaseTableType

package/src/Table/index.ts

@@ -1,3 +0,0 @@
-import Table from "./Table"
-export default Table
-export type { TableType } from "./Table.types"