@fragments-sdk/viewer 0.2.1 → 0.2.4

package/src/components/ContractPanel.tsx

@@ -1,241 +0,0 @@
-/**
- * ContractPanel component - displays FragmentContract metadata for AI agents.
- * Shows propsSummary, scenarioTags, bans, and a11yRules.
- */
-
-import { memo } from 'react';
-import type { FragmentContract } from '@fragments-sdk/core';
-import { Stack, Text, Card, Chip, Alert, EmptyState, CodeBlock, Badge, Box } from '@fragments-sdk/ui';
-
-interface ContractPanelProps {
-  contract?: FragmentContract;
-  componentName: string;
-}
-
-export const ContractPanel = memo(function ContractPanel({
-  contract,
-  componentName,
-}: ContractPanelProps) {
-  // Empty state when no contract metadata
-  if (!contract || isContractEmpty(contract)) {
-    return (
-      <EmptyState>
-        <EmptyState.Icon>
-          <svg
-            style={{ width: '48px', height: '48px', opacity: 0.5 }}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-        </EmptyState.Icon>
-        <EmptyState.Title>No contract metadata</EmptyState.Title>
-        <EmptyState.Description>
-          Add a <Box as="code" padding="xs" background="secondary" rounded="sm">contract</Box> field to the fragment definition to enable AI agent features.
-        </EmptyState.Description>
-        <EmptyState.Actions>
-          <CodeBlock
-            code={`contract: {
-  propsSummary: ['variant: primary|secondary'],
-  scenarioTags: ['form.submit', 'action.primary'],
-  a11yRules: ['A11Y_BTN_LABEL'],
-}`}
-            language="typescript"
-            compact
-          />
-        </EmptyState.Actions>
-      </EmptyState>
-    );
-  }
-
-  return (
-    <Box padding="md" style={{ fontSize: '14px' }}>
-      <Stack gap="lg">
-        {/* Props Summary */}
-        {contract.propsSummary && contract.propsSummary.length > 0 && (
-          <Section title="Props Summary">
-            <Card>
-              <Card.Body>
-                <table style={{ width: '100%', fontSize: '12px', borderCollapse: 'collapse' }}>
-                  <thead>
-                    <tr style={{ borderBottom: '1px solid var(--border)' }}>
-                      <th style={{ textAlign: 'left', padding: '8px 16px 8px 0', fontWeight: 500, color: 'var(--text-tertiary)' }}>Name</th>
-                      <th style={{ textAlign: 'left', padding: '8px 16px 8px 0', fontWeight: 500, color: 'var(--text-tertiary)' }}>Type</th>
-                      <th style={{ textAlign: 'left', padding: '8px 0', fontWeight: 500, color: 'var(--text-tertiary)' }}>Description</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {contract.propsSummary.map((prop, i) => {
-                      const parsed = parsePropSummary(prop);
-                      return (
-                        <tr key={i} style={{ borderBottom: i < contract.propsSummary!.length - 1 ? '1px solid var(--border)' : undefined }}>
-                          <td style={{ padding: '8px 16px 8px 0', verticalAlign: 'top' }}>
-                            <Text font="mono" size="xs" weight="medium">{parsed.name}</Text>
-                          </td>
-                          <td style={{ padding: '8px 16px 8px 0', verticalAlign: 'top' }}>
-                            <Badge size="sm">{parsed.type}</Badge>
-                          </td>
-                          <td style={{ padding: '8px 0', verticalAlign: 'top' }}>
-                            <Text size="xs" color="secondary">{parsed.description}</Text>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </Card.Body>
-            </Card>
-          </Section>
-        )}
-
-        {/* Scenario Tags */}
-        {contract.scenarioTags && contract.scenarioTags.length > 0 && (
-          <Section title="Scenario Tags" subtitle="Used by fragments_suggest for AI queries">
-            <Stack direction="row" gap="sm" style={{ flexWrap: 'wrap' }}>
-              {contract.scenarioTags.map((tag, i) => (
-                <Chip key={i}>{tag}</Chip>
-              ))}
-            </Stack>
-          </Section>
-        )}
-
-        {/* Accessibility Rules */}
-        {contract.a11yRules && contract.a11yRules.length > 0 && (
-          <Section title="Accessibility Rules">
-            <Stack gap="sm">
-              {contract.a11yRules.map((rule, i) => (
-                <Box key={i} padding="sm" background="secondary" rounded="sm">
-                <Stack
-                  direction="row"
-                  align="center"
-                  gap="sm"
-                >
-                  <span style={{ color: '#22c55e' }}>
-                    <svg style={{ width: '16px', height: '16px' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                  </span>
-                  <Text font="mono" size="xs" color="secondary">{rule}</Text>
-                </Stack>
-                </Box>
-              ))}
-            </Stack>
-          </Section>
-        )}
-
-        {/* Bans */}
-        {contract.bans && contract.bans.length > 0 && (
-          <Section title="Usage Bans" subtitle="Patterns to avoid">
-            <Stack gap="sm">
-              {contract.bans.map((ban, i) => (
-                <Alert key={i} severity="warning">
-                  <Alert.Body>
-                    <Alert.Title>
-                      <Text font="mono" size="xs">{ban.pattern}</Text>
-                    </Alert.Title>
-                    <Alert.Content>
-                      <Text size="xs" color="tertiary">{ban.message}</Text>
-                    </Alert.Content>
-                  </Alert.Body>
-                </Alert>
-              ))}
-            </Stack>
-          </Section>
-        )}
-
-        {/* Empty sections message */}
-        {isPartialContract(contract) && (
-          <Alert severity="info">
-            <Alert.Body>
-              <Alert.Content>
-                Tip: Add more contract fields to help AI agents better understand this component.
-              </Alert.Content>
-            </Alert.Body>
-          </Alert>
-        )}
-      </Stack>
-    </Box>
-  );
-});
-
-// Helper component for consistent section styling
-interface SectionProps {
-  title: string;
-  subtitle?: string;
-  children: React.ReactNode;
-}
-
-function Section({ title, subtitle, children }: SectionProps) {
-  return (
-    <div>
-      <Stack direction="row" align="center" gap="sm" style={{ marginBottom: '8px' }}>
-        <Text as="h3" size="xs" weight="semibold">{title}</Text>
-        {subtitle && (
-          <Text size="xs" color="tertiary">({subtitle})</Text>
-        )}
-      </Stack>
-      {children}
-    </div>
-  );
-}
-
-// Check if contract is empty or has no meaningful content
-function isContractEmpty(contract: FragmentContract): boolean {
-  return (
-    (!contract.propsSummary || contract.propsSummary.length === 0) &&
-    (!contract.scenarioTags || contract.scenarioTags.length === 0) &&
-    (!contract.a11yRules || contract.a11yRules.length === 0) &&
-    (!contract.bans || contract.bans.length === 0)
-  );
-}
-
-// Check if contract has some but not all fields
-function isPartialContract(contract: FragmentContract): boolean {
-  const fieldCount = [
-    contract.propsSummary?.length ?? 0,
-    contract.scenarioTags?.length ?? 0,
-    contract.a11yRules?.length ?? 0,
-    contract.bans?.length ?? 0,
-  ].filter(n => n > 0).length;
-
-  return fieldCount > 0 && fieldCount < 3;
-}
-
-// Parse a prop summary string like "name: type - description" or "name: type (default: value)"
-function parsePropSummary(prop: string): { name: string; type: string; description: string } {
-  // Try to match "name: type - description" format
-  const colonIndex = prop.indexOf(':');
-  if (colonIndex === -1) {
-    return { name: prop, type: '', description: '' };
-  }
-
-  const name = prop.slice(0, colonIndex).trim();
-  const rest = prop.slice(colonIndex + 1).trim();
-
-  // Check for " - description" pattern
-  const dashIndex = rest.indexOf(' - ');
-  if (dashIndex !== -1) {
-    const type = rest.slice(0, dashIndex).trim();
-    const description = rest.slice(dashIndex + 3).trim();
-    return { name, type, description };
-  }
-
-  // Check for "(default: value)" or "(default: value) description" pattern
-  const defaultMatch = rest.match(/^([^(]+)(\(default:\s*[^)]+\))(.*)$/);
-  if (defaultMatch) {
-    const type = defaultMatch[1].trim();
-    const defaultInfo = defaultMatch[2];
-    const extraDesc = defaultMatch[3].trim();
-    const description = extraDesc ? `${defaultInfo} ${extraDesc}` : defaultInfo;
-    return { name, type, description };
-  }
-
-  // Just type, no description
-  return { name, type: rest, description: '' };
-}