stargazer-ui 1.2.1 → 1.2.2

package/src/Tabs/Tabs.tsx

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

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

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

package/src/ToggleButton/ToggleButton.tsx

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

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

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

package/src/hooks/useClassname.ts

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

package/src/hooks/useDraggable.ts

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

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

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

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