@flamingo-stack/openframe-frontend-core 0.0.399 → 0.0.400-snapshot.20260710144905

package/src/hooks/ui/use-deferred-error.ts

@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+
+export interface UseDeferredErrorResult {
+  /** The message to render (undefined while the reveal is deferred or the field is valid). */
+  error: string | undefined
+  /** Attach to the field's onBlur — reveals validation immediately and keeps it live from then on. */
+  onBlur: () => void
+}
+
+/**
+ * Defers showing a field validation message while the user is still typing.
+ *
+ * The message is revealed when the field loses focus (touched) or when the
+ * value hasn't changed for `delay` ms; every keystroke restarts the timer.
+ * Once touched, validation stays live. A message that clears (the value became
+ * valid) disappears immediately.
+ */
+export function useDeferredError(error: string | undefined, value: string, delay = 1500): UseDeferredErrorResult {
+  const [touched, setTouched] = React.useState(false)
+  const [paused, setPaused] = React.useState(false)
+
+  // Typing hides the message and restarts the pause timer.
+  React.useEffect(() => {
+    if (touched) return
+    setPaused(false)
+    const timer = setTimeout(() => setPaused(true), delay)
+    return () => clearTimeout(timer)
+  }, [value, delay, touched])
+
+  const onBlur = React.useCallback(() => setTouched(true), [])
+
+  return {
+    error: error && (touched || paused) ? error : undefined,
+    onBlur,
+  }
+}

package/src/stories/DatePicker.stories.tsx

@@ -775,8 +775,10 @@ const fmtDay = (d: Date) =>
 
 /**
  * DateFilterMenu — calendar-icon trigger opens a popover with a sort selector,
- * a date-range calendar, and Close / Apply actions. Matches the Figma
- * `filter-menu`. Selections are drafted internally and committed on Apply.
+ * a date-range calendar, and Close/Reset + Apply actions. Matches the Figma
+ * `filter-menu`. The sort and date selection are drafted and committed on
+ * Apply. With a selection present, Close becomes Reset, which clears and
+ * commits the empty selection.
  */
 export const FilterMenuRange: Story = {
   render: function Render() {

package/src/stories/FilterModal.stories.tsx

@@ -517,3 +517,36 @@ export const InteractiveWithTags: Story = {
     onClose: fn(),
   },
 }
+
+/**
+ * Mobile "Sort and Filter" with the date sort + range filter as the last
+ * section (per the logs Figma). Scroll shadows: bottom fade by default while
+ * content continues, top fade once scrolled.
+ */
+export const WithDateFilter: Story = {
+  args: {
+    isOpen: true,
+    title: 'Sort and Filter',
+    filterGroups: [
+      ...defaultFilterGroups,
+      {
+        id: 'tools',
+        title: 'Tool',
+        options: [
+          { id: 'fleet', label: 'Fleet MDM', count: 10 },
+          { id: 'mesh', label: 'MeshCentral', count: 30 },
+          { id: 'tactical', label: 'TacticalRMM', count: 20 },
+          { id: 'windows', label: 'Windows', count: 30 },
+        ],
+      },
+    ],
+    currentFilters: defaultCurrentFilters,
+    onFilterChange: fn(),
+    onClose: fn(),
+    dateFilter: {
+      title: 'Date',
+      sort: 'desc',
+      onChange: fn(),
+    },
+  },
+}

package/src/stories/Input.stories.tsx

@@ -244,7 +244,7 @@ export const ErrorState: Story = {
         />
         <Input
           label="Organization Name"
-          defaultValue="ϕ"
+          defaultValue="A"
           error="Organization Name must be 2-100 characters"
         />
       </div>

package/src/stories/auth/CreateOrganization.stories.tsx

@@ -99,12 +99,13 @@ export const Filled: Story = {
 
 /**
  * Error state: long messages under the fields wrap up to two lines.
+ * Validation is deferred — messages appear after a 1.5s typing pause or on blur.
  */
 export const ErrorState: Story = {
   render: () => (
     <CreateOrganizationPage
       email="ada@example.com"
-      organizationName="ϕ"
+      organizationName="A"
       domainSuffix=".openframe.ai"
       termsUrl="#terms"
       privacyPolicyUrl="#privacy"