metal-orm 1.0.8 → 1.0.9

package/playground/src/App.tsx

@@ -1,114 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { MantineProvider, AppShell, Burger, Group, Title, Text, ActionIcon, useMantineTheme } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { SCENARIOS, type Scenario } from './data/scenarios';
-import { PlaygroundApiService } from './services/PlaygroundApiService';
-import { ScenarioList } from './components/ScenarioList';
-import { QueryExecutor } from './components/QueryExecutor';
-import '@mantine/core/styles.css';
-import './App.css'; // Keeping for custom overrides if needed, but will likely remove
-
-function App() {
-    const [selectedScenario, setSelectedScenario] = useState<Scenario | null>(null);
-    const [apiReady, setApiReady] = useState(false);
-    const [statusMessage, setStatusMessage] = useState<string | null>(null);
-    const [opened, { toggle }] = useDisclosure();
-
-    const queryService = useMemo(() => new PlaygroundApiService(), []);
-
-    useEffect(() => {
-        let isMounted = true;
-        let timerId: ReturnType<typeof setTimeout> | null = null;
-
-        const pollStatus = async () => {
-            const status = await queryService.getStatus();
-            if (!isMounted) return;
-
-            if (status.error) {
-                setStatusMessage(status.error);
-            } else {
-                setStatusMessage(null);
-            }
-
-            if (status.ready) {
-                setApiReady(true);
-                timerId && clearTimeout(timerId);
-                return;
-            }
-
-            timerId = setTimeout(pollStatus, 250);
-        };
-
-        pollStatus();
-
-        return () => {
-            isMounted = false;
-            if (timerId) {
-                clearTimeout(timerId);
-            }
-        };
-    }, [queryService]);
-
-    // Auto-select first scenario when API is ready
-    useEffect(() => {
-        if (apiReady && !selectedScenario && SCENARIOS.length > 0) {
-            setSelectedScenario(SCENARIOS[0]);
-        }
-    }, [apiReady, selectedScenario]);
-
-    const handleScenarioSelect = (scenario: Scenario) => {
-        setSelectedScenario(scenario);
-        if (window.innerWidth < 768) {
-            toggle(); // Close sidebar on mobile selection
-        }
-    };
-
-    if (!apiReady) {
-        return (
-            <MantineProvider defaultColorScheme="dark">
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', flexDirection: 'column' }}>
-                    <Title order={2}>Initializing Metal ORM Playground</Title>
-                    <Text c="dimmed">Waiting for the playground API to become ready...</Text>
-                    {statusMessage && <Text c="red">Error: {statusMessage}</Text>}
-                </div>
-            </MantineProvider>
-        );
-    }
-
-    return (
-        <MantineProvider defaultColorScheme="dark">
-            <AppShell
-                header={{ height: 60 }}
-                navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}
-                padding="md"
-            >
-                <AppShell.Header>
-                    <Group h="100%" px="md">
-                        <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-                        <Group justify="space-between" style={{ flex: 1 }}>
-                            <Title order={3}>⚡ Metal ORM Playground</Title>
-                            <Text size="sm" c="dimmed" visibleFrom="sm">Explore and test ORM query scenarios</Text>
-                        </Group>
-                    </Group>
-                </AppShell.Header>
-
-                <AppShell.Navbar p="md">
-                    <ScenarioList
-                        scenarios={SCENARIOS}
-                        selectedId={selectedScenario?.id || null}
-                        onSelect={handleScenarioSelect}
-                    />
-                </AppShell.Navbar>
-
-                <AppShell.Main>
-                    <QueryExecutor
-                        scenario={selectedScenario}
-                        queryService={queryService}
-                    />
-                </AppShell.Main>
-            </AppShell>
-        </MantineProvider>
-    );
-}
-
-export default App;

