@izumisy-tailor/tailor-data-viewer 0.1.20 → 0.1.22

package/src/component/contexts/data-viewer-context.tsx

@@ -0,0 +1,244 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  type ReactNode,
+} from "react";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../../generator/metadata-generator";
+import { useColumnState } from "../hooks/use-column-state";
+import type { SearchFilters } from "../types";
+
+/**
+ * Helper type to extract field names from a table in metadata
+ * Supports both `as const` metadata (literal types) and regular metadata (string type)
+ */
+type ExtractFieldNames<
+  TMetadata extends TableMetadataMap,
+  TTableName extends keyof TMetadata,
+> = TMetadata[TTableName] extends { fields: readonly { name: infer TName }[] }
+  ? TName extends string
+    ? TName
+    : string
+  : string;
+
+/**
+ * Helper type to extract relation field names from a table in metadata
+ * Supports both `as const` metadata (literal types) and regular metadata (string type)
+ */
+type ExtractRelationNames<
+  TMetadata extends TableMetadataMap,
+  TTableName extends keyof TMetadata,
+> = TMetadata[TTableName] extends {
+  relations: readonly { fieldName: infer TName }[];
+}
+  ? TName extends string
+    ? TName
+    : string
+  : string;
+
+/**
+ * Helper type to extract expanded relation fields configuration
+ * Maps relation names to arrays of field names from related tables
+ */
+type ExtractExpandedRelationFields<
+  TMetadata extends TableMetadataMap,
+  TTableName extends keyof TMetadata,
+> = TMetadata[TTableName] extends {
+  relations: readonly {
+    fieldName: infer TFieldName;
+    targetTable: infer TTargetTable;
+  }[];
+}
+  ? {
+      [K in TFieldName & string]?: TTargetTable extends keyof TMetadata
+        ? ExtractFieldNames<TMetadata, TTargetTable & keyof TMetadata>[]
+        : string[];
+    }
+  : Record<string, string[]>;
+
+/**
+ * DataViewer context value interface
+ * Contains metadata, column state, filters, and actions
+ */
+export interface DataViewerContextValue {
+  // Metadata
+  tableMetadata: TableMetadata | null;
+  metadata: TableMetadataMap;
+  appUri: string;
+
+  // Column state
+  selectedFields: string[];
+  toggleField: (fieldName: string) => void;
+  selectAllFields: () => void;
+  deselectAllFields: () => void;
+  selectedRelations: string[];
+  toggleRelation: (fieldName: string) => void;
+  expandedRelationFields: ExpandedRelationFields;
+  toggleExpandedRelationField: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => void;
+  isExpandedRelationFieldSelected: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => boolean;
+  setColumns: (fields: string[], relations: string[]) => void;
+
+  // Filters
+  filters: SearchFilters;
+  setFilters: (filters: SearchFilters) => void;
+
+  // Actions (set by TableDataProvider)
+  refetch: () => Promise<void>;
+
+  // Internal setters for TableDataProvider
+  _setRefetch: (fn: () => Promise<void>) => void;
+}
+
+const DataViewerContext = createContext<DataViewerContextValue | null>(null);
+
+/**
+ * Initial data for DataViewer (type-safe version)
+ * When metadata is provided with `as const`, field and relation names are type-checked
+ */
+export interface DataViewerInitialData<
+  TMetadata extends TableMetadataMap = TableMetadataMap,
+  TTableName extends keyof TMetadata = keyof TMetadata,
+> {
+  /** Initial filters */
+  filters?: SearchFilters;
+  /** Initial selected fields (type-safe when metadata is `as const`) */
+  selectedFields?: ExtractFieldNames<TMetadata, TTableName>[];
+  /** Initial selected relations (type-safe when metadata is `as const`) */
+  selectedRelations?: ExtractRelationNames<TMetadata, TTableName>[];
+  /** Initial expanded relation fields (type-safe when metadata is `as const`) */
+  expandedRelationFields?: ExtractExpandedRelationFields<TMetadata, TTableName>;
+}
+
+/**
+ * Props for DataViewerProvider (type-safe version)
+ * When metadata is provided with `as const`, tableName and initialData are type-checked
+ */
+export interface DataViewerProviderProps<
+  TMetadata extends TableMetadataMap = TableMetadataMap,
+  TTableName extends keyof TMetadata & string = keyof TMetadata & string,
+> {
+  children: ReactNode;
+  /** Table name to display (type-safe when metadata is `as const`) */
+  tableName: TTableName;
+  /** All table metadata (generated from TailorDB schema) */
+  metadata: TMetadata;
+  /** App URI for GraphQL endpoint */
+  appUri: string;
+  /** Initial data for filters, selected fields, and relations (type-safe when metadata is `as const`) */
+  initialData?: DataViewerInitialData<TMetadata, TTableName>;
+}
+
+/**
+ * DataViewer context provider
+ * Provides metadata, column state, filters, and actions to child components
+ */
+export function DataViewerProvider<
+  TMetadata extends TableMetadataMap,
+  TTableName extends keyof TMetadata & string,
+>({
+  children,
+  tableName,
+  metadata,
+  appUri,
+  initialData,
+}: DataViewerProviderProps<TMetadata, TTableName>) {
+  // Get table metadata from the map
+  const tableMetadata = metadata[tableName] ?? null;
+
+  // Filters state
+  const [filters, setFilters] = useState<SearchFilters>(
+    initialData?.filters ?? [],
+  );
+
+  // Column state
+  const columnState = useColumnState(
+    tableMetadata?.fields ?? [],
+    tableMetadata?.relations,
+    initialData?.selectedFields as string[] | undefined,
+    initialData?.selectedRelations as string[] | undefined,
+    initialData?.expandedRelationFields as ExpandedRelationFields | undefined,
+  );
+
+  // Action stubs (will be set by TableDataProvider)
+  const [refetch, setRefetchFn] = useState<() => Promise<void>>(
+    () => async () => {},
+  );
+
+  const _setRefetch = useCallback((fn: () => Promise<void>) => {
+    setRefetchFn(() => fn);
+  }, []);
+
+  const value = useMemo<DataViewerContextValue>(
+    () => ({
+      tableMetadata,
+      metadata,
+      appUri,
+      selectedFields: columnState.selectedFields,
+      toggleField: columnState.toggleField,
+      selectAllFields: columnState.selectAll,
+      deselectAllFields: columnState.deselectAll,
+      selectedRelations: columnState.selectedRelations,
+      toggleRelation: columnState.toggleRelation,
+      expandedRelationFields: columnState.expandedRelationFields,
+      toggleExpandedRelationField: columnState.toggleExpandedRelationField,
+      isExpandedRelationFieldSelected:
+        columnState.isExpandedRelationFieldSelected,
+      setColumns: columnState.setColumns,
+      filters,
+      setFilters,
+      refetch,
+      _setRefetch,
+    }),
+    [
+      tableMetadata,
+      metadata,
+      appUri,
+      columnState.selectedFields,
+      columnState.toggleField,
+      columnState.selectAll,
+      columnState.deselectAll,
+      columnState.selectedRelations,
+      columnState.toggleRelation,
+      columnState.expandedRelationFields,
+      columnState.toggleExpandedRelationField,
+      columnState.isExpandedRelationFieldSelected,
+      columnState.setColumns,
+      filters,
+      refetch,
+      _setRefetch,
+    ],
+  );
+
+  return (
+    <DataViewerContext.Provider value={value}>
+      {children}
+    </DataViewerContext.Provider>
+  );
+}
+
+/**
+ * Hook to access DataViewer context
+ * @throws Error if used outside DataViewerProvider
+ */
+export function useDataViewer(): DataViewerContextValue {
+  const context = useContext(DataViewerContext);
+  if (!context) {
+    throw new Error(
+      "useDataViewer must be used within DataViewer.Root. " +
+        "Wrap your component with <DataViewer.Root>.",
+    );
+  }
+  return context;
+}

