@dfosco/storyboard-react-reshaped 1.1.0

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@dfosco/storyboard-react-reshaped",
+  "version": "1.1.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dfosco/storyboard.git",
+    "directory": "packages/react-reshaped"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@dfosco/storyboard-react": "*"
+  },
+  "peerDependencies": {
+    "reshaped": ">=3",
+    "react": ">=18"
+  },
+  "exports": {
+    ".": "./src/index.js"
+  }
+}

package/src/Checkbox.jsx

@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+import { useContext, useState, useEffect } from 'react'
+import { Checkbox as ReshapedCheckbox } from 'reshaped'
+import { FormContext, useOverride } from '@dfosco/storyboard-react'
+
+/**
+ * Wrapped Reshaped Checkbox that integrates with StoryboardForm.
+ *
+ * Inside a <StoryboardForm>, values are buffered locally and only
+ * written to session on form submit.
+ *
+ * Stores "true" / "false" as string values in the URL hash.
+ */
+export default function Checkbox({ name, onChange, checked: controlledChecked, ...props }) {
+  const form = useContext(FormContext)
+  const path = form?.prefix && name ? `${form.prefix}.${name}` : name
+  const [sessionValue] = useOverride(path || '')
+
+  const initialChecked = sessionValue === 'true' || sessionValue === true
+  const [draft, setDraftState] = useState(initialChecked)
+
+  const isConnected = !!form && !!name
+
+  useEffect(() => {
+    if (!isConnected) return
+    return form.subscribe(name, (val) => setDraftState(val === 'true' || val === true))
+  }, [isConnected, form, name])
+
+  useEffect(() => {
+    if (isConnected && sessionValue != null) {
+      const val = sessionValue === 'true' || sessionValue === true
+      setDraftState(val)
+      form.setDraft(name, val ? 'true' : 'false')
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleChange = ({ value }) => {
+    const checked = !!value
+    if (isConnected) {
+      setDraftState(checked)
+      form.setDraft(name, checked ? 'true' : 'false')
+    }
+    if (onChange) onChange({ value })
+  }
+
+  const resolvedChecked = isConnected ? draft : controlledChecked
+
+  return (
+    <ReshapedCheckbox
+      name={name}
+      checked={resolvedChecked}
+      onChange={handleChange}
+      {...props}
+    />
+  )
+}

package/src/Select.jsx

@@ -0,0 +1,56 @@
+/* eslint-disable react/prop-types */
+import { useContext, useState, useEffect } from 'react'
+import { Select as ReshapedSelect } from 'reshaped'
+import { FormContext, useOverride } from '@dfosco/storyboard-react'
+
+/**
+ * Wrapped Reshaped Select that integrates with StoryboardForm.
+ *
+ * Inside a <StoryboardForm>, values are buffered locally and only
+ * written to session on form submit.
+ *
+ * Outside a form, behaves as a normal controlled Reshaped Select.
+ */
+export default function Select({ name, onChange, value: controlledValue, children, ...props }) {
+  const form = useContext(FormContext)
+  const path = form?.prefix && name ? `${form.prefix}.${name}` : name
+  const [sessionValue] = useOverride(path || '')
+
+  const [draft, setDraftState] = useState(sessionValue ?? '')
+
+  const isConnected = !!form && !!name
+
+  useEffect(() => {
+    if (!isConnected) return
+    return form.subscribe(name, (val) => setDraftState(val))
+  }, [isConnected, form, name])
+
+  useEffect(() => {
+    if (isConnected && sessionValue != null) {
+      setDraftState(sessionValue)
+      form.setDraft(name, sessionValue)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleChange = ({ value }) => {
+    if (isConnected) {
+      setDraftState(value)
+      form.setDraft(name, value)
+    }
+    if (onChange) onChange({ value })
+  }
+
+  const resolvedValue = isConnected ? draft : controlledValue
+
+  return (
+    <ReshapedSelect
+      name={name}
+      value={resolvedValue}
+      onChange={handleChange}
+      {...props}
+    >
+      {children}
+    </ReshapedSelect>
+  )
+}

package/src/StoryboardForm.jsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/prop-types */
+import { useRef, useCallback } from 'react'
+import { FormContext } from '@dfosco/storyboard-react'
+import { setParam } from '@dfosco/storyboard-core'
+
+/**
+ * A form wrapper that buffers input values locally and only
+ * persists them to session (URL hash) on submit.
+ *
+ * The `data` prop sets the root path — child inputs with a `name` prop
+ * will read/write to local draft state while typing, then flush to
+ * `data.name` in the URL hash on form submission.
+ */
+export default function StoryboardForm({ data, onSubmit, children, ...props }) {
+  const prefix = data || null
+  const draftsRef = useRef({})
+  const listenersRef = useRef({})
+
+  const getDraft = useCallback((name) => draftsRef.current[name], [])
+
+  const setDraft = useCallback((name, value) => {
+    draftsRef.current[name] = value
+    const listener = listenersRef.current[name]
+    if (listener) listener(value)
+  }, [])
+
+  const subscribe = useCallback((name, listener) => {
+    listenersRef.current[name] = listener
+    return () => { delete listenersRef.current[name] }
+  }, [])
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (prefix) {
+      for (const [name, value] of Object.entries(draftsRef.current)) {
+        setParam(`${prefix}.${name}`, value)
+      }
+    }
+    if (onSubmit) onSubmit(e)
+  }
+
+  const contextValue = { prefix, getDraft, setDraft, subscribe }
+
+  return (
+    <FormContext.Provider value={contextValue}>
+      <form {...props} onSubmit={handleSubmit}>
+        {children}
+      </form>
+    </FormContext.Provider>
+  )
+}

package/src/TextInput.jsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import { useContext, useState, useEffect } from 'react'
+import { TextField } from 'reshaped'
+import { FormContext, useOverride } from '@dfosco/storyboard-react'
+
+/**
+ * Wrapped Reshaped TextField that integrates with StoryboardForm.
+ *
+ * Inside a <StoryboardForm>, values are buffered locally and only
+ * written to session on form submit.
+ *
+ * Outside a form, behaves as a normal controlled Reshaped TextField.
+ */
+export default function TextInput({ name, onChange, value: controlledValue, ...props }) {
+  const form = useContext(FormContext)
+  const path = form?.prefix && name ? `${form.prefix}.${name}` : name
+  const [sessionValue] = useOverride(path || '')
+
+  const [draft, setDraftState] = useState(sessionValue ?? '')
+
+  const isConnected = !!form && !!name
+
+  useEffect(() => {
+    if (!isConnected) return
+    return form.subscribe(name, (val) => setDraftState(val))
+  }, [isConnected, form, name])
+
+  useEffect(() => {
+    if (isConnected && sessionValue != null) {
+      setDraftState(sessionValue)
+      form.setDraft(name, sessionValue)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleChange = ({ value }) => {
+    if (isConnected) {
+      setDraftState(value)
+      form.setDraft(name, value)
+    }
+    if (onChange) onChange({ value })
+  }
+
+  const resolvedValue = isConnected ? draft : controlledValue
+
+  return (
+    <TextField
+      name={name}
+      value={resolvedValue}
+      onChange={handleChange}
+      {...props}
+    />
+  )
+}

package/src/Textarea.jsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/prop-types */
+import { useContext, useState, useEffect } from 'react'
+import { TextField } from 'reshaped'
+import { FormContext, useOverride } from '@dfosco/storyboard-react'
+
+/**
+ * Wrapped Reshaped TextField (multiline) that integrates with StoryboardForm.
+ *
+ * Inside a <StoryboardForm>, values are buffered locally and only
+ * written to session on form submit.
+ *
+ * Outside a form, behaves as a normal controlled Reshaped TextField.
+ */
+export default function Textarea({ name, onChange, value: controlledValue, ...props }) {
+  const form = useContext(FormContext)
+  const path = form?.prefix && name ? `${form.prefix}.${name}` : name
+  const [sessionValue] = useOverride(path || '')
+
+  const [draft, setDraftState] = useState(sessionValue ?? '')
+
+  const isConnected = !!form && !!name
+
+  useEffect(() => {
+    if (!isConnected) return
+    return form.subscribe(name, (val) => setDraftState(val))
+  }, [isConnected, form, name])
+
+  useEffect(() => {
+    if (isConnected && sessionValue != null) {
+      setDraftState(sessionValue)
+      form.setDraft(name, sessionValue)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleChange = ({ value }) => {
+    if (isConnected) {
+      setDraftState(value)
+      form.setDraft(name, value)
+    }
+    if (onChange) onChange({ value })
+  }
+
+  const resolvedValue = isConnected ? draft : controlledValue
+
+  return (
+    <TextField
+      name={name}
+      value={resolvedValue}
+      onChange={handleChange}
+      inputAttributes={{ rows: 3 }}
+      {...props}
+    />
+  )
+}

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @dfosco/storyboard-react-reshaped — Reshaped design system package for Storyboard.
+ *
+ * Provides storyboard-aware form components backed by Reshaped.
+ */
+
+// Storyboard form wrappers (Reshaped-backed)
+export { default as TextInput } from './TextInput.jsx'
+export { default as Select } from './Select.jsx'
+export { default as Checkbox } from './Checkbox.jsx'
+export { default as Textarea } from './Textarea.jsx'
+export { default as StoryboardForm } from './StoryboardForm.jsx'