package/playground/src/components/CodeDisplay.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { ScrollArea } from '@mantine/core';
-
-interface CodeDisplayProps {
-    code: string;
-    language?: 'sql' | 'typescript';
-    title?: string;
-}
-
-/**
- * Component responsible for displaying syntax-highlighted code
- * Follows SRP by handling only code display formatting
- */
-export const CodeDisplay: React.FC<CodeDisplayProps> = ({
-    code,
-    language = 'sql',
-    title
-}) => {
-    return (
-        <ScrollArea bg="#282c34">
-            <SyntaxHighlighter
-                language={language}
-                style={oneDark}
-                customStyle={{
-                    margin: 0,
-                    padding: '1.25rem',
-                    background: 'transparent',
-                    fontSize: '0.9rem',
-                    lineHeight: '1.6'
-                }}
-                codeTagProps={{
-                    style: {
-                        fontFamily: 'JetBrains Mono, Fira Code, monospace'
-                    }
-                }}
-            >
-                {code}
-            </SyntaxHighlighter>
-        </ScrollArea>
-    );
-};

package/playground/src/components/QueryExecutor.tsx

@@ -1,189 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, Button, Title, Text, Tabs, Loader, Group, Stack, Badge, ActionIcon, CopyButton, Tooltip } from '@mantine/core';
-import { IconPlayerPlay, IconCode, IconDatabase, IconCheck, IconCopy } from '@tabler/icons-react'; // Assuming tabler icons are available or we use text
-import type { Scenario } from '../data/scenarios';
-import type { QueryExecutionResult } from '@orm/playground/features/playground/api/types';
-import { CodeDisplay } from './CodeDisplay';
-import { ResultsTabs } from './ResultsTabs';
-import { PlaygroundApiService } from '../services/PlaygroundApiService';
-
-const describeBinding = (value: unknown): { display: string; type: string } => {
-    if (value === null) {
-        return { display: 'null', type: 'null' };
-    }
-    if (typeof value === 'undefined') {
-        return { display: 'undefined', type: 'undefined' };
-    }
-    if (typeof value === 'string') {
-        return { display: `"${value}"`, type: 'string' };
-    }
-    if (typeof value === 'number') {
-        return { display: value.toString(), type: Number.isInteger(value) ? 'integer' : 'number' };
-    }
-    if (typeof value === 'boolean') {
-        return { display: value ? 'true' : 'false', type: 'boolean' };
-    }
-    if (Array.isArray(value)) {
-        return { display: JSON.stringify(value), type: 'array' };
-    }
-    return { display: JSON.stringify(value), type: typeof value };
-};
-
-const BindingsDisplay: React.FC<{ params: unknown[] }> = ({ params }) => {
-    const hasParams = Array.isArray(params) && params.length > 0;
-
-    return (
-        <div
-            style={{
-                border: '1px solid var(--mantine-color-dark-5)',
-                borderRadius: 'var(--mantine-radius-md)',
-                padding: 'var(--mantine-spacing-md)',
-                background: 'var(--mantine-color-dark-8)'
-            }}
-        >
-            <Group justify="space-between" mb="sm">
-                <Text fw={500}>Bindings</Text>
-                {hasParams && (
-                    <CopyButton value={JSON.stringify(params, null, 2)}>
-                        {({ copied, copy }) => (
-                            <Tooltip label={copied ? 'Copied' : 'Copy JSON'} withArrow>
-                                <ActionIcon variant="subtle" color={copied ? 'teal' : 'blue'} onClick={copy}>
-                                    {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
-                                </ActionIcon>
-                            </Tooltip>
-                        )}
-                    </CopyButton>
-                )}
-            </Group>
-            {!hasParams && <Text c="dimmed" fz="sm">Query has no parameter bindings.</Text>}
-            {hasParams && (
-                <Stack gap="xs">
-                    {params.map((value, index) => {
-                        const { display, type } = describeBinding(value);
-                        return (
-                        <Group
-                            key={`${index}-${String(value)}`}
-                            justify="space-between"
-                            style={{
-                                border: '1px solid var(--mantine-color-dark-5)',
-                                borderRadius: 'var(--mantine-radius-sm)',
-                                padding: 'var(--mantine-spacing-xs)'
-                            }}
-                        >
-                            <Badge variant="light" color="grape">#{index + 1}</Badge>
-                            <div style={{ textAlign: 'right' }}>
-                                <Text style={{ fontFamily: 'var(--mantine-font-family-monospace)' }}>
-                                    {display}
-                                </Text>
-                                <Text fz="xs" c="dimmed">
-                                    {type.toUpperCase()}
-                                </Text>
-                            </div>
-                        </Group>
-                        );
-                    })}
-                </Stack>
-            )}
-        </div>
-    );
-};
-
-interface QueryExecutorProps {
-    scenario: Scenario | null;
-    queryService: PlaygroundApiService;
-}
-
-/**
- * Component responsible for executing queries and displaying results
- * Follows SRP by coordinating query execution and result display
- */
-export const QueryExecutor: React.FC<QueryExecutorProps> = ({
-    scenario,
-    queryService
-}) => {
-    const [result, setResult] = useState<QueryExecutionResult | null>(null);
-    const [isLoading, setIsLoading] = useState(false);
-
-    useEffect(() => {
-        if (scenario) {
-            executeQuery();
-        }
-    }, [scenario]);
-
-    const executeQuery = async () => {
-        if (!scenario) return;
-
-        setIsLoading(true);
-        const executionResult = await queryService.executeScenario(scenario.id);
-        setResult(executionResult);
-        setIsLoading(false);
-    };
-
-    if (!scenario) {
-        return (
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--mantine-color-dimmed)' }}>
-                <Text>Select a scenario from the list to execute</Text>
-            </div>
-        );
-    }
-
-    return (
-        <Stack gap="lg">
-            <div>
-                <Group justify="space-between" align="start" mb="md">
-                    <div>
-                        <Title order={2}>{scenario.title}</Title>
-                        <Text c="dimmed" mt="xs">{scenario.description}</Text>
-                    </div>
-                    <Button
-                        onClick={executeQuery}
-                        loading={isLoading}
-                        leftSection={<span>▶</span>}
-                        variant="gradient"
-                        gradient={{ from: 'indigo', to: 'cyan' }}
-                    >
-                        Re-execute Query
-                    </Button>
-                </Group>
-            </div>
-
-            {result && (
-                <>
-                    <Card withBorder shadow="sm" radius="md" p={0}>
-                        <Tabs defaultValue="sql">
-                            <Tabs.List>
-                                <Tabs.Tab value="sql" leftSection={<span>SQL</span>}>Generated SQL</Tabs.Tab>
-                                <Tabs.Tab value="typescript" leftSection={<span>TS</span>}>TypeScript</Tabs.Tab>
-                            </Tabs.List>
-
-                            <Tabs.Panel value="sql">
-                                <Stack gap="sm" p="md">
-                                    <CodeDisplay code={result.sql} language="sql" />
-                                    <BindingsDisplay params={result.params} />
-                                </Stack>
-                            </Tabs.Panel>
-
-                            <Tabs.Panel value="typescript">
-                                <CodeDisplay code={result.typescriptCode} language="typescript" />
-                            </Tabs.Panel>
-                        </Tabs>
-                    </Card>
-
-                    <ResultsTabs
-                        results={result.results}
-                        hydratedResults={result.hydratedResults}
-                        executionTime={result.executionTime}
-                        error={result.error}
-                    />
-                </>
-            )}
-
-            {isLoading && (
-                <Group justify="center" p="xl">
-                    <Loader type="dots" />
-                    <Text>Executing query...</Text>
-                </Group>
-            )}
-        </Stack>
-    );
-};

