betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/hooks/use-media-filters-bar.ts

@@ -0,0 +1,72 @@
+'use client'
+
+import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs'
+import * as React from 'react'
+
+export interface MediaFiltersBarSelectionState {
+  isSelectMode: boolean
+  hasSelection: boolean
+  hasLoadedMedia: boolean
+  allLoadedSelected: boolean
+  enterSelectMode: () => void
+  cancelSelectMode: () => void
+  selectAll: () => void
+  deselectAll: () => void
+}
+
+export function useMediaFiltersBar(loadedMediaIds: string[]) {
+  const [selectedIds, setSelectedIds] = useQueryState(
+    'mg_selected',
+    parseAsArrayOf(parseAsString).withDefault([])
+  )
+  const [isSelecting, setIsSelecting] = React.useState(false)
+
+  const hasSelection = selectedIds.length > 0
+  const hasLoadedMedia = loadedMediaIds.length > 0
+
+  if (isSelecting && !hasLoadedMedia) {
+    setIsSelecting(false)
+  }
+
+  const isSelectMode = (isSelecting && hasLoadedMedia) || hasSelection
+  const selectedIdSet = React.useMemo(() => new Set(selectedIds), [selectedIds])
+  const allLoadedSelected =
+    hasLoadedMedia &&
+    loadedMediaIds.length <= selectedIds.length &&
+    loadedMediaIds.every((id) => selectedIdSet.has(id))
+
+  const enterSelectMode = React.useCallback(() => {
+    if (!hasLoadedMedia) return
+    setIsSelecting(true)
+  }, [hasLoadedMedia])
+
+  const cancelSelectMode = React.useCallback(() => {
+    setIsSelecting(false)
+    void setSelectedIds([])
+  }, [setSelectedIds])
+
+  const selectAll = React.useCallback(() => {
+    if (!hasLoadedMedia) return
+    setIsSelecting(true)
+    void setSelectedIds(loadedMediaIds)
+  }, [hasLoadedMedia, loadedMediaIds, setSelectedIds])
+
+  const deselectAll = React.useCallback(() => {
+    void setSelectedIds([])
+  }, [setSelectedIds])
+
+  return {
+    selectedIds,
+    setSelectedIds,
+    isSelectMode,
+    hasSelection,
+    hasLoadedMedia,
+    allLoadedSelected,
+    enterSelectMode,
+    cancelSelectMode,
+    selectAll,
+    deselectAll
+  }
+}
+
+export type UseMediaFiltersBarResult = ReturnType<typeof useMediaFiltersBar>

package/dist/assets/adapters/next/templates/init/hooks/use-media.ts