package/src/component/contexts/index.ts

@@ -0,0 +1,19 @@
+export { DataViewerProvider, useDataViewer } from "./data-viewer-context";
+export type {
+  DataViewerContextValue,
+  DataViewerProviderProps,
+  DataViewerInitialData,
+} from "./data-viewer-context";
+
+export { TableDataProvider, useTableDataContext } from "./table-data-context";
+export type {
+  TableDataContextValue,
+  TableDataProviderProps,
+} from "./table-data-context";
+
+export { ToolbarProvider, useToolbar } from "./toolbar-context";
+export type {
+  ToolbarContextValue,
+  ToolbarProviderProps,
+  ActivePanel as ToolbarActivePanel,
+} from "./toolbar-context";

package/src/component/contexts/table-data-context.tsx

@@ -0,0 +1,114 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react";
+import {
+  useTableData,
+  type SortState,
+  type PaginationState,
+} from "../hooks/use-table-data";
+import { useDataViewer } from "./data-viewer-context";
+
+/**
+ * TableData context value interface
+ * Contains data fetching results, loading state, sort, and pagination
+ */
+export interface TableDataContextValue {
+  data: Record<string, unknown>[];
+  loading: boolean;
+  error: Error | null;
+  sortState: SortState | null;
+  setSort: (field: string) => void;
+  pagination: PaginationState;
+  hasPreviousPage: boolean;
+  nextPage: () => void;
+  previousPage: () => void;
+}
+
+const TableDataContext = createContext<TableDataContextValue | null>(null);
+
+export interface TableDataProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * TableData context provider
+ * Fetches data using DataViewerContext and provides data state to children
+ */
+export function TableDataProvider({ children }: TableDataProviderProps) {
+  const {
+    appUri,
+    tableMetadata,
+    metadata,
+    selectedFields,
+    selectedRelations,
+    expandedRelationFields,
+    filters,
+    _setRefetch,
+  } = useDataViewer();
+
+  // Fetch table data
+  const tableData = useTableData(
+    appUri,
+    tableMetadata,
+    selectedFields,
+    selectedRelations,
+    filters,
+    metadata,
+    expandedRelationFields,
+  );
+
+  // Register refetch action in DataViewerContext
+  useEffect(() => {
+    _setRefetch(tableData.refetch);
+  }, [_setRefetch, tableData.refetch]);
+
+  const value = useMemo<TableDataContextValue>(
+    () => ({
+      data: tableData.data,
+      loading: tableData.loading,
+      error: tableData.error,
+      sortState: tableData.sortState,
+      setSort: tableData.setSort,
+      pagination: tableData.pagination,
+      hasPreviousPage: tableData.hasPreviousPage,
+      nextPage: tableData.nextPage,
+      previousPage: tableData.previousPage,
+    }),
+    [
+      tableData.data,
+      tableData.loading,
+      tableData.error,
+      tableData.sortState,
+      tableData.setSort,
+      tableData.pagination,
+      tableData.hasPreviousPage,
+      tableData.nextPage,
+      tableData.previousPage,
+    ],
+  );
+
+  return (
+    <TableDataContext.Provider value={value}>
+      {children}
+    </TableDataContext.Provider>
+  );
+}
+
+/**
+ * Hook to access TableData context
+ * @throws Error if used outside TableDataProvider
+ */
+export function useTableDataContext(): TableDataContextValue {
+  const context = useContext(TableDataContext);
+  if (!context) {
+    throw new Error(
+      "useTableDataContext must be used within DataViewer.Root. " +
+        "Wrap your component with <DataViewer.Root>.",
+    );
+  }
+  return context;
+}

