stargazer-ui 1.2.0 → 1.2.1

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,215 @@
+import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
+
+import { TabsButtonType, TabsContentType, TabsContextType, TabsControlsType, TabsPageType, TabsType, TabsScrollButtonType } from "./Tabs.types"
+
+import mergeClassnames from "../utils/MergeClassnames"
+import mergeRefs from "../utils/MergeRefs"
+import { useScreenSize } from "../hooks"
+
+const TabsContext = createContext<TabsContextType | null>(null)
+const TabsContextProvider = ({children, value}:{children: React.ReactNode, value: TabsContextType}) => {
+    return (
+        <TabsContext.Provider value={value}>
+            {children}
+        </TabsContext.Provider>
+    )
+}
+const useTabsContext = () => {
+    const context = useContext(TabsContext)
+    if(!context) {
+        throw new Error(
+            "useTabContext has to be used within a TabContextProvider!"
+        )
+    }
+    return context
+}
+
+const Tabs = forwardRef<HTMLDivElement, TabsType>(({children, className, controlId, activeClassName, defaultActive, active, onTabChange, ...restProps}, ref) => {
+    const [activeTab, setActiveTab] = useState<string>(defaultActive)
+    const activeClass= activeClassName ? activeClassName: "sg-active"
+    if(active && activeTab != active) {
+        setActiveTab(active)
+    }
+
+    if(active && !onTabChange || !active && onTabChange) {
+        throw new Error(
+            "If you control the tabs externally, you need both an 'active' state and a function 'onTabChange' that controls the 'active' state!"
+        )
+    }
+    
+    const contextValue = useMemo(() => ({
+        activeTab,
+        setActiveTab,
+        controlId,
+        activeClass,
+        onTabChange
+    }), [activeTab, activeClass, controlId, activeClass, onTabChange])
+    return (
+        <TabsContextProvider value={contextValue}>
+            <div ref={ref} id={controlId+"-tab-wrapper"} className={`sg-tabs${className ? " "+className: ""}`} {...restProps}>
+                {children}
+            </div>
+        </TabsContextProvider>
+    )
+})
+Tabs.displayName = "Tabs"
+
+const ScrollButton = forwardRef<HTMLButtonElement, TabsScrollButtonType>( ({className, left = true, controlsRef, style, ...restProps}, ref) => {
+    const internalRef = useRef<HTMLButtonElement>(null)
+
+    const handleScrollBy = () => {
+        if(!controlsRef || !controlsRef.current) return
+
+        const tabControls = controlsRef.current
+        const toScroll = (left ? -1 : 1) * 32
+        tabControls.scrollBy(toScroll, 0)
+    }
+ 
+    let scrollIntervalId: NodeJS.Timeout
+    const handlePointerDown = (event: React.MouseEvent<HTMLButtonElement>) => {
+        clearInterval(scrollIntervalId)
+        scrollIntervalId = setInterval(handleScrollBy, 20)
+    }
+    const handlePointerUp = (event: React.MouseEvent<HTMLButtonElement>) => {
+        clearInterval(scrollIntervalId)
+    }
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement> ) => {
+        if(event.key === "Space" || event.key === "Enter") {
+            clearInterval(scrollIntervalId)
+            scrollIntervalId = setInterval(handleScrollBy, 20)
+            return
+        }
+        clearInterval(scrollIntervalId)
+    }
+    const handleKeyUp = (event: React.KeyboardEvent<HTMLButtonElement> ) => {
+        clearInterval(scrollIntervalId)
+    }
+
+
+    
+    return (
+        <button 
+            type="button" ref={mergeRefs([ref, internalRef])} data-position={left ? "left":"right"} 
+            onPointerDown={handlePointerDown} onPointerUp={handlePointerUp} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}
+            className={mergeClassnames("sg-tabs-button", "sg-tabs-scroll-button", className)}
+            {...restProps} >
+            <span className="visually-hidden">Scroll tab controls {left ? "left":"right"}</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+                <polyline 
+                    points={left ? "144 88 104 128 144 168" : "112 88 152 128 112 168" } //168 64 104 128 168 192
+                    fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32"
+                />
+            </svg>
+        </button>
+    )
+})
+
+const Controls = forwardRef<HTMLDivElement, TabsControlsType>( ({children, className, ...restProps}, ref) => {
+    const { controlId, activeClass } = useTabsContext()
+    const [ isOverflow, setIsOverflow ] = useState(false)
+    const internalRef = useRef<HTMLDivElement>(null)
+
+    const checkWidthOverflow = () => {
+        if(!internalRef.current) return
+
+        const el = internalRef.current
+        setIsOverflow(el.clientWidth < el.scrollWidth)
+    }
+    useLayoutEffect(() => {
+        console.log(internalRef.current)
+        checkWidthOverflow()
+    }, [children])
+    useEffect(() => {
+        window.addEventListener("resize", checkWidthOverflow, true)
+        return function cleanup() {
+            window.removeEventListener("resize", checkWidthOverflow, true)
+        }
+    }, [])
+    
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const key = event.key
+        const tabsControls = internalRef.current
+        if(tabsControls) {
+            const tabControlsChildren = Array.from(tabsControls.children) as HTMLElement[]
+            let newIndex
+            if(key === "ArrowRight" || key === "ArrowLeft") {
+                event.preventDefault()
+                const activeTab = document.querySelector(".sg-tabs-button"+"."+activeClass) as HTMLElement
+                const activeTabIndex = tabControlsChildren.indexOf(activeTab)
+                const indexChange = key === "ArrowRight" ? 1 : -1
+                newIndex = activeTabIndex + indexChange < 0 ? tabControlsChildren.length - 1 : (activeTabIndex + indexChange >= tabControlsChildren.length ? 0 : activeTabIndex + indexChange)
+            } else if (key === "Home" || key === "End") {
+                event.preventDefault()
+                newIndex = key === "Home" ? 0 : tabControlsChildren.length -1
+            }
+            if(!newIndex) return
+            tabControlsChildren[newIndex].focus()
+            tabControlsChildren[newIndex].click()
+        }
+    }
+//div style={{maxWidth:"100%", display:"flex", overflowX:"auto"}}
+    return (
+        <div tabIndex={-1} onKeyDown={(event) => handleKeyDown(event)} role="tablist" id={controlId+"-tab-controls"} ref={mergeRefs([ref, internalRef])} className={`sg-tabs-controls${className ? " "+className:""}`} {...restProps}>
+            {isOverflow ? <ScrollButton controlsRef={internalRef} /> : null }
+            {children}
+            {isOverflow ? <ScrollButton controlsRef={internalRef} left={false}/> : null }
+        </div>
+    )
+})
+Controls.displayName = "TabsControl"
+
+const Button = forwardRef<HTMLButtonElement, TabsButtonType>( ({children, className, onClick, tabId, id,...restProps}, ref) => {
+    const { activeTab, setActiveTab, activeClass, onTabChange } = useTabsContext()
+    const isActiveTab = activeTab === tabId
+    const classNameComputed = "sg-tabs-button" + (className ? " "+className:"") + (isActiveTab ? " "+activeClass : "")
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        if(onTabChange) {
+            onTabChange(tabId)
+        }
+        else {
+            setActiveTab(tabId)
+        }
+        if(onClick) {
+            onClick(event)
+        }
+    }
+    return (
+        <button 
+            role="tab" type="button" id={tabId+"-button"} ref={ref} onClick={event => handleClick(event)} className={classNameComputed} {...restProps}
+            tabIndex={isActiveTab ? 0:-1} aria-selected={isActiveTab ? "true":"false"} aria-controls={tabId+"-page"}
+        >
+            {children}
+        </button>
+    )
+})
+Button.displayName = "TabsButton"
+
+const Content = forwardRef<HTMLDivElement, TabsContentType>( ({children, className, ...restProps}, ref) => {
+    return (
+        <div role="none" ref={ref} className={`sg-tabs-content${className ? " "+className:""}`} {...restProps}>
+            {children}
+        </div>
+    )
+})
+Content.displayName = "TabsContent"
+
+const Page = forwardRef<HTMLDivElement, TabsPageType>( ({children, className, tabId, ...restProps}, ref) => {
+    const { activeTab, activeClass } = useTabsContext()
+    const classNameComputed = "sg-tabs-page" + (className ? " "+className:"") + (activeTab === tabId ? " "+activeClass : "")
+    return (
+        <div 
+            role="tabpanel" id={tabId+"-page"} aria-labelledby={tabId+"-button"}
+            ref={ref} className={classNameComputed} {...restProps}
+        >
+            {children}
+        </div>
+    )
+})
+Page.displayName = "TabsPage"
+
+export default  Object.assign(Tabs, {
+    Controls: Controls,
+    Button: Button,
+    Content: Content,
+    Page: Page,
+})

