mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 18:00:20 -04:00
65b962e771
* Refactor Drawer component and add date-fns dependency Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component. * nit: add env for svg path * fix: instructions * accent color docs and basic tidy * copy value feature * improve color contrast * increase contrast on text-warning in light mode * update changelog * replace outdated text-warning utility classes * remove redundant warning-600 * minor design-system docs updates * docs updates * remove unused brand-button class * update docs * fix: restore brand default * update docs brand text color * low hanging branded text fruit * Nit refactor and clean up * re-add Kemal’s README instructions for hot reload --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
import { FilterFn } from '@tanstack/react-table'
|
|
import { isAfter, isBefore, isSameDay } from 'date-fns'
|
|
|
|
import { LEVELS } from './DataTable.constants'
|
|
|
|
export function formatCompactNumber(value: number) {
|
|
if (value >= 100 && value < 1000) {
|
|
return value.toString() // Keep the number as is if it's in the hundreds
|
|
} else if (value >= 1000 && value < 1000000) {
|
|
return (value / 1000).toFixed(1) + 'k' // Convert to 'k' for thousands
|
|
} else if (value >= 1000000) {
|
|
return (value / 1000000).toFixed(1) + 'M' // Convert to 'M' for millions
|
|
} else {
|
|
return value.toString() // Optionally handle numbers less than 100 if needed
|
|
}
|
|
}
|
|
|
|
export function isArrayOfNumbers(arr: any): arr is number[] {
|
|
if (!Array.isArray(arr)) return false
|
|
return arr.every((item) => typeof item === 'number')
|
|
}
|
|
|
|
export function isArrayOfDates(arr: any): arr is Date[] {
|
|
if (!Array.isArray(arr)) return false
|
|
return arr.every((item) => item instanceof Date)
|
|
}
|
|
|
|
export function isArrayOfStrings(arr: any): arr is string[] {
|
|
if (!Array.isArray(arr)) return false
|
|
return arr.every((item) => typeof item === 'string')
|
|
}
|
|
|
|
export function isArrayOfBooleans(arr: any): arr is boolean[] {
|
|
if (!Array.isArray(arr)) return false
|
|
return arr.every((item) => typeof item === 'boolean')
|
|
}
|
|
|
|
export const inDateRange: FilterFn<any> = (row, columnId, value) => {
|
|
const date = new Date(row.getValue(columnId))
|
|
const [start, end] = value as Date[]
|
|
|
|
if (isNaN(date.getTime())) return false
|
|
|
|
// if no end date, check if it's the same day
|
|
if (!end) return isSameDay(date, start)
|
|
|
|
return isAfter(date, start) && isBefore(date, end)
|
|
}
|
|
|
|
inDateRange.autoRemove = (val: any) => !Array.isArray(val) || !val.length || !isArrayOfDates(val)
|
|
|
|
export const arrSome: FilterFn<any> = (row, columnId, filterValue) => {
|
|
if (!Array.isArray(filterValue)) return false
|
|
return filterValue.some((val) => row.getValue<unknown[]>(columnId) === val)
|
|
}
|
|
|
|
arrSome.autoRemove = (val: any) => !Array.isArray(val) || !val?.length
|
|
|
|
export function getLevelColor(
|
|
value: (typeof LEVELS)[number]
|
|
): Record<'text' | 'bg' | 'border', string> {
|
|
switch (value) {
|
|
case 'success':
|
|
return {
|
|
text: 'text-muted',
|
|
bg: 'bg-muted',
|
|
border: 'border-muted',
|
|
}
|
|
case 'warning':
|
|
return {
|
|
text: 'text-warning',
|
|
bg: 'bg-warning',
|
|
border: 'border-warning',
|
|
}
|
|
case 'error':
|
|
return {
|
|
text: 'text-destructive',
|
|
bg: 'bg-destructive',
|
|
border: 'border-destructive',
|
|
}
|
|
default:
|
|
return {
|
|
text: 'text-info',
|
|
bg: 'bg-info',
|
|
border: 'border-info',
|
|
}
|
|
}
|
|
}
|
|
|
|
export function getStatusColor(value?: number | string): Record<'text' | 'bg' | 'border', string> {
|
|
switch (value) {
|
|
case '1':
|
|
case 'info':
|
|
return {
|
|
text: 'text-blue-500',
|
|
bg: '',
|
|
border: 'border-blue-200 dark:border-blue-800',
|
|
}
|
|
case '2':
|
|
case 'success':
|
|
return {
|
|
text: 'text-foreground-lighter',
|
|
bg: '',
|
|
border: 'border-green-200 dark:border-green-800',
|
|
}
|
|
case '4':
|
|
case 'warning':
|
|
case 'redirect':
|
|
return {
|
|
text: 'text-warning',
|
|
bg: 'bg-warning-300 dark:bg-warning-200',
|
|
border: 'border border-warning-400/50 dark:border-warning-400/50',
|
|
}
|
|
case '5':
|
|
case 'error':
|
|
return {
|
|
text: 'text-destructive',
|
|
bg: 'bg-destructive-300 dark:bg-destructive-300/50',
|
|
border: 'border border-destructive-400/50 dark:border-destructive-400/50',
|
|
}
|
|
default:
|
|
return {
|
|
text: 'text-foreground-lighter',
|
|
bg: '',
|
|
border: '',
|
|
}
|
|
}
|
|
}
|