package/src/component/contexts/toolbar-context.tsx

@@ -0,0 +1,62 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  type ReactNode,
+} from "react";
+
+/**
+ * Active panel type - only one panel can be open at a time within a Toolbar
+ */
+export type ActivePanel = "column" | "search" | null;
+
+/**
+ * Toolbar context value interface
+ * Manages exclusive panel state within a toolbar
+ */
+export interface ToolbarContextValue {
+  activePanel: ActivePanel;
+  setActivePanel: (panel: ActivePanel) => void;
+}
+
+const ToolbarContext = createContext<ToolbarContextValue | null>(null);
+
+export interface ToolbarProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Toolbar context provider
+ * Manages exclusive panel open state (only one panel can be open at a time)
+ */
+export function ToolbarProvider({ children }: ToolbarProviderProps) {
+  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
+
+  const value = useMemo<ToolbarContextValue>(
+    () => ({
+      activePanel,
+      setActivePanel,
+    }),
+    [activePanel],
+  );
+
+  return (
+    <ToolbarContext.Provider value={value}>{children}</ToolbarContext.Provider>
+  );
+}
+
+/**
+ * Hook to access Toolbar context
+ * @throws Error if used outside ToolbarProvider
+ */
+export function useToolbar(): ToolbarContextValue {
+  const context = useContext(ToolbarContext);
+  if (!context) {
+    throw new Error(
+      "useToolbar must be used within DataViewer.Toolbar. " +
+        "Wrap your component with <DataViewer.Toolbar>.",
+    );
+  }
+  return context;
+}

