webcoreui 0.4.1 → 0.6.0

package/components/DataTable/DataTable.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react'
+import type { HeadingObject, ReactDataTableProps } from './datatable'
+
+import Button from '../Button/Button.tsx'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import Input from '../Input/Input.tsx'
+import Pagination from '../Pagination/Pagination.tsx'
+import Select from '../Select/Select.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { debounce } from '../../utils/debounce'
+
+import checkIcon from '../../icons/check.svg?raw'
+import orderIcon from '../../icons/order.svg?raw'
+import searchIcon from '../../icons/search.svg?raw'
+
+import styles from './datatable.module.scss'
+
+import type { ListEventType } from '../List/list'
+
+// eslint-disable-next-line complexity
+const DataTable = ({
+    headings,
+    filterPlaceholder = 'Filter entries',
+    showFilterIcon,
+    noResultsLabel = 'No results.',
+    itemsPerPage,
+    subText,
+    columnToggleLabel = 'Columns',
+    pagination,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    maxHeight,
+    className,
+    id,
+    onFilter,
+    children
+}: ReactDataTableProps) => {
+    const [filteredData, setFilteredData] = useState<any>(data)
+    const [toggledData, setToggledData] = useState(filteredData)
+    const [filteredHeadings, setFilteredHeadings] = useState<any>(headings)
+    const [page, setPage] = useState(1)
+    const [hasActiveFilter, setHasActiveFilter] = useState(false)
+    const [sortOrder, setSortOrder] = useState(1)
+
+    const classes = classNames([
+        styles.table,
+        hover && styles.hover,
+        striped && styles[`striped-${striped}s`],
+        offsetStripe && styles.offset,
+        compact && styles.compact,
+        maxHeight && styles.scroll
+    ])
+
+    const footerClasses = classNames([
+        styles.footer,
+        subText && styles.between
+    ])
+
+    const styleVariables = {
+        ...(maxHeight && { 'max-height': maxHeight })
+    } as React.CSSProperties
+
+    const showColumnToggle = headings?.some(heading => {
+        return typeof heading === 'string' ? false : heading.toggleable
+    })
+
+    const columnToggleItems = [{
+        items: headings?.length ? headings
+            .filter(heading => typeof heading !== 'string' && heading.toggleable)
+            .map(heading => ({
+                icon: checkIcon,
+                name: (heading as HeadingObject).name,
+                value: String(headings.findIndex(h => {
+                    return (h as HeadingObject).name === (heading as HeadingObject).name
+                }))
+            })) : []
+    }]
+
+    const columnFilterIndexes = headings?.map(heading => (heading as HeadingObject).filterable)
+        .map((heading, index) => heading ? index : null)
+        .filter(heading => heading !== null) || []
+
+    const hasPagination = data?.length && itemsPerPage
+        ? data.length > itemsPerPage
+        : false
+
+    const filter = debounce((event: Event) => {
+        const target = event.target as HTMLInputElement
+
+        setHasActiveFilter(!!target.value)
+
+        setFilteredData(toggledData?.filter((row: string[]) => {
+            const rowValue = row.filter((_, index) => columnFilterIndexes.includes(index))
+                .join('')
+                .toLowerCase()
+
+            return rowValue.includes(target.value.toLowerCase())
+        }))
+
+        onFilter?.({
+            results: filteredData,
+            numberOfResults: filteredData.length
+        })
+    }, 400)
+
+    const toggleColumns = (event: ListEventType) => {
+        const columnToggleListElement = Array.from(event.list.children)
+            .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement
+        const svgIcon = columnToggleListElement.children[0] as HTMLElement
+        let mappedData
+
+        svgIcon.style.opacity = svgIcon.style.opacity === '0'
+            ? '1'
+            : '0'
+
+        if (svgIcon.style.opacity === '0') {
+            mappedData = (hasActiveFilter ? data : filteredData)?.map((row: string[]) => {
+                return row.map((column, index) => index === Number(event.value) ? null : column)
+            })
+
+            setFilteredData(mappedData)
+
+            setFilteredHeadings(filteredHeadings.map((heading: HeadingObject | string) => {
+                return ((heading as HeadingObject)?.name || heading) === event.name ? null : heading
+            }))
+        } else {
+            mappedData = (hasActiveFilter ? data : filteredData)?.map((row: string[], x: number) => {
+                return row.map((column, y) => y === Number(event.value) ? data?.[x][y] : column)
+            })
+
+            setFilteredData(mappedData)
+
+            setFilteredHeadings(filteredHeadings.map((heading: HeadingObject | string, index: number) => {
+                return ((headings?.[index] as HeadingObject)?.name || headings?.[index]) === event.name
+                    ? headings?.[index]
+                    : heading
+            }))
+        }
+
+        setToggledData(mappedData)
+    }
+
+    const sort = (index: number) => {
+        const sortedData = filteredData.sort((a: string[], b: string[]) => {
+            let aValue: string | number = a[index]
+            let bValue: string | number = b[index]
+
+            if (!isNaN(aValue as any)) {
+                aValue = Number(aValue)
+            }
+
+            if (!isNaN(bValue as any)) {
+                bValue = Number(bValue)
+            }
+
+            return aValue > bValue
+                ? sortOrder * -1
+                : sortOrder
+        })
+
+        setFilteredData(sortedData)
+        setSortOrder(sortOrder === 1 ? -1 : 1)
+    }
+
+    const isNextPage = (index: number) => {
+        if (hasPagination && itemsPerPage && !hasActiveFilter) {
+            const currentPage = Math.ceil((index + 1) / itemsPerPage)
+
+            return currentPage !== page ? 'true' : undefined
+        }
+
+        if (hasActiveFilter && itemsPerPage) {
+            return index >= itemsPerPage ? 'true' : undefined
+        }
+
+        return undefined
+    }
+
+    return (
+        <section className={className} id={id}>
+            {(!!columnFilterIndexes?.length || showColumnToggle) && (
+                <div className={styles.filters}>
+                    {!!columnFilterIndexes?.length && (
+                        <Input
+                            type="search"
+                            placeholder={filterPlaceholder}
+                            onInput={filter}
+                        >
+                            {showFilterIcon && (
+                                <span dangerouslySetInnerHTML={{ __html: searchIcon }} />
+                            )}
+                        </Input>
+                    )}
+                    {showColumnToggle && (
+                        <Select
+                            name={`data-table-${id || crypto.randomUUID()}`}
+                            itemGroups={columnToggleItems}
+                            position="bottom-end"
+                            value={columnToggleLabel}
+                            onChange={toggleColumns}
+                            updateValue={false}
+                        />
+                    )}
+                </div>
+            )}
+
+            <div className={classes} style={styleVariables}>
+                <table>
+                    {!!filteredHeadings?.length && (
+                        <thead>
+                            <tr>
+                                {filteredHeadings?.map((heading: HeadingObject | string, index: number) => {
+                                    if (!heading) {
+                                        return null
+                                    }
+
+                                    return (
+                                        <th key={index}>
+                                            <ConditionalWrapper
+                                                condition={!!(heading as HeadingObject).sortable}
+                                                wrapper={children => (
+                                                    <Button theme="flat" slot="wrapper" onClick={() => sort(index)}>
+                                                        {children}
+                                                        <span dangerouslySetInnerHTML={{ __html: orderIcon }} />
+                                                    </Button>
+                                                )}
+                                            >
+                                                {(heading as HeadingObject).name || heading as string}
+                                            </ConditionalWrapper>
+                                        </th>
+                                    )
+                                })}
+                            </tr>
+                        </thead>
+                    )}
+
+                    <tbody>
+                        {filteredData?.map((row: string[], rowIndex: number) => (
+                            <tr key={rowIndex} data-hidden={isNextPage(rowIndex)}>
+                                {row.filter(Boolean).map((column, columnIndex) => (
+                                    <td
+                                        key={columnIndex}
+                                        dangerouslySetInnerHTML={{ __html: column }}
+                                    />
+                                ))}
+                            </tr>
+                        ))}
+                        {children}
+                    </tbody>
+                    {!filteredData?.length && (
+                        <tfoot>
+                            <tr>
+                                <td
+                                    colSpan={data?.[0].length}
+                                    className={styles['no-results']}
+                                >
+                                    {noResultsLabel}
+                                </td>
+                            </tr>
+                        </tfoot>
+                    )}
+                </table>
+            </div>
+            {(subText || hasPagination) && (
+                <div className={footerClasses}>
+                    {subText && (
+                        <span className={styles.subtext}>{subText}</span>
+                    )}
+                    {(hasPagination && itemsPerPage && !hasActiveFilter) && (
+                        <Pagination
+                            {...pagination}
+                            totalPages={Math.ceil((data?.length || 0) / itemsPerPage)}
+                            currentPage={page}
+                            onChange={event => setPage(event.page)}
+                        />
+                    )}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default DataTable

package/components/DataTable/datatable.module.scss

@@ -0,0 +1,102 @@
+@import '../../scss/config.scss';
+
+.filters {
+    @include layout(flex, xs);
+    @include spacing(mb-sm);
+}
+
+.table {
+    @include visibility(auto);
+
+    table {
+        @include size('w100%');
+        @include typography(left);
+
+        border-collapse: collapse;
+    }
+
+    thead,
+    thead button {
+        @include typography(bold);
+    }
+
+    thead button {
+        @include spacing(p-xxs);
+
+        svg {
+            @include size(15px);
+            pointer-events: none;
+        }
+    }
+
+    th,
+    td {
+        @include spacing(py-xs, px-sm);
+
+        &.no-results {
+            @include typography(center);
+        }
+    }
+
+    thead,
+    tr {
+        @include border(bottom, primary-50);
+
+        &:last-child {
+            @include border(bottom, 0);
+        }
+    }
+
+    [data-hidden] {
+        @include visibility(none);
+    }
+
+    &.hover tr:hover,
+    &.striped-rows tbody tr:nth-child(odd),
+    &.striped-rows.offset tbody tr:nth-child(even),
+    &.striped-columns td:nth-child(odd),
+    &.striped-columns.offset td:nth-child(even),
+    &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
+        @include background(primary-60);
+    }
+
+    &.striped-rows tr,
+    &.striped-columns tr,
+    &.striped-columns thead {
+        @include border(bottom, 0);
+    }
+
+    &.striped-rows.offset tbody tr:nth-child(odd),
+    &.striped-columns.offset td:nth-child(odd) {
+        @include background(transparent);
+    }
+
+    &.compact {
+        th, td {
+            @include spacing(py-xxs, px-sm);
+        }
+    }
+
+    &.scroll {
+        @include spacing(pr-sm);
+
+        thead {
+            @include position(sticky, t0);
+            @include background(primary-70);
+            box-shadow: 0 .5px 0 var(--w-color-primary-50);
+        }
+    }
+}
+
+.footer {
+    @include layout(flex, h-end, v-center, xs);
+    @include spacing(mt-sm);
+
+    &.between {
+        @include layout(h-between);
+    }
+
+    .subtext {
+        @include typography(md, primary-20);
+    }
+}

package/components/DataTable/datatable.ts

@@ -0,0 +1,41 @@
+import type { PaginationProps } from '../Pagination/pagination'
+
+export type DataTableEventType = {
+    results: string[][]
+    numberOfResults: number
+}
+
+export type HeadingObject = {
+    name: string
+    sortable?: boolean
+    toggleable?: boolean
+    filterable?: boolean
+}
+
+export type DataTableProps = {
+    headings?: (HeadingObject | string)[]
+    filterPlaceholder?: string
+    showFilterIcon?: boolean
+    noResultsLabel?: string
+    itemsPerPage?: number | null
+    subText?: string
+    columnToggleLabel?: string
+    pagination?: PaginationProps
+    data: string[][]
+    hover?: boolean
+    striped?: 'column' | 'row' | null
+    offsetStripe?: boolean
+    compact?: boolean
+    maxHeight?: string
+    className?: string
+    id?: string
+}
+
+export type SvelteDataTableProps = {
+    onFilter?: (event: DataTableEventType) => void
+} & DataTableProps
+
+export type ReactDataTableProps = {
+    onFilter?: (event: DataTableEventType) => void
+    children?: React.ReactNode
+} & DataTableProps

package/components/Footer/Footer.astro

@@ -0,0 +1,91 @@
+---
+import type { FooterProps } from './footer'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './footer.module.scss'
+
+interface Props extends FooterProps {}
+
+const {
+    logo,
+    columns,
+    subText,
+    className,
+    wrapperClassName,
+    subTextClassName
+} = Astro.props
+
+const classes = [
+    styles.footer,
+    className
+]
+
+const containerClasses = [
+    styles.container,
+    wrapperClassName
+]
+
+const subTextClasses = [
+    styles.subtext,
+    subTextClassName
+]
+---
+
+<footer class:list={classes}>
+    <div class:list={containerClasses}>
+        <ConditionalWrapper condition={!!(logo?.url || logo?.html)}>
+            <div slot="wrapper" class={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'}>
+                    <Fragment set:html={logo.html} />
+                </a>
+            )}
+
+            {!!columns?.length && (
+                <ConditionalWrapper condition={columns.length > 1}>
+                    <div slot="wrapper" class={styles.columns}>children</div>
+                    {columns.map(column => (
+                        <ConditionalWrapper condition={!!column.title}>
+                            <div slot="wrapper">children</div>
+                            {column.title && (
+                                <strong class={styles['column-title']}>{column.title}</strong>
+                            )}
+                            <ul class={styles.column}>
+                                {column.items.map(item => (
+                                    <li>
+                                        <a
+                                            href={item.href}
+                                            target={item.target}
+                                            class:list={[item.active && styles.active]}
+                                        >
+                                            {item.name}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </ConditionalWrapper>
+                    ))}
+                </ConditionalWrapper>
+            )}
+        </ConditionalWrapper>
+        {(subText || Astro.slots.has('default')) && (
+            <div class:list={subTextClasses}>
+                {subText && <span set:html={subText} />}
+                <slot />
+            </div>
+        )}
+    </div>
+</footer>

package/components/Footer/Footer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import type { FooterProps } from './footer'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './footer.module.scss'
+
+    export let logo: FooterProps['logo'] = null
+    export let columns: FooterProps['columns'] = []
+    export let subText: FooterProps['subText'] = ''
+    export let className: FooterProps['className'] = ''
+    export let wrapperClassName: FooterProps['wrapperClassName'] = ''
+    export let subTextClassName: FooterProps['subTextClassName'] = ''
+
+    const classes = classNames([
+        styles.footer,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const subTextClasses = classNames([
+        styles.subtext,
+        subTextClassName
+    ])
+</script>
+
+<footer class={classes}>
+    <div class={containerClasses}>
+        <ConditionalWrapper
+            condition={!!(logo?.url || logo?.html)}
+            class={styles.wrapper}
+        >
+            {#if logo?.url}
+                <a href="/">
+                    <img
+                        src={logo.url}
+                        alt={logo.alt || 'Logo'}
+                        width={logo.width}
+                        height={logo.height}
+                        loading={logo.eager ? undefined : 'lazy'}
+                    />
+                </a>
+            {/if}
+
+            {#if logo?.html}
+                <a href="/" aria-label={logo.alt || 'Logo'}>
+                    {@html logo.html}
+                </a>
+            {/if}
+
+            {#if columns?.length}
+                <ConditionalWrapper
+                    condition={columns.length > 1}
+                    class={styles.columns}
+                >
+                    {#each columns as column}
+                        <ConditionalWrapper condition={!!column.title}>
+                            {#if column.title}
+                                <strong class={styles['column-title']}>{column.title}</strong>
+                            {/if}
+                            <ul class={styles.column}>
+                                {#each column.items as item}
+                                    <li>
+                                        <a
+                                            href={item.href}
+                                            target={item.target}
+                                            class={item.active ? styles.active : undefined}
+                                        >
+                                            {item.name}
+                                        </a>
+                                    </li>
+                                {/each}
+                            </ul>
+                        </ConditionalWrapper>
+                    {/each}
+                </ConditionalWrapper>
+            {/if}
+        </ConditionalWrapper>
+        {#if subText || $$slots.default}
+            <div class={subTextClasses}>
+                {#if subText}
+                    <span>{@html subText}</span>
+                {/if}
+                <slot />
+            </div>
+        {/if}
+    </div>
+</footer>