@@ -0,0 +1,102 @@
+'use client'
+
+import { getMedia, getMediaById, getMediaByIds } from '@admin/actions/media'
+import type { AdminMedia, MediaListParams, MediaListResult } from '@admin/types'
+import { useQuery } from '@tanstack/react-query'
+import * as React from 'react'
+
+const DEFAULT_MEDIA_PAGE = 1
+const DEFAULT_MEDIA_PAGE_SIZE = 40
+
+function emptySelection(): Map<string, AdminMedia> {
+  return new Map()
+}
+
+export function clampMediaPage(value: number | undefined): number {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return DEFAULT_MEDIA_PAGE
+  }
+
+  return Math.max(DEFAULT_MEDIA_PAGE, Math.floor(value))
+}
+
+export function clampMediaPageSize(value: number | undefined): number {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+    return DEFAULT_MEDIA_PAGE_SIZE
+  }
+
+  return Math.max(1, Math.floor(value))
+}
+
+export function useMediaList(params: MediaListParams = {}) {
+  const safeParams = {
+    ...params,
+    page: clampMediaPage(params.page),
+    pageSize: clampMediaPageSize(params.pageSize)
+  }
+  const query = useQuery<MediaListResult>({
+    queryKey: ['media', safeParams],
+    queryFn: () => getMedia(safeParams)
+  })
+
+  const pageSize = safeParams.pageSize
+  const pageCount = Math.max(1, Math.ceil((query.data?.total ?? 0) / pageSize))
+  const media = query.data?.media ?? []
+
+  return { ...query, media, pageCount }
+}
+
+export function useMediaSelection(mode: 'single' | 'multi') {
+  const [selectedMap, setSelectedMap] = React.useState(emptySelection)
+
+  const handleItemClick = React.useCallback(
+    (item: AdminMedia) => {
+      if (mode === 'single') {
+        setSelectedMap(new Map([[item.id, item]]))
+        return
+      }
+
+      setSelectedMap((current) => {
+        const next = new Map(current)
+        if (next.has(item.id)) {
+          next.delete(item.id)
+        } else {
+          next.set(item.id, item)
+        }
+        return next
+      })
+    },
+    [mode]
+  )
+
+  const reset = React.useCallback(() => setSelectedMap(new Map()), [])
+
+  const getSelection = React.useCallback(() => {
+    const values = [...selectedMap.values()]
+    return mode === 'single' ? values[0] : values
+  }, [selectedMap, mode])
+
+  return {
+    selectedMap,
+    handleItemClick,
+    reset,
+    getSelection,
+    count: selectedMap.size
+  }
+}
+
+export function useMediaById(id: string | undefined | null) {
+  return useQuery<AdminMedia | null>({
+    queryKey: ['media', 'detail', id],
+    queryFn: () => (id ? getMediaById(id) : null),
+    enabled: !!id
+  })
+}
+
+export function useMediaByIds(ids: string[]) {
+  return useQuery<(AdminMedia | null)[]>({
+    queryKey: ['media', 'batch', ids],
+    queryFn: () => (ids.length > 0 ? getMediaByIds(ids) : []),
+    enabled: ids.length > 0
+  })
+}

package/dist/assets/adapters/next/templates/init/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/dist/assets/adapters/next/templates/init/hooks/use-page-boundary-blur-visibility.ts

@@ -0,0 +1,59 @@
+'use client'
+
+import { getPageScrollBoundary } from '@admin/utils/page/boundary'
+import { useMotionValueEvent, useScroll } from 'motion/react'
+import * as React from 'react'
+
+interface UsePageBoundaryBlurVisibilityOptions {
+  disabled?: boolean
+}
+
+export function usePageBoundaryBlurVisibility(
+  position: 'top' | 'bottom',
+  options: UsePageBoundaryBlurVisibilityOptions = {}
+) {
+  const { disabled = false } = options
+  const { scrollY, scrollYProgress } = useScroll()
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  const updateVisibility = React.useCallback(() => {
+    if (disabled) {
+      setIsVisible(true)
+      return
+    }
+
+    const boundary = getPageScrollBoundary(scrollY.get())
+    const nextIsVisible =
+      boundary !== 'none' && (position === 'top' ? boundary !== 'top' : boundary !== 'bottom')
+
+    setIsVisible((current) => (current === nextIsVisible ? current : nextIsVisible))
+  }, [disabled, position, scrollY])
+
+  React.useEffect(() => {
+    updateVisibility()
+
+    const frame = window.requestAnimationFrame(updateVisibility)
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateVisibility)
+
+    resizeObserver?.observe(document.documentElement)
+    if (document.body) {
+      resizeObserver?.observe(document.body)
+    }
+
+    window.addEventListener('resize', updateVisibility)
+    window.visualViewport?.addEventListener('resize', updateVisibility)
+
+    return () => {
+      window.cancelAnimationFrame(frame)
+      resizeObserver?.disconnect()
+      window.removeEventListener('resize', updateVisibility)
+      window.visualViewport?.removeEventListener('resize', updateVisibility)
+    }
+  }, [updateVisibility])
+
+  useMotionValueEvent(scrollY, 'change', updateVisibility)
+  useMotionValueEvent(scrollYProgress, 'change', updateVisibility)
+
+  return disabled || isVisible
+}

package/dist/assets/adapters/next/templates/init/hooks/use-page-scroll-threshold.ts

