@opencorestack/opengridx 0.1.6 → 0.1.8

package/lib/components/Pagination/Pagination.css

@@ -0,0 +1,91 @@
+.ogx-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ogx-spacing-lg);
+  padding: 12px 16px;
+  border-top: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
+  background: var(--ogx-grid-background);
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-grid-row-text);
+  min-height: 52px;
+  border-radius: 0 0 var(--ogx-border-radius-lg) var(--ogx-border-radius-lg);
+}
+.ogx-pagination__page-size {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ogx-pagination__label {
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-grid-header-text);
+  white-space: nowrap;
+}
+.ogx-pagination__select {
+  min-width: 55px;
+  padding: 0 18px 0 4px !important;
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-sm);
+  font-weight: 500;
+  color: var(--ogx-grid-row-text);
+  background: var(--ogx-grid-background);
+  border: 1px solid var(--ogx-border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right -1px center;
+  background-size: 20px;
+  line-height: 1.5;
+}
+.ogx-pagination__select:hover {
+  border-color: var(--ogx-border-color-hover);
+}
+.ogx-pagination__select:focus {
+  outline: none;
+  border-color: var(--ogx-color-primary);
+  box-shadow: 0 0 0 2px var(--ogx-color-primary-focus);
+}
+.ogx-pagination__info {
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-grid-header-text);
+  white-space: nowrap;
+}
+.ogx-pagination__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ogx-spacing-xs);
+}
+.ogx-pagination__page-info {
+  padding: 0 var(--ogx-spacing-sm);
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-grid-header-text);
+  white-space: nowrap;
+}
+.ogx-pagination .ogx-button {
+  min-width: 32px;
+  padding: var(--ogx-spacing-xs);
+}
+.ogx-pagination .ogx-button svg {
+  display: block;
+}
+@media (max-width: 768px) {
+  .ogx-pagination {
+    flex-wrap: wrap;
+    gap: var(--ogx-spacing-md);
+  }
+  .ogx-pagination__page-size {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+  }
+  .ogx-pagination__info {
+    order: 1;
+    flex: 1;
+  }
+  .ogx-pagination__actions {
+    order: 2;
+  }
+}

package/lib/components/Pagination/Pagination.tsx