package/playground/src/components/ResultsTable.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { Table, Text, Alert, ScrollArea } from '@mantine/core';
-import type { QueryResult } from '@orm/playground/features/playground/common/IDatabaseClient';
-
-interface ResultsTableProps {
-    results: QueryResult[];
-    executionTime?: number;
-    error?: string | null;
-}
-
-/**
- * Component responsible for displaying query results in a table
- * Follows SRP by handling only results visualization
- */
-export const ResultsTable: React.FC<ResultsTableProps> = ({
-    results,
-    executionTime,
-    error
-}) => {
-    if (error) {
-        return (
-            <Alert variant="light" color="red" title="Error">
-                {error}
-            </Alert>
-        );
-    }
-
-    if (results.length === 0 || !results[0] || results[0].values.length === 0) {
-        return (
-            <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--mantine-color-dimmed)' }}>
-                <Text>No results returned</Text>
-            </div>
-        );
-    }
-
-    const { columns, values } = results[0];
-
-    return (
-        <div>
-            <ScrollArea>
-                <Table striped highlightOnHover horizontalSpacing="md" verticalSpacing="sm">
-                    <Table.Thead>
-                        <Table.Tr>
-                            {columns.map((col, idx) => (
-                                <Table.Th key={idx} style={{ whiteSpace: 'nowrap' }}>{col}</Table.Th>
-                            ))}
-                        </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                        {values.map((row, rowIdx) => (
-                            <Table.Tr key={rowIdx}>
-                                {row.map((cell, cellIdx) => (
-                                    <Table.Td key={cellIdx}>
-                                        {cell === null ? <Text span c="dimmed" fs="italic">NULL</Text> : String(cell)}
-                                    </Table.Td>
-                                ))}
-                            </Table.Tr>
-                        ))}
-                    </Table.Tbody>
-                </Table>
-            </ScrollArea>
-            <div style={{ padding: '0.5rem 1rem', borderTop: '1px solid var(--mantine-color-default-border)', backgroundColor: 'var(--mantine-color-body)' }}>
-                <Text size="xs" c="dimmed">{values.length} row{values.length !== 1 ? 's' : ''}</Text>
-            </div>
-        </div>
-    );
-};

