Data

import { FullDataTable } from "@launchapp/design-system/blocks/data";import type { ColumnDef } from "@tanstack/react-table";interface User {  id: string;  name: string;  email: string;  role: string;  status: "active" | "inactive";}const columns: ColumnDef<User>[] = [  { accessorKey: "name", header: "Name" },  { accessorKey: "email", header: "Email" },  { accessorKey: "role", header: "Role" },  { accessorKey: "status", header: "Status" },];const data: User[] = [  { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "active" },  { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Member", status: "active" },  { id: "3", name: "Carol White", email: "carol@example.com", role: "Member", status: "inactive" },];export default function Page() {  return <FullDataTable columns={columns} data={data} searchColumn="name" />;}

import { KanbanBoard } from "@launchapp/design-system/blocks/data";const initialColumns = [  {    id: "todo",    title: "To Do",    cards: [      { id: "1", title: "Research competitors", badge: "Research" },      { id: "2", title: "Design wireframes", badge: "Design" },    ],  },  {    id: "in-progress",    title: "In Progress",    cards: [      { id: "3", title: "Build API endpoints", badge: "Engineering" },    ],  },  {    id: "done",    title: "Done",    cards: [      { id: "4", title: "Project kickoff", badge: "Planning" },    ],  },];export default function Page() {  return <KanbanBoard initialColumns={initialColumns} />;}

import { SearchableDataTable } from "@launchapp/design-system/blocks/data";import type { ColumnDef } from "@tanstack/react-table";interface Product {  id: string;  name: string;  category: string;  price: number;}const columns: ColumnDef<Product>[] = [  { accessorKey: "name", header: "Name" },  { accessorKey: "category", header: "Category" },  { accessorKey: "price", header: "Price" },];const data: Product[] = [  { id: "1", name: "Wireless Headphones", category: "Electronics", price: 99 },  { id: "2", name: "Running Shoes", category: "Sports", price: 75 },  { id: "3", name: "Coffee Maker", category: "Appliances", price: 49 },];export default function Page() {  return (    <SearchableDataTable      columns={columns}      data={data}      searchColumn="name"      searchPlaceholder="Search products..."    />  );}

import { Timeline } from "@launchapp/design-system/blocks/data";const items = [  {    id: "1",    title: "Project kickoff",    description: "Initial planning meeting with all stakeholders.",    date: "Jan 15, 2025",    status: "completed",  },  {    id: "2",    title: "Design phase",    description: "Created wireframes and design system.",    date: "Feb 1, 2025",    status: "completed",  },  {    id: "3",    title: "Development sprint",    description: "Building core features and API integration.",    date: "Mar 10, 2025",    status: "current",  },  {    id: "4",    title: "Launch",    description: "Public release and marketing campaign.",    date: "Apr 1, 2025",    status: "upcoming",  },];export default function Page() {  return <Timeline items={items} />;}

import { StatsCard } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <StatsCard      label="Total Revenue"      value="$45,231"      trend="up"      trendValue="+20.1% from last month"      sparklineData={[30, 40, 35, 50, 49, 60, 70]}    />  );}

import { MetricGrid } from "@launchapp/design-system/blocks/data";const metrics = [  { id: "revenue", label: "Revenue", value: "$45,231", trend: "up" as const, trendValue: "+20.1%" },  { id: "users", label: "Active Users", value: "2,350", trend: "up" as const, trendValue: "+15.3%" },  { id: "orders", label: "Orders", value: "1,247", trend: "down" as const, trendValue: "-4.2%" },  { id: "conversion", label: "Conversion", value: "3.24%", trend: "neutral" as const, trendValue: "0.0%" },];export default function Page() {  return <MetricGrid metrics={metrics} />;}

import { ActivityFeed } from "@launchapp/design-system/blocks/data";const items = [  { id: "1", user: { name: "Alice", initials: "AJ" }, action: "Created a project", timestamp: "2 min ago", actionType: "create" },  { id: "2", user: { name: "Bob", initials: "BS" }, action: "Merged a PR", timestamp: "1 hour ago", actionType: "merge" },];export default function Page() {  return <ActivityFeed items={items} />;}