package/src/Tabs/Tabs.types.ts

@@ -0,0 +1,49 @@
+import { BaseButtonType, BaseDivType } from "../utils/BaseTypes"
+
+export type TabsContextType = {
+    activeTab: string,
+    setActiveTab: React.Dispatch<React.SetStateAction<string>>,
+    controlId: string,
+    activeClass: string,
+    onTabChange: Function | undefined
+}
+
+export type TabsType = {
+    children: React.ReactNode,
+    className?: string,
+    controlId: string,
+    activeClassName?: string,
+    defaultActive: string,
+    active?: string,
+    onTabChange?: Function
+} & BaseDivType
+
+export type TabsControlsType = {
+    children: React.ReactNode,
+    className?: string,
+} & BaseDivType
+
+export type TabsScrollButtonType = {
+    className?: string,
+    left?: boolean,
+    controlsRef?: React.RefObject<HTMLDivElement>
+} & BaseButtonType
+
+export type TabsButtonType = {
+    children: React.ReactNode,
+    className?: string,
+    onClick?: Function,
+    tabId: string,
+    id?: string,
+} & BaseButtonType
+
+export type TabsContentType = {
+    children: React.ReactNode,
+    className?: string,
+} & BaseDivType
+
+export type TabsPageType = {
+    children: React.ReactNode,
+    className?: string,
+    tabId: string,
+} & BaseDivType