package/playground/src/components/ResultsTabs.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { Tabs, Card, Text, Badge, Group, Alert, Code, ScrollArea } from '@mantine/core';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import type { QueryResult } from '@orm/playground/features/playground/common/IDatabaseClient';
-import { ResultsTable } from './ResultsTable';
-
-/**
- * Converts tabular results to JSON array of objects
- */
-const convertTabularToJson = (results: QueryResult[]): Record<string, any>[] => {
-    if (!results.length || !results[0].values.length) return [];
-
-    const { columns, values } = results[0];
-    return values.map(row => {
-        const obj: Record<string, any> = {};
-        columns.forEach((col, idx) => {
-            obj[col] = row[idx];
-        });
-        return obj;
-    });
-};
-
-interface ResultsTabsProps {
-    results: QueryResult[];
-    hydratedResults?: Record<string, any>[];
-    executionTime?: number;
-    error?: string | null;
-}
-
-/**
- * Component that displays query results in tabbed interface with Table and JSON views
- * Follows SRP by coordinating result display modes
- */
-export const ResultsTabs: React.FC<ResultsTabsProps> = ({
-    results,
-    hydratedResults,
-    executionTime,
-    error
-}) => {
-    const hasResults = results.length > 0 && results[0].values.length > 0;
-    const hasHydratedResults = hydratedResults && hydratedResults.length > 0;
-
-    // Use hydrated results if available, otherwise convert tabular data to JSON
-    const jsonData = hasHydratedResults ? hydratedResults : convertTabularToJson(results);
-    const jsonTitle = hasHydratedResults ? 'Hydrated Results' : 'Results as JSON';
-
-    if (error) {
-        return (
-            <Alert variant="light" color="red" title="Error" mt="md">
-                {error}
-            </Alert>
-        );
-    }
-
-    return (
-        <Card withBorder shadow="sm" radius="md" p={0}>
-            <Tabs defaultValue="table">
-                <Group justify="space-between" px="md" py="xs" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
-                    <Tabs.List style={{ borderBottom: 'none' }}>
-                        <Tabs.Tab value="table">Table</Tabs.Tab>
-                        {hasResults && <Tabs.Tab value="json">JSON</Tabs.Tab>}
-                    </Tabs.List>
-                    {executionTime !== undefined && (
-                        <Badge variant="light" color="green" size="lg">
-                            {executionTime.toFixed(2)}ms
-                        </Badge>
-                    )}
-                </Group>
-
-                <Tabs.Panel value="table">
-                    <ResultsTable
-                        results={results}
-                        executionTime={undefined}
-                        error={null}
-                    />
-                </Tabs.Panel>
-
-                {hasResults && (
-                    <Tabs.Panel value="json">
-                        <Group justify="space-between" px="md" py="xs" bg="var(--mantine-color-dark-6)">
-                            <Text size="sm" fw={500}>{jsonTitle}</Text>
-                            <Text size="xs" c="dimmed">{jsonData.length} object{jsonData.length !== 1 ? 's' : ''}</Text>
-                        </Group>
-                        <ScrollArea h={400} bg="#282c34">
-                            <SyntaxHighlighter
-                                language="json"
-                                style={oneDark}
-                                customStyle={{
-                                    margin: 0,
-                                    padding: '1.25rem',
-                                    background: 'transparent',
-                                    fontSize: '0.85rem',
-                                    lineHeight: '1.5'
-                                }}
-                            >
-                                {JSON.stringify(jsonData, null, 2)}
-                            </SyntaxHighlighter>
-                        </ScrollArea>
-                    </Tabs.Panel>
-                )}
-            </Tabs>
-        </Card>
-    );
-};

