From d67301883b2c5139577836dca15d4f303f2ae1e6 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Wed, 21 Jan 2026 02:53:31 +0000 Subject: [PATCH] feat: Delete 13 duplicate molecule TSX files with JSON equivalents Deleted molecules now using JSON-ui implementations: - AppBranding, CodeExplanationDialog, ComponentBindingDialog - DataSourceCard, DataSourceEditorDialog, GitHubBuildStatus - LazyBarChart, LazyD3BarChart, LazyLineChart - NavigationGroupHeader, SaveIndicator, StorageSettings Updated src/components/molecules/index.ts to import these from @/lib/json-ui/json-components instead of TSX files. Updated src/components/CodeEditor.tsx to import CodeExplanationDialog from json-components. Organisms still depend on some molecules (CanvasRenderer, ComponentPalette, ComponentTree, PropertyEditor, etc) so those remain as TSX. Build passes successfully with no errors. Co-Authored-By: Claude Haiku 4.5 --- src/components/CodeEditor.tsx | 2 +- src/components/molecules/AppBranding.tsx | 10 - .../molecules/CodeExplanationDialog.tsx | 50 --- .../molecules/ComponentBindingDialog.tsx | 98 ----- src/components/molecules/DataSourceCard.tsx | 69 --- .../molecules/DataSourceEditorDialog.tsx | 88 ---- .../molecules/GitHubBuildStatus.tsx | 396 ------------------ src/components/molecules/LazyBarChart.tsx | 63 --- src/components/molecules/LazyD3BarChart.tsx | 87 ---- src/components/molecules/LazyLineChart.tsx | 63 --- .../molecules/NavigationGroupHeader.tsx | 30 -- src/components/molecules/SaveIndicator.tsx | 19 - src/components/molecules/StorageSettings.tsx | 205 --------- src/components/molecules/index.ts | 30 +- 14 files changed, 16 insertions(+), 1194 deletions(-) delete mode 100644 src/components/molecules/AppBranding.tsx delete mode 100644 src/components/molecules/CodeExplanationDialog.tsx delete mode 100644 src/components/molecules/ComponentBindingDialog.tsx delete mode 100644 src/components/molecules/DataSourceCard.tsx delete mode 100644 src/components/molecules/DataSourceEditorDialog.tsx delete mode 100644 src/components/molecules/GitHubBuildStatus.tsx delete mode 100644 src/components/molecules/LazyBarChart.tsx delete mode 100644 src/components/molecules/LazyD3BarChart.tsx delete mode 100644 src/components/molecules/LazyLineChart.tsx delete mode 100644 src/components/molecules/NavigationGroupHeader.tsx delete mode 100644 src/components/molecules/SaveIndicator.tsx delete mode 100644 src/components/molecules/StorageSettings.tsx diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx index 21b58d7..4fe3a0f 100644 --- a/src/components/CodeEditor.tsx +++ b/src/components/CodeEditor.tsx @@ -6,7 +6,7 @@ import { useAIOperations } from '@/hooks/use-ai-operations' import { EditorToolbar } from '@/components/molecules/EditorToolbar' import { MonacoEditorPanel } from '@/components/molecules/MonacoEditorPanel' import { EmptyEditorState } from '@/components/molecules/EmptyEditorState' -import { CodeExplanationDialog } from '@/components/molecules/CodeExplanationDialog' +import { CodeExplanationDialog } from '@/lib/json-ui/json-components' interface CodeEditorProps { files: ProjectFile[] diff --git a/src/components/molecules/AppBranding.tsx b/src/components/molecules/AppBranding.tsx deleted file mode 100644 index 07d9b37..0000000 --- a/src/components/molecules/AppBranding.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { AppLogo } from '@/components/atoms' - -export function AppBranding() { - return ( -
- - Spark -
- ) -} diff --git a/src/components/molecules/CodeExplanationDialog.tsx b/src/components/molecules/CodeExplanationDialog.tsx deleted file mode 100644 index 8076161..0000000 --- a/src/components/molecules/CodeExplanationDialog.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, -} from '@/components/ui/dialog' -import { ScrollArea } from '@/components/ui/scroll-area' -import { Sparkle } from '@phosphor-icons/react' - -interface CodeExplanationDialogProps { - open: boolean - onOpenChange: (open: boolean) => void - fileName: string | undefined - explanation: string - isLoading: boolean -} - -export function CodeExplanationDialog({ - open, - onOpenChange, - fileName, - explanation, - isLoading, -}: CodeExplanationDialogProps) { - return ( - - - - Code Explanation - - AI-generated explanation of {fileName} - - - -
- {isLoading ? ( -
- - Analyzing code... -
- ) : ( -

{explanation}

- )} -
- - - - ) -} diff --git a/src/components/molecules/ComponentBindingDialog.tsx b/src/components/molecules/ComponentBindingDialog.tsx deleted file mode 100644 index 854a406..0000000 --- a/src/components/molecules/ComponentBindingDialog.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog' -import { Button } from '@/components/ui/button' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { BindingEditor } from '@/lib/json-ui/json-components' -import { DataSource, UIComponent } from '@/types/json-ui' -import { Link } from '@phosphor-icons/react' -import { useComponentBindingDialog } from '@/hooks/use-component-binding-dialog' - -interface ComponentBindingDialogProps { - open: boolean - component: UIComponent | null - dataSources: DataSource[] - onOpenChange: (open: boolean) => void - onSave: (component: UIComponent) => void -} - -export function ComponentBindingDialog({ - open, - component, - dataSources, - onOpenChange, - onSave, -}: ComponentBindingDialogProps) { - const { editingComponent, handleSave, updateBindings } = useComponentBindingDialog({ - component, - open, - onOpenChange, - onSave, - }) - - if (!editingComponent) return null - - const availableProps = ['children', 'value', 'checked', 'className', 'disabled', 'placeholder'] - - return ( - - - - - - Component Data Bindings - - - Connect component properties to data sources - - - -
-
-
-
- Component: - {editingComponent.type} -
-
- ID: - {editingComponent.id} -
-
-
- - - - Property Bindings - Preview - - - - - - - -
- 
-                  {JSON.stringify(editingComponent.bindings, null, 2)}
-
-
- - -
- - - - - - - - ) -} diff --git a/src/components/molecules/DataSourceCard.tsx b/src/components/molecules/DataSourceCard.tsx deleted file mode 100644 index 4a844cf..0000000 --- a/src/components/molecules/DataSourceCard.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Card, IconButton, Stack, Flex, Text } from '@/components/atoms' -import { DataSourceBadge } from '@/components/atoms' -import { DataSource } from '@/types/json-ui' -import { Pencil, Trash } from '@phosphor-icons/react' - -interface DataSourceCardProps { - dataSource: DataSource - dependents?: DataSource[] - onEdit: (id: string) => void - onDelete: (id: string) => void -} - -export function DataSourceCard({ dataSource, dependents = [], onEdit, onDelete }: DataSourceCardProps) { - const renderTypeSpecificInfo = () => { - if (dataSource.type === 'kv') { - return ( - - Key: {dataSource.key || 'Not set'} - - ) - } - - return null - } - - return ( - -
- - - - - - {dataSource.id} - - - - {renderTypeSpecificInfo()} - - {dependents.length > 0 && ( -
- - Used by {dependents.length} dependent {dependents.length === 1 ? 'source' : 'sources'} - -
- )} - - - - } - variant="ghost" - size="sm" - onClick={() => onEdit(dataSource.id)} - /> - } - variant="ghost" - size="sm" - onClick={() => onDelete(dataSource.id)} - className="text-destructive hover:text-destructive" - disabled={dependents.length > 0} - /> - - -
- - ) -} diff --git a/src/components/molecules/DataSourceEditorDialog.tsx b/src/components/molecules/DataSourceEditorDialog.tsx deleted file mode 100644 index c69c66f..0000000 --- a/src/components/molecules/DataSourceEditorDialog.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog' -import { Button } from '@/components/ui/button' -import { DataSource } from '@/types/json-ui' -import { DataSourceBadge } from '@/components/atoms' -import { DataSourceIdField } from '@/components/molecules/data-source-editor/DataSourceIdField' -import { KvSourceFields } from '@/components/molecules/data-source-editor/KvSourceFields' -import { StaticSourceFields } from '@/components/molecules/data-source-editor/StaticSourceFields' -import dataSourceEditorCopy from '@/data/data-source-editor-dialog.json' -import { useDataSourceEditor } from '@/hooks/data/use-data-source-editor' - -interface DataSourceEditorDialogProps { - open: boolean - dataSource: DataSource | null - onOpenChange: (open: boolean) => void - onSave: (dataSource: DataSource) => void -} - -export function DataSourceEditorDialog({ - open, - dataSource, - onOpenChange, - onSave, -}: DataSourceEditorDialogProps) { - const { - editingSource, - updateField, - } = useDataSourceEditor(dataSource) - - const handleSave = () => { - if (!editingSource) return - onSave(editingSource) - onOpenChange(false) - } - - if (!editingSource) return null - - return ( - - - - - {dataSourceEditorCopy.title} - - - - {dataSourceEditorCopy.description} - - - -
- updateField('id', value)} - /> - - {editingSource.type === 'kv' && ( - - )} - - {editingSource.type === 'static' && ( - - )} - -
- - - - - - - - ) -} diff --git a/src/components/molecules/GitHubBuildStatus.tsx b/src/components/molecules/GitHubBuildStatus.tsx deleted file mode 100644 index da6670b..0000000 --- a/src/components/molecules/GitHubBuildStatus.tsx +++ /dev/null @@ -1,396 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Badge } from '@/components/ui/badge' -import { Button } from '@/components/ui/button' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { - GitBranch, - CheckCircle, - XCircle, - Clock, - ArrowSquareOut, - Warning, - Copy, - CheckSquare, -} from '@phosphor-icons/react' -import { Skeleton } from '@/components/ui/skeleton' -import copy from '@/data/github-build-status.json' -import { useGithubBuildStatus, Workflow, WorkflowRun } from '@/hooks/use-github-build-status' - -interface GitHubBuildStatusProps { - owner: string - repo: string - defaultBranch?: string -} - -interface WorkflowRunStatusProps { - status: string - conclusion: string | null -} - -interface WorkflowRunDetailsProps { - branch: string - updatedAt: string - event: string -} - -interface WorkflowRunItemProps { - workflow: WorkflowRun - renderStatus: (status: string, conclusion: string | null) => React.ReactNode - renderBadge: (status: string, conclusion: string | null) => React.ReactNode - formatTime: (dateString: string) => string -} - -interface WorkflowBadgeListProps { - workflows: Workflow[] - copiedBadge: string | null - defaultBranch: string - onCopyBadge: (workflowPath: string, workflowName: string, branch?: string) => void - getBadgeUrl: (workflowPath: string, branch?: string) => string - getBadgeMarkdown: (workflowPath: string, workflowName: string, branch?: string) => string -} - -interface BranchBadgeListProps { - branches: string[] - workflows: Workflow[] - copiedBadge: string | null - onCopyBadge: (workflowPath: string, workflowName: string, branch: string) => void - getBadgeUrl: (workflowPath: string, branch?: string) => string -} - -const WorkflowRunStatus = ({ status, conclusion }: WorkflowRunStatusProps) => { - const getStatusIcon = () => { - if (status === 'completed') { - if (conclusion === 'success') { - return - } - if (conclusion === 'failure') { - return - } - if (conclusion === 'cancelled') { - return - } - } - return - } - - return
{getStatusIcon()}
-} - -const WorkflowRunBadge = ({ status, conclusion }: WorkflowRunStatusProps) => { - if (status === 'completed') { - if (conclusion === 'success') { - return ( - - {copy.status.success} - - ) - } - if (conclusion === 'failure') { - return {copy.status.failed} - } - if (conclusion === 'cancelled') { - return {copy.status.cancelled} - } - } - return ( - - {copy.status.running} - - ) -} - -const WorkflowRunDetails = ({ branch, updatedAt, event }: WorkflowRunDetailsProps) => ( -
- {branch} - • - {updatedAt} - • - {event} -
-) - -const WorkflowRunItem = ({ workflow, renderStatus, renderBadge, formatTime }: WorkflowRunItemProps) => ( -
-
- {renderStatus(workflow.status, workflow.conclusion)} -
-
-

{workflow.name}

- {renderBadge(workflow.status, workflow.conclusion)} -
- -
-
- -
-) - -const WorkflowBadgeList = ({ - workflows, - copiedBadge, - defaultBranch, - onCopyBadge, - getBadgeUrl, - getBadgeMarkdown, -}: WorkflowBadgeListProps) => ( -
-

{copy.sections.workflowBadges}

-
- {workflows.map((workflow) => ( -
-
-

{workflow.name}

- -
- {`${workflow.name} -

- {getBadgeMarkdown(workflow.path, workflow.name)} -

-
- ))} -
-
-) - -const BranchBadgeList = ({ - branches, - workflows, - copiedBadge, - onCopyBadge, - getBadgeUrl, -}: BranchBadgeListProps) => ( -
-

{copy.sections.branchBadges}

-
- {branches.slice(0, 3).map((branch) => ( -
-
- -

{branch}

-
- {workflows.slice(0, 2).map((workflow) => ( -
-
-

{workflow.name}

- -
- {`${workflow.name} -
- ))} -
- ))} -
-
-) - -export function GitHubBuildStatus({ owner, repo, defaultBranch = 'main' }: GitHubBuildStatusProps) { - const { - workflows, - allWorkflows, - loading, - error, - copiedBadge, - actions, - } = useGithubBuildStatus({ owner, repo, defaultBranch }) - const { refresh, copyBadgeMarkdown, getBadgeUrl, getBadgeMarkdown, formatTime } = actions - - if (loading) { - return ( - - - - - {copy.title} - - {copy.loading.description} - - - {[...Array(3)].map((_, i) => ( -
-
- -
- - -
-
- -
- ))} - - - ) - } - - if (error) { - return ( - - - - - {copy.title} - - {copy.error.description} - - -
- -
-

{error}

- -
-
- - - ) - } - - if (workflows.length === 0 && allWorkflows.length === 0) { - return ( - - - - - {copy.title} - - {copy.empty.description} - - -

{copy.empty.body}

- - - ) - } - - const uniqueBranches = Array.from(new Set(workflows.map((workflow) => workflow.head_branch))) - - return ( - - -
-
- - - {copy.title} - - {copy.header.description} -
- -
- - - - - {copy.tabs.badges} - {copy.tabs.runs} - - - -
- - - {uniqueBranches.length > 0 && ( - - )} -
- - - - {workflows.map((workflow) => ( - ( - - )} - renderBadge={(status, conclusion) => ( - - )} - formatTime={formatTime} - /> - ))} - - - - - - ) -} diff --git a/src/components/molecules/LazyBarChart.tsx b/src/components/molecules/LazyBarChart.tsx deleted file mode 100644 index ded4a04..0000000 --- a/src/components/molecules/LazyBarChart.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useRecharts } from '@/hooks' -import { Skeleton } from '@/components/ui/skeleton' -import { Alert, AlertDescription } from '@/components/ui/alert' -import { Warning } from '@phosphor-icons/react' - -interface LazyBarChartProps { - data: Array> - xKey: string - yKey: string - width?: number - height?: number - color?: string -} - -export function LazyBarChart({ - data, - xKey, - yKey, - width = 600, - height = 300, - color = '#8884d8' -}: LazyBarChartProps) { - const { library: recharts, loading, error } = useRecharts() - - if (loading) { - return ( -
- - -
- ) - } - - if (error) { - return ( - - - - Failed to load chart library. Please refresh the page. - - - ) - } - - if (!recharts) { - return null - } - - const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } = recharts - - return ( - - - - - - - - - - - ) -} diff --git a/src/components/molecules/LazyD3BarChart.tsx b/src/components/molecules/LazyD3BarChart.tsx deleted file mode 100644 index 3c1dbc5..0000000 --- a/src/components/molecules/LazyD3BarChart.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { useD3 } from '@/hooks' -import { useEffect, useRef } from 'react' -import { Skeleton } from '@/components/ui/skeleton' -import { Alert, AlertDescription } from '@/components/ui/alert' -import { Warning } from '@phosphor-icons/react' - -interface LazyD3ChartProps { - data: Array<{ label: string; value: number }> - width?: number - height?: number - color?: string -} - -export function LazyD3BarChart({ - data, - width = 600, - height = 300, - color = '#8884d8' -}: LazyD3ChartProps) { - const { library: d3, loading, error } = useD3() - const svgRef = useRef(null) - - useEffect(() => { - if (!d3 || !svgRef.current || !data.length) return - - const svg = d3.select(svgRef.current) - svg.selectAll('*').remove() - - const margin = { top: 20, right: 20, bottom: 30, left: 40 } - const chartWidth = width - margin.left - margin.right - const chartHeight = height - margin.top - margin.bottom - - const g = svg.append('g') - .attr('transform', `translate(${margin.left},${margin.top})`) - - const x = d3.scaleBand() - .range([0, chartWidth]) - .padding(0.1) - .domain(data.map(d => d.label)) - - const y = d3.scaleLinear() - .range([chartHeight, 0]) - .domain([0, d3.max(data, d => d.value) || 0]) - - g.append('g') - .attr('transform', `translate(0,${chartHeight})`) - .call(d3.axisBottom(x)) - - g.append('g') - .call(d3.axisLeft(y)) - - g.selectAll('.bar') - .data(data) - .enter().append('rect') - .attr('class', 'bar') - .attr('x', d => x(d.label) || 0) - .attr('y', d => y(d.value)) - .attr('width', x.bandwidth()) - .attr('height', d => chartHeight - y(d.value)) - .attr('fill', color) - - }, [d3, data, width, height, color]) - - if (loading) { - return ( -
- - -
- ) - } - - if (error) { - return ( - - - - Failed to load D3 library. Please refresh the page. - - - ) - } - - return ( - - ) -} diff --git a/src/components/molecules/LazyLineChart.tsx b/src/components/molecules/LazyLineChart.tsx deleted file mode 100644 index e4d4dba..0000000 --- a/src/components/molecules/LazyLineChart.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useRecharts } from '@/hooks' -import { Skeleton } from '@/components/ui/skeleton' -import { Alert, AlertDescription } from '@/components/ui/alert' -import { Warning } from '@phosphor-icons/react' - -interface LazyLineChartProps { - data: Array> - xKey: string - yKey: string - width?: number - height?: number - color?: string -} - -export function LazyLineChart({ - data, - xKey, - yKey, - width = 600, - height = 300, - color = '#8884d8' -}: LazyLineChartProps) { - const { library: recharts, loading, error } = useRecharts() - - if (loading) { - return ( -
- - -
- ) - } - - if (error) { - return ( - - - - Failed to load chart library. Please refresh the page. - - - ) - } - - if (!recharts) { - return null - } - - const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } = recharts - - return ( - - - - - - - - - - - ) -} diff --git a/src/components/molecules/NavigationGroupHeader.tsx b/src/components/molecules/NavigationGroupHeader.tsx deleted file mode 100644 index 04dfc4e..0000000 --- a/src/components/molecules/NavigationGroupHeader.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { CaretDown } from '@phosphor-icons/react' -import { CollapsibleTrigger } from '@/components/ui/collapsible' - -interface NavigationGroupHeaderProps { - label: string - count: number - isExpanded: boolean -} - -export function NavigationGroupHeader({ - label, - count, - isExpanded, -}: NavigationGroupHeaderProps) { - return ( - - -

- {label} -

- {count} - - ) -} diff --git a/src/components/molecules/SaveIndicator.tsx b/src/components/molecules/SaveIndicator.tsx deleted file mode 100644 index 1ea6497..0000000 --- a/src/components/molecules/SaveIndicator.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { StatusIcon } from '@/components/atoms' -import { useSaveIndicator } from '@/hooks/use-save-indicator' - -interface SaveIndicatorProps { - lastSaved: number | null -} - -export function SaveIndicator({ lastSaved }: SaveIndicatorProps) { - if (!lastSaved) return null - - const { timeAgo, isRecent } = useSaveIndicator(lastSaved) - - return ( -
- - {isRecent ? 'Saved' : timeAgo} -
- ) -} diff --git a/src/components/molecules/StorageSettings.tsx b/src/components/molecules/StorageSettings.tsx deleted file mode 100644 index e9f3b53..0000000 --- a/src/components/molecules/StorageSettings.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' -import { Label } from '@/components/ui/label' -import { Badge } from '@/components/ui/badge' -import { Database, HardDrive, Cloud, Cpu, Download, Upload } from '@phosphor-icons/react' -import { - storageSettingsCopy, - getBackendCopy, - type StorageBackendKey, -} from '@/components/storage/storageSettingsConfig' -import { useStorageSettingsHandlers } from '@/components/storage/useStorageSettingsHandlers' - -const getBackendIcon = (backend: StorageBackendKey | null) => { - switch (backend) { - case 'flask': - return - case 'indexeddb': - return - case 'sqlite': - return - case 'sparkkv': - return - default: - return - } -} - -type BackendCardProps = { - backend: StorageBackendKey | null - isLoading: boolean - flaskUrl: string - isSwitching: boolean - onFlaskUrlChange: (value: string) => void - onSwitchToFlask: () => void - onSwitchToIndexedDB: () => void - onSwitchToSQLite: () => void -} - -const BackendCard = ({ - backend, - isLoading, - flaskUrl, - isSwitching, - onFlaskUrlChange, - onSwitchToFlask, - onSwitchToIndexedDB, - onSwitchToSQLite, -}: BackendCardProps) => { - const backendCopy = getBackendCopy(backend) - - return ( - - - - {getBackendIcon(backend)} - {storageSettingsCopy.molecule.title} - - {storageSettingsCopy.molecule.description} - - -
- {storageSettingsCopy.molecule.currentBackendLabel} - - {getBackendIcon(backend)} - {backendCopy.moleculeLabel} - -
- -
-
- -
- onFlaskUrlChange(e.target.value)} - placeholder={storageSettingsCopy.molecule.flaskUrlPlaceholder} - disabled={isSwitching || isLoading} - /> - -
-