package/src/Tabs/index.ts

@@ -0,0 +1,3 @@
+import Tabs from "./Tabs"
+export default Tabs
+export type {TabsButtonType, TabsContentType, TabsContextType, TabsControlsType, TabsPageType, TabsType} from "./Tabs.types"

package/src/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,21 @@
+import React, { useState, forwardRef } from "react"
+
+import { ToggleButtonType } from "./ToggleButton.types"
+
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonType>( ({children, toggled="false", onClick, ...restProps}, ref) => {
+    const [ toggledInternal, setToggledInternal ] = useState<boolean>(toggled === "true" ? true : false)
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        setToggledInternal(prev => !prev)
+        if(onClick) {
+            onClick(event)
+        }
+    }
+    return (
+        <button onClick={(event) => handleClick(event)} data-toggled={toggledInternal} {...restProps}>
+            {children}
+        </button>
+    )
+})
+ToggleButton.displayName = "ToggleButton"
+
+export default ToggleButton

package/src/ToggleButton/ToggleButton.types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react"
+import { BaseButtonType } from "../utils/BaseTypes"
+
+export type ToggleButtonType = {
+    children: ReactNode,
+    toggled?: boolean,
+    onClick?: <T>(event: T) => T
+} & BaseButtonType

package/src/ToggleButton/index.ts

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

package/{hooks/index.d.ts → src/hooks/index.ts}

@@ -1,5 +1,6 @@
-import useClassname from "./useClassname";
-import useDraggable from "./useDraggable";
-import useScreenSize from "./useScreenSize";
-import useKeepElementFocused from "./useKeepElementFocused";
-export { useClassname, useDraggable, useScreenSize, useKeepElementFocused };
+import useClassname from "./useClassname";
+import useDraggable from "./useDraggable";
+import useScreenSize from "./useScreenSize";
+import useKeepElementFocused from "./useKeepElementFocused";
+
+export {useClassname, useDraggable, useScreenSize, useKeepElementFocused}

package/src/hooks/useClassname.ts

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

package/src/hooks/useDraggable.ts

