webcoreui 0.3.0 → 0.4.0

package/components/Collapsible/Collapsible.tsx

@@ -1,54 +1,55 @@
-import React, { useState } from 'react'
-import type { ReactCollapsibleProps } from './collapsible'
-
-import styles from './collapsible.module.scss'
-import { classNames } from '../../utils/classNames'
-
-const Collapsible = ({
-    initialHeight,
-    maxHeight,
-    toggled,
-    on,
-    off,
-    children,
-    className,
-    togglesClassName
-}: ReactCollapsibleProps) => {
-    const [toggle, setToggled] = useState(toggled)
-
-    const classes = classNames([
-        styles.collapsible,
-        maxHeight && styles.animated,
-        className
-    ])
-
-    const styleVariables = {
-        ...(initialHeight && { '--w-collapsible-initial-height': initialHeight }),
-        ...(maxHeight && { '--w-collapsible-max-height': maxHeight })
-    } as React.CSSProperties
-
-    return (
-        <div
-            className={classes}
-            data-toggled={toggle ? 'true' : undefined}
-        >
-            <div
-                className={styles.wrapper}
-                style={styleVariables}
-            >
-                {children}
-            </div>
-            <div
-                onClick={() => setToggled(!toggle)}
-                onKeyUp={() => setToggled(!toggle)}
-                role="button"
-                tabIndex={0}
-                className={togglesClassName}
-            >
-                {toggle ? off : on}
-            </div>
-        </div>
-    )
-}
-
-export default Collapsible
+import React, { useState } from 'react'
+import type { ReactCollapsibleProps } from './collapsible'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './collapsible.module.scss'
+
+const Collapsible = ({
+    initialHeight,
+    maxHeight,
+    toggled,
+    on,
+    off,
+    children,
+    className,
+    togglesClassName
+}: ReactCollapsibleProps) => {
+    const [toggle, setToggled] = useState(toggled)
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = {
+        ...(initialHeight && { '--w-collapsible-initial-height': initialHeight }),
+        ...(maxHeight && { '--w-collapsible-max-height': maxHeight })
+    } as React.CSSProperties
+
+    return (
+        <div
+            className={classes}
+            data-toggled={toggle ? 'true' : undefined}
+        >
+            <div
+                className={styles.wrapper}
+                style={styleVariables}
+            >
+                {children}
+            </div>
+            <div
+                onClick={() => setToggled(!toggle)}
+                onKeyUp={() => setToggled(!toggle)}
+                role="button"
+                tabIndex={0}
+                className={togglesClassName}
+            >
+                {toggle ? off : on}
+            </div>
+        </div>
+    )
+}
+
+export default Collapsible

package/components/ConditionalWrapper/ConditionalWrapper.astro

@@ -10,7 +10,8 @@ const children = await Astro.slots.render('default')
 const wrapped = wrapper?.replace('children', children)
 
 if (!Astro.slots.has('wrapper')) {
-  console.error('Missing wrapper. Add slot="wrapper" to one of the elements.')
+    // eslint-disable-next-line no-console
+    console.error('Missing wrapper. Add slot="wrapper" to one of the elements.')
 }
 ---
 

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import type { ReactConditionalWrapperProps } from './conditionalwrapper'
 
 const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
-  condition ? wrapper(children) : children
+    condition ? wrapper(children) : children
 
 export default ConditionalWrapper

package/components/Group/Group.astro

@@ -0,0 +1,22 @@
+---
+import type { GroupProps } from './group'
+
+import styles from './group.module.scss'
+
+interface Props extends GroupProps {}
+
+const {
+    withSeparator,
+    className
+} = Astro.props
+
+const classes = [
+    styles.group,
+    withSeparator && styles.separator,
+    className
+]
+---
+
+<div class:list={classes}>
+    <slot />
+</div>

package/components/Group/Group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { GroupProps } from './group'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './group.module.scss'
+
+    export let withSeparator: GroupProps['withSeparator'] = false
+    export let className: GroupProps['className'] = ''
+
+    const classes = classNames([
+        styles.group,
+        withSeparator && styles.separator,
+        className
+    ])
+</script>
+
+<div class={classes}>
+    <slot />
+</div>

package/components/Group/Group.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import type { ReactGroupProps } from './group'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './group.module.scss'
+
+const Group = ({
+    withSeparator,
+    className,
+    children
+}: ReactGroupProps) => {
+    const classes = classNames([
+        styles.group,
+        withSeparator && styles.separator,
+        className
+    ])
+
+    return <div className={classes}>{children}</div>
+}
+
+export default Group

package/components/Group/group.module.scss

@@ -0,0 +1,43 @@
+@import '../../scss/config.scss';
+
+.group {
+    @include layout(flex, none);
+    @include visibility(auto);
+
+    button,
+    span {
+        @include border-radius(none);
+
+        &:first-child {
+            @include border-radius(left, md);
+        }
+
+        &:last-child {
+            @include border-radius(right, md);
+        }
+    }
+
+    &.separator button:not(:last-child),
+    &.separator span:not(:last-child) {
+        @include border(1px, right, primary-70);
+    }
+
+    &.outline button
+    &.outline span {
+        @include border(1px, primary-20);
+        box-shadow: none;
+
+        &:hover {
+            @include border(1px, primary);
+            box-shadow: none;
+        }
+
+        &:first-child {
+            @include border(right, 0);
+        }
+
+        &:last-child {
+            @include border(left, 0);
+        }
+    }
+}

