@dfosco/storyboard 0.6.8 → 0.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/ArtifactForm/ArtifactForm.jsx

@@ -11,11 +11,27 @@
  *   Schemas may declare `field.dynamic = 'prototypes'`. Pass
  *   `dynamicOptions={{ prototypes: ['my-app', ...] }}` to populate them.
  */
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo, useEffect, useRef } from 'react'
 import { FormControl, Button, TextInput, Textarea, Flash, Text, ActionMenu, ActionList } from '@primer/react'
 import { ARTIFACT_SCHEMAS, validateArtifact } from './artifactSchemas.js'
 import styles from './ArtifactForm.module.css'
 
+/**
+ * Slugify a freeform string into the kebab-case form the `name` field expects.
+ * Mirrors the NAME_PATTERN in artifactSchemas.js — lowercase letters, digits,
+ * and hyphens. Used to auto-derive `name` from `title` while the user types,
+ * until they manually edit `name` themselves.
+ */
+function slugifyName(value) {
+  return String(value || '')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 64)
+}
+
 function TypeSelector({ selected, onChange }) {
   const types = Object.entries(ARTIFACT_SCHEMAS)
   const current = ARTIFACT_SCHEMAS[selected]
@@ -150,18 +166,66 @@ export default function ArtifactForm({
   const [errors, setErrors] = useState({})
   const [submitting, setSubmitting] = useState(false)
 
+  // Tracks whether the `name` field should keep auto-following `title`.
+  // Flips to false the first time the user edits `name` directly, so we don't
+  // clobber their input. Reset on type change or unmount.
+  const nameAutoFollowRef = useRef(true)
+
   // Reset form when fixed type changes (parent-controlled)
   useEffect(() => {
     if (!fixedType) return
     setValues({ ...initialValues(ARTIFACT_SCHEMAS[fixedType]), ...(initialOverride || {}) })
     setErrors({})
     setSubmitting(false)
+    nameAutoFollowRef.current = true
   }, [fixedType])
 
+  // Merge late-arriving initial overrides (e.g. a gh-login fetch that resolves
+  // after mount) into empty fields. Only fills fields the user hasn't typed
+  // into yet, so we never overwrite their input. Stringify the override so the
+  // dep check fires on content changes rather than parent re-render identity.
+  const overrideKey = useMemo(() => JSON.stringify(initialOverride || {}), [initialOverride])
+  useEffect(() => {
+    if (!initialOverride || !schema) return
+    setValues(prev => {
+      let next = prev
+      for (const [k, v] of Object.entries(initialOverride)) {
+        if (v == null || v === '') continue
+        const fieldExists = schema.fields.some(f => f.name === k)
+        const isEmpty = prev[k] === '' || prev[k] == null
+        if (fieldExists && isEmpty) {
+          if (next === prev) next = { ...prev }
+          next[k] = v
+        }
+      }
+      return next
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overrideKey, schema])
+
+  // Derive `name` (kebab-case) from `title` as the user types, until they
+  // manually edit `name`. Only applies to schemas that expose both fields
+  // (prototype, canvas, flow). Component uses PascalCase and has no title,
+  // so it's naturally excluded.
+  useEffect(() => {
+    if (!schema || !nameAutoFollowRef.current) return
+    const hasName = schema.fields.some(f => f.name === 'name' && f.type === 'text')
+    const hasTitle = schema.fields.some(f => f.name === 'title')
+    if (!hasName || !hasTitle) return
+    const derived = slugifyName(values.title)
+    if (derived === (values.name || '')) return
+    setValues(prev => ({ ...prev, name: derived }))
+    if (errors.name) {
+      setErrors(prev => { const next = { ...prev }; delete next.name; return next })
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.title, schema])
+
   function handleTypeChange(newType) {
     setSelectedType(newType)
     setValues(initialValues(ARTIFACT_SCHEMAS[newType]))
     setErrors({})
+    nameAutoFollowRef.current = true
   }
 
   const [showAdvanced, setShowAdvanced] = useState(false)
@@ -205,6 +269,9 @@ export default function ArtifactForm({
   }
 
   function handleChange(fieldName, value) {
+    if (fieldName === 'name') {
+      nameAutoFollowRef.current = false
+    }
     setValues(prev => ({ ...prev, [fieldName]: value }))
     if (errors[fieldName]) {
       setErrors(prev => { const next = { ...prev }; delete next[fieldName]; return next })

package/src/internals/CommandPalette/CreateDialog.jsx

@@ -27,6 +27,7 @@ export default function CreateDialog({ type, basePath, onClose }) {
   const schema = schemaKey ? ARTIFACT_SCHEMAS[schemaKey] : null
   const [prototypes, setPrototypes] = useState([])
   const [partials, setPartials] = useState([])
+  const [ghLogin, setGhLogin] = useState(null)
 
   const needsPrototypes = useMemo(() => {
     if (!schema) return false
@@ -38,6 +39,11 @@ export default function CreateDialog({ type, basePath, onClose }) {
     return schema.fields.some(f => f.dynamic === 'partials')
   }, [schema])
 
+  const needsAuthor = useMemo(() => {
+    if (!schema) return false
+    return schema.fields.some(f => f.name === 'author')
+  }, [schema])
+
   useEffect(() => {
     if (!needsPrototypes || !schemaKey) return
     const apiBase = (basePath || '/').replace(/\/+$/, '')
@@ -68,6 +74,25 @@ export default function CreateDialog({ type, basePath, onClose }) {
       .catch(() => {})
   }, [needsPartials, schemaKey, basePath])
 
+  // Fetch the gh CLI login once per dialog open and prefill it as the default
+  // author when the schema supports it (currently only `prototype`).
+  useEffect(() => {
+    if (!needsAuthor || !schemaKey) return
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/git-user`)
+      .then(r => (r.ok ? r.json() : null))
+      .then(data => { if (data?.login) setGhLogin(data.login) })
+      .catch(() => {})
+  }, [needsAuthor, schemaKey, basePath])
+
+  // Build the initial values object for the form. Late-arriving values (like
+  // the gh login fetch above) get merged into empty fields inside ArtifactForm
+  // — see the override-merge effect there.
+  const initialValues = useMemo(() => {
+    if (!needsAuthor || !ghLogin) return undefined
+    return { author: ghLogin }
+  }, [needsAuthor, ghLogin])
+
   if (!schemaKey || !schema) return null
 
   async function handleSubmit({ type: t, values }) {
@@ -120,6 +145,7 @@ export default function CreateDialog({ type, basePath, onClose }) {
         onSubmit={handleSubmit}
         onCancel={onClose}
         dynamicOptions={{ prototypes, partials }}
+        initialValues={initialValues}
         hideHeader
       />
     </Dialog>