@etus/ui 0.1.0 → 0.1.2

package/src/components/data-display/ScatterChart/ScatterChart.types.ts

@@ -1,272 +0,0 @@
-import type { ChartConfig } from "../Chart"
-import type { ComponentPropsWithoutRef } from "react"
-
-/**
- * Shape types for scatter points
- */
-export type ScatterChartShape = "circle" | "cross" | "diamond" | "square" | "star" | "triangle" | "wye"
-
-/**
- * Tooltip indicator style
- */
-export type ScatterChartTooltipIndicator = "dashed" | "dot" | "line"
-
-/**
- * Legend position
- */
-export type ScatterChartLegendPosition = "bottom" | "left" | "right" | "top"
-
-/**
- * X-axis interval type
- */
-export type ScatterChartIntervalType = "equidistantPreserveStart" | "preserveEnd" | "preserveStart" | "preserveStartEnd" | number
-
-/**
- * Value formatters for x, y, and z axes
- */
-export interface ScatterChartValueFormatter {
-  x?: (value: number) => string
-  y?: (value: number) => string
-  z?: (value: number) => string
-}
-
-/**
- * Event props emitted when a point is clicked/selected
- */
-export interface ScatterChartEventProps {
-  payload: Record<string, unknown>
-  x: number
-  y: number
-  z?: number
-}
-
-/**
- * Tooltip callback props
- */
-export interface ScatterChartTooltipCallbackProps {
-  active: boolean
-  payload?: {
-    payload: Record<string, unknown>
-    x: number
-    y: number
-    z?: number
-  }[]
-}
-
-/**
- * Configuration for a single series in the scatter chart
- */
-export interface ScatterChartSeriesConfig {
-  /** Data for this series */
-  data: Record<string, unknown>[]
-  /** Unique key for this series */
-  dataKey: string
-  /** Fill color for points */
-  fill?: string
-  /** Shape of the scatter points */
-  shape?: ScatterChartShape
-  /** Size of scatter points */
-  size?: number
-}
-
-/**
- * Props for the ScatterChart component
- */
-export interface ScatterChartProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
-  /**
-   * Automatically calculate minimum value for axes
-   * @default false
-   */
-  autoMinValue?: boolean
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string
-
-  /**
-   * Chart configuration with colors and labels
-   */
-  config: ChartConfig
-
-  /**
-   * Enable horizontal scroll/slider for legend with many items
-   * @default false
-   */
-  enableLegendSlider?: boolean
-
-  /**
-   * Dash pattern for grid lines
-   * @default "3 3"
-   */
-  gridDashArray?: string
-
-  /**
-   * X-axis interval type for tick display
-   */
-  intervalType?: ScatterChartIntervalType
-
-  /**
-   * Legend position relative to chart
-   * @default "bottom"
-   */
-  legendPosition?: ScatterChartLegendPosition
-
-  /**
-   * Maximum X axis value
-   */
-  maxXValue?: number
-
-  /**
-   * Maximum Y axis value
-   */
-  maxYValue?: number
-
-  /**
-   * Minimum X axis value
-   */
-  minXValue?: number
-
-  /**
-   * Minimum Y axis value
-   */
-  minYValue?: number
-
-  /**
-   * Callback when a point is clicked
-   */
-  onClick?: (point: ScatterChartEventProps) => void
-
-  /**
-   * Rotate X-axis labels by specified degrees
-   * Useful for long labels to prevent overlap
-   */
-  rotateLabelX?: number
-
-  /**
-   * Series configuration
-   */
-  series: ScatterChartSeriesConfig[]
-
-  /**
-   * Point shape
-   * @default "circle"
-   */
-  shape?: ScatterChartShape
-
-  /**
-   * Show grid lines
-   * @default true
-   */
-  showGrid?: boolean
-
-  /**
-   * Show legend
-   * @default false
-   */
-  showLegend?: boolean
-
-  /**
-   * Show points with reduced opacity for better visual distinction
-   * When true, applies opacity to fill colors
-   * @default false
-   */
-  showOpacity?: boolean
-
-  /**
-   * Show tooltip on hover
-   * @default true
-   */
-  showTooltip?: boolean
-
-  /**
-   * Show X axis
-   * @default true
-   */
-  showXAxis?: boolean
-
-  /**
-   * Show Y axis
-   * @default true
-   */
-  showYAxis?: boolean
-
-  /**
-   * Point size
-   * @default 60
-   */
-  size?: number
-
-  /**
-   * Size range for Z-axis (bubble chart), [minSize, maxSize]
-   * @default [60, 400]
-   */
-  sizeRange?: [number, number]
-
-  /**
-   * Show only first and last X-axis tick labels
-   * @default false
-   */
-  startEndOnly?: boolean
-
-  /**
-   * Minimum gap between X-axis ticks in pixels
-   */
-  tickGap?: number
-
-  /**
-   * Callback when tooltip state changes
-   */
-  tooltipCallback?: (props: ScatterChartTooltipCallbackProps) => void
-
-  /**
-   * Tooltip indicator style
-   * @default "dot"
-   */
-  tooltipIndicator?: ScatterChartTooltipIndicator
-
-  /**
-   * Custom value formatters for x, y, and z axes
-   */
-  valueFormatter?: ScatterChartValueFormatter
-
-  /**
-   * Key from data to use for X values
-   */
-  xAxisKey: string
-
-  /**
-   * X axis label
-   */
-  xAxisLabel?: string
-
-  /**
-   * X axis tick formatter
-   */
-  xAxisTickFormatter?: (value: number) => string
-
-  /**
-   * Key from data to use for Y values
-   */
-  yAxisKey: string
-
-  /**
-   * Y axis label
-   */
-  yAxisLabel?: string
-
-  /**
-   * Y axis tick formatter
-   */
-  yAxisTickFormatter?: (value: number) => string
-
-  /**
-   * Y-axis width in pixels
-   */
-  yAxisWidth?: number
-
-  /**
-   * Key from data to use for Z values (bubble size)
-   */
-  zAxisKey?: string
-}

