Overlays

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { HStack } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columns } from '../quick-start/columns.demo'

export function DefaultNoContentDemo() {
  const data = createFakeQuery(0)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid columns={columns} data={data()} />
    </HStack>
  )
}

'use client'

import { Corn } from '@carbon/icons-react'
import { DataGrid } from '@cerberus/data-grid'
import { Text } from '@cerberus/react'
import { HStack, VStack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { createFakeQuery } from '../quick-start/data'

export function NoContentDemo() {
  const data = createFakeQuery(0)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        columns={columns}
        data={data()}
        overlays={{
          noContent: <CustomNoContent />,
        }}
      />
    </HStack>
  )
}

function CustomNoContent() {
  return (
    <VStack color="page.text.100" gap="md">
      <Corn size={24} />
      <Text color="page.text.initial" textStyle="body-md">
        No corn found
      </Text>
    </VStack>
  )
}

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { HStack } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columns } from '../quick-start/columns.demo'

export function SkeletonDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: 'skeleton',
        }}
      />
    </HStack>
  )
}

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { HStack } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columns } from '../quick-start/columns.demo'

export function LinearDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: 'linear',
        }}
      />
    </HStack>
  )
}

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { HStack } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columns } from '../quick-start/columns.demo'

export function CircularDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: 'circular',
        }}
      />
    </HStack>
  )
}

'use client'

import { DataGrid } from '@cerberus/data-grid'
import { CircularProgress, Text } from '@cerberus/react'
import { useSignal } from '@cerberus/signals'
import { useEffect } from 'react'
import { Center, HStack, VStack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { createFakeQuery } from '../quick-start/data'

export function CustomDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: <MyCustomLoader />,
        }}
      />
    </HStack>
  )
}

function MyCustomLoader() {
  const [now, setNow] = useSignal<number>(0)

  useEffect(() => {
    const timeout = setInterval(() => {
      setNow((prev) => {
        if (prev === 100) return 0
        return prev + 1
      })
    }, 1000)
    return () => clearTimeout(timeout)
  }, [setNow])

  return (
    <Center h="full" w="full">
      <VStack gap="md">
        <CircularProgress value={now} size="xs" />
        <Text as="small" textStyle="heading-xs">
          Loading...
        </Text>
      </VStack>
    </Center>
  )
}

'use client'

import { Box, HStack } from '@/styled-system/jsx'
import { DataGrid } from '@cerberus/data-grid'
import { Button, Show, Tag, Text } from '@cerberus/react'
import { createQuery, useQuery, useSignal } from '@cerberus/signals'
import { Suspense, useRef } from 'react'
import { createFakeQuery } from '../quick-start/data'
import { columnHelper } from '../quick-start/helper.demo'

export function ColumnDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid columns={columns} data={data()} />
    </HStack>
  )
}

// primitives/example.ts

type Status = 'pending' | 'success' | 'error'

// columns.tsx

interface SmartColumnProps {
  row: string
  value: string
}

function SmartColumn(props: SmartColumnProps) {
  // 1. Local state for JUST this row
  const [_, setTrigger, getTrigger] = useSignal<Status | null>(null)

  // 2. A localized query dedicated entirely to this specific row ID
  const ref = useRef(
    createQuery(getTrigger, (currentStatus) => {
      return new Promise<Status>((resolve) => {
        setTimeout(() => resolve(currentStatus), 1000)
      })
    }),
  )

  // 3. Subscribes ONLY to this row's fetch
  const status = useQuery(ref.current)

  return (
    <HStack justify="space-between" w="full">
      <HStack gap="sm">
        <Text textStyle="body-md">{props.value}</Text>
        <Show when={status}>
          <Tag palette="success">{status}</Tag>
        </Show>
      </HStack>

      <Button onClick={() => setTrigger('success')} size="sm">
        Update
      </Button>
    </HStack>
  )
}

export const columns = [
  columnHelper.accessor('id', {
    header: 'ID',
    features: {
      pinning: {
        defaultPosition: 'left',
      },
      sort: true,
    },
    cell: ({ row, value }) => (
      <Suspense fallback={<Box aria-busy h="1/3" rounded="full" w="full" />}>
        <SmartColumn row={String(row.id)} value={value} />
      </Suspense>
    ),
  }),

  columnHelper.accessorFn((row) => `${row.firstName.slice(0, 1)} ${row.lastName}`, {
    id: 'fullName',
    header: 'Employee',
    cell: ({ value }) => <Text textStyle="body-md">{value}</Text>,
  }),
]