@@ -0,0 +1,27 @@
+'use client'
+
+import { useMotionValueEvent, useScroll } from 'motion/react'
+import * as React from 'react'
+
+export function usePageScrollThreshold(threshold = 0) {
+  const { scrollY } = useScroll()
+  const [isPastThreshold, setIsPastThreshold] = React.useState(false)
+
+  const updateThresholdState = React.useCallback(
+    (scrollTop = scrollY.get()) => {
+      const nextIsPastThreshold = scrollTop > threshold
+      setIsPastThreshold((current) =>
+        current === nextIsPastThreshold ? current : nextIsPastThreshold
+      )
+    },
+    [scrollY, threshold]
+  )
+
+  React.useEffect(() => {
+    updateThresholdState()
+  }, [updateThresholdState])
+
+  useMotionValueEvent(scrollY, 'change', updateThresholdState)
+
+  return isPastThreshold
+}

package/dist/assets/adapters/next/templates/init/hooks/use-table-utils.ts

@@ -0,0 +1,315 @@
+'use client'
+
+import { defaultGetId, isString } from '@admin/utils/table/table'
+import type {
+  ColumnSizingState,
+  OnChangeFn,
+  PaginationState,
+  RowData,
+  RowSelectionState,
+  SortingState,
+  Table
+} from '@tanstack/react-table'
+import * as React from 'react'
+
+interface ColumnResizeInfo {
+  id: string
+  minSize: number
+  maxSize: number
+  size: number
+  canResize: boolean
+}
+
+type StateSetter<TValue> = (value: TValue) => unknown
+type NullableStateSetter<TValue> = (value: TValue | null) => unknown
+
+interface SortingParamsSetterValue {
+  pageIndex: number
+  sortDir: string | null
+  sortField: string | null
+}
+
+interface TableUtilsOptions<TData extends RowData> {
+  data?: TData[]
+  selectedIds?: string[]
+  onSelectedIdsChange?: (ids: string[]) => void
+  getId?: (row: TData) => string | null | undefined
+  pageIndex?: number
+  pageSize?: number
+  setPageIndex?: StateSetter<number>
+  setSortingParams?: (value: SortingParamsSetterValue) => unknown
+  sortField?: string
+  sortDir?: string
+  setSortField?: NullableStateSetter<string>
+  setSortDir?: NullableStateSetter<string>
+}
+
+export function useTableUtils<TData extends RowData>({
+  data = [],
+  selectedIds,
+  onSelectedIdsChange,
+  getId = defaultGetId,
+  pageIndex,
+  pageSize,
+  setPageIndex,
+  setSortingParams,
+  sortField,
+  sortDir,
+  setSortField,
+  setSortDir
+}: TableUtilsOptions<TData> = {}) {
+  const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
+  const [hoveredColumnId, setHoveredColumnId] = React.useState<string | null>(null)
+  const tableContainerRef = React.useRef<HTMLDivElement>(null)
+  const tableRef = React.useRef<Table<TData> | null>(null)
+  const hasUserResizedColumnsRef = React.useRef(false)
+  const columnResizeInfoRef = React.useRef<ColumnResizeInfo[]>([])
+
+  const registerTable = React.useCallback((table: Table<TData>) => {
+    tableRef.current = table
+  }, [])
+
+  const constrainColumnSizing = React.useCallback(
+    (current: ColumnSizingState, proposed: ColumnSizingState): ColumnSizingState => {
+      const visibleColumns = columnResizeInfoRef.current
+      if (visibleColumns.length === 0) return proposed
+
+      let changedColumnIndex = -1
+      let changedDelta = 0
+
+      for (let index = 0; index < visibleColumns.length; index += 1) {
+        const column = visibleColumns[index]
+        const currentSize = current[column.id] ?? column.size
+        const proposedSize = proposed[column.id] ?? currentSize
+        const delta = proposedSize - currentSize
+        if (Math.abs(delta) > Math.abs(changedDelta)) {
+          changedColumnIndex = index
+          changedDelta = delta
+        }
+      }
+
+      if (changedColumnIndex === -1 || changedDelta === 0) return proposed
+
+      const changedColumn = visibleColumns[changedColumnIndex]
+      const nextColumn = visibleColumns[changedColumnIndex + 1]
+      if (!changedColumn?.canResize || !nextColumn?.canResize) return current
+
+      const currentChangedSize = current[changedColumn.id] ?? changedColumn.size
+      const currentNextSize = current[nextColumn.id] ?? nextColumn.size
+      const growRoom = Math.max(changedColumn.maxSize - currentChangedSize, 0)
+      const shrinkRoom = Math.max(currentChangedSize - changedColumn.minSize, 0)
+      const nextGrowRoom = Math.max(nextColumn.maxSize - currentNextSize, 0)
+      const nextShrinkRoom = Math.max(currentNextSize - nextColumn.minSize, 0)
+      const constrainedDelta =
+        changedDelta > 0
+          ? Math.min(changedDelta, growRoom, nextShrinkRoom)
+          : -Math.min(Math.abs(changedDelta), shrinkRoom, nextGrowRoom)
+      const nextSizing = { ...current, ...proposed }
+
+      nextSizing[changedColumn.id] = Math.round(currentChangedSize + constrainedDelta)
+      nextSizing[nextColumn.id] = Math.round(currentNextSize - constrainedDelta)
+
+      return nextSizing
+    },
+    []
+  )
+
+  const handleColumnSizingChange = React.useCallback<OnChangeFn<ColumnSizingState>>(
+    (updater) => {
+      hasUserResizedColumnsRef.current = true
+      setColumnSizing((current) => {
+        const proposed = typeof updater === 'function' ? updater(current) : updater
+        return constrainColumnSizing(current, proposed)
+      })
+    },
+    [constrainColumnSizing]
+  )
+
+  React.useLayoutEffect(() => {
+    const table = tableRef.current
+    if (!table) return
+
+    columnResizeInfoRef.current = table.getVisibleLeafColumns().map((column) => ({
+      id: column.id,
+      minSize: column.columnDef.minSize ?? 48,
+      maxSize: column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER,
+      size: column.getSize(),
+      canResize: column.getCanResize()
+    }))
+  })
+
+  const syncColumnSizingToContainer = React.useCallback(() => {
+    const table = tableRef.current
+    if (!table) return
+
+    const containerWidth = tableContainerRef.current?.getBoundingClientRect().width ?? 0
+    const visibleColumns = table.getVisibleLeafColumns()
+    if (containerWidth <= 0 || visibleColumns.length === 0) return
+
+    const baseColumns = visibleColumns.map((column) => ({
+      id: column.id,
+      minSize: column.columnDef.minSize ?? 48,
+      size: column.getSize(),
+      canGrow: column.getCanResize()
+    }))
+    const growableColumns = baseColumns.filter((column) => column.canGrow)
+    const flexibleColumns = growableColumns.length > 0 ? growableColumns : baseColumns
+    const flexibleColumnIds = new Set(flexibleColumns.map((column) => column.id))
+    const fixedTotal = baseColumns
+      .filter((column) => !flexibleColumnIds.has(column.id))
+      .reduce((total, column) => total + column.size, 0)
+    const flexibleBaseTotal = flexibleColumns.reduce((total, column) => total + column.size, 0)
+    const flexibleMinTotal = flexibleColumns.reduce((total, column) => total + column.minSize, 0)
+    const flexibleAvailable = Math.max(containerWidth - fixedTotal, flexibleMinTotal)
+    const extraPerColumn =
+      flexibleColumns.length > 0 && flexibleAvailable > flexibleBaseTotal
+        ? (flexibleAvailable - flexibleBaseTotal) / flexibleColumns.length
+        : 0
+    const shrinkNeeded = Math.max(flexibleBaseTotal - flexibleAvailable, 0)
+    const shrinkRoom = flexibleColumns.reduce(
+      (total, column) => total + Math.max(column.size - column.minSize, 0),
+      0
+    )
+
+    setColumnSizing((current) => {
+      const next: ColumnSizingState = {}
+      let changed = Object.keys(current).length !== baseColumns.length
+
+      for (const column of baseColumns) {
+        const columnShrinkRoom = Math.max(column.size - column.minSize, 0)
+        const shrink =
+          flexibleColumnIds.has(column.id) && shrinkRoom > 0
+            ? shrinkNeeded * (columnShrinkRoom / shrinkRoom)
+            : 0
+        const grow = flexibleColumnIds.has(column.id) ? extraPerColumn : 0
+        const size = Math.round(column.size + grow - shrink)
+        next[column.id] = size
+        if (current[column.id] !== size) {
+          changed = true
+        }
+      }
+
+      return changed ? next : current
+    })
+  }, [])
+
+  React.useLayoutEffect(() => {
+    if (hasUserResizedColumnsRef.current) return
+
+    syncColumnSizingToContainer()
+
+    const element = tableContainerRef.current
+    if (!element || typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(() => {
+      if (!hasUserResizedColumnsRef.current) {
+        syncColumnSizingToContainer()
+      }
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [syncColumnSizingToContainer])
+
+  const resetColumnSizingToContainer = React.useCallback(() => {
+    hasUserResizedColumnsRef.current = false
+    window.requestAnimationFrame(syncColumnSizingToContainer)
+  }, [syncColumnSizingToContainer])
+
+  const sorting = React.useMemo<SortingState>(
+    () => (sortField ? [{ id: sortField, desc: sortDir === 'desc' }] : []),
+    [sortField, sortDir]
+  )
+
+  const handleSortingChange = React.useCallback<OnChangeFn<SortingState>>(
+    (updater) => {
+      if (!setSortingParams && (!setSortField || !setSortDir || !setPageIndex)) {
+        return
+      }
+
+      const newSorting = typeof updater === 'function' ? updater(sorting) : updater
+      const [nextSort] = newSorting
+      const nextSortField = nextSort?.id ?? null
+      const nextSortDir = nextSort ? (nextSort.desc ? 'desc' : 'asc') : null
+
+      React.startTransition(() => {
+        if (setSortingParams) {
+          void setSortingParams({
+            pageIndex: 0,
+            sortDir: nextSortDir,
+            sortField: nextSortField
+          })
+          return
+        }
+
+        void setSortField?.(nextSortField)
+        void setSortDir?.(nextSortDir)
+        void setPageIndex?.(0)
+      })
+    },
+    [sorting, setSortingParams, setSortField, setSortDir, setPageIndex]
+  )
+
+  const rowSelection = React.useMemo<RowSelectionState>(() => {
+    if (!selectedIds) return {}
+
+    const selection: RowSelectionState = {}
+    data.forEach((row, index) => {
+      const id = getId(row)
+      if (isString(id) && selectedIds.includes(id)) {
+        selection[index.toString()] = true
+      }
+    })
+    return selection
+  }, [data, getId, selectedIds])
+
+  const handleRowSelectionChange = React.useCallback<OnChangeFn<RowSelectionState>>(
+    (updater) => {
+      if (!selectedIds || !onSelectedIdsChange) return
+
+      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater
+      const currentPageSelectedIds = new Set(
+        Object.keys(newSelection)
+          .filter((key) => newSelection[key])
+          .map((key) => {
+            const row = data[Number.parseInt(key, 10)]
+            return row ? getId(row) : null
+          })
+          .filter(isString)
+      )
+      const currentPageIds = new Set(data.map(getId).filter(isString))
+      const otherPageIds = selectedIds.filter((id) => !currentPageIds.has(id))
+      onSelectedIdsChange([...otherPageIds, ...currentPageSelectedIds])
+    },
+    [data, getId, onSelectedIdsChange, rowSelection, selectedIds]
+  )
+
+  const handlePaginationChange = React.useCallback<OnChangeFn<PaginationState>>(
+    (updater) => {
+      if (pageIndex === undefined || pageSize === undefined || !setPageIndex) {
+        return
+      }
+
+      const current = { pageIndex, pageSize }
+      const next = typeof updater === 'function' ? updater(current) : updater
+      React.startTransition(() => {
+        void setPageIndex(next.pageIndex)
+      })
+    },
+    [pageIndex, pageSize, setPageIndex]
+  )
+
+  return {
+    columnSizing,
+    handleColumnSizingChange,
+    handlePaginationChange,
+    handleRowSelectionChange,
+    handleSortingChange,
+    hoveredColumnId,
+    registerTable,
+    resetColumnSizingToContainer,
+    rowSelection,
+    setHoveredColumnId,
+    sorting,
+    tableContainerRef
+  }
+}