@linktr.ee/messaging-react 3.3.9-rc-1781246583 → 3.3.9-rc-1781246754
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -2,8 +2,6 @@ import type { Meta, StoryFn } from '@storybook/react'
|
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import { LinkPreview, LinkPreviewStatus } from 'stream-chat'
|
|
4
4
|
|
|
5
|
-
import LinkAttachment from '../LinkAttachment'
|
|
6
|
-
|
|
7
5
|
import CustomLinkPreviewCard from './CustomLinkPreviewCard'
|
|
8
6
|
|
|
9
7
|
type ComponentProps = React.ComponentProps<typeof CustomLinkPreviewCard>
|
|
@@ -63,105 +61,3 @@ VeryLongUrl.args = {
|
|
|
63
61
|
image_url: '/image-thumbnail.jpg',
|
|
64
62
|
}),
|
|
65
63
|
}
|
|
66
|
-
|
|
67
|
-
// --- Comparison canvas (MES-912) ---------------------------------------------
|
|
68
|
-
// Renders the *live* composer preview card (`CustomLinkPreviewCard`, as it sits
|
|
69
|
-
// inside the composer input box) next to the design-system link cards
|
|
70
|
-
// (`LinkAttachment.Composer / .Sent / .Received`) so positioning, width, and
|
|
71
|
-
// chrome can be compared against the Figma composer node (10746-54094) before
|
|
72
|
-
// deciding the fix. One shared sample link matches the Figma frame.
|
|
73
|
-
|
|
74
|
-
const SAMPLE_TITLE = "Nike Pegasus 42 Men's Road Running Shoes"
|
|
75
|
-
const SAMPLE_URL =
|
|
76
|
-
'https://www.nike.com/au/t/nike-pegasus-42-mens-road-running-shoes-Pl3sezvp/IB1873-020?nikemt=true&cp=31067279846_search_&Macro=--x-23072937532---c-----9071341-00198729628312&dplnk=member&gclsrc=aw.ds&gad_source=1&gad_campaignid=23068820834&gbraid=0AAAABBYosgo460aiaIhdlaGXB0_BsezYf&gclid=EAIaIQobChMI8bHF64iBlQMVApSmAx0lXwqsEAQYASABEgLoufD_BwE'
|
|
77
|
-
const SAMPLE_IMAGE = '/image-thumbnail.jpg'
|
|
78
|
-
|
|
79
|
-
const Panel = ({
|
|
80
|
-
label,
|
|
81
|
-
children,
|
|
82
|
-
}: {
|
|
83
|
-
label: string
|
|
84
|
-
children: React.ReactNode
|
|
85
|
-
}) => (
|
|
86
|
-
<div className="flex flex-col gap-2">
|
|
87
|
-
<span className="text-xs font-medium text-black/40">{label}</span>
|
|
88
|
-
{children}
|
|
89
|
-
</div>
|
|
90
|
-
)
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Mimics `CustomMessageInputInner`'s `central-container` (white rounded input
|
|
94
|
-
* box) with the gift action button beside it, so the live composer preview is
|
|
95
|
-
* shown exactly as it sits in the composer. Mirrors the Figma composer layout.
|
|
96
|
-
*/
|
|
97
|
-
const MockComposer = ({ children }: { children: React.ReactNode }) => (
|
|
98
|
-
// Width approximates a desktop/web inbox composer (the real composer's input
|
|
99
|
-
// box is `w-full` with no max-width), so a fixed 280px card no longer fills it.
|
|
100
|
-
<div className="flex w-[500px] items-end gap-4">
|
|
101
|
-
<div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-white shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
|
|
102
|
-
<span className="text-lg" aria-hidden>
|
|
103
|
-
🎁
|
|
104
|
-
</span>
|
|
105
|
-
</div>
|
|
106
|
-
<div className="central-container flex w-full min-w-0 flex-col gap-2 rounded-[1.5rem] bg-white p-2 shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
|
|
107
|
-
{/* Matches CustomLinkPreviewList wrapper */}
|
|
108
|
-
<div className="mb-4 flex w-full flex-col items-stretch gap-2">
|
|
109
|
-
{children}
|
|
110
|
-
</div>
|
|
111
|
-
<div className="flex">
|
|
112
|
-
<div className="ml-2 mr-4 w-full self-center text-sm text-black/30">
|
|
113
|
-
Send a message
|
|
114
|
-
</div>
|
|
115
|
-
<div className="mt-auto flex size-8 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white">
|
|
116
|
-
↑
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
)
|
|
122
|
-
|
|
123
|
-
export const Comparison: StoryFn = () => (
|
|
124
|
-
<div className="flex min-h-screen w-full flex-wrap items-start gap-12 bg-[#F9F7F4] p-12">
|
|
125
|
-
<Panel label="Composer (live — CustomLinkPreviewCard, inside input box)">
|
|
126
|
-
<MockComposer>
|
|
127
|
-
<CustomLinkPreviewCard
|
|
128
|
-
link={makePreview({
|
|
129
|
-
og_scrape_url: SAMPLE_URL,
|
|
130
|
-
title: SAMPLE_TITLE,
|
|
131
|
-
image_url: SAMPLE_IMAGE,
|
|
132
|
-
})}
|
|
133
|
-
onDismiss={() => {}}
|
|
134
|
-
/>
|
|
135
|
-
</MockComposer>
|
|
136
|
-
</Panel>
|
|
137
|
-
|
|
138
|
-
<Panel label="Composer (design system — LinkAttachment.Composer)">
|
|
139
|
-
<LinkAttachment.Composer
|
|
140
|
-
layout="featured"
|
|
141
|
-
title={SAMPLE_TITLE}
|
|
142
|
-
url={SAMPLE_URL}
|
|
143
|
-
thumbnailUrl={SAMPLE_IMAGE}
|
|
144
|
-
onDismiss={() => {}}
|
|
145
|
-
/>
|
|
146
|
-
</Panel>
|
|
147
|
-
|
|
148
|
-
<Panel label="In-conversation sent (LinkAttachment.Sent)">
|
|
149
|
-
<LinkAttachment.Sent
|
|
150
|
-
layout="featured"
|
|
151
|
-
title={SAMPLE_TITLE}
|
|
152
|
-
url={SAMPLE_URL}
|
|
153
|
-
thumbnailUrl={SAMPLE_IMAGE}
|
|
154
|
-
/>
|
|
155
|
-
</Panel>
|
|
156
|
-
|
|
157
|
-
<Panel label="In-conversation received (LinkAttachment.Received)">
|
|
158
|
-
<LinkAttachment.Received
|
|
159
|
-
layout="featured"
|
|
160
|
-
title={SAMPLE_TITLE}
|
|
161
|
-
url={SAMPLE_URL}
|
|
162
|
-
thumbnailUrl={SAMPLE_IMAGE}
|
|
163
|
-
/>
|
|
164
|
-
</Panel>
|
|
165
|
-
</div>
|
|
166
|
-
)
|
|
167
|
-
Comparison.parameters = { layout: 'fullscreen' }
|