webcoreui 0.4.0 → 0.5.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/Icon/map.ts

@@ -1,11 +1,14 @@
 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 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 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 +16,15 @@ 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,
     'close': Close,
     'github': Github,
     '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>