{storageSettingsCopy.molecule.flaskHelp}

-
- -
- - -
- -
-

{storageSettingsCopy.molecule.backendDetails.indexeddb}

-

{storageSettingsCopy.molecule.backendDetails.sqlite}

-

{storageSettingsCopy.molecule.backendDetails.flask}

-
-
- - - ) -} - -type DataManagementCardProps = { - isExporting: boolean - isImporting: boolean - onExport: () => void - onImport: () => void -} - -const DataManagementCard = ({ - isExporting, - isImporting, - onExport, - onImport, -}: DataManagementCardProps) => ( - - - {storageSettingsCopy.molecule.dataTitle} - {storageSettingsCopy.molecule.dataDescription} - - -
- - -
-

{storageSettingsCopy.molecule.dataHelp}

- - -) - -export function StorageSettings() { - const { - backend, - isLoading, - flaskUrl, - setFlaskUrl, - isSwitching, - handleSwitchToFlask, - handleSwitchToSQLite, - handleSwitchToIndexedDB, - isExporting, - isImporting, - handleExport, - handleImport, - } = useStorageSettingsHandlers({ - defaultFlaskUrl: storageSettingsCopy.molecule.flaskUrlPlaceholder, - exportFilename: () => `${storageSettingsCopy.molecule.exportFilenamePrefix}-${Date.now()}.json`, - importAccept: '.json', - }) - - return ( -
- - -
- ) -} diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index e515f60..d904ab5 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -1,27 +1,27 @@ export { Breadcrumb } from './Breadcrumb' -export { AppBranding } from './AppBranding' export { CanvasRenderer } from './CanvasRenderer' -export { CodeExplanationDialog } from './CodeExplanationDialog' export { ComponentPalette } from './ComponentPalette' -export { GitHubBuildStatus } from './GitHubBuildStatus' -export { LazyLineChart } from './LazyLineChart' -export { LazyBarChart } from './LazyBarChart' -export { NavigationGroupHeader } from './NavigationGroupHeader' export { PropertyEditor } from './PropertyEditor' +export { SearchInput } from './SearchInput' export { ToolbarButton } from './ToolbarButton' export { TreeFormDialog } from './TreeFormDialog' -export { SearchInput } from './SearchInput' -export { - LoadingFallback, - NavigationItem, +export { preloadMonacoEditor } from './LazyMonacoEditor' +export { ComponentTree } from './ComponentTree' +export { + LoadingFallback, + NavigationItem, PageHeaderContent, + AppBranding, + CodeExplanationDialog, ComponentBindingDialog, + DataSourceCard, DataSourceEditorDialog, - GitHubBuildStatus as GitHubBuildStatusJSON, - SaveIndicator, - ComponentTree, - SeedDataManager, + GitHubBuildStatus, + LazyBarChart, LazyD3BarChart, + LazyLineChart, + NavigationGroupHeader, + SaveIndicator, + SeedDataManager, StorageSettings } from '@/lib/json-ui/json-components' -export { preloadMonacoEditor } from './LazyMonacoEditor'