stargazer-ui 1.2.0 → 1.2.1

package/src/NavDropdown/NavDropdown.types.ts

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

package/src/NavDropdown/index.ts

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

package/src/Overlay/Overlay.tsx

@@ -0,0 +1,277 @@
+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

@@ -0,0 +1,20 @@
+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/{Overlay/index.d.ts → src/Overlay/index.ts}

@@ -1,3 +1,3 @@
-import Overlay from "./Overlay";
-export default Overlay;
-export type { OverlayType, PositionObject } from "./Overlay.types";
+import Overlay from "./Overlay";
+export default Overlay
+export type { OverlayType, PositionObject } from "./Overlay.types"

package/src/Popout/Popout.tsx

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,42 @@
+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

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

package/src/Spinner/Spinner.tsx

@@ -0,0 +1,15 @@
+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

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

package/src/Spinner/index.ts

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

package/src/Table/Table.tsx

@@ -0,0 +1,16 @@
+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

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

package/src/Table/index.ts

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