@@ -0,0 +1,151 @@
+
+import React from 'react';
+import { Button } from '../ui/Button';
+
+export interface PaginationProps {
+    page: number;
+    pageSize: number;
+    rowCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    showFirstButton?: boolean;
+    showLastButton?: boolean;
+}
+
+export function Pagination(props: PaginationProps) {
+    const {
+        page,
+        pageSize,
+        rowCount,
+        onPageChange,
+        onPageSizeChange,
+        pageSizeOptions = [10, 25, 50, 100],
+        showFirstButton = true,
+        showLastButton = true
+    } = props;
+
+    const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
+    const currentPage = Math.min(page, pageCount - 1);
+
+    const firstRowIndex = currentPage * pageSize;
+    const lastRowIndex = Math.min(firstRowIndex + pageSize, rowCount);
+    const displayedRows = rowCount === 0 ? 0 : `${firstRowIndex + 1}–${lastRowIndex}`;
+
+    const handleFirstPage = () => {
+        onPageChange(0);
+    };
+
+    const handlePreviousPage = () => {
+        onPageChange(Math.max(0, currentPage - 1));
+    };
+
+    const handleNextPage = () => {
+        onPageChange(Math.min(pageCount - 1, currentPage + 1));
+    };
+
+    const handleLastPage = () => {
+        onPageChange(pageCount - 1);
+    };
+
+    const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const newPageSize = parseInt(event.target.value, 10);
+        onPageSizeChange(newPageSize);
+
+    };
+
+    const isFirstPage = currentPage === 0;
+    const isLastPage = currentPage >= pageCount - 1;
+
+    return (
+        <div className="ogx-pagination" role="navigation" aria-label="Pagination">
+            { }
+            <div className="ogx-pagination__page-size">
+                <label htmlFor="page-size-select" className="ogx-pagination__label">
+                    Rows per page:
+                </label>
+                <select
+                    id="page-size-select"
+                    className="ogx-pagination__select"
+                    value={pageSize}
+                    onChange={handlePageSizeChange}
+                    aria-label="Rows per page"
+                >
+                    {pageSizeOptions.map(option => (
+                        <option key={option} value={option}>
+                            {option}
+                        </option>
+                    ))}
+                </select>
+            </div>
+
+            { }
+            <div className="ogx-pagination__info" aria-live="polite" aria-atomic="true">
+                {displayedRows} of {rowCount}
+            </div>
+
+            { }
+            <div className="ogx-pagination__actions">
+                {showFirstButton && (
+                    <Button
+                        variant="text"
+                        size="small"
+                        onClick={handleFirstPage}
+                        disabled={isFirstPage}
+                        aria-label="Go to first page"
+                        title="First page"
+                    >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                            <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
+                        </svg>
+                    </Button>
+                )}
+
+                <Button
+                    variant="text"
+                    size="small"
+                    onClick={handlePreviousPage}
+                    disabled={isFirstPage}
+                    aria-label="Go to previous page"
+                    title="Previous page"
+                >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+                    </svg>
+                </Button>
+
+                <div className="ogx-pagination__page-info" aria-current="page">
+                    Page {currentPage + 1} of {pageCount}
+                </div>
+
+                <Button
+                    variant="text"
+                    size="small"
+                    onClick={handleNextPage}
+                    disabled={isLastPage}
+                    aria-label="Go to next page"
+                    title="Next page"
+                >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                    </svg>
+                </Button>
+
+                {showLastButton && (
+                    <Button
+                        variant="text"
+                        size="small"
+                        onClick={handleLastPage}
+                        disabled={isLastPage}
+                        aria-label="Go to last page"
+                        title="Last page"
+                    >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                            <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />
+                        </svg>
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}

package/lib/components/QuickFilter/QuickFilter.css

@@ -0,0 +1,23 @@
+.ogx-quick-filter {
+  width: 100%;
+  max-width: 400px;
+}
+.ogx-quick-filter__clear {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ogx-color-gray-500);
+  transition: color var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+  border-radius: var(--ogx-border-radius-sm);
+}
+.ogx-quick-filter__clear:hover {
+  color: var(--ogx-color-gray-700);
+  background: var(--ogx-color-gray-100);
+}
+.ogx-quick-filter__clear:active {
+  color: var(--ogx-color-gray-900);
+}

package/lib/components/QuickFilter/QuickFilter.tsx

@@ -0,0 +1,79 @@
+
+import React, { useState, useCallback } from 'react';
+import { Input } from '../ui/Input';
+
+export interface QuickFilterProps {
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    debounceMs?: number;
+}
+
+export function QuickFilter(props: QuickFilterProps) {
+    const {
+        value = '',
+        onChange,
+        placeholder = 'Search...',
+        debounceMs = 300
+    } = props;
+
+    const [localValue, setLocalValue] = useState(value);
+    const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+    const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = event.target.value;
+        setLocalValue(newValue);
+
+        // Clear existing timeout
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+
+        // Set new timeout for debounced onChange
+        const newTimeoutId = setTimeout(() => {
+            onChange(newValue);
+        }, debounceMs);
+
+        setTimeoutId(newTimeoutId);
+    }, [timeoutId, onChange, debounceMs]);
+
+    const handleClear = useCallback(() => {
+        setLocalValue('');
+        onChange('');
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    }, [onChange, timeoutId]);
+
+    const searchIcon = (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+        </svg>
+    );
+
+    const clearIcon = localValue ? (
+        <button
+            className="ogx-quick-filter__clear"
+            onClick={handleClear}
+            aria-label="Clear search"
+            type="button"
+        >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            </svg>
+        </button>
+    ) : null;
+
+    return (
+        <div className="ogx-quick-filter">
+            <Input
+                value={localValue}
+                onChange={handleChange}
+                placeholder={placeholder}
+                startAdornment={searchIcon}
+                endAdornment={clearIcon}
+                fullWidth
+            />
+        </div>
+    );
+}

package/lib/components/Row/Row.css

