webcoreui 0.3.0 → 0.4.0

package/components/Menu/Menu.tsx

@@ -1,113 +1,116 @@
-import React, { useState } from 'react'
-import type { ReactMenuProps } from './menu'
-import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
-
-import styles from './menu.module.scss'
-import { classNames } from '../../utils/classNames'
-
-const Menu = ({
-    items,
-    logo,
-    centerLogo,
-    className,
-    wrapperClassName,
-    children
-}: ReactMenuProps) => {
-    const [active, setActive] = useState(false)
-
-    const classes = classNames([
-        styles.menu,
-        className
-    ])
-
-    const containerClasses = classNames([
-        styles.container,
-        wrapperClassName
-    ])
-
-    const wrapMenu = (logo?.url || logo?.html) && items?.length && children
-
-    const toggleMenu = () => setActive(!active)
-
-    return (
-        <header className={classes} data-active={active || null}>
-            <div className={containerClasses}>
-                <ConditionalWrapper
-                    condition={!!wrapMenu}
-                    wrapper={children => (
-                        <div className={styles.wrapper}>
-                            {children}
-                        </div>
-                    )}
-                >
-                    {logo?.url && !centerLogo &&  (
-                        <a href="/">
-                            <img
-                                src={logo.url}
-                                alt={logo.alt || 'Logo'}
-                                width={logo.width}
-                                height={logo.height}
-                            />
-                        </a>
-                    )}
-
-                    {!centerLogo && logo?.html && (
-                        <a
-                            href="/"
-                            dangerouslySetInnerHTML={{ __html: logo.html }}
-                            aria-label={logo.alt || 'Logo'}
-                        />
-                    )}
-
-                    {!!items?.length && (
-                        <ul>
-                            {items.map((item, index) => (
-                                <li key={index}>
-                                    <a
-                                        href={item.url}
-                                        target={item.target}
-                                        className={item.active ? styles.active : undefined}
-                                    >
-                                        {item.name}
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </ConditionalWrapper>
-                
-                {!!items?.length && (
-                    <button className={styles.hamburger} onClick={toggleMenu}>
-                        <span className={styles.meat}></span>
-                        <span className={styles.meat}></span>
-                        <span className={styles.meat}></span>
-                        <span className={styles.meat}></span>
-                    </button>
-                )}
-
-                {centerLogo && logo?.html && (
-                    <a
-                        href="/"
-                        dangerouslySetInnerHTML={{ __html: logo.html }}
-                        aria-label={logo.alt || 'Logo'}
-                    />
-                )}
-
-                {logo?.url && centerLogo && (
-                    <a href="/">
-                        <img
-                            src={logo.url}
-                            alt={logo.alt || 'Logo'}
-                            width={logo.width}
-                            height={logo.height}
-                        />
-                    </a>
-                )}
-
-                {children}
-            </div>
-        </header>
-    )
-}
-
-export default Menu
+import React, { useState } from 'react'
+import type { ReactMenuProps } from './menu'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './menu.module.scss'
+
+// eslint-disable-next-line complexity
+const Menu = ({
+    items,
+    logo,
+    centerLogo,
+    className,
+    wrapperClassName,
+    children
+}: ReactMenuProps) => {
+    const [active, setActive] = useState(false)
+
+    const classes = classNames([
+        styles.menu,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const wrapMenu = (logo?.url || logo?.html) && items?.length && children
+
+    const toggleMenu = () => setActive(!active)
+
+    return (
+        <header className={classes} data-active={active || null}>
+            <div className={containerClasses}>
+                <ConditionalWrapper
+                    condition={!!wrapMenu}
+                    wrapper={children => (
+                        <div className={styles.wrapper}>
+                            {children}
+                        </div>
+                    )}
+                >
+                    {logo?.url && !centerLogo && (
+                        <a href="/">
+                            <img
+                                src={logo.url}
+                                alt={logo.alt || 'Logo'}
+                                width={logo.width}
+                                height={logo.height}
+                            />
+                        </a>
+                    )}
+
+                    {!centerLogo && logo?.html && (
+                        <a
+                            href="/"
+                            dangerouslySetInnerHTML={{ __html: logo.html }}
+                            aria-label={logo.alt || 'Logo'}
+                        />
+                    )}
+
+                    {!!items?.length && (
+                        <ul>
+                            {items.map((item, index) => (
+                                <li key={index}>
+                                    <a
+                                        href={item.url}
+                                        target={item.target}
+                                        className={item.active ? styles.active : undefined}
+                                    >
+                                        {item.name}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </ConditionalWrapper>
+
+                {!!items?.length && (
+                    <button className={styles.hamburger} onClick={toggleMenu}>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                    </button>
+                )}
+
+                {centerLogo && logo?.html && (
+                    <a
+                        href="/"
+                        dangerouslySetInnerHTML={{ __html: logo.html }}
+                        aria-label={logo.alt || 'Logo'}
+                    />
+                )}
+
+                {logo?.url && centerLogo && (
+                    <a href="/">
+                        <img
+                            src={logo.url}
+                            alt={logo.alt || 'Logo'}
+                            width={logo.width}
+                            height={logo.height}
+                        />
+                    </a>
+                )}
+
+                {children}
+            </div>
+        </header>
+    )
+}
+
+export default Menu

package/components/Modal/Modal.astro

@@ -3,11 +3,11 @@ import type { ModalProps } from './modal'
 
 import Button from '../Button/Button.astro'
 
-import info from '../../icons/info.svg?raw'
-import success from '../../icons/circle-check.svg?raw'
-import warning from '../../icons/warning.svg?raw'
 import alert from '../../icons/alert.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
 import closeIcon from '../../icons/close.svg?raw'
+import info from '../../icons/info.svg?raw'
+import warning from '../../icons/warning.svg?raw'
 
 import styles from './modal.module.scss'
 
@@ -28,7 +28,8 @@ const {
     closeOnOverlay = true,
     theme,
     id,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const close = [
@@ -48,6 +49,7 @@ const classes = [
     class:list={classes}
     id={id}
     data-close={close.length ? close : undefined}
+    {...rest}
 >
     {showCloseIcon && (
         <Button

package/components/Modal/Modal.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
     import type { ModalProps } from './modal'
 
-    import styles from './modal.module.scss'
-    import { classNames } from '../../utils/classNames'
-
     import Button from '../Button/Button.svelte'
 
-    import info from '../../icons/info.svg?raw'
-    import success from '../../icons/circle-check.svg?raw'
-    import warning from '../../icons/warning.svg?raw'
+    import { classNames } from '../../utils/classNames'
+
     import alert from '../../icons/alert.svg?raw'
+    import success from '../../icons/circle-check.svg?raw'
     import closeIcon from '../../icons/close.svg?raw'
+    import info from '../../icons/info.svg?raw'
+    import warning from '../../icons/warning.svg?raw'
+
+    import styles from './modal.module.scss'
 
     export let title: ModalProps['title'] = ''
     export let subTitle: ModalProps['subTitle'] = ''
@@ -45,6 +46,7 @@
     class={classes}
     id={id}
     data-close={close.length ? close : undefined}
+    {...$$restProps}
 >
     {#if showCloseIcon}
         <Button

package/components/Modal/Modal.tsx

@@ -1,76 +1,79 @@
-import React from 'react'
-import type { ReactModalProps } from './modal'
-
-import styles from './modal.module.scss'
-import { classNames } from '../../utils/classNames'
-
-import Button from '../Button/Button.tsx'
-
-import info from '../../icons/info.svg?raw'
-import success from '../../icons/circle-check.svg?raw'
-import warning from '../../icons/warning.svg?raw'
-import alert from '../../icons/alert.svg?raw'
-import closeIcon from '../../icons/close.svg?raw'
-
-const iconMap = {
-    info,
-    success,
-    warning,
-    alert
-}
-
-const Modal = ({
-    title,
-    subTitle,
-    showCloseIcon = true,
-    closeOnEsc = true,
-    closeOnOverlay = true,
-    theme,
-    id,
-    className,
-    children
-}: ReactModalProps) => {
-    const classes = classNames([
-        styles.modal,
-        theme && styles[theme],
-        className
-    ])
-
-    const close = [
-        showCloseIcon && 'icon',
-        closeOnEsc && 'esc',
-        closeOnOverlay && 'overlay'
-    ].filter(Boolean).join(',')
-
-    return (
-        <React.Fragment>
-            <dialog
-                className={classes}
-                id={id}
-                data-close={close.length ? close : undefined}
-            >
-                {showCloseIcon && (
-                    <Button
-                        theme="flat"
-                        className={styles.close}
-                        data-id="close"
-                        dangerouslySetInnerHTML={{ __html: closeIcon }}
-                    />
-                )}
-                {title && (
-                    <strong
-                        className={styles.title}
-                        dangerouslySetInnerHTML={{
-                            __html: theme ? iconMap[theme] + title : title
-                        }}
-                    />
-                )}
-                {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
-                {children}
-            </dialog>
-            <div className={styles.overlay} />
-        </React.Fragment>
-    )
-}
-
-export default Modal
+import React from 'react'
+import type { ReactModalProps } from './modal'
+
+import Button from '../Button/Button.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import alert from '../../icons/alert.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import closeIcon from '../../icons/close.svg?raw'
+import info from '../../icons/info.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+
+import styles from './modal.module.scss'
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const Modal = ({
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    theme,
+    id,
+    className,
+    children,
+    ...rest
+}: ReactModalProps) => {
+    const classes = classNames([
+        styles.modal,
+        theme && styles[theme],
+        className
+    ])
+
+    const close = [
+        showCloseIcon && 'icon',
+        closeOnEsc && 'esc',
+        closeOnOverlay && 'overlay'
+    ].filter(Boolean).join(',')
+
+    return (
+        <React.Fragment>
+            <dialog
+                className={classes}
+                id={id}
+                data-close={close.length ? close : undefined}
+                {...rest}
+            >
+                {showCloseIcon && (
+                    <Button
+                        theme="flat"
+                        className={styles.close}
+                        data-id="close"
+                        dangerouslySetInnerHTML={{ __html: closeIcon }}
+                    />
+                )}
+                {title && (
+                    <strong
+                        className={styles.title}
+                        dangerouslySetInnerHTML={{
+                            __html: theme ? iconMap[theme] + title : title
+                        }}
+                    />
+                )}
+                {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+                {children}
+            </dialog>
+            <div className={styles.overlay} />
+        </React.Fragment>
+    )
+}
+
+export default Modal

package/components/Modal/modal.ts

@@ -11,6 +11,7 @@ export type ModalProps = {
         | 'warning'
         | 'alert'
         | null
+    [key: string]: any
 }
 
 export type ReactModalProps = {

package/components/Popover/Popover.astro

@@ -1,12 +1,14 @@
 ---
 import type { PopoverProps } from './popover'
+
 import styles from './popover.module.scss'
 
 interface Props extends PopoverProps {}
 
 const {
     id,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -18,6 +20,7 @@ const classes = [
 <dialog
     class:list={classes}
     id={id}
+    {...rest}
 >
     <slot />
 </dialog>

package/components/Popover/Popover.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { PopoverProps } from './popover'
 
-    import styles from './popover.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './popover.module.scss'
+
     export let id: PopoverProps['id'] = ''
     export let className: PopoverProps['className'] = ''
 
@@ -15,7 +16,8 @@
 
 <dialog
     class={classes}
-    id={id}
+    id={id || null}
+    {...$$restProps}
 >
     <slot />
 </dialog>

package/components/Popover/Popover.tsx

@@ -1,27 +1,55 @@
-import React from 'react'
-import type { ReactPopoverProps } from './popover'
-
-import styles from './popover.module.scss'
-import { classNames } from '../../utils/classNames'
-
-const Popover = ({
-    id,
-    className,
-    children
-}: ReactPopoverProps) => {
-    const classes = classNames([
-        styles.popover,
-        className
-    ])
-
-    return (
-        <dialog
-            className={classes}
-            id={id}
-        >
-            {children}
-        </dialog>
-    )
-}
-
-export default Popover
+import React, { useEffect,useState } from 'react'
+import { createPortal } from 'react-dom'
+import type { ReactPopoverProps } from './popover'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './popover.module.scss'
+
+const Popover = ({
+    id,
+    className,
+    isInteractive = false,
+    children,
+    ...rest
+}: ReactPopoverProps) => {
+    const [isMounted, setIsMounted] = useState(false)
+
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+
+    useEffect(() => {
+        setIsMounted(true)
+    }, [])
+
+    if (!isMounted && isInteractive) {
+        return null
+    }
+
+    if (isInteractive) {
+        return createPortal(
+            <dialog
+                className={classes}
+                id={id}
+                {...rest}
+            >
+                {children}
+            </dialog>,
+            document.body
+        )
+    }
+
+    return (
+        <dialog
+            className={classes}
+            id={id}
+            {...rest}
+        >
+            {children}
+        </dialog>
+    )
+}
+
+export default Popover

package/components/Popover/popover.module.scss

@@ -9,6 +9,7 @@
     @include typography(primary);
     @include border-radius(md);
     @include size(w300px);
+    @include position('t-100%');
 
     transform: translateY(-5px);
     pointer-events: none;

package/components/Popover/popover.ts

@@ -1,8 +1,10 @@
 export type PopoverProps = {
     id?: string
     className?: string
+    [key: string]: any
 }
 
 export type ReactPopoverProps = {
+    isInteractive?: boolean
     children?: React.ReactNode
 } & PopoverProps

package/components/Progress/Progress.astro

@@ -1,9 +1,10 @@
 ---
 import type { ProgressProps } from './progress'
 
-import styles from './progress.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './progress.module.scss'
+
 interface Props extends ProgressProps {}
 
 const {

package/components/Progress/Progress.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { ProgressProps } from './progress'
 
-    import styles from './progress.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './progress.module.scss'
+
     export let value: ProgressProps['value'] = 0
     export let size: ProgressProps['size'] = null
     export let label: ProgressProps['label'] = false

package/components/Progress/Progress.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ProgressProps } from './progress'
 
-import styles from './progress.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './progress.module.scss'
+
 const Progress = ({
     value,
     size,
@@ -28,7 +29,7 @@ const Progress = ({
         ...(color && { '--w-progress-color': color }),
         ...(background && { '--w-progress-background': background }),
         ...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
-        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
+        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark })
     } as React.CSSProperties
 
     const percent = {