package/src/component/csv-button.tsx

@@ -0,0 +1,79 @@
+import { useCallback } from "react";
+import { Download } from "lucide-react";
+import { Button } from "./ui/button";
+import { useDataViewer } from "./contexts";
+import { useTableDataContext } from "./contexts";
+import { formatFieldValue } from "../graphql/query-builder";
+import type { FieldMetadata } from "../generator/metadata-generator";
+
+/**
+ * CSV download button
+ * Must be used within DataViewer.Root and TableDataProvider context
+ * Contains CSV generation and download logic
+ */
+export function CsvButton() {
+  const { tableMetadata, selectedFields } = useDataViewer();
+  const { loading, data } = useTableDataContext();
+
+  const handleDownloadCsv = useCallback(() => {
+    if (!tableMetadata || data.length === 0) return;
+
+    const selectedFieldsMetadata = tableMetadata.fields.filter(
+      (f: FieldMetadata) => selectedFields.includes(f.name),
+    );
+
+    // Create CSV header
+    const headers = selectedFieldsMetadata.map((f: FieldMetadata) => f.name);
+
+    // Create CSV rows
+    const rows = data.map((row: Record<string, unknown>) =>
+      selectedFieldsMetadata.map((field: FieldMetadata) => {
+        const value = row[field.name];
+        const formattedValue = formatFieldValue(value, field);
+        // Escape double quotes and wrap in quotes if contains comma, newline, or quotes
+        const stringValue = String(formattedValue ?? "");
+        if (
+          stringValue.includes(",") ||
+          stringValue.includes("\n") ||
+          stringValue.includes('"')
+        ) {
+          return `"${stringValue.replace(/"/g, '""')}"`;
+        }
+        return stringValue;
+      }),
+    );
+
+    // Combine headers and rows
+    const csvContent = [
+      headers.join(","),
+      ...rows.map((r: string[]) => r.join(",")),
+    ].join("\n");
+
+    // Create and download file
+    const blob = new Blob(["\uFEFF" + csvContent], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${tableMetadata.name}_${new Date().toISOString().slice(0, 10)}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [tableMetadata, data, selectedFields]);
+
+  const csvDisabled = data.length === 0;
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleDownloadCsv}
+      disabled={loading || csvDisabled}
+    >
+      <Download className="size-4" />
+      CSV
+    </Button>
+  );
+}