@vrobots/storybook 0.2.18 → 0.2.19

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.2.18",
+    "version": "0.2.19",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/src/components/table/DataTable.js

@@ -1,18 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Card, Table } from "@chakra-ui/react";
-import { useColorMode } from "../ui/color-mode";
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 import TableFilter from "./components/TableFilter";
 import { Pagination } from "./components/Pagination";
-const Pager = ({ border, pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize }) => (_jsx(Box, { p: 2, pt: 6, border: border, borderBottom: 'none', children: _jsx(Pagination, { pagesTotal: pagesTotal, pageNumber: pageNumber, setPageNumber: setPageNumber, pageSize: pageSize, setPageSize: setPageSize, showPageSelector: true }) }));
+const Pager = ({ pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize }) => (_jsx(Box, { p: { base: 3, md: 4 }, borderTopWidth: '1px', borderBottomWidth: '1px', borderColor: 'neu.border', bg: { _light: 'whiteAlpha.500', _dark: 'whiteAlpha.50' }, children: _jsx(Pagination, { pagesTotal: pagesTotal, pageNumber: pageNumber, setPageNumber: setPageNumber, pageSize: pageSize, setPageSize: setPageSize, showPageSelector: true }) }));
 const DataTable = ({ data: defaultData, total, pageNumber, pagesTotal, setPageNumber, setPageSize, pageSize, columns, filters = [], onRowClick, onFilterChange, }) => {
     const [data, setData] = useState(() => [...defaultData]);
-    const { colorMode } = useColorMode();
     const columnResizeMode = 'onChange';
     const columnResizeDirection = 'ltr';
-    const isDarkMode = colorMode === 'dark';
-    const border = `1px solid ${isDarkMode ? '#333333' : '#E2E8F0'} !important`;
     const table = useReactTable({
         data,
         columns,
@@ -20,22 +16,22 @@ const DataTable = ({ data: defaultData, total, pageNumber, pagesTotal, setPageNu
         columnResizeDirection,
         getCoreRowModel: getCoreRowModel(),
     });
-    const pagerProps = { border, pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize };
+    const pagerProps = { pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize };
     useEffect(() => {
         setData([...defaultData]);
     }, [defaultData, setData]);
-    return (_jsx(Card.Root, { children: _jsxs(Card.Body, { p: 0, children: [_jsx(Pager, { ...pagerProps }), _jsx(Box, { overflow: 'auto', children: _jsxs(Table.Root, { width: '100%', children: [_jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => (_jsx(Table.Row, { children: headerGroup.headers.map(header => (_jsxs(Table.ColumnHeader, { borderLeft: border, borderRight: border, children: [header.isPlaceholder
+    return (_jsx(Card.Root, { layerStyle: 'neuRaised', overflow: 'hidden', children: _jsxs(Card.Body, { p: 0, children: [_jsx(Pager, { ...pagerProps }), _jsx(Box, { overflow: 'auto', bg: { _light: 'whiteAlpha.600', _dark: 'whiteAlpha.50' }, children: _jsxs(Table.Root, { width: '100%', size: 'sm', children: [_jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => (_jsx(Table.Row, { children: headerGroup.headers.map(header => (_jsxs(Table.ColumnHeader, { borderColor: 'neu.border', borderBottomWidth: '1px', bg: { _light: 'rgba(255,255,255,0.8)', _dark: 'rgba(31,39,50,0.85)' }, color: 'neu.text', fontWeight: 'semibold', fontSize: 'xs', textTransform: 'uppercase', letterSpacing: '0.04em', children: [header.isPlaceholder
                                                 ? null
-                                                : flexRender(header.column.columnDef.header, header.getContext()), filters.find((filter) => filter.id === header.id) && !!onFilterChange ? (_jsx(TableFilter, { filter: filters.find(filter => filter.id === header.id), onFilterChange: onFilterChange })) : null] }, header.id))) }, headerGroup.id))) }), _jsxs(Table.Body, { children: [total === 0 ? (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: columns.length, textAlign: 'center', children: "No records found" }) })) : null, table.getRowModel().rows.map((row, i) => {
+                                                : flexRender(header.column.columnDef.header, header.getContext()), filters.find((filter) => filter.id === header.id) && !!onFilterChange ? (_jsx(TableFilter, { filter: filters.find(filter => filter.id === header.id), onFilterChange: onFilterChange })) : null] }, header.id))) }, headerGroup.id))) }), _jsxs(Table.Body, { children: [total === 0 ? (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: columns.length, textAlign: 'center', color: 'neu.muted', py: 8, children: "No records found" }) })) : null, table.getRowModel().rows.map((row, i) => {
                                         const isEven = i % 2 === 0;
-                                        const colorEven = isDarkMode ? 'gray.700' : 'gray.50';
-                                        const colorOdd = isDarkMode ? 'gray.600' : 'white';
+                                        const colorEven = { _light: 'whiteAlpha.800', _dark: 'whiteAlpha.100' };
+                                        const colorOdd = { _light: 'whiteAlpha.600', _dark: 'whiteAlpha.50' };
                                         const backgroundColor = isEven ? colorEven : colorOdd;
-                                        return (_jsx(Table.Row, { background: backgroundColor, _hover: !!onRowClick ? {
+                                        return (_jsx(Table.Row, { background: backgroundColor, transition: 'background-color 0.14s ease', _hover: !!onRowClick ? {
                                                 cursor: 'pointer',
-                                                backgroundColor: 'rgba(107, 160, 252, 0.3) !important',
-                                            } : void 0, onClick: () => onRowClick && onRowClick(row.original), children: row.getVisibleCells().map(cell => (_jsx(Table.Cell, { border: border, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
-                                    })] }), _jsx(Table.Footer, { children: table.getFooterGroups().map(footerGroup => (_jsx(Table.Row, { children: footerGroup.headers.map(header => (_jsx(Table.ColumnHeader, { borderLeft: border, borderRight: border, children: header.isPlaceholder
+                                                backgroundColor: { _light: 'rgba(99, 179, 237, 0.22)', _dark: 'rgba(99, 179, 237, 0.28)' },
+                                            } : void 0, onClick: () => onRowClick && onRowClick(row.original), children: row.getVisibleCells().map(cell => (_jsx(Table.Cell, { borderColor: 'neu.border', borderBottomWidth: '1px', color: 'neu.text', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                                    })] }), _jsx(Table.Footer, { children: table.getFooterGroups().map(footerGroup => (_jsx(Table.Row, { children: footerGroup.headers.map(header => (_jsx(Table.ColumnHeader, { borderColor: 'neu.border', borderTopWidth: '1px', bg: { _light: 'whiteAlpha.700', _dark: 'whiteAlpha.100' }, children: header.isPlaceholder
                                             ? null
                                             : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, footerGroup.id))) })] }) }), _jsx(Pager, { ...pagerProps })] }) }));
 };

package/dist/src/components/table/components/PageSizeSelector.js

@@ -4,5 +4,5 @@ import * as React from 'react';
 export const PageSizeSelector = ({ sizes, selectedPageSize, onSelect, }) => {
     const idKey = React.useId();
     const handleSetPageSize = (e) => onSelect(Number(e.target.value));
-    return (_jsxs(HStack, { gap: "3", align: "center", children: [_jsx(Text, { fontSize: "sm", fontWeight: "normal", children: "Showing" }), _jsxs(NativeSelect.Root, { size: 'sm', maxW: '75px', children: [_jsx(NativeSelect.Field, { id: `page-size-selector-${idKey}`, value: selectedPageSize, onChange: handleSetPageSize, cursor: 'pointer', children: sizes.map((size, key) => (_jsx("option", { value: size, children: size }, `options-${size}-${key}`))) }), _jsx(NativeSelect.Indicator, {})] })] }));
+    return (_jsxs(HStack, { gap: "3", align: "center", children: [_jsx(Text, { fontSize: "sm", fontWeight: "normal", color: 'neu.muted', children: "Showing" }), _jsxs(NativeSelect.Root, { size: 'sm', maxW: '75px', bg: { _light: 'whiteAlpha.900', _dark: 'whiteAlpha.100' }, borderColor: 'neu.border', children: [_jsx(NativeSelect.Field, { id: `page-size-selector-${idKey}`, value: selectedPageSize, onChange: handleSetPageSize, cursor: 'pointer', color: 'neu.text', children: sizes.map((size, key) => (_jsx("option", { value: size, children: size }, `options-${size}-${key}`))) }), _jsx(NativeSelect.Indicator, {})] })] }));
 };

package/dist/src/components/table/components/Pagination.js

@@ -7,7 +7,7 @@ import { useBreakpoint } from '../../../hooks';
 const PAGE_LIMIT_MOBILE = 2;
 const PAGE_LIMIT = 4;
 const makeNavButton = (onChange, pageNumber) => function PageButton(page) {
-    return (_jsx(Button, { "aria-label": `page-${page}`, onClick: () => onChange(page.toString()), variant: page === pageNumber ? 'solid' : 'outline', size: 'sm', paddingLeft: '1px !important', paddingRight: '1px !important', marginRight: 1, children: page }, `nav-button-${page}`));
+    return (_jsx(Button, { "aria-label": `page-${page}`, onClick: () => onChange(page.toString()), variant: page === pageNumber ? 'solid' : 'subtle', colorPalette: page === pageNumber ? 'blue' : undefined, size: 'sm', paddingLeft: '1px !important', paddingRight: '1px !important', marginRight: 1, borderWidth: '1px', borderColor: 'neu.border', children: page }, `nav-button-${page}`));
 };
 export const Pagination = ({ pagesTotal, pageNumber, pageSize, showPageSelector, setPageNumber, setPageSize }) => {
     const [pageInput, setPageInput] = React.useState(pageNumber);
@@ -47,5 +47,5 @@ export const Pagination = ({ pagesTotal, pageNumber, pageSize, showPageSelector,
         }, templateColumns: {
             sm: `repeat(1, 1fr)`,
             md: `repeat(2, 1fr)`,
-        }, children: [showPageSelector ? (_jsx(_Fragment, { children: _jsx(GridItem, { mb: 4, children: _jsxs(Flex, { children: [_jsx(PageSizeSelector, { sizes: PAGE_SIZES, selectedPageSize: pageSize, onSelect: setPageSize }), _jsxs(Text, { fontSize: 'sm', fontWeight: 'normal', ml: 4, mt: 1, children: ["page ", _jsx("strong", { children: pageNumber.toString() }), " of ", _jsx("strong", { children: pagesTotal.toString() })] })] }) }) })) : _jsx(GridItem, { colSpan: 1 }), _jsx(GridItem, { children: _jsx(Field.Root, { children: _jsxs(HStack, { justifyContent: 'right', children: [handlePages(pages, limit, pageNumber).map(makeNavButton(handleChangePageInput(false), pageNumber)), _jsx(Field.Label, { htmlFor: 'pagination', style: { fontSize: 10 }, mt: 2, ml: 4, children: "goto page:" }), _jsxs(NumberInput.Root, { value: String(pageInput), size: 'sm', max: pagesTotal, min: 1, onValueChange: (details) => handleChangePageInput(true)(details.value), children: [_jsx(NumberInput.Input, { id: 'pagination', style: { width: 90 } }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.IncrementTrigger, {}), _jsx(NumberInput.DecrementTrigger, {})] })] })] }) }) })] }));
+        }, children: [showPageSelector ? (_jsx(_Fragment, { children: _jsx(GridItem, { mb: 4, children: _jsxs(Flex, { children: [_jsx(PageSizeSelector, { sizes: PAGE_SIZES, selectedPageSize: pageSize, onSelect: setPageSize }), _jsxs(Text, { fontSize: 'sm', fontWeight: 'normal', ml: 4, mt: 1, children: ["page ", _jsx("strong", { children: pageNumber.toString() }), " of ", _jsx("strong", { children: pagesTotal.toString() })] })] }) }) })) : _jsx(GridItem, { colSpan: 1 }), _jsx(GridItem, { children: _jsx(Field.Root, { children: _jsxs(HStack, { justifyContent: 'right', children: [handlePages(pages, limit, pageNumber).map(makeNavButton(handleChangePageInput(false), pageNumber)), _jsx(Field.Label, { htmlFor: 'pagination', style: { fontSize: 10 }, mt: 2, ml: 4, color: 'neu.muted', children: "goto page:" }), _jsxs(NumberInput.Root, { value: String(pageInput), size: 'sm', max: pagesTotal, min: 1, onValueChange: (details) => handleChangePageInput(true)(details.value), children: [_jsx(NumberInput.Input, { id: 'pagination', style: { width: 90 }, bg: { _light: 'whiteAlpha.900', _dark: 'whiteAlpha.100' }, borderColor: 'neu.border' }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.IncrementTrigger, {}), _jsx(NumberInput.DecrementTrigger, {})] })] })] }) }) })] }));
 };

package/dist/src/components/table/components/TableFilter.js

@@ -17,12 +17,12 @@ export default function TableFilter({ filter, onFilterChange, }) {
     const handleClearFilter = () => {
         onFilterChange({ ...filter, value: undefined });
     };
-    const ClearFilterButton = () => !!filter.value ? (_jsx(Tooltip, { content: `Clear filter`, positioning: { placement: 'bottom-end' }, showArrow: true, children: _jsx(IconButton, { "aria-label": `Clear filter ${filter.type}`, onClick: handleClearFilter, size: 'sm', variant: 'ghost', children: _jsx(FaX, {}) }) })) : null;
+    const ClearFilterButton = () => !!filter.value ? (_jsx(Tooltip, { content: `Clear filter`, positioning: { placement: 'bottom-end' }, showArrow: true, children: _jsx(IconButton, { "aria-label": `Clear filter ${filter.type}`, onClick: handleClearFilter, size: 'sm', variant: 'ghost', color: 'neu.muted', _hover: { color: 'neu.text', bg: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' } }, children: _jsx(FaX, {}) }) })) : null;
     if (filter.type === 'string' || filter.type === 'number') {
-        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterInput, { value: filter.value?.toString() || '', onChange: handleChangeInput }) }), _jsx(Field.HelperText, { color: 'gray.300', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
+        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterInput, { value: filter.value?.toString() || '', onChange: handleChangeInput }) }), _jsx(Field.HelperText, { color: 'neu.muted', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
     }
     if (filter.type === 'date') {
-        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterDatePicker, { selected: filter.value, onChange: (date) => handleChangeDate(date) }) }), _jsx(Field.HelperText, { color: 'gray.300', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
+        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterDatePicker, { selected: filter.value, onChange: (date) => handleChangeDate(date) }) }), _jsx(Field.HelperText, { color: 'neu.muted', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
     }
     return null;
 }

package/dist/src/components/table/components/TableFilterDatePicker.js

@@ -6,5 +6,5 @@ export default function TableFilterDatePicker({ selected, onChange }) {
         const val = e.target.value;
         onChange(val ? new Date(val) : null);
     };
-    return (_jsx(Input, { type: "date", value: value, onChange: handleChange, width: '100%', mt: 2, size: 'md' }));
+    return (_jsx(Input, { type: "date", value: value, onChange: handleChange, width: '100%', mt: 2, size: 'sm', bg: { _light: 'whiteAlpha.900', _dark: 'whiteAlpha.100' }, borderColor: 'neu.border' }));
 }

package/dist/src/components/table/components/TableFilterInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from "@chakra-ui/react";
 export default function TableFilterInput(props) {
-    return (_jsx(Input, { width: '100%', mt: 2, ...props }));
+    return (_jsx(Input, { width: '100%', mt: 2, size: 'sm', bg: { _light: 'whiteAlpha.900', _dark: 'whiteAlpha.100' }, borderColor: 'neu.border', ...props }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.2.18",
+  "version": "0.2.19",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",