package/playground/src/components/ScenarioList.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { NavLink, Stack, Text, ScrollArea } from '@mantine/core';
-import type { Scenario } from '../data/scenarios';
-
-interface ScenarioListProps {
-    scenarios: Scenario[];
-    selectedId: string | null;
-    onSelect: (scenario: Scenario) => void;
-}
-
-/**
- * Component responsible for displaying the list of scenarios
- * Follows SRP by handling only scenario list rendering and selection
- */
-export const ScenarioList: React.FC<ScenarioListProps> = ({
-    scenarios,
-    selectedId,
-    onSelect
-}) => {
-    // Group scenarios by category
-    const categorizedScenarios = scenarios.reduce((acc, scenario) => {
-        if (!acc[scenario.category]) {
-            acc[scenario.category] = [];
-        }
-        acc[scenario.category].push(scenario);
-        return acc;
-    }, {} as Record<string, Scenario[]>);
-
-    return (
-        <ScrollArea h="calc(100vh - 80px)">
-            <Stack gap="md">
-                {Object.entries(categorizedScenarios).map(([category, items]) => (
-                    <div key={category}>
-                        <Text size="xs" fw={700} c="dimmed" tt="uppercase" mb="xs" px="xs">
-                            {category}
-                        </Text>
-                        <Stack gap={2}>
-                            {items.map((scenario) => (
-                                <NavLink
-                                    key={scenario.id}
-                                    label={scenario.title}
-                                    description={scenario.description}
-                                    active={selectedId === scenario.id}
-                                    onClick={() => onSelect(scenario)}
-                                    variant="light"
-                                    color="indigo"
-                                    style={{ borderRadius: 'var(--mantine-radius-md)' }}
-                                />
-                            ))}
-                        </Stack>
-                    </div>
-                ))}
-            </Stack>
-        </ScrollArea>
-    );
-};

package/playground/src/components/logo.svg

@@ -1,45 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
-  <defs>
-    <linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#e0e0e0;stop-opacity:1" />
-      <stop offset="50%" style="stop-color:#909090;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#404040;stop-opacity:1" />
-    </linearGradient>
-
-    <linearGradient id="speedGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#ff8c00;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#ffeb3b;stop-opacity:1" />
-    </linearGradient>
-
-    <filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
-      <feOffset dx="2" dy="2" result="offsetblur"/>
-      <feComponentTransfer>
-        <feFuncA type="linear" slope="0.5"/>
-      </feComponentTransfer>
-      <feMerge>
-        <feMergeNode in="offsetblur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
-
-  <path d="M100,20 L130,10 L145,35 L175,35 L180,65 L200,80 L185,105 L200,130 L180,145 L175,175 L145,175 L130,200 L100,190 L70,200 L55,175 L25,175 L20,145 L0,130 L15,105 L0,80 L20,65 L25,35 L55,35 L70,10 Z" 
-        fill="url(#metalGrad)" 
-        stroke="#333" 
-        stroke-width="2"
-        filter="url(#dropShadow)" />
-
-  <circle cx="100" cy="105" r="55" fill="#222" stroke="#555" stroke-width="2" />
-
-  <ellipse cx="100" cy="85" rx="35" ry="10" fill="none" stroke="#ccc" stroke-width="3" />
-  <path d="M65,85 v30 a35,10 0 0,0 70,0 v-30" fill="none" stroke="#ccc" stroke-width="3" />
-  <path d="M65,100 v15 a35,10 0 0,0 70,0 v-15" fill="none" stroke="#ccc" stroke-width="3" opacity="0.5" />
-
-  <path d="M120,55 L85,105 L105,105 L80,155 L135,95 L110,95 Z" 
-        fill="url(#speedGrad)" 
-        stroke="#fff" 
-        stroke-width="1"
-        transform="translate(-5, 0)" />
-
-</svg>

package/playground/src/data/scenarios.ts

@@ -1,2 +0,0 @@
-export { SCENARIOS } from '@orm/playground/features/playground/data/scenarios';
-export type { Scenario } from '@orm/playground/features/playground/data/scenarios';

package/playground/src/main.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-);