nitro-web 0.0.103 → 0.0.105

package/client/index.ts

@@ -34,6 +34,7 @@ export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
+export { Table, type TableColumn, type TableProps, type TableRow } from '../components/partials/element/table'
 
 // Component Form Elements
 export { Checkbox } from '../components/partials/form/checkbox'

package/components/partials/element/table.tsx

@@ -0,0 +1,306 @@
+import { JSX, useState, useCallback } from 'react'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import { Checkbox, queryObject, queryString, twMerge } from 'nitro-web'
+
+export interface TableColumn {
+  label: string
+  value: string
+  className?: string
+  disableSort?: boolean
+  innerClassName?: string
+  minWidth?: number
+  overflow?: boolean
+  rowLinesMax?: number
+  /** Use if the value is different from the sortBy */
+  sortByValue?: string 
+  align?: 'left' | 'center' | 'right'
+}
+
+export type TableRow = {
+  _id?: string
+}
+  
+export type TableProps<T> = {
+  columns: TableColumn[]
+  rows: T[]
+  generateTd: (col: TableColumn, row: T, i: number, isLast: boolean) => JSX.Element | null
+  generateCheckboxActions?: (selectedRowIds: string[]) => JSX.Element | null
+  headerHeightMin?: number
+  rowHeightMin?: number
+  rowContentHeightMax?: number
+  rowLinesMax?: number
+  rowSideColor?: (row?: T) => { className: string, width: number }
+  rowGap?: number
+  columnGap?: number
+  columnPaddingX?: number
+  className?: string
+  tableClassName?: string
+  columnClassName?: string
+  columnSelectedClassName?: string
+  columnHeaderClassName?: string
+  checkboxClassName?: string
+  checkboxSize?: number
+}
+
+export function Table<T extends TableRow>({ 
+  rows, 
+  columns: columnsProp, 
+  generateTd, 
+  generateCheckboxActions,
+  headerHeightMin=40,
+  rowHeightMin=48, 
+  rowContentHeightMax, 
+  rowLinesMax, 
+  rowSideColor,
+  rowGap=0,
+  columnGap=11,
+  columnPaddingX=11,
+  // Class names
+  className,
+  tableClassName,
+  columnClassName,
+  columnSelectedClassName,
+  columnHeaderClassName,
+  checkboxClassName,
+  checkboxSize=16,
+}: TableProps<T>) {
+  const location = useLocation()
+  const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
+  const _columnClassName = 'table-cell py-1 align-middle text-sm border-y border-border ' +
+    'first:border-l last:border-r border-t-0 box-border'
+
+  const columns = useMemo(() => {
+    const checkboxCol: TableColumn = { value: 'checkbox', label: '', disableSort: true }
+    const cols = (generateCheckboxActions ? [checkboxCol, ...columnsProp] : columnsProp).map((col, _i) => ({
+      ...col,
+      rowLinesMax: typeof col.rowLinesMax != 'undefined' ? col.rowLinesMax : rowLinesMax,
+      sortByValue: col.sortByValue || col.value,
+      align: col.align || 'left',
+    }))
+    return cols
+  }, [columnsProp])
+
+  const onSelect = useCallback((idOrAll: string, checked: boolean) => {
+    setSelectedRowIds((o) => {
+      if (idOrAll == 'all' && checked) return rows.map(row => row?._id||'')
+      else if (idOrAll == 'all' && !checked) return []
+      else if (o.includes(idOrAll) && !checked) return o.filter(id => id != idOrAll)
+      else if (!o.includes(idOrAll) && checked) return [...o, idOrAll]
+      else return o
+    })
+  }, [selectedRowIds, rows])
+  
+  const getAlignClass = useCallback((align: TableColumn['align'], _returnJustify?: boolean) => {
+    if (_returnJustify) return align == 'left' ? '' : align == 'center' ? 'justify-center' : 'justify-end'
+    else return align == 'left' ? '' : align == 'center' ? 'text-center' : 'text-right'
+  }, [])
+
+  // Reset selected rows when the location changes
+  useEffect(() => setSelectedRowIds([]), [location.key])
+
+  // --- Sorting ---
+
+  const navigate = useNavigate()
+  const query = useMemo(() => ({ ...queryObject(location.search) }), [location.search])
+  const sortBy = useMemo(() => query.sortBy || 'createdAt', [query.sortBy])
+  const sort = useMemo(() => !query.sort && query.sortBy == 'createdAt' ? '-1' : (query.sort || '1'), [query.sort])
+
+  const onSort = useCallback((item: TableColumn) => {
+    const queryStr = queryString({ 
+      ...query, 
+      sort: sortBy == item.sortByValue ? (sort == '1' ? '-1' : '1') : '1',
+      sortBy: item.sortByValue,
+    })
+    navigate(location.pathname + queryStr, { replace: true })
+  }, [location.pathname, query, sort, sortBy])
+
+  return (
+    <div 
+      style={{ marginTop: -rowGap }}
+      className={twMerge('overflow-x-auto thin-scrollbar', className)}
+    >
+      <div 
+        style={{ borderSpacing: `0 ${rowGap}px` }}
+        className={twMerge('table w-full border-separate', tableClassName)}
+      >
+        {/* Thead row */}
+        <div className="table-row relative">
+          {
+            columns.map((col, j) => {
+              const disableSort = col.disableSort || selectedRowIds.length
+              const sideColor = j == 0 && rowSideColor ? rowSideColor(undefined) : undefined
+              const pl = j == 0 ? columnPaddingX : columnGap
+              const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+              return (
+                <div
+                  key={j}
+                  onClick={disableSort ? undefined : () => onSort(col)}
+                  style={{ height: headerHeightMin, minWidth: col.minWidth, paddingLeft: pl, paddingRight: pr }}
+                  className={twMerge(
+                    _columnClassName,
+                    'h-auto text-sm font-medium border-t-1',
+                    disableSort ? '' : 'cursor-pointer select-none',
+                    getAlignClass(col.align),
+                    columnClassName,
+                    columnHeaderClassName,
+                    col.className
+                  )}
+                >
+                  <div
+                    style={{ 
+                      maxHeight: rowContentHeightMax, 
+                      paddingLeft: sideColor && rows.length > 0 ? sideColor.width + 5 : 0,
+                    }}
+                    className={twMerge(
+                      rowContentHeightMax ? 'overflow-hidden' : '',
+                      getLineClampClassName(col.rowLinesMax),
+                      col.overflow ? 'overflow-visible' : '',
+                      col.innerClassName
+                    )}
+                  > 
+                    {
+                      col.value == 'checkbox'
+                        ? <>
+                            <Checkbox 
+                              size={checkboxSize}
+                              name="checkbox-all" 
+                              className='!m-0' 
+                              checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
+                              onChange={(e) => onSelect('all', e.target.checked)} 
+                            />
+                            <div 
+                              className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[68px] [&>*]:z-10`}
+                            >
+                              {generateCheckboxActions && generateCheckboxActions(selectedRowIds)}
+                            </div>
+                          </>
+                        : <span className={twMerge(
+                            'flex items-center gap-x-2 transition-opacity',
+                            selectedRowIds.length ? 'opacity-0' : '',
+                            getAlignClass(col.align, true)
+                          )}>
+                            <span>{col.label}</span>
+                            {
+                              (!col.disableSort && sortBy == col.sortByValue) 
+                                ? (sort == '1' 
+                                    ? <ChevronDownIcon class='shrink-0 size-[16px]' /> 
+                                    : <ChevronUpIcon class='shrink-0 size-[16px]' />
+                                  )
+                                : col.align == 'left' && <div class='size-[16px] shrink-0' /> // prevent layout shift on sort
+                            }
+                          </span>
+                    }
+                  </div>
+                </div>
+              )
+            })
+          }
+        </div>
+        {/* Tbody rows */}
+        {
+          rows.map((row: T, i: number) => {
+            const isSelected = selectedRowIds.includes(row?._id||'')
+            return (
+              <div 
+                key={`${row._id}-${i}`}
+                className="table-row relative"
+              >
+                {
+                  columns.map((col, j) => {
+                    const sideColor = j == 0 && rowSideColor ? rowSideColor(row) : undefined
+                    const pl = j == 0 ? columnPaddingX : columnGap
+                    const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+                    return (
+                      <div
+                        key={j}
+                        style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
+                        className={twMerge(
+                          _columnClassName,
+                          getAlignClass(col.align),
+                          columnClassName,
+                          col.className,
+                          isSelected && `bg-gray-50 ${columnSelectedClassName||''}`
+                        )}
+                      >
+                        <div 
+                          style={{ 
+                            maxHeight: rowContentHeightMax, 
+                            paddingLeft: sideColor ? sideColor.width + 5 : 0,
+                          }}
+                          className={twMerge(
+                            rowContentHeightMax ? 'overflow-hidden' : '',
+                            getLineClampClassName(col.rowLinesMax),
+                            col.overflow ? 'overflow-visible' : '',
+                            col.innerClassName
+                          )}
+                        >
+                          {
+                            // Side color
+                            sideColor && 
+                            <div 
+                              className={`absolute top-0 left-0 h-full ${sideColor?.className||''}`} 
+                              style={{ width: sideColor.width }}
+                            />
+                          }
+                          {
+                            col.value == 'checkbox' 
+                              ? <Checkbox 
+                                  size={checkboxSize} 
+                                  name={`checkbox-${row._id}`} 
+                                  onChange={(e) => onSelect(row?._id || '', e.target.checked)}
+                                  checked={selectedRowIds.includes(row?._id || '')}
+                                  className='!m-0' 
+                                  checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
+                                />
+                              : generateTd(col, row, i, i == rows.length - 1)
+                          }
+                        </div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            )
+          })
+        }
+        {
+          rows.length == 0 &&
+          <div className='table-row relative'>
+            {
+              columns.map((col, j) => {
+                const pl = j == 0 ? columnPaddingX : columnGap
+                const pr = j == columns.length - 1 ? columnPaddingX : columnGap
+                return (
+                  <div
+                    key={j}
+                    style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
+                    className={twMerge(_columnClassName, columnClassName, col.className)}
+                  >
+                    <div
+                      className={twMerge(
+                        'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500',
+                        col.innerClassName
+                      )}
+                    >
+                      { j == 0 && 'No records found.' }
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </div>
+        }
+      </div>
+    </div>
+  )
+}
+
+function getLineClampClassName(num?: number) {
+  // Splayed out for tailwind to pick up we are using the classNames below
+  if (num == 1) return 'line-clamp-1'
+  else if (num == 2) return 'line-clamp-2'
+  else if (num == 3) return 'line-clamp-3'
+  else if (num == 4) return 'line-clamp-4'
+  else if (num == 5) return 'line-clamp-5'
+  else if (num == 6) return 'line-clamp-6'
+}

package/components/partials/styleguide.tsx

@@ -1,19 +1,36 @@
 import { 
   Drop, Dropdown, Field, Select, Button as ButtonNitro, Checkbox, GithubLink, Modal, Calendar, injectedConfig, 
-  Filters, FiltersHandleType, FilterType,
+  Filters, FiltersHandleType, FilterType, Table, TableColumn,
 } from 'nitro-web'
-import { getCountryOptions, getCurrencyOptions, onChange, ucFirst } from 'nitro-web/util'
-import { Check, FileEditIcon } from 'lucide-react'
+import { date, getCountryOptions, getCurrencyOptions, onChange, ucFirst } from 'nitro-web/util'
+import { Check, EllipsisVerticalIcon, FileEditIcon } from 'lucide-react'
+
+const perPage = 10
+const statusColors = function(status: string) {
+  return {
+    pending: 'bg-yellow-400',
+    approved: 'bg-green-400',
+    rejected: 'bg-red-400',
+  }[status]
+}
 
 type StyleguideProps = {
   className?: string
-  elements?: {
-    Button?: typeof ButtonNitro
-  }
+  elements?: { Button?: typeof ButtonNitro }
   children?: React.ReactNode
 }
 
+type QuoteExample = {
+  _id?: string
+  freightType: string
+  destination: { code: string }
+  date: number
+  weight: number
+  status: string
+}
+
 export function Styleguide({ className, elements, children }: StyleguideProps) {
+  const Button = elements?.Button || ButtonNitro
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
@@ -28,10 +45,12 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
     'date-time': Date.now(),
     calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
     firstName: 'Bruce',
+    tableFilter: '',
     errors: [
       { title: 'address', detail: 'Address is required' },
     ],
   })
+
   const [filterState, setFilterState] = useState({})
   const filtersRef = useRef<FiltersHandleType>(null)
   const filters = useMemo(() => {
@@ -79,9 +98,23 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
     { label: 'Delete' },
   ], [])
 
-  const Button = elements?.Button || ButtonNitro
+  const thead: TableColumn[] = useMemo(() => [
+    { value: 'freightType', label: 'Freight Type' },
+    { value: 'destination.code', label: 'Destination Code' },
+    { value: 'date', label: 'Date' },
+    { value: 'weight', label: 'Weight', align: 'center' },
+    { value: 'status', label: 'Status' },
+    { value: 'actions', label: 'Actions', disableSort: true, overflow: true, minWidth: 100, align: 'right' },
+  ], [])
+
+  const rows: QuoteExample[] = useMemo(() => [
+    { _id: '1', freightType: 'air', destination: { code: 'nz' }, date: new Date().getTime(), weight: 100, status: 'pending' },
+    { _id: '2', freightType: 'sea', destination: { code: 'nz' }, date: new Date().getTime(), weight: 200, status: 'approved' },
+    { _id: '3', freightType: 'road', destination: { code: 'au' }, date: new Date().getTime(), weight: 300, status: 'rejected' },
+    // normally you should filter the rows on the api using the query string
+  ].filter((row) => row.freightType.match(new RegExp(state.tableFilter, 'i'))), [state.tableFilter])
 
-  function onCustomerInputChange (e: { target: { name: string, value: unknown } }) {
+  const onCustomerInputChange = (e: { target: { name: string, value: unknown } }) => {
     if (e.target.name == 'customer' && e.target.value == '0') {
       setCustomerSearch('')
       e.target.value = null // clear the select's selected value
@@ -90,10 +123,45 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
     onChange(setState, e)
   }
 
-  function onCustomerSearch (search: string) {
+  const onCustomerSearch = (search: string) => {
     setCustomerSearch(search || '')
   }
 
+  const generateCheckboxActions = useCallback((selectedRowIds: string[]) => {
+    return <div class='flex items-center gap-x-2'>
+      <Button size='xs' color='dark' onClick={() => { console.log('set', selectedRowIds) }}>Set Status</Button>
+      <Button size='xs' color='dark' onClick={() => { console.log('remove', selectedRowIds) }}>Delete</Button>
+    </div>
+  }, [])
+
+  const generateTd = useCallback((col: TableColumn, row: QuoteExample, i: number) => {
+    switch (col.value) {
+      case 'freightType':
+        return <div>{ucFirst(row.freightType)}</div>
+      case 'destination.code':
+        return <div>{row.destination.code.toUpperCase()}</div>
+      case 'date':
+        return <div>{date(row.date, 'dd mmm, yyyy')}</div>
+      case 'weight':
+        return <div>{row.weight}</div>
+      case 'status':  
+        return <div>{ucFirst(row.status)}</div>
+      case 'actions':
+        return (
+          <Dropdown 
+            options={[{ label: 'Set Status' }, { label: 'Delete' }]} 
+            dir={rows.slice(0, perPage).length - 3 < i ? 'top-right' : 'bottom-right'} 
+            minWidth={100}
+          >
+            <Button color='clear' className='ring-0' size='sm' IconCenter={<EllipsisVerticalIcon size={18} strokeWidth={1.5} />}  />
+          </Dropdown>
+        )
+      default:
+        console.error(`Error: unexpected thead value: ${col.value}`)
+        return null
+    }
+  }, [rows.length])
+
   // Example of updating state
   // useEffect(() => {
   //   setTimeout(() => {
@@ -103,6 +171,24 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
 
   return (
     <div class={`text-left max-w-[1100px] ${className}`}>
+      <Modal show={showModal1} setShow={setShowModal1}>
+        <h3 class="h3">Edit Profile</h3>
+        <p class="mb-5">An example modal containing a basic form for editing profiles.</p>
+        <form class="mb-8 text-left">
+          <div>
+            <label for="firstName2">First Name</label>
+            <Field name="firstName2" state={state} onChange={(e) => onChange(setState, e)} />
+          </div>
+          <div>
+            <label for="email2">Email Address</label>
+            <Field name="email2" type="email" placeholder="Your email address..."/>
+          </div>
+        </form>
+        <div class="flex justify-end">
+          <Button color="primary" onClick={() => setShowModal1(false)}>Save</Button>
+        </div>
+      </Modal>
+
       <GithubLink filename={__filename} />
       <div class="mb-7">
         <h1 class="h1">{injectedConfig.isDemo ? 'Design System' : 'Style Guide'}</h1>
@@ -367,26 +453,8 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         </div>
       </div>
 
-      <Modal show={showModal1} setShow={setShowModal1}>
-        <h3 class="h3">Edit Profile</h3>
-        <p class="mb-5">An example modal containing a basic form for editing profiles.</p>
-        <form class="mb-8 text-left">
-          <div>
-            <label for="firstName2">First Name</label>
-            <Field name="firstName2" state={state} onChange={(e) => onChange(setState, e)} />
-          </div>
-          <div>
-            <label for="email2">Email Address</label>
-            <Field name="email2" type="email" placeholder="Your email address..."/>
-          </div>
-        </form>
-        <div class="flex justify-end">
-          <Button color="primary" onClick={() => setShowModal1(false)}>Save</Button>
-        </div>
-      </Modal>
-
       <h2 class="h3">File Inputs & Calendar</h2>
-      <div class="grid grid-cols-3 gap-x-6 mb-4 last:mb-0">
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="avatar">Avatar</label>
           <Drop class="is-small" name="avatar" state={state} onChange={(e) => onChange(setState, e)} awsUrl={injectedConfig.awsUrl} />
@@ -401,6 +469,45 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         </div>
       </div>
 
+      <div class="flex justify-between items-start">
+        <h2 class="h3">Tables</h2>
+        <Field 
+          name="tableFilter"
+          type="search"
+          state={state}
+          placeholder="Basic table filter..."
+          onChange={(e) => onChange(setState, e)} 
+          className="!my-0 [&>input]:font-normal [&>input]:text-xs [&>input]:py-1.5" /////todo: need to allow twmerge here
+        />
+      </div>
+      <div class="grid mb-4 last:mb-0">
+        <Table
+          rows={rows.slice(0, perPage)}
+          columns={thead}
+          rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+          generateCheckboxActions={generateCheckboxActions}
+          generateTd={generateTd}
+          className="mb-6"
+        />
+        <Table
+          rows={rows.slice(0, 2)}
+          columns={thead}
+          rowLinesMax={1}
+          headerHeightMin={35}
+          rowGap={8}
+          rowHeightMin={42}
+          rowSideColor={(row) => ({ className: `rounded-l-xl ${statusColors(row?.status as string)}`, width: 10 })}
+          generateCheckboxActions={generateCheckboxActions}
+          generateTd={generateTd}
+          tableClassName="rounded-3px"
+          columnClassName="border-t-1 first:rounded-l-xl last:rounded-r-xl"
+          columnSelectedClassName="bg-indigo-50 border-indigo-300"
+          columnHeaderClassName="text-gray-500 text-2xs uppercase border-none"
+          checkboxClassName="rounded-[2px] shadow-none"
+          className="mb-5"
+        />
+      </div>
+
       {children}
     </div>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.103",
+  "version": "0.0.105",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",