feat: static applications dashboard

2024-02-16 13:06:56 -06:00
parent ddeed0a6ef
commit ff0d24bbb6
17 changed files with 753 additions and 97 deletions
@@ -0,0 +1,18 @@
+import { cx } from '@/styled-system/css'
+import { skeleton, type SkeletonVariantProps } from '@/styled-system/recipes/skeleton'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+
+export type SkeletonProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonVariantProps & { children?: never }>
+
+const Skeleton: FC<SkeletonProps> = ({ children: _, className, ...props }) => {
+  const [skeletonRecipeArgs, allOtherSkeletonProps] = skeleton.splitVariantProps(props)
+  return (
+    <div
+      {...allOtherSkeletonProps}
+      className={cx(skeleton(skeletonRecipeArgs), className)}
+    />
+  )
+}
+
+export default Skeleton
@@ -0,0 +1,112 @@
+import { cx } from '@/styled-system/css'
+import { table, type TableVariantProps } from '@/styled-system/recipes/table'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+
+type TableContainerProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TableVariantProps>
+
+export const TableContainer: FC<TableContainerProps> = ({ children, className, ...props }) => {
+  const [tableRecipeArgs, allOtherTableProps] = table.splitVariantProps(props)
+  return (
+    <div
+      {...allOtherTableProps}
+      className={cx(table(tableRecipeArgs).container, className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+type TableProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLTableElement>, HTMLTableElement>, TableVariantProps>
+
+export const Table: FC<TableProps> = ({ children, className, ...props }) => {
+  const [tableRecipeArgs, allOtherTableProps] = table.splitVariantProps(props)
+  return (
+    <table
+      {...allOtherTableProps}
+      className={cx(table(tableRecipeArgs).table, className)}
+    >
+      {children}
+    </table>
+  )
+}
+
+type TableHeadProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, TableVariantProps>
+
+export const TableHead: FC<TableHeadProps> = ({ children, className, ...props }) => {
+  const [tableRecipeArgs, allOtherTableProps] = table.splitVariantProps(props)
+  return (
+    <thead
+      {...allOtherTableProps}
+      className={cx(table(tableRecipeArgs).thead, className)}
+    >
+      {children}
+    </thead>
+  )
+}
+
+type TableBodyProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, TableVariantProps>
+
+export const TableBody: FC<TableBodyProps> = ({ children, className, ...props }) => {
+  const [tableRecipeArgs, allOtherTableProps] = table.splitVariantProps(props)
+  return (
+    <tbody
+      {...allOtherTableProps}
+      className={cx(table(tableRecipeArgs).tbody, className)}
+    >
+      {children}
+    </tbody>
+  )
+}
+
+type TableFootProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, TableVariantProps>
+
+export const TableFoot: FC<TableFootProps> = ({ children, className, ...props }) => {
+  const [tableRecipeArgs, allOtherTableProps] = table.splitVariantProps(props)
+  return (
+    <tfoot
+      {...allOtherTableProps}
+      className={cx(table(tableRecipeArgs).tfoot, className)}
+    >
+      {children}
+    </tfoot>
+  )
+}
+
+type TableRowProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TableVariantProps>
+
+export const TableRow: FC<TableRowProps> = ({ children, className, ...props }) => {
+  const [tableRecipeArgs, allOtherTableProps] = table.splitVariantProps(props)
+  return (
+    <tr
+      {...allOtherTableProps}
+      className={cx(table(tableRecipeArgs).tr, className)}
+    >
+      {children}
+    </tr>
+  )
+}
+
+type TableCellProps = DetailedHTMLProps<HTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>
+
+export const TableCell: FC<TableCellProps> = ({ children, ...props }) => {
+  return (
+    <td
+      {...props}
+    >
+      {children}
+    </td>
+  )
+}
+
+type TableHeadCellProps = DetailedHTMLProps<HTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>
+
+export const TableHeadCell: FC<TableHeadCellProps> = ({ children, ...props }) => {
+  return (
+    <th
+      {...props}
+    >
+      {children}
+    </th>
+  )
+}
@@ -0,0 +1,34 @@
+import Input, { type InputProps } from '@/components/ui/form/Input'
+import { useEffect, useState, type FC } from 'react'
+
+interface DebouncedInputProps extends Omit<InputProps, 'value' | 'onChange'> {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+}
+
+const DebouncedInput: FC<DebouncedInputProps> = ({ value: initialValue, onChange, debounce = 500, ...props }) => {
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => { clearTimeout(timeout) }
+  }, [value])
+
+  return (
+    <Input
+      {...props}
+      value={value}
+      onChange={e => { setValue(e.target.value) }}
+    />
+  )
+}
+
+export default DebouncedInput