stargazer-ui 1.2.1 → 1.2.2

package/src/List/List.tsx

@@ -1,112 +0,0 @@
-import React, { forwardRef, createContext, useContext, useRef, cloneElement, ReactElement, useMemo } from "react"
-
-import { ListType, ListSublistType, ListItemType, ListLabelType, FormContextType } from "./List.types"
-import useDraggable, { insertPhantomElement } from "../hooks/useDraggable"
-import useClassname from "../hooks/useClassname"
-import mergeRefs from "../utils/MergeRefs"
-
-export const ListContext = createContext<FormContextType | null>(null)
-export const ListContextProvider = ({children, value} : {children: React.ReactNode, value:FormContextType}) => {
-    return (
-        <ListContext.Provider value={value}>
-            {children}
-        </ListContext.Provider>
-    )
-}
-export const useListContext = () => {
-    const context = useContext(ListContext)
-    
-    return context
-}
-
-/*
-const handlePhantomInsert = (event: React.PointerEvent, item: HTMLElement | null) => {
-    event.stopPropagation()
-    document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
-    if(item) { insertPhantomElement(item)}
-}
-*/
-
-const List = forwardRef<HTMLUListElement, ListType>( ({children, className, depth, tree=false, dragdrop=false, ...restProps}, ref) => {
-    const context = useListContext()
-    const initialContext = useMemo(() => ({
-        tree: tree,
-        draggable: dragdrop
-    }), [])
-
-    return (
-            <ul ref={ref} id="test-list" data-context={context ? "true":"false" } className={useClassname("sg-list", className)} style={{"--depth":depth} as React.CSSProperties} {...restProps}>
-                { !context ? 
-                    <ListContextProvider value={initialContext}>
-                        {children}
-                    </ListContextProvider> 
-                    :
-                    children
-                }
-            </ul>
-    )
-})
-List.displayName = "List"
-
-const Sublist = forwardRef<HTMLLIElement, ListSublistType>( ({children, className, depth, ...restProps}, ref) => {
-    const { draggable } = useListContext()!
-    const itemRef = useRef<HTMLLIElement>(null)
-
-    const { coordinates, isMouseDown} = useDraggable(itemRef, {draggable})
-
-    return (
-        <li ref={mergeRefs([ref,itemRef])} data-phantom="none" className={useClassname("sg-sublist", className)} style={{ "--depth":depth, top: coordinates.top, left: coordinates.left, width: coordinates.width } as React.CSSProperties} {...restProps}>
-            {children}
-        </li>
-    )
-})
-Sublist.displayName = "ListSubList"
-
-const Item = forwardRef<HTMLLIElement, ListItemType>( ({children, className, ...restProps}, ref) => {
-    const { draggable } = useListContext()!
-    const itemRef = useRef<HTMLLIElement>(null)
-
-    const { coordinates, isMouseDown} = useDraggable(itemRef, {draggable})
-
-    return (
-        <li ref={itemRef} data-phantom="none" className={useClassname("sg-list-item", className)} style={{ top: coordinates.top, left: coordinates.left, width: coordinates.width } as React.CSSProperties} {...restProps} >
-            {children}
-        </li>
-    )
-})
-Item.displayName = "ListItem"
-
-const Label = forwardRef<HTMLSpanElement, ListLabelType>( ({children, className, style, ...restProps}, ref) => {
-    const labelRef = useRef<HTMLElement>(null)
-    const computedClass = useClassname("sg-list-label", className)
-
-    //const coordinates = useDraggable(labelRef)
-    return (
-        (typeof children === "string") ?
-            <span ref={mergeRefs([ref, labelRef])} className={computedClass} style={{ ...style}} {...restProps}>
-                {children}
-            </span>
-            :
-            cloneElement(children as any,
-                {
-                    ref: mergeRefs([ref, labelRef]),
-                    className: computedClass,
-                    style: { ...(children as ReactElement).props.style}
-                }
-            )
-            
-    )
-})
-Label.displayName = "ListLabel"
-/*
-List.Sublist = Sublist
-List.Item = Item
-List.Label = Label
-
-export default List
-*/
-export default  Object.assign(List, {
-    Sublist: Sublist,
-    Item: Item,
-    Label: Label
-})