package/components/Group/group.ts

@@ -0,0 +1,8 @@
+export type GroupProps = {
+    withSeparator?: boolean
+    className?: string
+}
+
+export type ReactGroupProps = {
+    children: React.ReactNode
+} & GroupProps

package/components/Icon/map.ts

@@ -6,6 +6,7 @@ import Close from '../../icons/close.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
+import Search from '../../icons/search.svg?raw'
 import Sun from '../../icons/sun.svg?raw'
 import Warning from '../../icons/warning.svg?raw'
 
@@ -18,6 +19,7 @@ const iconMap = {
     'github': Github,
     'info': Info,
     'moon': Moon,
+    'search': Search,
     'sun': Sun,
     'warning': Warning
 }

package/components/Input/Input.astro

@@ -1,5 +1,6 @@
 ---
 import type { InputProps } from './input'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './input.module.scss'
@@ -12,6 +13,7 @@ const {
     label,
     subText,
     className,
+    labelClassName,
     ...rest
 } = Astro.props
 
@@ -21,11 +23,16 @@ const classes = [
     className
 ]
 
+const labelClasses = [
+    styles['input-label'],
+    labelClassName
+]
+
 const useLabel = !!(label || subText || Astro.slots.has('default'))
 ---
 
 <ConditionalWrapper condition={useLabel}>
-    <label slot="wrapper" class={styles['input-label']}>
+    <label slot="wrapper" class:list={labelClasses}>
         {label && (
             <div class={styles.label}>{label}</div>
         )}

package/components/Input/Input.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
     import type { SvelteInputProps } from './input'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
-    import styles from './input.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './input.module.scss'
+
     export let type: SvelteInputProps['type'] = 'text'
     export let theme: SvelteInputProps['theme'] = null
     export let label: SvelteInputProps['label'] = ''
     export let subText: SvelteInputProps['subText'] = ''
     export let className: SvelteInputProps['className'] = ''
+    export let labelClassName: SvelteInputProps['labelClassName'] = ''
     export let onChange: SvelteInputProps['onChange'] = () => {}
     export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
+    export let onInput: SvelteInputProps['onInput'] = () => {}
+    export let onClick: SvelteInputProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.input,
@@ -19,13 +24,18 @@
         className
     ])
 
+    const labelClasses = classNames([
+        styles['input-label'],
+        labelClassName
+    ])
+
     const useLabel = !!(label || subText || $$slots.default)
 </script>
 
 <ConditionalWrapper
     condition={useLabel}
     element="label"
