@linktr.ee/messaging-react 4.1.1 → 4.1.2

package/src/components/CustomMessageInput/index.tsx

@@ -327,6 +327,17 @@ export interface CustomMessageInputProps {
   composerInput?: React.ComponentType
 }
 
+const ComposerBackdrop: React.FC = () => (
+  <div className="messaging-composer-backdrop" aria-hidden="true">
+    <div className="messaging-composer-backdrop-blur" />
+    <div className="messaging-composer-backdrop-blur" />
+    <div className="messaging-composer-backdrop-blur" />
+    <div className="messaging-composer-backdrop-blur" />
+    <div className="messaging-composer-backdrop-blur" />
+    <div className="messaging-composer-backdrop-gradient" />
+  </div>
+)
+
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderActions,
   renderHeader,
@@ -436,14 +447,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
         ref={composerRef}
         className="messaging-composer-chrome messaging-composer-chrome--floating"
       >
-        <div className="messaging-composer-backdrop" aria-hidden="true">
-          <div className="messaging-composer-backdrop-blur" />
-          <div className="messaging-composer-backdrop-blur" />
-          <div className="messaging-composer-backdrop-blur" />
-          <div className="messaging-composer-backdrop-blur" />
-          <div className="messaging-composer-backdrop-blur" />
-          <div className="messaging-composer-backdrop-gradient" />
-        </div>
+        <ComposerBackdrop />
         <div className="relative z-10 flex flex-col">
           {renderHeader?.()}
           <div className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4">
@@ -488,14 +492,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
       ref={composerRef}
       className="messaging-composer-chrome messaging-composer-chrome--floating"
     >
-      <div className="messaging-composer-backdrop" aria-hidden="true">
-        <div className="messaging-composer-backdrop-blur" />
-        <div className="messaging-composer-backdrop-blur" />
-        <div className="messaging-composer-backdrop-blur" />
-        <div className="messaging-composer-backdrop-blur" />
-        <div className="messaging-composer-backdrop-blur" />
-        <div className="messaging-composer-backdrop-gradient" />
-      </div>
+      <ComposerBackdrop />
 
       <div className="relative z-10 flex min-h-0 flex-col">
         {renderHeader?.()}

package/src/components/FaqList/FaqList.stories.tsx

@@ -22,6 +22,15 @@ const Template: StoryFn<ComponentProps> = (args) => {
   )
 }
 
