@friggframework/devtools 2.0.0-next.29 → 2.0.0-next.30

package/management-ui/src/index.css

@@ -0,0 +1,193 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Frigg Industrial Design System - Light Mode */
+    --background: 0 0% 97%;
+    --foreground: 0 0% 20%;
+
+    /* Card with subtle gray undertone */
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 20%;
+
+    /* Popover */
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 20%;
+
+    /* Frigg Brand Green #71a087 converted to HSL */
+    --primary: 143 20% 57%;
+    --primary-foreground: 0 0% 100%;
+
+    /* Industrial Gray */
+    --secondary: 0 0% 35%;
+    --secondary-foreground: 0 0% 98%;
+
+    /* Muted industrial tones */
+    --muted: 0 0% 92%;
+    --muted-foreground: 0 0% 40%;
+
+    /* Accent - slightly darker green */
+    --accent: 143 25% 45%;
+    --accent-foreground: 0 0% 100%;
+
+    /* Destructive */
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+
+    /* Borders - industrial feel */
+    --border: 0 0% 85%;
+    --input: 0 0% 85%;
+    --ring: 143 20% 57%;
+
+    /* Charts - industrial palette */
+    --chart-1: 143 20% 57%;
+    --chart-2: 0 0% 35%;
+    --chart-3: 200 18% 46%;
+    --chart-4: 24 10% 40%;
+    --chart-5: 0 0% 60%;
+
+    /* Sharp industrial edges */
+    --radius: 0.125rem;
+  }
+
+  .dark {
+    /* Frigg Industrial Design System - Dark Mode */
+    --background: 0 0% 8%;
+    --foreground: 0 0% 90%;
+
+    /* Dark cards with depth */
+    --card: 0 0% 12%;
+    --card-foreground: 0 0% 90%;
+
+    /* Popover */
+    --popover: 0 0% 12%;
+    --popover-foreground: 0 0% 90%;
+
+    /* Frigg Brand Green - brighter in dark mode */
+    --primary: 143 25% 65%;
+    --primary-foreground: 0 0% 10%;
+
+    /* Industrial Gray */
+    --secondary: 0 0% 25%;
+    --secondary-foreground: 0 0% 90%;
+
+    /* Muted industrial tones */
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 60%;
+
+    /* Accent - brighter green */
+    --accent: 143 30% 55%;
+    --accent-foreground: 0 0% 10%;
+
+    /* Destructive */
+    --destructive: 0 62% 45%;
+    --destructive-foreground: 0 0% 98%;
+
+    /* Borders - subtle in dark */
+    --border: 0 0% 20%;
+    --input: 0 0% 20%;
+    --ring: 143 25% 65%;
+
+    /* Charts - industrial palette dark */
+    --chart-1: 143 25% 65%;
+    --chart-2: 0 0% 45%;
+    --chart-3: 200 20% 55%;
+    --chart-4: 24 15% 50%;
+    --chart-5: 0 0% 70%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@layer utilities {
+  /* Industrial design utilities */
+  .industrial-shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  .industrial-shadow-lg {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+
+  .industrial-border {
+    border: 1px solid hsl(var(--border));
+  }
+
+  .industrial-gradient {
+    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
+  }
+
+  /* Animation classes */
+  .industrial-transition {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  /* Scrollbar styling - sharp industrial edges */
+  .industrial-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
+  }
+
+  .industrial-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .industrial-scrollbar::-webkit-scrollbar-track {
+    background: hsl(var(--muted));
+    border-radius: 0;
+  }
+
+  .industrial-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground));
+    border-radius: 0;
+  }
+
+  .industrial-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--foreground));
+  }
+
+  /* Sharp corner variants for components */
+  .sharp-card {
+    border-radius: 0;
+    border: 1px solid hsl(var(--border));
+  }
+
+  .sharp-button {
+    border-radius: 0;
+  }
+
+  .sharp-badge {
+    border-radius: 0;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  /* Industrial input styles */
+  .industrial-input {
+    border-radius: 0;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--background));
+    transition: all 150ms;
+  }
+
+  .industrial-input:focus {
+    border-color: hsl(var(--primary));
+    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+  }
+}

package/management-ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/management-ui/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/management-ui/src/pages/CodeGeneration.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CodeGenerationWizard } from '../components/codegen';
+
+const CodeGeneration = () => {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="py-8">
+        <CodeGenerationWizard />
+      </div>
+    </div>
+  );
+};
+
+export default CodeGeneration;

package/management-ui/src/pages/Connections.jsx