import { EmptyState } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <EmptyState      title="No projects yet"      description="Get started by creating your first project."      action={<button type="button">Create project</button>}    />  );}

import { CalendarView } from "@launchapp/design-system/blocks/data";const events = [  { id: "1", date: "2024-01-15", title: "Team standup", color: "blue" },  { id: "2", date: "2024-01-20", title: "Product launch", color: "green" },];export default function Page() {  return <CalendarView events={events} onDateSelect={(date) => console.log("selected", date)} />;}

import { ChartCard } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <ChartCard      title="Revenue Over Time"      description="Monthly revenue for the past 6 months"      periods={["1W", "1M", "3M", "6M", "1Y"]}    >      <div className="h-48 flex items-center justify-center text-muted-foreground text-sm">        Chart goes here      </div>    </ChartCard>  );}

import { DataTrend } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <DataTrend      label="Monthly Active Users"      value={12450}      previousValue={10800}      format="number"      sparklineData={[8200, 9100, 10200, 10800, 11400, 12450]}    />  );}

import { EmptyStateCard } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <EmptyStateCard      title="No results found"      description="Try adjusting your search or filters to find what you're looking for."    />  );}

import { FilterBar } from "@launchapp/design-system/blocks/data";const filters = [  { id: "status", label: "Status", options: ["Active", "Inactive", "Pending"] },  { id: "role", label: "Role", options: ["Admin", "Member", "Viewer"] },];export default function Page() {  return (    <FilterBar      filters={filters}      onFilterChange={(id, values) => console.log("filter", id, values)}      onClearAll={() => console.log("clear all")}    />  );}

import { FunnelChartCard } from "@launchapp/design-system/blocks/data";const stages = [  { label: "Visitors", value: 10000 },  { label: "Sign-ups", value: 3500 },  { label: "Activated", value: 1200 },  { label: "Converted", value: 420 },];export default function Page() {  return <FunnelChartCard title="Conversion Funnel" stages={stages} />;}

import { GaugeCard } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <GaugeCard      title="System Health"      value={87}      unit="%"      threshold={{ warning: 60, critical: 30 }}    />  );}

import { KPIComparisonCard } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <KPIComparisonCard      title="Revenue"      current={{ value: 45231, label: "This Month", formatted: "$45,231" }}      previous={{ value: 37600, label: "Last Month", formatted: "$37,600" }}    />  );}

import { SparklineCard } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <SparklineCard      label="Weekly Signups"      value={342}      trend="up"      trendValue="+12%"      data={[180, 220, 195, 280, 310, 290, 342]}    />  );}

import { DataTableCard } from "@launchapp/design-system/blocks/data";import type { ColumnDef } from "@tanstack/react-table";const columns: ColumnDef<{ name: string; email: string; status: string }>[] = [  { accessorKey: "name", header: "Name" },  { accessorKey: "email", header: "Email" },  { accessorKey: "status", header: "Status" },];const data = [  { name: "Alice Johnson", email: "alice@example.com", status: "Active" },  { name: "Bob Smith", email: "bob@example.com", status: "Pending" },];export default function Page() {  return <DataTableCard title="Users" columns={columns} data={data} />;}

import { ColumnFilters } from "@launchapp/design-system/blocks/data";const filters = [  { id: "name", label: "Name", type: "text" as const },  { id: "status", label: "Status", type: "select" as const, options: ["active", "inactive"] },];export default function Page() {  return (    <ColumnFilters      filters={filters}      onFiltersChange={(values) => console.log("filters changed", values)}    />  );}

import { DataTableToolbar } from "@launchapp/design-system/blocks/data";export default function Page() {  return (    <DataTableToolbar      onSearch={(q) => console.log("search", q)}      onAddNew={() => console.log("add new")}      onExport={() => console.log("export")}    />  );}