@@ -0,0 +1,126 @@
+.ogx__row {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--ogx-grid-border-color);
+  background: var(--ogx-grid-background);
+  position: relative;
+  min-height: var(--ogx-row-height);
+  transition: background-color 0.15s ease;
+}
+.ogx__row--even {
+  background: var(--ogx-grid-row-alternate-background, var(--ogx-grid-background));
+}
+.ogx__cell--expand {
+  width: 48px;
+  min-width: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: inherit;
+}
+.ogx:not(.ogx--row-spanning) .ogx__row:hover {
+  background: var(--ogx-grid-row-hover-background);
+}
+.ogx__row--selected {
+  background: var(--ogx-grid-row-selected-background);
+}
+.ogx:not(.ogx--row-spanning) .ogx__row--selected:hover {
+  background: var(--ogx-grid-row-selected-hover-background);
+}
+.ogx__row--pinned-top,
+.ogx__row--pinned-bottom {
+  background: var(--ogx-grid-background);
+}
+.ogx:not(.ogx--row-spanning) .ogx__row--pinned-top:hover,
+.ogx:not(.ogx--row-spanning) .ogx__row--pinned-bottom:hover {
+  background: var(--ogx-grid-row-hover-background);
+}
+.ogx__row--pinned-top.ogx__row--selected,
+.ogx__row--pinned-bottom.ogx__row--selected {
+  background: var(--ogx-grid-row-selected-background);
+}
+.ogx__row--dragging {
+  cursor: grabbing;
+  opacity: 0.8;
+  background: var(--ogx-color-primary-light);
+  box-shadow: var(--ogx-shadow-lg);
+  z-index: 20;
+}
+.ogx__row--drag-over {
+  position: relative;
+  z-index: 10;
+}
+.ogx__row--drag-over::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--ogx-color-primary);
+  z-index: 20;
+}
+.ogx__cell--drag-handle {
+    width: 48px;
+    min-width: 48px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: inherit;
+    cursor: grab;
+    color: var(--ogx-grid-header-text);
+}
+.ogx__cell--drag-handle:active {
+    cursor: grabbing;
+    color: var(--ogx-grid-row-text);
+}
+.ogx__row--group {
+    background: var(--ogx-color-gray-50);
+    font-weight: 500;
+}
+.ogx:not(.ogx--row-spanning) .ogx__row--group:hover {
+    background: var(--ogx-color-gray-100);
+}
+.ogx__row--group.ogx__row--selected {
+    background: var(--ogx-grid-row-selected-background);
+}
+
+/* ── Skeleton / loading rows (infinite scroll) ───────────────────────── */
+@keyframes ogx-skeleton-shimmer {
+    0%   { background-position: -600px 0; }
+    100% { background-position:  600px 0; }
+}
+.ogx__row--skeleton {
+    pointer-events: none;
+    border-bottom: 1px solid var(--ogx-grid-border-color);
+    background-color: var(--ogx-grid-background);
+}
+.ogx__row--skeleton .ogx__skeleton-cell {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+}
+.ogx__row--skeleton .ogx__skeleton-bar {
+    height: 14px;
+    border-radius: 6px;
+    width: 80%;
+    background: linear-gradient(
+        90deg,
+        var(--ogx-skeleton-base) 25%,
+        var(--ogx-skeleton-highlight) 50%,
+        var(--ogx-skeleton-base) 75%
+    );
+    background-size: 600px 100%;
+    animation: ogx-skeleton-shimmer 1.4s infinite linear;
+}
+/* Vary bar widths for a natural look */
+.ogx__row--skeleton .ogx__skeleton-cell:nth-child(1) .ogx__skeleton-bar { width: 40%; }
+.ogx__row--skeleton .ogx__skeleton-cell:nth-child(2) .ogx__skeleton-bar { width: 70%; }
+.ogx__row--skeleton .ogx__skeleton-cell:nth-child(3) .ogx__skeleton-bar { width: 85%; }
+.ogx__row--skeleton .ogx__skeleton-cell:nth-child(4) .ogx__skeleton-bar { width: 55%; }
+.ogx__row--skeleton .ogx__skeleton-cell:nth-child(5) .ogx__skeleton-bar { width: 65%; }
+.ogx__row--skeleton .ogx__skeleton-cell:nth-child(n+6) .ogx__skeleton-bar { width: 60%; }