@@ -0,0 +1,252 @@
+import React, { useState } from 'react'
+import { useFrigg } from '../hooks/useFrigg'
+
+const Connections = () => {
+  const { connections, users, integrations } = useFrigg()
+  const [selectedConnection, setSelectedConnection] = useState(null)
+  const [viewMode, setViewMode] = useState('list') // list or details
+
+  const getIntegrationName = (integrationId) => {
+    const integration = integrations.find(i => i.id === integrationId)
+    return integration?.displayName || integration?.name || integrationId
+  }
+
+  const getUserName = (userId) => {
+    const user = users.find(u => u.id === userId)
+    return user ? `${user.firstName} ${user.lastName}` : userId
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h2 className="text-3xl font-bold text-gray-900">Connection Management</h2>
+        <p className="mt-2 text-gray-600">View and manage integration connections and entities</p>
+      </div>
+
+      {/* View Toggle */}
+      <div className="mb-6 flex justify-between items-center">
+        <div className="flex space-x-2">
+          <button
+            onClick={() => setViewMode('list')}
+            className={`px-4 py-2 rounded-md transition-colors ${
+              viewMode === 'list'
+                ? 'bg-frigg-blue text-white'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            List View
+          </button>
+          <button
+            onClick={() => setViewMode('details')}
+            className={`px-4 py-2 rounded-md transition-colors ${
+              viewMode === 'details'
+                ? 'bg-frigg-blue text-white'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            Details View
+          </button>
+        </div>
+        <div className="text-sm text-gray-600">
+          Total Connections: <span className="font-medium">{connections.length}</span>
+        </div>
+      </div>
+
+      {viewMode === 'list' ? (
+        /* List View */
+        <div className="bg-white shadow rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Connection
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  User
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Entities
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {connections.map((connection) => (
+                <tr key={connection.id}>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm font-medium text-gray-900">
+                      {getIntegrationName(connection.integrationId)}
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      ID: {connection.id}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm text-gray-900">
+                      {getUserName(connection.userId)}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                      connection.active
+                        ? 'bg-green-100 text-green-800'
+                        : 'bg-red-100 text-red-800'
+                    }`}>
+                      {connection.active ? 'Active' : 'Inactive'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {connection.entities?.length || 0} entities
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button
+                      onClick={() => {
+                        setSelectedConnection(connection)
+                        setViewMode('details')
+                      }}
+                      className="text-frigg-blue hover:text-blue-700 mr-3"
+                    >
+                      View Details
+                    </button>
+                    <button className="text-red-600 hover:text-red-900">
+                      Disconnect
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        /* Details View */
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Connection List */}
+          <div className="lg:col-span-1">
+            <div className="bg-white shadow rounded-lg p-4">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Connections</h3>
+              <div className="space-y-2">
+                {connections.map((connection) => (
+                  <button
+                    key={connection.id}
+                    onClick={() => setSelectedConnection(connection)}
+                    className={`w-full text-left px-3 py-2 rounded-md transition-colors ${
+                      selectedConnection?.id === connection.id
+                        ? 'bg-frigg-blue text-white'
+                        : 'hover:bg-gray-100'
+                    }`}
+                  >
+                    <div className="font-medium">
+                      {getIntegrationName(connection.integrationId)}
+                    </div>
+                    <div className={`text-sm ${
+                      selectedConnection?.id === connection.id ? 'text-blue-100' : 'text-gray-500'
+                    }`}>
+                      {getUserName(connection.userId)}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Connection Details */}
+          <div className="lg:col-span-2">
+            {selectedConnection ? (
+              <div className="bg-white shadow rounded-lg p-6">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Connection Details</h3>
+                
+                {/* Basic Info */}
+                <div className="mb-6">
+                  <dl className="grid grid-cols-2 gap-4">
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Integration</dt>
+                      <dd className="mt-1 text-sm text-gray-900">
+                        {getIntegrationName(selectedConnection.integrationId)}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">User</dt>
+                      <dd className="mt-1 text-sm text-gray-900">
+                        {getUserName(selectedConnection.userId)}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Status</dt>
+                      <dd className="mt-1">
+                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                          selectedConnection.active
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                        }`}>
+                          {selectedConnection.active ? 'Active' : 'Inactive'}
+                        </span>
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-sm font-medium text-gray-500">Created</dt>
+                      <dd className="mt-1 text-sm text-gray-900">
+                        {new Date(selectedConnection.createdAt).toLocaleDateString()}
+                      </dd>
+                    </div>
+                  </dl>
+                </div>
+
+                {/* Entities */}
+                <div>
+                  <h4 className="text-md font-medium text-gray-900 mb-3">Entities</h4>
+                  {selectedConnection.entities?.length > 0 ? (
+                    <div className="border border-gray-200 rounded-lg overflow-hidden">
+                      <table className="min-w-full divide-y divide-gray-200">
+                        <thead className="bg-gray-50">
+                          <tr>
+                            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                              Type
+                            </th>
+                            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                              ID
+                            </th>
+                            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                              Name
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="bg-white divide-y divide-gray-200">
+                          {selectedConnection.entities.map((entity, index) => (
+                            <tr key={index}>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+                                {entity.type}
+                              </td>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm font-mono text-gray-600">
+                                {entity.id}
+                              </td>
+                              <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+                                {entity.name}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-500">No entities found for this connection.</p>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="bg-white shadow rounded-lg p-6">
+                <p className="text-gray-500 text-center">Select a connection to view details</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Connections