@startsimpli/ui 0.4.36 → 0.4.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.36",
+  "version": "0.4.37",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/schema/RelationshipBuilder.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '../ui/select'
+import { notify as defaultNotify } from '../toast'
+import { cn } from '../../lib/utils'
+import { suggestRelationshipKey, type SchemaId } from './schema-builder-core'
+import type { SchemaTypeBuilderNotifier } from './SchemaTypeBuilder'
+
+/** A type option the edge can connect (id + its key/label for display). */
+export interface RelationshipTypeOption {
+  id: SchemaId
+  key: string
+  label: string
+}
+
+export interface RelationshipBuilderClassNames {
+  root?: string
+  card?: string
+  submit?: string
+}
+
+export interface RelationshipBuilderProps {
+  /** The org's entity types — the selectable endpoints of the edge. */
+  types: RelationshipTypeOption[]
+  /** Persist a relationship definition (typed edge source_type -> target_type). */
+  createRelationship: (input: {
+    key: string
+    sourceType: SchemaId
+    targetType: SchemaId
+  }) => Promise<unknown>
+  /** Fired after the relationship def is created (refetch here). */
+  onCreated?: (created: { key: string }) => void
+  notify?: SchemaTypeBuilderNotifier
+  classNames?: RelationshipBuilderClassNames
+}
+
+/**
+ * No-code relationship builder (768w.10.4 S5): connect two entity types with a
+ * typed edge. The persistence layer is injected via `createRelationship`; the
+ * consuming app supplies the type list + handles refetch in `onCreated`.
+ */
+export function RelationshipBuilder({
+  types,
+  createRelationship,
+  onCreated,
+  notify = defaultNotify,
+  classNames,
+}: RelationshipBuilderProps) {
+  const [sourceId, setSourceId] = useState('')
+  const [targetId, setTargetId] = useState('')
+  const [keyOverride, setKeyOverride] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  const sourceKey = types.find((t) => String(t.id) === sourceId)?.key ?? ''
+  const targetKey = types.find((t) => String(t.id) === targetId)?.key ?? ''
+  const effectiveKey = keyOverride.trim() || suggestRelationshipKey(sourceKey, targetKey)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!sourceId || !targetId) {
+      notify.error?.('Pick a source and a target type.')
+      return
+    }
+    if (!effectiveKey) {
+      notify.error?.('Give the relationship a name.')
+      return
+    }
+    setSaving(true)
+    try {
+      await createRelationship({ key: effectiveKey, sourceType: sourceId, targetType: targetId })
+      notify.success?.(`Connected ${sourceKey} → ${targetKey}.`)
+      onCreated?.({ key: effectiveKey })
+      setKeyOverride('')
+    } catch (err) {
+      notify.error?.(err instanceof Error ? err.message : 'Could not create the relationship.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-6', classNames?.root)}>
+      <Card className={classNames?.card}>
+        <CardHeader>
+          <CardTitle>Connect two types</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {types.length === 0 ? (
+            <p className="text-sm text-gray-500">
+              Create at least one entity type first, then connect them.
+            </p>
+          ) : (
+            <>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label>From (source)</Label>
+                  <Select value={sourceId} onValueChange={setSourceId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pick a type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {types.map((t) => (
+                        <SelectItem key={String(t.id)} value={String(t.id)}>
+                          {t.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1.5">
+                  <Label>To (target)</Label>
+                  <Select value={targetId} onValueChange={setTargetId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pick a type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {types.map((t) => (
+                        <SelectItem key={String(t.id)} value={String(t.id)}>
+                          {t.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="rel-key">Name (optional)</Label>
+                <Input
+                  id="rel-key"
+                  value={keyOverride}
+                  onChange={(e) => setKeyOverride(e.target.value)}
+                  placeholder={effectiveKey || 'auto-generated from the two types'}
+                />
+                <p className="text-xs text-gray-500">
+                  Stable identifier for this edge. Defaults to{' '}
+                  <span className="font-mono">{effectiveKey || '—'}</span>.
+                </p>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          disabled={saving || types.length === 0}
+          className={classNames?.submit}
+        >
+          {saving ? 'Connecting…' : 'Define relationship'}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/components/schema/__tests__/RelationshipBuilder.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { RelationshipBuilder } from '../RelationshipBuilder'
+
+const types = [
+  { id: 'uuid-artist', key: 'artist', label: 'Artist' },
+  { id: 'uuid-release', key: 'release', label: 'Release' },
+]
+
+describe('RelationshipBuilder', () => {
+  it('renders source + target pickers and a define button', () => {
+    render(<RelationshipBuilder types={types} createRelationship={jest.fn()} />)
+    expect(screen.getByText('From (source)')).toBeInTheDocument()
+    expect(screen.getByText('To (target)')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /define relationship/i })).toBeInTheDocument()
+  })
+
+  it('warns and does not persist when no endpoints are chosen', async () => {
+    const createRelationship = jest.fn().mockResolvedValue({})
+    const notify = { success: jest.fn(), error: jest.fn() }
+    render(
+      <RelationshipBuilder types={types} createRelationship={createRelationship} notify={notify} />,
+    )
+    await userEvent.setup().click(screen.getByRole('button', { name: /define relationship/i }))
+    expect(createRelationship).not.toHaveBeenCalled()
+    expect(notify.error).toHaveBeenCalled()
+  })
+
+  it('prompts to create types first when none exist (submit disabled)', () => {
+    render(<RelationshipBuilder types={[]} createRelationship={jest.fn()} />)
+    expect(screen.getByText(/create at least one entity type first/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /define relationship/i })).toBeDisabled()
+  })
+})

package/src/components/schema/__tests__/schema-builder-core.test.ts

@@ -4,6 +4,7 @@ import {
   draftToAttributePayloads,
   attributeToDraft,
   diffAttributes,
+  suggestRelationshipKey,
   DATA_TYPES,
   type DraftAttribute,
   type ExistingAttribute,
@@ -195,6 +196,18 @@ describe('diffAttributes (create/update/delete reconciliation)', () => {
   })
 })
 
+describe('suggestRelationshipKey', () => {
+  it('joins source + target into a slugified edge key', () => {
+    expect(suggestRelationshipKey('artist', 'release')).toBe('artist_release')
+    expect(suggestRelationshipKey('Purchase Order', 'Line Item')).toBe('purchase_order_line_item')
+  })
+
+  it('is empty until both ends are chosen', () => {
+    expect(suggestRelationshipKey('', 'release')).toBe('')
+    expect(suggestRelationshipKey('artist', '')).toBe('')
+  })
+})
+
 describe('DATA_TYPES', () => {
   it('exposes the eight backend data types as {value,label} options', () => {
     expect(DATA_TYPES.map((d) => d.value)).toEqual([

package/src/components/schema/index.ts

@@ -6,10 +6,17 @@ export type {
   CreatedType,
   ExistingType,
 } from './SchemaTypeBuilder'
+export { RelationshipBuilder } from './RelationshipBuilder'
+export type {
+  RelationshipBuilderProps,
+  RelationshipBuilderClassNames,
+  RelationshipTypeOption,
+} from './RelationshipBuilder'
 export {
   DATA_TYPES,
   blankAttribute,
   toKey,
+  suggestRelationshipKey,
   draftToPayload,
   draftToAttributePayloads,
   attributeToDraft,

package/src/components/schema/schema-builder-core.ts

@@ -58,6 +58,13 @@ export function toKey(label: string): string {
     .replace(/^_+|_+$/g, '')
 }
 
+/** Suggest a relationship (edge) key from its endpoint type names. Empty until
+ * both ends are chosen. */
+export function suggestRelationshipKey(source: string, target: string): string {
+  if (!source.trim() || !target.trim()) return ''
+  return toKey(`${source}_${target}`)
+}
+
 /** Server-assigned ids are UUID strings; numbers are tolerated for tests/legacy. */
 export type SchemaId = string | number