@moises.ai/design-system 3.5.7 → 3.6.0

package/src/components/SetlistList/SetlistList.jsx

@@ -151,7 +151,9 @@ export const SetlistList = ({
 }) => {
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
   const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
+  const [isFullyCollapsed, setIsFullyCollapsed] = useState(false)
   const hoverTimeoutRef = useRef(null)
+  const collapseCenterTimeoutRef = useRef(null)
   const collapsedItemHeight = 44
   const collapsedVisibleOffset = 8
   const maxCollapsedItems = 4
@@ -180,6 +182,26 @@ export const SetlistList = ({
     }, 180)
   }
 
+  useEffect(() => {
+    if (showCollapsedStack) {
+      collapseCenterTimeoutRef.current = setTimeout(() => {
+        setIsFullyCollapsed(true)
+        collapseCenterTimeoutRef.current = null
+      }, 200)
+    } else {
+      setIsFullyCollapsed(false)
+      if (collapseCenterTimeoutRef.current) {
+        clearTimeout(collapseCenterTimeoutRef.current)
+        collapseCenterTimeoutRef.current = null
+      }
+    }
+    return () => {
+      if (collapseCenterTimeoutRef.current) {
+        clearTimeout(collapseCenterTimeoutRef.current)
+      }
+    }
+  }, [showCollapsedStack])
+
   useEffect(() => {
     return () => {
       if (hoverTimeoutRef.current) {
@@ -260,6 +282,7 @@ export const SetlistList = ({
           direction="column"
           className={classNames(styles.setlistsContent, {
             [styles.collapsedStack]: showCollapsedStack,
+            [styles.collapsedStackCentered]: isFullyCollapsed,
             [styles.collapsedMask]: collapsed,
           })}
         >

package/src/components/SetlistList/SetlistList.module.css

@@ -194,22 +194,27 @@
   }
 .collapsedStack {
   gap: 0;
+}
+
+.collapsedStackCentered {
   align-items: center;
 }
 .collapsedStackItem {
   position: relative;
-  justify-content: flex-start;
+  /* justify-content: flex-start; */
 }
 
 .collapsedMask {
   position: relative;
   overflow: hidden;
   padding-top: 2px;
+  display: flex;
+  
 }
 
-.collapsedStack.collapsedMask {
+/* .collapsedStack.collapsedMask {
   padding-top: 12px;
-}
+} */
 
 .collapsedTransition {
   transition: margin-top 360ms ease-in-out;

package/src/components/useForm/useForm.jsx

@@ -0,0 +1,204 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { Text, Flex } from '../../index'
+
+/**
+ * @typedef {import('zod').ZodObject} ZodSchema
+ */
+
+/**
+ * @typedef {'checkbox' | 'switch'} ToggleFieldType
+ */
+
+/**
+ * @typedef {Object} TextFieldProps
+ * @property {string} value - Current field value.
+ * @property {(e: Event | string) => void} onChange - Change handler that accepts
+ *   an input event or a raw value (for Select-like components).
+ */
+
+/**
+ * @typedef {Object} ToggleFieldProps
+ * @property {boolean} checked - Current checked state.
+ * @property {(checked: boolean) => void} onCheckedChange - Callback fired when the checked state changes.
+ */
+
+/**
+ * @typedef {Object} FormResult
+ * @property {boolean} isValid - Whether the current values pass schema validation.
+ * @property {Object} data - Parsed data when valid, raw values when invalid.
+ */
+
+/**
+ * @typedef {Object} FieldProps
+ * @property {string} name - Field name matching a key in the schema.
+ * @property {React.ReactNode} children - The form control to render.
+ */
+
+/**
+ * @typedef {Object} UseFormReturn
+ * @property {((name: string, type?: undefined) => TextFieldProps) & ((name: string, type: ToggleFieldType) => ToggleFieldProps)} connectField
+ *   Returns spread-ready props for a form control. Pass `'checkbox'` or `'switch'`
+ *   as the second argument for toggle controls.
+ * @property {React.FC<FieldProps>} Field - Wrapper that renders its children with
+ *   an inline validation error message below.
+ * @property {(name: string) => React.ReactNode | null} error - Returns the error
+ *   message element for a field, or `null` if the field is valid.
+ * @property {Object} values - Current form values object (reactive).
+ * @property {(name: string, value: *) => void} set - Imperatively set a single field value.
+ * @property {(vals?: Object) => void} reset - Reset all values and errors.
+ *   Pass an object to reset to specific values, or omit for schema defaults.
+ * @property {() => FormResult} getValues - Validate the form and return
+ *   `{ isValid, data }`. Sets field errors on failure.
+ * @property {(cb: (values: Object) => void) => () => void} watchValues
+ *   Subscribe to value changes. Returns an unsubscribe function.
+ */
+
+/** @param {{ name: string, errorsRef: React.MutableRefObject<Object>, children: React.ReactNode }} props */
+function FieldView({ name, errorsRef, children }) {
+    const msg = errorsRef.current[name]
+    return (
+        <Flex direction="column" gap="1">
+            {children}
+            {msg && <Text size="1" color="red">{msg}</Text>}
+        </Flex>
+    )
+}
+
+/**
+ * Lightweight form hook driven by a Zod schema.
+ *
+ * @param {Object} options
+ * @param {ZodSchema} options.schema - Zod object schema used for default values and validation.
+ * @returns {UseFormReturn}
+ *
+ * @example
+ * const schema = z.object({
+ *   name: z.string().min(2, 'Too short').default(''),
+ *   agree: z.boolean().refine(v => v, 'Required').default(false),
+ * })
+ *
+ * function MyForm() {
+ *   const { connectField, Field, getValues } = useForm({ schema })
+ *
+ *   return (
+ *     <>
+ *       <Field name="name">
+ *         <TextField placeholder="Name" {...connectField('name')} />
+ *       </Field>
+ *       <Field name="agree">
+ *         <Checkbox {...connectField('agree', 'checkbox')} />
+ *       </Field>
+ *       <Button onClick={() => {
+ *         const { isValid, data } = getValues()
+ *         if (isValid) console.log(data)
+ *       }}>Save</Button>
+ *     </>
+ *   )
+ * }
+ */
+export function useForm({ schema }) {
+    const [values, setValues] = useState(() => schema.parse({}))
+    const [errors, setErrors] = useState({})
+    const errorsRef = useRef(errors)
+    errorsRef.current = errors
+    const listenersRef = useRef([])
+
+    const mountedRef = useRef(false)
+    useEffect(() => {
+        if (!mountedRef.current) {
+            mountedRef.current = true
+            return
+        }
+        for (const cb of listenersRef.current) cb(values)
+    }, [values])
+
+    /** @type {(name: string, value: *) => void} */
+    const set = useCallback((name, value) => {
+        setValues((prev) => ({ ...prev, [name]: value }))
+        setErrors((prev) => ({ ...prev, [name]: null }))
+    }, [])
+
+    /**
+     * Returns spread-ready props for a form control.
+     *
+     * - Default (no type): returns `{ value, onChange }` for text inputs and selects.
+     * - `'checkbox'` / `'switch'`: returns `{ checked, onCheckedChange }`.
+     *
+     * @param {string} name - Field name matching a key in the schema.
+     * @param {ToggleFieldType} [type] - Control type hint.
+     * @returns {TextFieldProps | ToggleFieldProps}
+     */
+    const connectField = (name, type) => {
+        const val = values[name]
+        const update = (v) => set(name, v)
+        if (type === 'checkbox' || type === 'switch') {
+            return { checked: !!val, onCheckedChange: update }
+        }
+        return { value: val ?? '', onChange: (e) => update(e?.target?.value ?? e) }
+    }
+
+    /**
+     * Validate the current values against the schema.
+     *
+     * @returns {FormResult} `{ isValid: true, data }` on success, or
+     *   `{ isValid: false, data }` on failure (with field errors set).
+     */
+    const getValues = () => {
+        const result = schema.safeParse(values)
+        if (result.success) {
+            setErrors({})
+            return { isValid: true, data: result.data }
+        }
+        const fieldErrors = {}
+        for (const issue of result.error.issues) {
+            const name = issue.path.join('.')
+            if (!fieldErrors[name]) fieldErrors[name] = issue.message
+        }
+        setErrors(fieldErrors)
+        return { isValid: false, data: values }
+    }
+
+    /**
+     * Subscribe to value changes. The callback fires after every state
+     * update (skipping the initial mount).
+     *
+     * @param {(values: Object) => void} cb - Listener called with the latest values.
+     * @returns {() => void} Unsubscribe function (safe to return from `useEffect`).
+     */
+    const watchValues = useCallback((cb) => {
+        listenersRef.current.push(cb)
+        return () => {
+            listenersRef.current = listenersRef.current.filter((l) => l !== cb)
+        }
+    }, [])
+
+    /**
+     * Returns the error message element for a field, or `null` if valid.
+     *
+     * @param {string} name - Field name.
+     * @returns {React.ReactNode | null}
+     */
+    const error = (name) => {
+        const msg = errors[name]
+        if (!msg) return null
+        return <Text size="1" color="red">{msg}</Text>
+    }
+
+    /**
+     * Reset all values and clear errors.
+     *
+     * @param {Object} [vals] - Optional values to reset to. Defaults to schema defaults.
+     */
+    const reset = (vals) => {
+        setValues(vals ?? schema.parse({}))
+        setErrors({})
+    }
+
+    /** @type {React.FC<FieldProps>} */
+    const Field = useCallback(
+        (props) => <FieldView {...props} errorsRef={errorsRef} />,
+        []
+    )
+
+    return { connectField, Field, error, values, set, reset, getValues, watchValues }
+}