stargazer-ui 1.2.0 → 1.2.1

package/src/List/List.tsx

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

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

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

package/src/Modal/Modal.tsx

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

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

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

package/src/Nav/Nav.tsx

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

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

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

package/src/NavBar/Navbar.tsx

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

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

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

@@ -0,0 +1,93 @@
+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
+})