+// Per-variant stories stay in Storybook for browsing/design review but are
+// individually covered by cells in AllStates — skip in Chromatic.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
+// Deterministic local avatar for the grid so a pravatar network flake can't
+// diff the whole AllStates snapshot. Individual stories keep their remote
+// images (they're skipped in Chromatic anyway).
+const LOCAL_AVATAR = '/image-thumbnail.jpg'
+
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {
   faqs: [
@@ -52,6 +61,7 @@ Default.args = {
   avatarName: 'Brie Parson',
   avatarImage: 'https://i.pravatar.cc/150?img=47',
 }
+Default.parameters = skipInChromatic
 
 export const WithoutHeader: StoryFn<ComponentProps> = Template.bind({})
 WithoutHeader.args = {
@@ -73,6 +83,7 @@ WithoutHeader.args = {
   ],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+WithoutHeader.parameters = skipInChromatic
 
 export const WithDisabledFaq: StoryFn<ComponentProps> = Template.bind({})
 WithDisabledFaq.args = {
@@ -101,6 +112,7 @@ WithDisabledFaq.args = {
   ],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+WithDisabledFaq.parameters = skipInChromatic
 
 export const WithLoading: StoryFn<ComponentProps> = Template.bind({})
 WithLoading.args = {
@@ -131,12 +143,14 @@ WithLoading.args = {
   loadingFaqId: '2',
   headerText: 'Tap to send a suggested question:',
 }
+WithLoading.parameters = skipInChromatic
 
 export const Empty: StoryFn<ComponentProps> = Template.bind({})
 Empty.args = {
   faqs: [],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+Empty.parameters = skipInChromatic
 
 export const WithAvatarOnly: StoryFn<ComponentProps> = Template.bind({})
 WithAvatarOnly.args = {
@@ -160,6 +174,7 @@ WithAvatarOnly.args = {
   headerText: 'Frequently Asked Questions',
   avatarName: 'Account Owner',
 }
+WithAvatarOnly.parameters = skipInChromatic
 
 export const WithAvatarAndImage: StoryFn<ComponentProps> = Template.bind({})
 WithAvatarAndImage.args = {
@@ -184,3 +199,192 @@ WithAvatarAndImage.args = {
   avatarName: 'Sarah Johnson',
   avatarImage: 'https://i.pravatar.cc/150?img=28',
 }
+WithAvatarAndImage.parameters = skipInChromatic
+
+export const AllStates: StoryFn = () => {
+  const states: { label: string; props: ComponentProps }[] = [
+    {
+      label: 'Default (header + avatar + image)',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+          {
+            id: '3',
+            question: 'Brand collabs',
+            answer: 'Returns are accepted...',
+            enabled: true,
+            order: 3,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        headerText: 'Tap to send a suggested question by Brie Parson:',
+        avatarName: 'Brie Parson',
+        avatarImage: LOCAL_AVATAR,
+      },
+    },
+    {
+      label: 'Without header',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+      },
+    },
+    {
+      label: 'With avatar only',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        headerText: 'Frequently Asked Questions',
+        avatarName: 'Account Owner',
+      },
+    },
+    {
+      label: 'With avatar and image',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'How do I contact support?',
+            answer: 'You can reach us...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'What are your hours?',
+            answer: 'We are available...',
+            enabled: true,
+            order: 2,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        headerText: 'Questions for Sarah',
+        avatarName: 'Sarah Johnson',
+        avatarImage: LOCAL_AVATAR,
+      },
+    },
+    {
+      label: 'With disabled FAQ',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Enabled question',
+            answer: 'Answer...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Disabled question',
+            answer: 'Answer...',
+            enabled: false,
+            order: 2,
+          },
+          {
+            id: '3',
+            question: 'Another enabled',
+            answer: 'Answer...',
+            enabled: true,
+            order: 3,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+      },
+    },
+    {
+      label: 'With loading',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+          {
+            id: '3',
+            question: 'Brand collabs',
+            answer: 'Returns are accepted...',
+            enabled: true,
+            order: 3,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        loadingFaqId: '2',
+        headerText: 'Tap to send a suggested question:',
+      },
+    },
+    {
+      label: 'Empty (renders nothing)',
+      props: {
+        faqs: [],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+      },
+    },
+  ]
+
+  return (
+    <div className="flex flex-col gap-6 bg-white p-6">
+      {states.map(({ label, props }) => (
+        <div key={label} className="flex flex-col gap-1">
+          <span className="text-xs text-stone">{label}</span>
+          <div className="w-96">
+            <FaqList {...props} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/FaqList/FaqListItem.stories.tsx

@@ -9,6 +9,7 @@ const meta: Meta<ComponentProps> = {
   component: FaqListItem,
   parameters: {
     layout: 'centered',
+    chromatic: { disableSnapshot: true },
   },
 }
 export default meta

package/src/components/IconButton/IconButton.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<ComponentProps> = {
   component: IconButton,
   parameters: {
     layout: 'centered',
+    chromatic: { disableSnapshot: true },
   },
   argTypes: {
     onClick: { action: 'clicked' },

package/src/components/Loading/Loading.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<ComponentProps> = {
   component: Loading,
   parameters: {
     layout: 'centered',
+    chromatic: { disableSnapshot: true },
   },
 }
 export default meta

package/src/components/MessagingShell/ErrorState.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<ComponentProps> = {
   component: ErrorState,
   parameters: {
     layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
   },
 }
 

package/src/components/MessagingShell/LoadingState.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<ComponentProps> = {
   component: LoadingState,
   parameters: {
     layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
   },
 }
 

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<ComponentProps> = {
   component: SearchInput,
   parameters: {
     layout: 'centered',
+    chromatic: { disableSnapshot: true },
   },
 }
 export default meta

package/src/testing/createMockMessagingClient.stories.tsx

@@ -14,7 +14,7 @@ import { createMockMessagingClient } from './createMockMessagingClient'
  */
 const meta: Meta = {
   title: 'testing/createMockMessagingClient',
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'fullscreen', chromatic: { disableSnapshot: true } },
 }
 export default meta