package/src/components/data-display/ScatterChart/index.ts

@@ -1,2 +0,0 @@
-export * from './ScatterChart'
-export type * from './ScatterChart.types'

package/src/components/data-display/SingleStat/README.md

@@ -1,363 +0,0 @@
-# SingleStat
-
-## Visão Geral
-
-O SingleStat e um componente minimalista para exibir uma unica metrica de destaque. Mais simples que o KPICard, foca apenas no valor e label, ideal para indicadores inline ou quando o espaco e limitado.
-
-### Classificacao Atomica
-- **Categoria**: Molecules
-- **Subcategoria**: Data Display / Metrics
-
-### Casos de Uso Comuns
-- Contadores inline
-- Stats em headers
-- Numeros de resumo
-- Valores destacados em texto
-- Metricas compactas
-- Indicadores de status
-
-### Relacao com Outros Componentes
-- **KPICard**: Versao mais completa
-- **Badge**: Para valores pequenos
-- **Text**: Para valores em contexto
-
-## Design Specs
-
-### Variantes
-
-| Variante | Layout |
-|----------|--------|
-| `default` | Label acima, valor abaixo |
-| `inline` | Label e valor lado a lado |
-| `compact` | Apenas valor |
-
-### Tamanhos
-
-| Tamanho | Value Size | Uso |
-|---------|------------|-----|
-| `xs` | `text-lg` | Inline |
-| `sm` | `text-xl` | Compacto |
-| `md` | `text-2xl` | Padrao |
-| `lg` | `text-4xl` | Destaque |
-| `xl` | `text-6xl` | Hero |
-
-### Estados
-
-- **Default**: Valor exibido
-- **Loading**: Skeleton
-- **Animated**: Contador animado
-
-### Tokens de Design
-
-#### Cores
-- Value: `text-foreground`
-- Label: `text-muted-foreground`
-- Accent (opcional): `text-primary`
-
-#### Tipografia
-- Value: `font-bold tabular-nums`
-- Label: `text-sm font-medium`
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `value` | `string \| number` | - | Valor a exibir |
-| `label` | `string` | - | Label descritivo |
-| `variant` | `"default" \| "inline" \| "compact"` | `"default"` | Layout |
-| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Tamanho |
-| `prefix` | `string` | - | Prefixo (ex: $, R$) |
-| `suffix` | `string` | - | Sufixo (ex: %, pts) |
-| `animated` | `boolean` | `false` | Animar contagem |
-| `loading` | `boolean` | `false` | Estado de loading |
-| `className` | `string` | `""` | Classes adicionais |
-
-## Exemplos
-
-### Uso Básico
-
-```tsx
-import { SingleStat } from '@etus/ui'
-
-function BasicStat() {
-  return <SingleStat value={1234} label="Total Users" />
-}
-```
-
-### Variantes
-
-```tsx
-function StatVariants() {
-  return (
-    <div className="space-y-4">
-      <SingleStat
-        variant="default"
-        value={42}
-        label="Active Projects"
-      />
-
-      <SingleStat
-        variant="inline"
-        value={1500}
-        label="Subscribers"
-      />
-
-      <SingleStat
-        variant="compact"
-        value="99.9%"
-      />
-    </div>
-  )
-}
-```
-
-### Tamanhos
-
-```tsx
-function StatSizes() {
-  return (
-    <div className="flex items-end gap-8">
-      <SingleStat size="xs" value={12} label="xs" />
-      <SingleStat size="sm" value={34} label="sm" />
-      <SingleStat size="md" value={56} label="md" />
-      <SingleStat size="lg" value={78} label="lg" />
-      <SingleStat size="xl" value={90} label="xl" />
-    </div>
-  )
-}
-```
-
-### Com Prefixo/Sufixo
-
-```tsx
-function StatWithAffixes() {
-  return (
-    <div className="grid grid-cols-3 gap-4">
-      <SingleStat
-        value={45231}
-        prefix="$"
-        label="Revenue"
-      />
-      <SingleStat
-        value={98.5}
-        suffix="%"
-        label="Uptime"
-      />
-      <SingleStat
-        value={150}
-        suffix="ms"
-        label="Response Time"
-      />
-    </div>
-  )
-}
-```
-
-### Animado
-
-```tsx
-function AnimatedStat() {
-  return (
-    <SingleStat
-      value={10000}
-      label="Total Downloads"
-      animated
-      size="lg"
-    />
-  )
-}
-```
-
-### Em Header
-
-```tsx
-function HeaderStats() {
-  return (
-    <header className="flex items-center justify-between p-4 border-b">
-      <h1 className="text-xl font-bold">Dashboard</h1>
-      <div className="flex gap-6">
-        <SingleStat
-          variant="inline"
-          size="xs"
-          value={12}
-          label="Notifications"
-        />
-        <SingleStat
-          variant="inline"
-          size="xs"
-          value={3}
-          label="Tasks"
-        />
-      </div>
-    </header>
-  )
-}
-```
-
-### Implementacao
-
-```tsx
-import { cn } from '@/lib/utils'
-import { Skeleton } from '@etus/ui'
-
-const sizeClasses = {
-  xs: 'text-lg',
-  sm: 'text-xl',
-  md: 'text-2xl',
-  lg: 'text-4xl',
-  xl: 'text-6xl',
-}
-
-interface SingleStatProps {
-  value: string | number
-  label?: string
-  variant?: 'default' | 'inline' | 'compact'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  prefix?: string
-  suffix?: string
-  loading?: boolean
-  className?: string
-}
-
-function SingleStat({
-  value,
-  label,
-  variant = 'default',
-  size = 'md',
-  prefix,
-  suffix,
-  loading,
-  className,
-}: SingleStatProps) {
-  if (loading) {
-    return (
-      <div className={cn('space-y-1', className)}>
-        {label && <Skeleton className="h-4 w-20" />}
-        <Skeleton className={cn('h-8 w-24', sizeClasses[size])} />
-      </div>
-    )
-  }
-
-  const formattedValue = typeof value === 'number'
-    ? value.toLocaleString()
-    : value
-
-  if (variant === 'compact') {
-    return (
-      <span className={cn('font-bold tabular-nums', sizeClasses[size], className)}>
-        {prefix}{formattedValue}{suffix}
-      </span>
-    )
-  }
-
-  if (variant === 'inline') {
-    return (
-      <div className={cn('flex items-baseline gap-2', className)}>
-        <span className={cn('font-bold tabular-nums', sizeClasses[size])}>
-          {prefix}{formattedValue}{suffix}
-        </span>
-        {label && (
-          <span className="text-sm text-muted-foreground">{label}</span>
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn('space-y-1', className)}>
-      {label && (
-        <p className="text-sm font-medium text-muted-foreground">{label}</p>
-      )}
-      <p className={cn('font-bold tabular-nums', sizeClasses[size])}>
-        {prefix}{formattedValue}{suffix}
-      </p>
-    </div>
-  )
-}
-
-export { SingleStat }
-```
-
-### Contador Animado (Hook)
-
-```tsx
-import { useEffect, useState } from 'react'
-
-function useAnimatedCounter(end: number, duration = 1000) {
-  const [count, setCount] = useState(0)
-
-  useEffect(() => {
-    let startTime: number
-    let animationFrame: number
-
-    const animate = (timestamp: number) => {
-      if (!startTime) startTime = timestamp
-      const progress = Math.min((timestamp - startTime) / duration, 1)
-
-      setCount(Math.floor(progress * end))
-
-      if (progress < 1) {
-        animationFrame = requestAnimationFrame(animate)
-      }
-    }
-
-    animationFrame = requestAnimationFrame(animate)
-
-    return () => cancelAnimationFrame(animationFrame)
-  }, [end, duration])
-
-  return count
-}
-```
-
-## Acessibilidade (A11y)
-
-### ARIA
-- Valor formatado para screen readers
-- Label associado ao valor
-
-```tsx
-<div role="group" aria-label={label}>
-  <span aria-hidden="true">{prefix}</span>
-  <span>{formattedValue}</span>
-  <span aria-hidden="true">{suffix}</span>
-</div>
-```
-
-## Testes
-
-```typescript
-import { render, screen } from '@testing-library/react'
-import { SingleStat } from './SingleStat'
-
-describe('SingleStat', () => {
-  it('renders value and label', () => {
-    render(<SingleStat value={100} label="Users" />)
-
-    expect(screen.getByText('100')).toBeInTheDocument()
-    expect(screen.getByText('Users')).toBeInTheDocument()
-  })
-
-  it('formats numbers with locale', () => {
-    render(<SingleStat value={1234567} />)
-    expect(screen.getByText('1,234,567')).toBeInTheDocument()
-  })
-
-  it('renders prefix and suffix', () => {
-    render(<SingleStat value={50} prefix="$" suffix="%" />)
-    expect(screen.getByText(/\$50%/)).toBeInTheDocument()
-  })
-
-  it('applies size classes', () => {
-    const { container } = render(<SingleStat value={1} size="lg" />)
-    expect(container.querySelector('.text-4xl')).toBeInTheDocument()
-  })
-})
-```
-
-## Referências
-
-- [Ant Design Statistic](https://ant.design/components/statistic)
-- [Tremor Metric](https://www.tremor.so/docs/components/metric)