-    class={styles['input-label']}
+    class={labelClasses}
 >
     {#if label}
         <div class={styles.label}>{label}</div>
@@ -41,10 +51,12 @@
             class={classes}
             on:change={onChange}
             on:keyup={onKeyUp}
+            on:input={onInput}
+            on:click={onClick}
             {...$$restProps}
         />
     </ConditionalWrapper>
-    {#if label}
+    {#if subText}
         <div class={styles.subtext}>
             {@html subText}
         </div>

package/components/Input/Input.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import type { ReactInputProps } from './input'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
-import styles from './input.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './input.module.scss'
+
 const Input = ({
     type = 'text',
     theme,
     label,
     subText,
-    icon,
     value,
     className,
+    labelClassName,
     children,
     ...rest
 }: ReactInputProps) => {
@@ -22,11 +24,16 @@ const Input = ({
         className
     ])
 
+    const labelClasses = classNames([
+        styles['input-label'],
+        labelClassName
+    ])
+
     const useLabel = !!(label || subText || children)
 
     return (
         <ConditionalWrapper condition={useLabel} wrapper={children => (
-            <label className={styles['input-label']}>
+            <label className={labelClasses}>
                 {children}
             </label>
         )}>

package/components/Input/input.module.scss

@@ -68,7 +68,10 @@
 
         svg {
             @include position(absolute, l10px);
-            @include size(20px);
+            @include size(18px);
+            @include typography(primary-30);
+
+            pointer-events: none;
         }
     }
 

package/components/Input/input.ts

@@ -35,16 +35,21 @@ export type InputProps = {
     autofocus?: boolean
     autocomplete?: 'on' | 'off'
     className?: string
+    labelClassName?: string
     [key: string]: any
 }
 
 export type SvelteInputProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
+    onChange?: (event: Event & { currentTarget: HTMLInputElement }) => void
+    onKeyUp?: (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+    onInput?: (event: any) => void
+    onClick?: (event: MouseEvent & { currentTarget: HTMLInputElement }) => void
 } & InputProps
 
 export type ReactInputProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
     children?: React.ReactNode
 } & InputProps

package/components/List/List.astro

@@ -0,0 +1,169 @@
+---
+import type { ListProps } from './list'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Input from '../Input/Input.astro'
+
+import searchIcon from '../../icons/search.svg?raw'
+
+import styles from './list.module.scss'
+
+interface Props extends ListProps {}
+
+const {
+    showSearchBar,
+    showSearchBarIcon,
+    searchBarPlaceholder,
+    noResultsLabel = 'No results.',
+    maxHeight,
+    id,
+    className,
+    wrapperClassName,
+    itemGroups
+} = Astro.props
+
+const classes = [
+    styles.list,
+    !showSearchBar && styles.container,
+    className
+]
+
+const wrapperClasses = [
+    styles.container,
+    wrapperClassName
+]
+---
+
+<ConditionalWrapper condition={!!showSearchBar}>
+    <div slot="wrapper" class:list={wrapperClasses} data-id="w-list-wrapper">
+        <Input
+            type="search"
+            placeholder={searchBarPlaceholder}
+            data-id="w-list-search"
+        >
+            <Fragment
+                set:html={searchIcon}
+                slot={showSearchBarIcon ? 'default' : null}
+            />
+        </Input>
+        children
+    </div>
+    <ul class:list={classes} id={id} data-id="w-list" style={maxHeight && `max-height: ${maxHeight}`}>
+        {itemGroups.map((group: ListProps['itemGroups'][0]) => (
+            <Fragment>
+                {group.title && (
+                    <li class={styles.title} data-id="w-list-title">
+                        {group.title}
+                    </li>
+                )}
+                {group.items.map(item => (
+                    <li
+                        tabindex={item.href || item.disabled ? undefined : 0}
+                        data-value={item.value}
+                        data-name={item.name}
+                        data-disabled={item.disabled ? 'true' : undefined}
+                        data-selected={item.selected}
+                    >
+                        <ConditionalWrapper condition={!!item.href}>
+                            <a
+                                slot="wrapper"
+                                href={item.href}
+                                target={item.target}
+                            >
+                                children
+                            </a>
+
+                            <ConditionalWrapper condition={!!(item.icon && item.subText)}>
+                                <div slot="wrapper">children</div>
+                                {item.icon && <Fragment set:html={item.icon} />}
+                                {item.name}
+                            </ConditionalWrapper>
+                            {item.subText && <span>{item.subText}</span>}
+                        </ConditionalWrapper>
+                    </li>
+                ))}
+            </Fragment>
+        ))}
+        {showSearchBar && (
+            <li data-id="w-no-results" data-hidden>{noResultsLabel}</li>
+        )}
+    </ul>
+</ConditionalWrapper>
+
+<script>
+    import { dispatch } from '../../utils/event'
+
+    const lists = document.querySelectorAll('[data-id="w-list"]')
+    const searchInputs = document.querySelectorAll('[data-id="w-list-search"]')
+
+    const handleClick = (list: Element, items: Element[], event: Event) => {
+        const target = event.target as HTMLElement
+
+        if (target.dataset.value && !target.dataset.disabled) {
+            dispatch('listOnSelect', {
+                value: target.dataset.value,
+                name: target.dataset.name,
+                list
+            })
+
+            items.forEach(item => item.removeAttribute('data-selected'))
+            target.dataset.selected = 'true'
+        }
+    }
+
+    Array.from(lists).forEach(list => {
+        const items = Array.from(list.children)
+
+        list.addEventListener('click', event => handleClick(list, items, event))
+        list.addEventListener('keyup', event => {
+            if ((event as KeyboardEvent).key === 'Enter') {
+                handleClick(list, items, event)
+            }
+        })
+    })
+
+    Array.from(searchInputs).forEach(element => {
+        element.addEventListener('input', event => {
+            const target = event.target as HTMLInputElement
+            const ul = target.closest('[data-id="w-list-wrapper"]')
+                ?.querySelector('ul') as HTMLUListElement
+
+            const noResults = ul.querySelector('[data-id="w-no-results"]')
+            const items = Array.from(ul.children)
+            const value = target.value.toLowerCase()
+
+            items.forEach(item => {
+                const li = item as HTMLLIElement
+                const hideItem = (!li.dataset.value?.toLowerCase().includes(value)
+                    && !li.innerText.toLowerCase().includes(value))
+                    || li.dataset.id === 'w-list-title'
+                    || li.dataset.id === 'w-no-results'
+
+                if (hideItem) {
+                    li.dataset.hidden = 'true'
+                } else if (li.dataset.id !== 'w-no-results') {
+                    li.removeAttribute('data-hidden')
+                }
+            })
+
+            const numberOfResults = items.filter(item => {
+                const li = item as HTMLLIElement
+                return li.dataset.name && !li.dataset.hidden
+            }).length
+
+            if (!numberOfResults) {
+                noResults?.removeAttribute('data-hidden')
+            }
+
+            if (!value) {
+                items.forEach(item => {
+                    const li = item as HTMLLIElement
+
+                    li.dataset.id === 'w-no-results'
+                        ? li.dataset.hidden = 'true'
+                        : li.removeAttribute('data-hidden')
+                })
+            }
+        })
+    })
+</script>