package/src/List/List.types.ts

@@ -1,34 +0,0 @@
-import { ReactNode } from "react"
-
-import { BaseUListType, BaseLItemType, BaseSpanType } from "../utils/BaseTypes"
-
-export type FormContextType = {
-    depth?: number,
-    tree?: boolean,
-    draggable?: boolean
-}
-
-export type ListType = {
-    children: ReactNode,
-    className: string,
-    depth: number,
-    tree: boolean,
-    dragdrop: boolean
-} & BaseUListType
-
-export type ListSublistType = {
-    children: ReactNode,
-    className: string
-    depth: number
-} & BaseLItemType
-
-export type ListItemType = {
-    children: ReactNode,
-    className: string,
-} & BaseLItemType
-
-export type ListLabelType = {
-    children: ReactNode,
-    className: string,
-    label: string
-} & BaseSpanType

package/src/List/index.ts

@@ -1,4 +0,0 @@
-import List from "./List";
-
-export type {ListType, ListSublistType, ListItemType, ListLabelType} from "./List.types"
-export default List

package/src/Modal/Modal.tsx

@@ -1,220 +0,0 @@
-import React, { createContext, useContext, useEffect, useState, forwardRef, useRef } from "react"
-import { createPortal } from "react-dom"
-
-import { ModalBodyType, ModalContextType, ModalFooterType, ModalHeaderType, ModalTitleType, ModalType, ErrorModalType } from "./Modal.types"
-
-import CloseButton from "../CloseButton/CloseButton"
-import Button from "../Button/Button"
-import mergeRefs from "../utils/MergeRefs"
-
-const ModalContext = createContext<ModalContextType>(null)
-const ModalContextProvider = ({children, value}:{children:React.ReactNode, value:ModalContextType}) => {
-    return (
-        <ModalContext.Provider value={value}>
-            {children}
-        </ModalContext.Provider>
-    )
-}
-const useModalContext = () => {
-    const context = useContext(ModalContext)
-    if(!context) {
-        throw new Error(
-            "useModalContext has to be used within ModalContextProvider!"
-        )
-    }
-    return context
-}
-
-const Modal = forwardRef<HTMLDialogElement, ModalType>( ({ children, size = "md",  show,  backdrop = "static", fill=false,  onHide, className, id, stretch, style, ...restProps 
-    }, ref) => {
-    const [showModal, setShowModal] = useState<boolean>(show)
-    if(show && show != showModal) {
-        setShowModal(show)
-    }
-
-    const modalRef = useRef<HTMLDialogElement>(null)
-    useKeepElementFocused(modalRef)
-
-    let typeCheck : {show: boolean, onHide: boolean} | undefined = typeof(show) === "boolean" && typeof(onHide) === "function" ? undefined : {show: typeof(show) === "boolean", onHide: typeof(onHide) === "function"}
-    if(typeCheck) {
-        console.error(
-            !typeCheck.show ? "The variable 'show' must be used and must be a boolean used to decide when to show the modal!" : null,
-            !typeCheck.onHide ? "The variable 'onHide' must be used and must be a function which is used to set 'show' as the modal gets closed!" : null
-        )
-    }
-
-    const closeModal = () => {
-        const modal = modalRef.current!
-        modal.classList.add("close")
-        modal.addEventListener('animationend', (event) => {
-            console.log(event)
-            if(event.animationName === "scale-down") {
-                if(onHide) {
-                    onHide()
-                }
-                setShowModal(false)
-            }
-          }, {once : true});
-    }
-
-    useEffect(() => {
-        const modal = modalRef.current
-        
-        if(!modal) return
-        
-        if(showModal) {
-            modal.classList.remove('close')
-            modal.showModal()
-        }
-        else {
-           // modal.classList.add('close')
-            modal.close()
-        }
-        
-    }, [showModal])
-
-    let classNameComputed: string = `sg-modal-tag`
-    if(className) {
-        classNameComputed += " "+className
-    }
-    if(backdrop === "static" || backdrop === "true") {
-        classNameComputed += " sg-modal-static"
-    }
-    if(fill) classNameComputed += " sg-modal-fill"
-    if(size && !fill)  classNameComputed += ` sg-modal-${size}`
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDialogElement>) => {
-        const key: string = event.key
-        if(key != "Escape") {return}
-            
-        event.preventDefault()
-        closeModal()
-    }
-
-    return (
-            createPortal(
-                <dialog ref={mergeRefs([ref, modalRef])} className={classNameComputed} onKeyDown={(event) => handleKeyDown(event)} {...restProps } style={{"--height":stretch ? "80%":null, ...style} as React.CSSProperties}>
-                    <ModalContextProvider value={closeModal}>
-                        {!typeCheck ?
-                            children :
-                            <ErrorModal typeCheck={typeCheck} closeModal={closeModal}/>
-                        }
-                    </ModalContextProvider>
-                </dialog>
-            , document.body)
-    )
-})
-Modal.displayName = "Modal"
-
-const Header = forwardRef<HTMLDivElement | HTMLSpanElement | HTMLHeadingElement, ModalHeaderType>(({children, as="", className = "", closeButton = false, onClick, ...restProps}, ref) => {
-    let validAs = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"]
-    let Component = validAs.find(valid => valid === as) ? as : "div"
-    const closeModal = useModalContext()
-    const onCloseButtonClick = (event: React.MouseEvent) => {
-        if(onClick) {
-            onClick(event)
-        }
-        closeModal()
-    }
-
-    return (
-        <Component ref={ref} className={`sg-modal-header ${className}`} {...restProps}>
-            {children}
-            {closeButton ? <CloseButton variant onClick={event => onCloseButtonClick(event)}/> : null}
-        </Component>
-    )
-})
-Header.displayName = "ModalHeader"
-
-const Title = forwardRef<HTMLDivElement | HTMLSpanElement | HTMLHeadingElement, ModalTitleType>( ({children, as="h4", className, ...restProps}, ref) => {
-    let validAs = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"]
-    let Component = validAs.find(valid => valid === as) ? as : "h4"
-    return (
-        <Component ref={ref} className={`sg-modal-title ${className}`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Title.displayName = "ModalTitle"
-
-const Body = forwardRef<HTMLDivElement, ModalBodyType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <div ref={ref} className={`sg-modal-body ${className}`} {...restProps}>
-            {children}
-        </div>
-    )
-})
-Body.displayName = "ModalBody"
-
-const Footer = forwardRef<HTMLDivElement, ModalBodyType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <div ref={ref} className={`sg-modal-footer ${className}`} {...restProps}>
-            {children}
-        </div>
-    )
-})
-Footer.displayName = "ModalFooter"
-
-export default Object.assign(Modal, {
-    Header: Header,
-    Title: Title,
-    Body: Body,
-    Footer: Footer
-})
-
-export const useKeepElementFocused = function (elementRef: React.RefObject<HTMLDialogElement>) {
-    useEffect(() => {
-        const onKeyDown  = (event: KeyboardEvent) => {
-            const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-            const modal = elementRef.current
-            if(modal) {
-                const firstFocusableElement = modal.querySelectorAll(focusableElements)[0] as HTMLElement
-                const focusableContent = modal.querySelectorAll(focusableElements)
-                const lastFocusableElement = focusableContent[focusableContent.length - 1] as HTMLElement
-                let isTabPressed = event.key === 'Tab'
-        
-                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])
-}
-
-const ErrorModal = ({typeCheck, closeModal}:ErrorModalType) => {
-    return (
-        <>
-            <Header closeButton >
-                <Title>
-                    An Error ocurred!
-                </Title>
-            </Header>
-            <Body>
-                <p>
-                    {!typeCheck.show ? "The variable 'show' must be used and must be a boolean used to decide when to show the modal!" : null}
-                    {!typeCheck.onHide ? "The variable 'onHide' must be used and must be a function which is used to set 'show' as the modal gets closed!" : null}
-                </p>
-            </Body>
-            <Footer>
-                <Button variant="danger" type="button" onClick={() => closeModal()}>
-                    Close
-                </Button>
-            </Footer>
-        </>
-    )
-}

package/src/Modal/Modal.types.ts

@@ -1,49 +0,0 @@
-import { ReactNode } from "react";
-
-import { BaseDialogType, BaseDivType, BaseHeadingType, BaseSpanType } from "../utils/BaseTypes"
-
-export type ModalContextType = Function | null
-
-export type ModalType = {
-    children:ReactNode,
-    className?: string,
-    id?: string,
-    fill?: boolean,
-    size?: string,
-    show: boolean,
-    backdrop?: string,
-    onHide: Function,
-    stretch?: boolean
-} & BaseDialogType
-
-export type ModalHeaderType = {
-    children: ReactNode,
-    as?: React.ElementType,
-    className?: string,
-    closeButton?: boolean
-    onClick?: (event: React.MouseEvent) => void,
-} & (BaseDivType | BaseHeadingType | BaseSpanType)
-
-export type ModalTitleType = {
-    children: ReactNode,
-    as?: React.ElementType,
-    className?: string
-} & (BaseDivType | BaseHeadingType | BaseSpanType)
-
-export type ModalBodyType = {
-    children: ReactNode,
-    className?: string,
-} & BaseDivType
-
-export type ModalFooterType = {
-    children: ReactNode,
-    className?: string,
-} & BaseDivType
-
-export type ErrorModalType = {
-    typeCheck: {
-        show: boolean,
-        onHide: boolean
-    },
-    closeModal: Function
-}

package/src/Modal/index.ts

@@ -1,4 +0,0 @@
-import Modal from "./Modal"
-
-export type {ModalBodyType, ModalContextType, ModalFooterType, ModalHeaderType, ModalTitleType, ModalType} from "./Modal.types"
-export default Modal

package/src/Nav/Nav.tsx

@@ -1,43 +0,0 @@
-import React, { forwardRef } from "react";
-
-import { NavType, NavItemType, NavLinkType } from "./Nav.types";
-
-import { useNavbarContext } from "../NavBar/Navbar";
-
-const Nav = forwardRef<HTMLElement, NavType>(({children, className, as="ul", ...restProps}, ref) => {
-    const Component = as
-    const navbarContext = useNavbarContext()
-    const navbarPrefix = navbarContext ? navbarContext : "sg-navbar-"
-
-    return (
-        <Component ref={ref} className={`${className} ${navbarPrefix}nav`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Nav.displayName = "Nav"
-
-const Item = forwardRef<HTMLElement, NavItemType>( ({children, className, as="li", ...restProps}, ref) => {
-    const Component = as
-    return (
-        <Component role="none" ref={ref} className={`sg-nav-item${className ? " "+className:""}`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Item.displayName = "NavItem"
-
-const Link = forwardRef<HTMLElement, NavLinkType>( ({children, className, as="a", ...restProps}, ref) => {
-    const Component = as
-    return (
-        <Component role="menuitem" ref={ref} className={`sg-nav-link${className ? " "+className:""}`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Link.displayName = "NavLink"
-
-export default  Object.assign(Nav, {
-    Item: Item,
-    Link: Link
-})

package/src/Nav/Nav.types.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-
-import { BaseAnchorType, BaseElementType, BaseLItemType, BaseUListType } from "../utils/BaseTypes";
-
-export type NavType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType
-} & (BaseUListType | BaseElementType)
-
-export type NavItemType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType
-} & (BaseLItemType | BaseElementType)
-
-export type NavLinkType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType
-} & (BaseAnchorType | BaseElementType)

package/src/Nav/index.ts

@@ -1,4 +0,0 @@
-import Nav from "./Nav"
-export default Nav
-export * from "./Nav"
-export type {NavItemType, NavLinkType, NavType} from "./Nav.types"

package/src/NavBar/Navbar.tsx

@@ -1,57 +0,0 @@
-import React, { createContext, forwardRef, useContext, useMemo } from "react";
-
-import { NavbarBrandType, NavbarTextType, NavbarType, NavbarContextType } from "./Navbar.types";
-
-export const NavbarContext = createContext<NavbarContextType>(null)
-
-const NavbarContextProvider = ({children, value}:{children:React.ReactNode, value:NavbarContextType}) => {
-    return (
-        <NavbarContext.Provider value={value}>
-            {children}
-        </NavbarContext.Provider>
-    )
-}
-export const useNavbarContext = () => {
-    const context = useContext(NavbarContext)
-    return context
-}
-
-const Navbar = forwardRef<HTMLElement, NavbarType>(({children, className, navbarPrefix= "sg-navbar-", ...restProps}, ref) => {
-    const navbarContext = useMemo(() => {
-        return navbarPrefix
-    }, [navbarPrefix])
-
-    return (
-        <nav ref={ref} className={`sg-navbar${className ? " "+className:""}`} {...restProps}>
-            <NavbarContextProvider value={navbarContext}>
-                {children}
-            </NavbarContextProvider>
-        </nav>
-    )
-})
-Navbar.displayName = "Navbar"
-
-const Brand = forwardRef<HTMLAnchorElement | HTMLElement, NavbarBrandType>( ({children, className, href="#", as="a", ...restProps}, ref) => {
-    const Component = as || (href && as != "Link" ? 'a' : 'span')
-    return (
-        <Component ref={ref} href={href} className={`sg-navbar-brand${className ? " "+className:""}`} {...restProps} >
-            {children}
-        </Component>
-    )
-})
-Brand.displayName = "NavbarBrand"
-
-const Text = forwardRef<HTMLElement, NavbarTextType>( ({children, className, as="span", ...restProps}, ref) => {
-    const Component = as
-    return (
-        <Component ref={ref} className={`sg-navbar-text${className ? " "+className:""}`} {...restProps}>
-            {children}
-        </Component>
-    )
-})
-Text.displayName = "NavbarText"
-
-export default  Object.assign(Navbar, {
-    Brand: Brand,
-    Text: Text
-})

package/src/NavBar/Navbar.types.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-
-import { BaseAnchorType, BaseElementType, BaseNavType } from "../utils/BaseTypes";
-
-export type NavbarContextType = string | null
-
-export type NavbarType = {
-    children: ReactNode,
-    className?: string,
-    navbarPrefix?: string,
-} & BaseNavType
-
-export type NavbarBrandType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType,
-    href?: string
-} & (BaseAnchorType | BaseElementType)
-
-export type NavbarTextType = {
-    children: ReactNode,
-    className?: string,
-    as?: React.ElementType
-} & BaseElementType

package/src/NavBar/index.ts

@@ -1,4 +0,0 @@
-import Navbar from "./Navbar"
-export default Navbar
-export { useNavbarContext } from "./Navbar"
-export type {NavbarBrandType, NavbarContextType, NavbarTextType, NavbarType} from "./Navbar.types"

package/src/NavDropdown/NavDropdown.tsx

@@ -1,93 +0,0 @@
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
-
-import { NavDropdownType } from "./NavDropdown.types";
-
-import Dropdown, { DropdownContextProvider } from "../Dropdown/Dropdown";
-
-const getDropdownMenuPlacement = (alignEnd: boolean, dropDirection: string, isRTL:boolean = false) => {
-    const topStart = isRTL ? 'top-end' : 'top-start';
-    const topEnd = isRTL ? 'top-start' : 'top-end';
-    const bottomStart = isRTL ? 'bottom-end' : 'bottom-start';
-    const bottomEnd = isRTL ? 'bottom-start' : 'bottom-end';
-    const leftStart = isRTL ? 'right-start' : 'left-start';
-    const leftEnd = isRTL ? 'right-end' : 'left-end';
-    const rightStart = isRTL ? 'left-start' : 'right-start';
-    const rightEnd = isRTL ? 'left-end' : 'right-end';
-    let placement = alignEnd ? bottomEnd : bottomStart;
-    if (dropDirection === 'up') 
-        {
-            placement = alignEnd ? topEnd : topStart
-        }
-    else if (dropDirection === 'end') {
-        placement = alignEnd ? rightEnd : rightStart
-    } else if (dropDirection === 'start') {
-        placement = alignEnd ? leftEnd : leftStart
-    } else if (dropDirection === 'down-centered') {
-        placement = 'bottom'
-    } else if (dropDirection === 'up-centered') {
-        placement = 'top'
-    }
-    return placement;
-}
-
-const NavDropdown = forwardRef<HTMLDivElement, NavDropdownType>((
-        {
-            children, className, onSelect, onToggle, controlId, toggleProps, title, menuProps,
-            drop="down", align="start", autoClose=true, show="default", ...restProps
-        }, ref) => {
-    const [showInternal, setShowInternal] = useState<boolean>(show === "default" ? false : show as boolean)
-
-    // this is an object like {index: string} because we need it to rerender even if the case is the same
-    // aka we use a "next/previous" case to navigate through the dropdown menu so need to rerender consecutive "next" cases
-    const [activeDescendant, setActiveDescendant] = useState({case:""})
-
-    const internalOnToggle = useCallback((event: MouseEvent) => {
-        event.stopPropagation()
-        setShowInternal(prev => !prev)
-    }, [])
-
-    const alignEnd = align === "end"
-    const placement = getDropdownMenuPlacement(alignEnd, drop )
-
-    const controlIdcomputed = controlId
-    const contextValue  = useMemo(() => ({
-        align, 
-        drop, 
-        showInternal: show != "default" && onToggle ? show as boolean : showInternal, 
-        handleToggle: show != "default" && onToggle ? onToggle : internalOnToggle, 
-        placement, 
-        directionClasses: {
-            down: "dropdown",
-            'down-centered': `dropdown-center`,
-            up: 'dropup',
-            'up-centered': 'dropup-center dropup',
-            end: 'dropend',
-            start: 'dropstart'
-        },
-        controlId: controlIdcomputed, 
-        activeDescendant, 
-        setActiveDescendant,
-        navDropdown: false
-    }), [align, drop, show, showInternal, onToggle, internalOnToggle, placement, controlId, activeDescendant, setActiveDescendant])
-    
-    return (
-        <div ref={ref} id={controlId+"-wrapper"} className={`sg-dropdown${className? " "+className:""} sg-nav-item`} {...restProps} >
-            <DropdownContextProvider value={contextValue}>
-                <Dropdown.Toggle navDropdown={true} {...toggleProps}>
-                    {title}
-                </Dropdown.Toggle>
-                <Dropdown.Menu {...menuProps}>
-                    {children}
-                </Dropdown.Menu>
-            </DropdownContextProvider>
-        </div>
-    )
-})
-NavDropdown.displayName = "NavDropdown"
-
-export default  Object.assign(NavDropdown, {
-    Toggle: Dropdown.Toggle,
-    Menu: Dropdown.Menu,
-    Item: Dropdown.Item,
-    Divider: Dropdown.Divider
-})