Cerberus v1.1 Release

import { Box } from '@/styled-system/jsx'
import { Tabs } from '@cerberus/react'

export function VerticalDemo() {
  return (
    <Box w="full">
      <Tabs.Root
        defaultValue="overview"
        orientation="vertical"
        indicatorPlacement="start"
      >
        <Tabs.List>
          <Tabs.Tab value="overview">Overview</Tabs.Tab>
          <Tabs.Tab value="features">Features</Tabs.Tab>
          <Tabs.Tab value="pricing">Pricing</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="overview">Overview content</Tabs.Panel>
        <Tabs.Panel value="features">Features content</Tabs.Panel>
        <Tabs.Panel value="pricing">Pricing content</Tabs.Panel>
      </Tabs.Root>
    </Box>
  )
}

'use client'

import { DecorativeBox } from '@/app/components/decorative-box'
import { Stack } from '@/styled-system/jsx'
import { DataGrid } from '@cerberus/data-grid'
import { columns } from '../quick-start/columns.demo'
import { createFakeQuery } from '../quick-start/data'

export function BasicDemo() {
  const data = createFakeQuery(10)

  return (
    <Stack direction="column" gap="md" h="25rem" mb="md" w="90%">
      <DataGrid
        columns={columns}
        data={data()}
        toolbar={<Toolbar />}
        footer={<Footer />}
      />
    </Stack>
  )
}

function Toolbar() {
  return <DecorativeBox h="50px">Toolbar</DecorativeBox>
}

function Footer() {
  return <DecorativeBox h="50px">Footer</DecorativeBox>
}

'use client'

import { DataGrid, ThemeOptions } from '@cerberus/data-grid'
import { For, Text } from '@cerberus/react'
import { Center, HStack, VStack } from 'styled-system/jsx'
import { createFakeQuery } from '../quick-start/data'
import { columnHelper } from '../quick-start/helper.demo'

const customTheme: ThemeOptions = {
  border: 'none',
  borderColor: 'transparent',
  rowBgColor: 'var(--cerberus-colors-page-surface-initial)',
  rowEvenBgColor: 'var(--cerberus-colors-page-surface-initial)',
  rowHoverBgColor: 'transparent',
  headCellBorderBottomColor: 'transparent',
}

const columns = Array.from({ length: 4 }, (_, i) =>
  columnHelper.display({
    id: `col-${i}`,
    header: () => (
      <Text
        as="strong"
        display="block"
        ms="lg"
        fontWeight="bold"
        textStyle="label-sm"
      >{`Column ${i + 1}`}</Text>
    ),
    cell: () => (
      <HStack bgColor="black" justify="center" h="full" me="sm" p="sm" w="full">
        <Center bgColor="red" p="sm" rounded="md" w="full">
          1.0
        </Center>
      </HStack>
    ),
  }),
)

export function BasicDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = createFakeQuery(10)

  return (
    <HStack h="20rem" w="3/4">
      <Legend />
      <DataGrid columns={columns} data={data()} rowSize="lg" theme={customTheme} />
    </HStack>
  )
}

function Legend() {
  return (
    <VStack gap="0" justify="center" h="full" pt="15px">
      <For each={columns}>
        {(column) => (
          <Center key={column.id} h="56px" w="full">
            <Text
              as="strong"
              display="block"
              fontWeight="bold"
              textStyle="label-sm"
              transform="rotate(-90deg)"
            >
              Kewl
            </Text>
          </Center>
        )}
      </For>
    </VStack>
  )
}

'use client'

import { Box, Stack } from '@/styled-system/jsx'
import { Button } from '@cerberus/react'
import { createQuery, createSignal, useQuery } from '@cerberus/signals'
import { Suspense } from 'react'

type User = {
  id: string
  name: string
}

function fetchUser(id: User['id']): Promise<User> {
  return new Promise<User>((resolve) => {
    setTimeout(() => {
      resolve({ id, name: `User ${id}` })
    }, 1000)
  })
}

const [currentUser, setCurrentUser] = createSignal<User['id']>(crypto.randomUUID())

// 1. Define the query
const query = createQuery(currentUser, fetchUser)

