webcoreui 0.4.1 → 0.6.0

package/components/Footer/Footer.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import type { ReactFooterProps } from './footer'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './footer.module.scss'
+
+const Footer = ({
+    logo,
+    columns,
+    subText,
+    className,
+    wrapperClassName,
+    subTextClassName,
+    children
+}: ReactFooterProps) => {
+    const classes = classNames([
+        styles.footer,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const subTextClasses = classNames([
+        styles.subtext,
+        subTextClassName
+    ])
+
+    return (
+        <footer className={classes}>
+            <div className={containerClasses}>
+                <ConditionalWrapper
+                    condition={!!(logo?.url || logo?.html)}
+                    wrapper={children => <div className={styles.wrapper}>{children}</div>}
+                >
+                    {logo?.url && (
+                        <a href="/">
+                            <img
+                                src={logo.url}
+                                alt={logo.alt || 'Logo'}
+                                width={logo.width}
+                                height={logo.height}
+                                loading={logo.eager ? undefined : 'lazy'}
+                            />
+                        </a>
+                    )}
+
+                    {logo?.html && (
+                        <a
+                            href="/"
+                            aria-label={logo.alt || 'Logo'}
+                            dangerouslySetInnerHTML={{ __html: logo.html }}
+                        />
+                    )}
+
+                    {!!columns?.length && (
+                        <ConditionalWrapper
+                            condition={columns.length > 1}
+                            wrapper={children => <div className={styles.columns}>{children}</div>}
+                        >
+                            {columns.map((column, columnIndex) => (
+                                <ConditionalWrapper
+                                    condition={!!column.title}
+                                    wrapper={children => <div>{children}</div>}
+                                    key={columnIndex}
+                                >
+                                    {column.title && (
+                                        <strong className={styles['column-title']}>
+                                            {column.title}
+                                        </strong>
+                                    )}
+                                    <ul className={styles.column}>
+                                        {column.items.map((item, itemKey) => (
+                                            <li key={itemKey}>
+                                                <a
+                                                    href={item.href}
+                                                    target={item.target}
+                                                    className={item.active ? styles.active : undefined}
+                                                >
+                                                    {item.name}
+                                                </a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </ConditionalWrapper>
+                            ))}
+                        </ConditionalWrapper>
+                    )}
+                </ConditionalWrapper>
+                {(subText || children) && (
+                    <div className={subTextClasses}>
+                        {subText && <span dangerouslySetInnerHTML={{ __html: subText }} />}
+                        {children}
+                    </div>
+                )}
+            </div>
+        </footer>
+    )
+}
+
+export default Footer
+

package/components/Footer/footer.module.scss

@@ -0,0 +1,61 @@
+@import '../../scss/config.scss';
+
+.footer {
+    @include border(top, primary-50);
+
+    .column-title {
+        @include spacing(mb-default);
+
+        display: block;
+    }
+
+    .column {
+        @include spacing(0);
+        
+        list-style-type: none;
+        
+        a {
+            @include typography(primary-10, none);
+
+            &:hover,
+            &.active {
+                @include typography(primary, underline);
+            }
+        }
+    }
+}
+
+.container {
+    @include spacing(auto-default, px-default);
+
+    max-width: 1200px;
+}
+
+.wrapper {
+    @include layout(flex, column, default, h-between);
+}
+
+.columns {
+    @include layout(flex, column, default);
+}
+
+.subtext {
+    @include border(top, primary-60);
+    @include spacing(mt-default, py-default);
+    @include layout(flex, column, default, h-between);
+
+    span {
+        @include typography(md, primary-20);
+    }
+}
+
+@include media('sm') {
+    .wrapper,
+    .subtext {
+        @include layout(row, none);
+    }
+
+    .columns {
+        @include layout(row, '5xl');
+    }
+}

package/components/Footer/footer.ts

@@ -0,0 +1,29 @@
+import type { ButtonProps } from '../Button/button'
+
+export type FooterProps = {
+    logo?: {
+        url?: string
+        alt?: string
+        width?: number
+        height?: number
+        eager?: boolean
+        html?: string
+    } | null
+    columns?: {
+        title?: string
+        items: {
+            href: string
+            name: string
+            target?: ButtonProps['target']
+            active?: boolean
+        }[]
+    }[]
+    subText?: string
+    className?: string
+    wrapperClassName?: string
+    subTextClassName?: string
+}
+
+export type ReactFooterProps = {
+    children?: React.ReactNode
+} & FooterProps

package/components/Icon/Icon.svelte

@@ -2,7 +2,7 @@
     import type { IconProps } from './icon'
     import iconMap from './map'
 
-    export let type: IconProps['type'] = ''
+    export let type: IconProps['type'] = 'alert'
     export let size: IconProps['size'] = 24
     export let color: IconProps['color'] = ''
 

package/components/Icon/icon.ts

@@ -1,5 +1,22 @@
 export type IconProps = {
-    type: string
+    type: 'alert'
+        | 'arrow-down'
+        | 'arrow-left'
+        | 'arrow-right'
+        | 'check'
+        | 'circle-check'
+        | 'circle-close'
+        | 'close'
+        | 'components'
+        | 'file'
+        | 'github'
+        | 'home'
+        | 'info'
+        | 'moon'
+        | 'order'
+        | 'search'
+        | 'sun'
+        | 'warning'
     size?: number
     color?: string
 }

package/components/Icon/map.ts

@@ -1,11 +1,18 @@
 import Alert from '../../icons/alert.svg?raw'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ArrowLeft from '../../icons/arrow-left.svg?raw'
+import ArrowRight from '../../icons/arrow-right.svg?raw'
 import Check from '../../icons/check.svg?raw'
 import CircleCheck from '../../icons/circle-check.svg?raw'
+import CircleClose from '../../icons/circle-close.svg?raw'
 import Close from '../../icons/close.svg?raw'
+import Components from '../../icons/components.svg?raw'
+import File from '../../icons/file.svg?raw'
 import Github from '../../icons/github.svg?raw'
+import Home from '../../icons/home.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
+import Order from '../../icons/order.svg?raw'
 import Search from '../../icons/search.svg?raw'
 import Sun from '../../icons/sun.svg?raw'
 import Warning from '../../icons/warning.svg?raw'
@@ -13,12 +20,19 @@ import Warning from '../../icons/warning.svg?raw'
 const iconMap = {
     'alert': Alert,
     'arrow-down': ArrowDown,
+    'arrow-left': ArrowLeft,
+    'arrow-right': ArrowRight,
     'check': Check,
     'circle-check': CircleCheck,
+    'circle-close': CircleClose,
     'close': Close,
+    'components': Components,
+    'file': File,
     'github': Github,
+    'home': Home,
     'info': Info,
     'moon': Moon,
+    'order': Order,
     'search': Search,
     'sun': Sun,
     'warning': Warning

package/components/Input/input.module.scss

@@ -52,6 +52,7 @@
 
 .input-label {
     @include layout(flex, column);
+    @include size('w100%');
 
     .label {
         @include typography(primary-20);
@@ -66,6 +67,11 @@
             padding-left: 40px;
         }
 
+        span {
+            @include position(absolute);
+            @include size(18px);
+        }
+
         svg {
             @include position(absolute, l10px);
             @include size(18px);

package/components/List/List.astro

@@ -76,7 +76,7 @@ const wrapperClasses = [
                             <ConditionalWrapper condition={!!(item.icon && item.subText)}>
                                 <div slot="wrapper">children</div>
                                 {item.icon && <Fragment set:html={item.icon} />}
-                                {item.name}
+                                <div>{item.name}</div>
                             </ConditionalWrapper>
                             {item.subText && <span>{item.subText}</span>}
                         </ConditionalWrapper>

package/components/List/List.svelte

@@ -130,7 +130,7 @@
                             {#if item.icon}
                                 {@html item.icon}
                             {/if}
-                            {item.name}
+                            <div>{item.name}</div>
                         </ConditionalWrapper>
                         {#if item.subText}
                             <span>{item.subText}</span>

package/components/List/List.tsx

@@ -97,7 +97,6 @@ const List = ({
                     {showSearchBarIcon && (
                         <span
                             dangerouslySetInnerHTML={{ __html: searchIcon }}
-                            style={{ height: '18px', position: 'absolute' }}
                         />
                     )}
                 </Input>
@@ -148,7 +147,7 @@ const List = ({
                                                 style={{ height: '18px' }}
                                             />
                                         )}
-                                        {item.name}
+                                        <div>{item.name}</div>
                                     </ConditionalWrapper>
                                     {item.subText && <span>{item.subText}</span>}
                                 </ConditionalWrapper>

package/components/List/list.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '../Button/button'
+
 export type ListEventType = {
     value: string
     name: string
@@ -19,7 +21,7 @@ export type ListProps = {
             name: string
             value?: string
             href?: string
-            target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
+            target?: ButtonProps['target']
             selected?: boolean
             disabled?: boolean
             icon?: string

package/components/Masonry/Masonry.astro

@@ -0,0 +1,54 @@
+---
+import type { MasonryProps } from './masonry'
+
+import styles from './masonry.module.scss'
+
+interface Props extends MasonryProps {}
+
+const {
+    items,
+    element = 'section',
+    gap,
+    columns = 3,
+    sequential,
+    className
+} = Astro.props
+
+const classes = [
+    styles.masonry,
+    className
+]
+
+const Component = element
+
+const componentProps = {
+    'class:list': classes,
+    'style': gap ? `--w-masonry-gap: ${gap};` : null
+}
+
+const chunkSize = Math.ceil(items.length / columns)
+const columnGroups = Array.from({ length: columns }, (_, i) => {
+    return sequential
+        ? items.slice(i * chunkSize, (i + 1) * chunkSize)
+        : items.filter((_, index) => index % columns === i)
+})
+---
+
+<Component {...componentProps}>
+    {columnGroups.map(column => (
+        <div class={styles.column}>
+            {column.map(item => (
+                item.component
+                    ? <item.component {...item.props}>
+                        {typeof item.children === 'object'
+                            ? <item.children.component {...item.children.props}>
+                                <Fragment set:html={item.children.children} />
+                            </item.children.component>
+                            : <Fragment set:html={item.children} />
+                        }
+                    </item.component>
+                    : <Fragment set:html={item.html} />
+            ))}
+        </div>
+    ))}
+</Component>

package/components/Masonry/Masonry.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { SvelteMasonryProps } from './masonry'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './masonry.module.scss'
+
+    export let items: SvelteMasonryProps['items'] = []
+    export let element: SvelteMasonryProps['element'] = 'section'
+    export let gap: SvelteMasonryProps['gap'] = ''
+    export let columns: SvelteMasonryProps['columns'] = 3
+    export let sequential: SvelteMasonryProps['sequential'] = false
+    export let className: SvelteMasonryProps['className'] = ''
+
+    const classes = classNames([
+        styles.masonry,
+        className
+    ])
+
+    const componentProps = {
+        class: classes,
+        style: gap ? `--w-masonry-gap: ${gap};` : null
+    }
+
+    const chunkSize = Math.ceil(items.length / columns!)
+    const columnGroups = Array.from({ length: columns! }, (_, i) => {
+        return sequential
+            ? items.slice(i * chunkSize, (i + 1) * chunkSize)
+            : items.filter((_, index) => index % columns! === i)
+    })
+</script>
+
+
+<svelte:element this={element} {...componentProps}>
+    {#each columnGroups as group}
+        <div class={styles.column}>
+            {#each group as item}
+                {#if item.component}
+                    <svelte:component this={item.component} {...item.props}>
+                        {#if typeof item.children === 'object' && item.children.component}
+                            <svelte:component this={item.children.component} {...item.children.props}>
+                                {@html item.children.children}
+                            </svelte:component>
+                        {:else}
+                            {@html item.children}
+                        {/if}
+                    </svelte:component>
+                {:else}
+                    {@html item.html}
+                {/if}
+            {/each}
+        </div>
+    {/each}
+</svelte:element>

package/components/Masonry/Masonry.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import type { ReactMasonryProps } from './masonry'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './masonry.module.scss'
+
+const Masonry = ({
+    items,
+    element = 'section',
+    gap,
+    columns = 3,
+    sequential,
+    className
+}: ReactMasonryProps) => {
+    const classes = classNames([
+        styles.masonry,
+        className
+    ])
+
+    const componentProps = {
+        className: classes,
+        style: gap
+            ? { '--w-masonry-gap': gap } as React.CSSProperties
+            : undefined
+    }
+
+    const chunkSize = Math.ceil(items.length / columns!)
+    const columnGroups = Array.from({ length: columns! }, (_, i) => {
+        return sequential
+            ? items.slice(i * chunkSize, (i + 1) * chunkSize)
+            : items.filter((_, index) => index % columns! === i)
+    })
+
+    const Element = element as keyof JSX.IntrinsicElements
+
+    return (
+        <Element {...componentProps}>
+            {columnGroups.map((column, columnKey) => (
+                <div className={styles.column} key={columnKey}>
+                    {column.map((item, itemKey) => (
+                        item.component
+                            ? <item.component {...item.props} key={itemKey}>
+                                {typeof item.children === 'object'
+                                    ? <item.children.component {...item.children.props}>
+                                        <span dangerouslySetInnerHTML={{ __html: String(item.children.children) }} />
+                                    </item.children.component>
+                                    : <span dangerouslySetInnerHTML={{ __html: String(item.children) }} />
+                                }
+                            </item.component>
+                            : <span
+                                key={itemKey}
+                                dangerouslySetInnerHTML={{ __html: String(item.html) }}
+                            />
+                    ))}
+                </div>
+            ))}
+        </Element>
+    )
+}
+
+export default Masonry

package/components/Masonry/masonry.module.scss

@@ -0,0 +1,18 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-masonry-gap: 5px;
+}
+
+.masonry {
+    @include layout(flex);
+
+    gap: var(--w-masonry-gap);
+    overflow-x: auto;
+
+    .column {
+        @include layout(flex, column);
+
+        gap: var(--w-masonry-gap);
+    }
+}

package/components/Masonry/masonry.ts

@@ -0,0 +1,36 @@
+import type { FC } from 'react'
+import type { SvelteComponent } from 'svelte'
+
+type ChildrenProps<ComponentType> = {
+    component: ComponentType
+    children?: string | number
+    props?: {
+        [key: string]: any
+    }
+} | string | number
+
+type Items<ComponentType> = {
+    component?: ComponentType;
+    children?: ChildrenProps<ComponentType>
+    html?: string
+    props?: {
+        [key: string]: any
+    }
+}
+
+export type MasonryProps = {
+    items: Items<(_props: any) => any>[]
+    element?: string
+    gap?: string
+    columns?: number
+    sequential?: boolean
+    className?: string
+}
+
+export type SvelteMasonryProps = {
+    items: Items<typeof SvelteComponent<any>>[]
+} & Omit<MasonryProps, 'items'>
+
+export type ReactMasonryProps = {
+    items: Items<FC<any>>[]
+} & Omit<MasonryProps, 'items'>

package/components/Menu/Menu.astro

@@ -56,7 +56,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
                     {items.map(item => (
                         <li>
                             <a
-                                href={item.url}
+                                href={item.href}
                                 target={item.target}
                                 class:list={[item.active && styles.active]}
                             >

package/components/Menu/Menu.svelte

@@ -55,7 +55,7 @@
                     {#each items as item}
                         <li>
                             <a
-                                href={item.url}
+                                href={item.href}
                                 target={item.target}
                                 class={item.active ? styles.active : null}
                             >

package/components/Menu/Menu.tsx

@@ -67,7 +67,7 @@ const Menu = ({
                             {items.map((item, index) => (
                                 <li key={index}>
                                     <a
-                                        href={item.url}
+                                        href={item.href}
                                         target={item.target}
                                         className={item.active ? styles.active : undefined}
                                     >

package/components/Menu/menu.ts

@@ -1,8 +1,10 @@
+import type { ButtonProps } from '../Button/button'
+
 export type MenuProps = {
     items?: {
-        url: string
+        href: string
         name: string
-        target?: string
+        target?: ButtonProps['target']
         active?: boolean
     }[]
     logo?: {

package/components/Modal/Modal.astro

@@ -26,6 +26,7 @@ const {
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -40,6 +41,7 @@ const close = [
 
 const classes = [
     styles.modal,
+    transparent && styles.transparent,
     theme && styles[theme],
     className
 ]

package/components/Modal/Modal.svelte

@@ -18,6 +18,7 @@
     export let showCloseIcon: ModalProps['showCloseIcon'] = true
     export let closeOnEsc: ModalProps['closeOnEsc'] = true
     export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
+    export let transparent: ModalProps['transparent'] = false
     export let theme: ModalProps['theme'] = null
     export let id : ModalProps['className'] = ''
     export let className: ModalProps['className'] = ''
@@ -31,6 +32,7 @@
 
     const classes = classNames([
         styles.modal,
+        transparent && styles.transparent,
         theme && styles[theme],
         className
     ])

package/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ const Modal = ({
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -35,6 +36,7 @@ const Modal = ({
     const classes = classNames([
         styles.modal,
         theme && styles[theme],
+        transparent && styles.transparent,
         className
     ])