@@ -0,0 +1,186 @@
+import { useRef, useState, useEffect, RefObject, useLayoutEffect, cloneElement, ReactNode } from "react"
+import { createPortal } from "react-dom"
+
+type Coordinates = {
+    top?: number, 
+    bottom?: number, 
+    right?: number, 
+    left?: number, 
+    offSetTop:number, 
+    offSetLeft:number,
+    width?: number | null
+}
+type Dimensions = {
+    height?: number,
+    width?: number
+}
+type Options = {
+    moveClass?: string,
+    draggable?: boolean
+}
+
+export const insertPhantomElement = (targetElement: HTMLElement, movingElement: HTMLElement, options: {after?:boolean, first?:boolean} = {after: true, first: true}) => {
+    const nextSibling = targetElement.nextElementSibling as HTMLElement
+    const previousSibling = targetElement.previousElementSibling as HTMLElement
+    const phantomData = document.querySelectorAll<HTMLElement>("[data-phantom='before'], [data-phantom='after']")
+    phantomData.forEach(element => {
+        if( targetElement !== element) {
+            element.dataset.phantom = "none"
+            //console.log("equal")
+        }
+    })
+    targetElement.dataset.phantom = options.after ? "after":"before"
+    if(options.after && nextSibling) { nextSibling.dataset.phantom = "before" }
+    if(!options.after && previousSibling) { previousSibling.dataset.phantom = "after" }
+
+    const { width, height } = movingElement.getBoundingClientRect()
+    const parentElement = targetElement.parentElement!
+
+    document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
+
+    const phantomDiv = document.createElement("li")
+    phantomDiv.classList.add("phantom")
+    phantomDiv.classList.add("sg-sublist")
+    phantomDiv.style.width = options.first ? width.toString()+"px" : ""
+    phantomDiv.style.height = height.toString()+"px"
+    parentElement.insertBefore(phantomDiv, options.after ? targetElement.nextSibling : targetElement)
+}
+
+const insertDraggedElement = () => {
+
+}
+
+/*
+const useDraggable = (movingElementRef: RefObject<HTMLElement>, options: Options = {}) => {
+    const [ dragging, setDragging ] = useState<boolean>(false)
+
+    const onDragStart = (event: React.DragEvent) => {
+        console.log("drag start")
+        insertPhantomElement(movingElementRef.current!)
+    }
+
+    const onDragEnd = (event: React.DragEvent) => {
+        document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
+    }
+
+    return { onDragStart, onDragEnd }
+}
+*/
+
+const useDraggable = (movingElementRef: RefObject<HTMLElement>, options: Options = {draggable: false}) => {
+    const [coordinates, setCoordinates] = useState<Coordinates>({offSetTop:0, offSetLeft:0})
+    const [ isMouseDown, setIsMouseDown ] = useState<boolean>(false)
+    
+    const elementWithPhantom = useRef<HTMLElement | null>(null)
+    const isMouseDownRef = useRef<boolean>(isMouseDown)
+    const coordinatesRef = useRef<Coordinates>(coordinates)
+    useEffect(() => {
+        isMouseDownRef.current = isMouseDown
+    }, [isMouseDown])
+    useEffect(() => {
+        coordinatesRef.current = coordinates
+    }, [coordinates])
+
+    useEffect(() => {
+        if(movingElementRef && options.draggable) {
+            const movingElement = movingElementRef.current!
+
+            const onPointerDown = (event: PointerEvent) => {      
+                event.stopPropagation()
+                const { width } = (event.target as HTMLElement).getBoundingClientRect()
+
+                insertPhantomElement(movingElement, movingElement, {first: true})
+
+                const { top, left} = movingElement.getBoundingClientRect()
+                //Initial coordinates & setup for moving
+                setCoordinates(prev => ({
+                    ...prev,
+                    top: top,
+                    left: left,
+                    offSetTop:event.clientY - top,
+                    offSetLeft:event.clientX - left,
+                    width: width
+                }))
+                movingElement.style.setProperty("user-select", "none")
+                movingElement.setPointerCapture(event.pointerId)
+                movingElement.classList.add("moving")
+                setIsMouseDown(true)
+            }
+            const onPointerUp = (event: PointerEvent) => {
+                if(isMouseDownRef.current) {
+                    const phantomElement = document.querySelectorAll(".phantom")[0]
+                    const phantomElementParent = phantomElement.parentElement!
+
+                    phantomElementParent.insertBefore(movingElement, phantomElement)
+
+                    document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
+                    
+                    movingElement.style.removeProperty("user-select")
+                    movingElement.classList.remove("moving")
+                    setCoordinates(prev => ({
+                        ...prev,
+                        width: null
+                    }))
+                    setIsMouseDown(false)
+                }
+            }
+            const onPointerMove = (event: PointerEvent) => {
+                if(isMouseDownRef.current) {
+                    const isTopOver = event.clientY - coordinatesRef.current.offSetTop < 0
+                    const isBottomOver = window.innerHeight - (event.clientY - coordinatesRef.current.offSetTop + movingElement.offsetHeight) < 0
+                    const isLeftOver = event.clientX - coordinatesRef.current.offSetLeft < 0
+                    const isRightOver = window.innerWidth - (event.clientX - coordinatesRef.current.offSetLeft + movingElement.offsetWidth) < 0
+
+                    let topCoordinate = isTopOver ? 0 : event.clientY - coordinatesRef.current.offSetTop
+                    topCoordinate = isBottomOver ? window.innerHeight - movingElement.offsetHeight : topCoordinate
+
+                    let leftCoordinate = isLeftOver ? 0 : event.clientX - coordinatesRef.current.offSetLeft
+                    leftCoordinate = isRightOver ? window.innerWidth - movingElement.offsetWidth : leftCoordinate
+
+                    setCoordinates(prev => ({
+                        ...prev,
+                        top:topCoordinate,
+                        left:leftCoordinate
+                    }))
+
+                    movingElement.hidden = true
+                    const elemBelow = document.elementFromPoint(event.clientX, event.clientY)
+                    movingElement.hidden = false
+                    const isElemeBelowDropable = elemBelow?.classList.contains("sg-list-item") || elemBelow?.classList.contains("sg-sublist")
+                    const elemBelowClosestDroppable = isElemeBelowDropable ? elemBelow as HTMLElement : elemBelow?.closest(".sg-list-item, .sg-sublist") as HTMLElement 
+                    console.log(elemBelow, elemBelowClosestDroppable)
+
+                    if(!elemBelowClosestDroppable || elemBelow?.classList.contains("phantom")) { return }
+
+                    if(elementWithPhantom.current != elemBelowClosestDroppable) {
+                        elementWithPhantom.current = elemBelowClosestDroppable
+                    }
+                    
+                    const {top, left, width, height} = elementWithPhantom.current.getBoundingClientRect()
+                    const phantomPosition = elementWithPhantom.current.dataset.phantom
+
+                    const afterTest = event.clientY - top >= height/2 && phantomPosition != "after"
+                    const beforeTest = event.clientY - top < height/2 && phantomPosition != "before"
+                    if(afterTest || beforeTest) {
+                        insertPhantomElement(elementWithPhantom.current, movingElement, {after: afterTest ? true : false})
+                    }
+                }
+            }
+
+            const bubble = false
+
+            movingElement.addEventListener("pointerdown", onPointerDown, bubble)
+            movingElement.addEventListener("pointerup", onPointerUp, bubble)
+            movingElement.addEventListener("pointermove", onPointerMove, bubble)
+            return function cleanup() {
+                movingElement.removeEventListener("pointerdown", onPointerDown, bubble)
+                movingElement.removeEventListener("pointerup", onPointerUp, bubble)
+                movingElement.removeEventListener("pointermove", onPointerMove, bubble)
+            }
+        }
+    },[])
+
+    return { coordinates, isMouseDown}
+}
+
+export default useDraggable