function UserInfo() {
  // 2. Trigger the query
  const data = useQuery(query)
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

export function BasicDemo() {
  return (
    <Stack direction="column" justify="space-between" w="3/4">
      <Suspense fallback={<Box aria-busy h="96px" rounded="sm" w="full" />}>
        <UserInfo />
      </Suspense>

      <Button onClick={() => setCurrentUser(crypto.randomUUID())}>Change User</Button>
    </Stack>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Text } from '@cerberus/react'
import { createSignal, ReactiveText } from '@cerberus/signals'

function createDemoStore() {
  const [count, setCount] = createSignal<number>(0)
  const [renderCount, setRenderCount] = createSignal<number>(0)
  return { count, setCount, renderCount, setRenderCount }
}

export function BasicDemo() {
  const store = createDemoStore()
  const increment = () => store.setCount(store.count() + 1)

  store.setRenderCount(store.renderCount() + 1)

  return (
    <HStack justify="space-between" w="3/4">
      <HStack gap="md" w="full">
        <Button onClick={increment}>Increment</Button>
        <ReactiveText data={store.count} />
      </HStack>

      <HStack gap="md" w="full">
        <Text>Render Count:</Text>
        <ReactiveText data={store.renderCount} />
      </HStack>
    </HStack>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button } from '@cerberus/react'
import {
  batch,
  createComputed,
  createEffect,
  createSignal,
  ReactiveText,
  type Accessor,
} from '@cerberus/signals'

type ClockStore = {
  time: Accessor<string>
  hours: Accessor<number>
  minutes: Accessor<number>
  seconds: Accessor<number>
  shortTime: Accessor<string>
  startClock: () => void
}

export function globalStoreDemo(): ClockStore {
  const [hours, setHours] = createSignal<number>(0)
  const [minutes, setMinutes] = createSignal<number>(0)
  const [seconds, setSeconds] = createSignal<number>(0)
  const [turnOn, setTurnOn] = createSignal<boolean>(false)

  const time = createComputed<string>(() => `${hours()}:${minutes()}:${seconds()}`)
  const shortTime = createComputed<string>(() => `${hours()}:${minutes()}`)

  function getTime() {
    const now = new Date()
    setHours(now.getHours())
    setMinutes(now.getMinutes())
    setSeconds(now.getSeconds())
  }

  createEffect(() => {
    if (turnOn()) {
      const interval = setInterval(() => getTime(), 1000)
      return () => clearInterval(interval)
    }
  })

  return {
    time,
    shortTime,
    hours,
    minutes,
    seconds,
    // actions
    startClock: () => {
      batch(() => {
        setTurnOn(true)
        getTime()
      })
    },
  }
}

export function GlobalDemo() {
  const store = globalStoreDemo()
  return (
    <HStack gap="md" w="3/4">
      <Button onClick={store.startClock}>Start</Button>
      <ReactiveText data={store.time} />
    </HStack>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button } from '@cerberus/react'
import {
  batch,
  createComputed,
  createEffect,
  createSignal,
  ReactiveText,
  type Accessor,
} from '@cerberus/signals'

type ClockStore = {
  time: Accessor<string>
  hours: Accessor<number>
  minutes: Accessor<number>
  seconds: Accessor<number>
  shortTime: Accessor<string>
  startClock: () => void
}

export function globalStoreDemo(): ClockStore {
  const [hours, setHours] = createSignal<number>(0)
  const [minutes, setMinutes] = createSignal<number>(0)
  const [seconds, setSeconds] = createSignal<number>(0)
  const [turnOn, setTurnOn] = createSignal<boolean>(false)

  const time = createComputed<string>(() => `${hours()}:${minutes()}:${seconds()}`)
  const shortTime = createComputed<string>(() => `${hours()}:${minutes()}`)

  function getTime() {
    const now = new Date()
    setHours(now.getHours())
    setMinutes(now.getMinutes())
    setSeconds(now.getSeconds())
  }

  createEffect(() => {
    if (turnOn()) {
      const interval = setInterval(() => getTime(), 1000)
      return () => clearInterval(interval)
    }
  })

  return {
    time,
    shortTime,
    hours,
    minutes,
    seconds,
    // actions
    startClock: () => {
      batch(() => {
        setTurnOn(true)
        getTime()
      })
    },
  }
}

export function GlobalDemo() {
  const store = globalStoreDemo()
  return (
    <HStack gap="md" w="3/4">
      <Button onClick={store.startClock}>Start</Button>
      <ReactiveText data={store.time} />
    </HStack>
  )
}