package/src/hooks/useKeepElementFocused.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+
+const useKeepElementFocused = (elementRef:any) => {
+    useEffect(() => {
+        const onKeyDown  = (event: React.KeyboardEvent | KeyboardEvent) => {
+            const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            const modal = elementRef.current as HTMLElement
+            if(modal) {
+                const firstFocusableElement = modal.querySelectorAll<HTMLElement>(focusableElements)[0]
+                const focusableContent = modal.querySelectorAll<HTMLElement>(focusableElements)
+                const lastFocusableElement = focusableContent[focusableContent.length - 1]
+                let isTabPressed = event.key === 'Tab' || event.keyCode === 9;
+        
+                if (!isTabPressed) {
+                    return;
+                }
+        
+                if (event.shiftKey) {
+                    if (document.activeElement === firstFocusableElement) {
+                        lastFocusableElement.focus()
+                        event.preventDefault()
+                    }
+                } else if (document.activeElement === lastFocusableElement) {
+                    firstFocusableElement.focus();
+                    event.preventDefault()
+                }
+            }
+        }
+        document.addEventListener('keydown', onKeyDown, true )
+
+        return function cleanup() {
+            document.removeEventListener('keydown', onKeyDown, true )
+        }
+    }, [elementRef])
+}
+
+export default useKeepElementFocused

package/src/hooks/useScreenSize.ts

@@ -0,0 +1,24 @@
+import { useState, useMemo, useEffect} from "react"
+import { debounce } from "lodash"
+
+const useScreenSize = (debounceTime=25) => {
+    const [size, setSize]= useState({height: window.innerHeight, width: window.innerWidth})
+
+
+    const handleResize = ()=> {
+        setSize({height: window.innerHeight, width: window.innerWidth})
+    }
+    const handleResizeDebounced = useMemo(() => 
+        debounce(handleResize, debounceTime)
+    , [debounceTime] )
+
+	useEffect(() => {
+		window.addEventListener("resize", handleResizeDebounced, true)
+		return function cleanup() {
+			window.removeEventListener("resize", handleResizeDebounced, true)
+		}
+	}, [handleResizeDebounced])
+    return size
+}
+
+export default useScreenSize

package/src/index.ts

@@ -0,0 +1,21 @@
+export * from "./Button"
+export * from "./ButtonGroup"
+export * from "./Card"
+export * from "./CloseButton"
+export * from "./Dropdown"
+export * from "./FloatingLabel"
+export * from "./Form"
+//export * from "./Grid"
+export * from "./InputGroup"
+export * from "./Modal"
+export * from "./Nav"
+export * from "./NavBar"
+export * from "./NavDropdown"
+//export * from "./OffCanvas"
+//export * from "./Overlay"
+export * from "./Popout"
+export * from "./Spinner"
+export * from "./Table"
+export * from "./Tabs"
+export * from "./ToggleButton"
+export * from "./utils/BaseTypes"