Skip to content

Commit 0374435

Browse files
vinitkhandal717vinitkhandal717
authored
Merge pull request #564 from juspay/staging
Staging to main
2 parents 8ef7084 + 056daf9 commit 0374435

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+4362
-1145
lines changed

‎apps/site/src/demos/AvatarDemo.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const AvatarDemo = () => {
2727

2828
// Options for selects
2929
const sizeOptions = [
30-
{ value: AvatarSize.XS, label: 'Extra Small' },
3130
{ value: AvatarSize.SM, label: 'Small' },
31+
{ value: AvatarSize.REGULAR, label: 'Regular' },
3232
{ value: AvatarSize.MD, label: 'Medium' },
3333
{ value: AvatarSize.LG, label: 'Large' },
3434
{ value: AvatarSize.XL, label: 'Extra Large' },
@@ -492,18 +492,21 @@ const AvatarDemo = () => {
492492
<User
493493
size={
494494
size ===
495-
AvatarSize.XS
495+
AvatarSize.SM
496496
? 10
497497
: size ===
498-
AvatarSize.SM
498+
AvatarSize.REGULAR
499499
? 12
500500
: size ===
501501
AvatarSize.MD
502502
? 16
503503
: size ===
504504
AvatarSize.LG
505505
? 20
506-
: 24
506+
: size ===
507+
AvatarSize.XL
508+
? 24
509+
: 28
507510
}
508511
/>
509512
}

‎apps/site/src/demos/ButtonDemo.tsx‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import {
77
ButtonSubType,
88
ButtonState,
99
} from '../../../../packages/blend/lib/components/Button'
10-
import { SkeletonButton } from '../../../../packages/blend/lib/components/Skeleton'
11-
import type { SkeletonVariant } from '../../../../packages/blend/lib/components/Skeleton/skeleton.tokens'
10+
1211
import { addSnackbar } from '../../../../packages/blend/lib/components/Snackbar'
1312
import { SingleSelect } from '../../../../packages/blend/lib/components/SingleSelect'
1413
import { TextInput } from '../../../../packages/blend/lib/components/Inputs/TextInput'
@@ -28,7 +27,7 @@ const ButtonDemo = () => {
2827
const [isDisabled, setIsDisabled] = useState(false)
2928
const [fullWidth, setFullWidth] = useState(false)
3029

31-
// SkeletonButton Playground State
30+
// Button skeleton playground state
3231
const [skeletonText, setSkeletonText] = useState('Loading...')
3332
const [skeletonType, setSkeletonType] = useState<ButtonType>(
3433
ButtonType.PRIMARY
@@ -41,8 +40,6 @@ const ButtonDemo = () => {
4140
)
4241
const [skeletonLeadingIcon, setSkeletonLeadingIcon] = useState(false)
4342
const [skeletonTrailingIcon, setSkeletonTrailingIcon] = useState(false)
44-
const [skeletonVariant, setSkeletonVariant] =
45-
useState<SkeletonVariant>('pulse')
4643
const [skeletonFullWidth, setSkeletonFullWidth] = useState(false)
4744

4845
// Options for selects
@@ -65,11 +62,14 @@ const ButtonDemo = () => {
6562
{ value: ButtonSubType.INLINE, label: 'Inline' },
6663
]
6764

68-
const skeletonVariantOptions = [
69-
{ value: 'pulse' as SkeletonVariant, label: 'Pulse' },
70-
{ value: 'wave' as SkeletonVariant, label: 'Wave' },
71-
{ value: 'shimmer' as SkeletonVariant, label: 'Shimmer' },
72-
]
65+
const animationVariants = ['pulse', 'wave', 'shimmer'] as const
66+
const [skeletonAnimationVariant, setSkeletonAnimationVariant] =
67+
useState<(typeof animationVariants)[number]>('pulse')
68+
69+
const skeletonVariantOptions = animationVariants.map((variant) => ({
70+
value: variant,
71+
label: variant.charAt(0).toUpperCase() + variant.slice(1),
72+
}))
7373

7474
return (
7575
<div className="p-8 space-y-12">
@@ -78,9 +78,12 @@ const ButtonDemo = () => {
7878
<h1 className="text-3xl font-bold">Button Component Demo</h1>
7979
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
8080
<p className="text-blue-800">
81-
<strong>Hybrid Approach:</strong> Button is now pure (no
82-
skeleton logic). SkeletonButton handles loading states
83-
with perfect token mirroring.
81+
<strong>Simple Approach:</strong> Use
82+
<code className="bg-blue-100 px-1 rounded">
83+
{' showSkeleton '}
84+
</code>
85+
on Button to render the skeleton placeholder with token
86+
perfect mirroring.
8487
</p>
8588
</div>
8689
</div>
@@ -208,14 +211,14 @@ const ButtonDemo = () => {
208211
</div>
209212
</div>
210213

211-
{/* SkeletonButton Playground */}
214+
{/* Button Skeleton Playground */}
212215
<div className="space-y-6">
213216
<h2 className="text-2xl font-bold">
214-
🔄 SkeletonButton Playground
217+
🔄 Button Skeleton Playground
215218
</h2>
216219
<p className="text-gray-600">
217-
Test SkeletonButton with perfect token mirroring - should
218-
match Button dimensions exactly
220+
Test Button with <code>showSkeleton</code> for perfect token
221+
mirroring - it should match Button dimensions exactly
219222
</p>
220223

221224
{/* Controls */}
@@ -285,31 +288,37 @@ const ButtonDemo = () => {
285288
<SingleSelect
286289
label="Animation Variant"
287290
items={[{ items: skeletonVariantOptions }]}
288-
selected={skeletonVariant}
291+
selected={skeletonAnimationVariant}
289292
onSelect={(value) =>
290-
setSkeletonVariant(value as SkeletonVariant)
293+
setSkeletonAnimationVariant(
294+
value as (typeof animationVariants)[number]
295+
)
291296
}
292297
placeholder="Select animation"
293298
/>
294299
</div>
295300
</div>
296301

297-
{/* SkeletonButton Demo */}
302+
{/* Button Skeleton Demo */}
298303
<div className="min-h-40 rounded-2xl w-full flex justify-center items-center border-2 border-dashed border-gray-200 bg-gray-50">
299-
<SkeletonButton
304+
<Button
305+
buttonType={skeletonType}
306+
size={skeletonSize}
307+
subType={skeletonSubType}
308+
fullWidth={skeletonFullWidth}
300309
text={
301310
skeletonSubType === ButtonSubType.ICON_ONLY
302311
? undefined
303312
: skeletonText
304313
}
305-
buttonType={skeletonType}
306-
size={skeletonSize}
307-
subType={skeletonSubType}
308-
hasLeadingIcon={skeletonLeadingIcon}
309-
hasTrailingIcon={skeletonTrailingIcon}
310-
fullWidth={skeletonFullWidth}
311-
loading={true}
312-
variant={skeletonVariant}
314+
leadingIcon={
315+
skeletonLeadingIcon ? <Hash size={16} /> : undefined
316+
}
317+
trailingIcon={
318+
skeletonTrailingIcon ? <X size={16} /> : undefined
319+
}
320+
showSkeleton
321+
skeletonVariant={skeletonAnimationVariant}
313322
/>
314323
</div>
315324
</div>
@@ -328,11 +337,11 @@ const ButtonDemo = () => {
328337
className="space-y-3 p-4 border rounded-lg bg-white"
329338
>
330339
<h3 className="text-lg font-semibold">{label}</h3>
331-
<SkeletonButton
340+
<Button
332341
text="Loading Button"
333342
buttonType={ButtonType.PRIMARY}
334-
loading={true}
335-
variant={value}
343+
showSkeleton
344+
skeletonVariant={value}
336345
/>
337346
</div>
338347
))}

‎apps/site/src/demos/ChatInputDemo.tsx‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,23 @@ import {
55
} from '../../../../packages/blend/lib/components/ChatInput'
66
import { TextInput } from '../../../../packages/blend/lib/components/Inputs/TextInput'
77
import { Switch } from '../../../../packages/blend/lib/components/Switch'
8-
import { Camera, FileText, Upload, Mic, Send, Hash, Star } from 'lucide-react'
8+
import {
9+
Camera,
10+
FileText,
11+
Upload,
12+
Mic,
13+
Send,
14+
Hash,
15+
Star,
16+
AudioLines,
17+
} from 'lucide-react'
918
import { addSnackbar } from '../../../../packages/blend/lib/components/Snackbar'
19+
import {
20+
ButtonType,
21+
ButtonSize,
22+
ButtonSubType,
23+
Button,
24+
} from '../../../../packages/blend/lib/components/Button'
1025

1126
const ChatInputDemo = () => {
1227
// Playground state
@@ -118,8 +133,6 @@ const ChatInputDemo = () => {
118133
setPlaygroundFiles([])
119134
}
120135

121-
console.log('topQueriesMessage-->>', topQueriesMessage)
122-
123136
return (
124137
<div className="p-8 space-y-12">
125138
{/* Header */}
@@ -198,6 +211,27 @@ const ChatInputDemo = () => {
198211
<div className="min-h-32 rounded-2xl w-full flex justify-center items-center bg-gray-50 p-8">
199212
<div style={{ width: playgroundWidth }}>
200213
<ChatInput
214+
onKeyDown={(
215+
e: React.KeyboardEvent<HTMLTextAreaElement>
216+
) => {
217+
console.log('onKeyDown', e.key)
218+
if (e.key === 'Enter') {
219+
e.preventDefault()
220+
handlePlaygroundSend(
221+
playgroundMessage,
222+
playgroundFiles
223+
)
224+
}
225+
}}
226+
slot1={
227+
<Button
228+
buttonType={ButtonType.PRIMARY}
229+
size={ButtonSize.SMALL}
230+
subType={ButtonSubType.ICON_ONLY}
231+
leadingIcon={<AudioLines size={14} />}
232+
onClick={handlePlaygroundVoiceRecord}
233+
/>
234+
}
201235
value={playgroundMessage}
202236
onChange={setPlaygroundMessage}
203237
onSend={handlePlaygroundSend}

‎apps/site/src/demos/CodeBlockDemo.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -660,6 +660,154 @@ fibonacci n
660660
</div>
661661
</div>
662662

663+
{/* Auto-Formatting Feature */}
664+
<div className="space-y-6" id="auto-formatting">
665+
<h2 className="text-2xl font-bold">
666+
Auto-Formatting (NEW! 🎉)
667+
</h2>
668+
<p className="text-gray-600">
669+
CodeBlock now supports automatic code formatting with the{' '}
670+
<code className="px-2 py-1 bg-gray-100 rounded text-sm font-mono">
671+
autoFormat
672+
</code>{' '}
673+
prop
674+
</p>
675+
676+
<div className="grid grid-cols-1 gap-6">
677+
{/* JSON Formatting */}
678+
<div className="space-y-3">
679+
<h3 className="text-lg font-semibold">
680+
JSON Auto-Formatting
681+
</h3>
682+
<p className="text-sm text-gray-600">
683+
Unformatted JSON is automatically formatted with
684+
proper indentation
685+
</p>
686+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
687+
<div className="space-y-2">
688+
<span className="text-xs font-semibold text-gray-500 uppercase">
689+
Without autoFormat
690+
</span>
691+
<CodeBlock
692+
code={`{"name":"John Doe","age":30,"email":"john@example.com","address":{"city":"New York","zip":"10001"},"active":true}`}
693+
header="unformatted.json"
694+
/>
695+
</div>
696+
<div className="space-y-2">
697+
<span className="text-xs font-semibold text-green-600 uppercase">
698+
With autoFormat
699+
</span>
700+
<CodeBlock
701+
code={`{"name":"John Doe","age":30,"email":"john@example.com","address":{"city":"New York","zip":"10001"},"active":true}`}
702+
autoFormat={true}
703+
language="json"
704+
header="formatted.json"
705+
/>
706+
</div>
707+
</div>
708+
</div>
709+
710+
{/* JavaScript Formatting */}
711+
<div className="space-y-3">
712+
<h3 className="text-lg font-semibold">
713+
JavaScript Auto-Formatting
714+
</h3>
715+
<p className="text-sm text-gray-600">
716+
Unformatted JavaScript code is automatically
717+
indented
718+
</p>
719+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
720+
<div className="space-y-2">
721+
<span className="text-xs font-semibold text-gray-500 uppercase">
722+
Without autoFormat
723+
</span>
724+
<CodeBlock
725+
code={`function processPayment(data){const amount=data.amount;if(amount>0){console.log('Processing payment');return{success:true,amount};}return{success:false};}`}
726+
header="messy.js"
727+
/>
728+
</div>
729+
<div className="space-y-2">
730+
<span className="text-xs font-semibold text-green-600 uppercase">
731+
With autoFormat
732+
</span>
733+
<CodeBlock
734+
code={`function processPayment(data){const amount=data.amount;if(amount>0){console.log('Processing payment');return{success:true,amount};}return{success:false};}`}
735+
autoFormat={true}
736+
language="javascript"
737+
header="formatted.js"
738+
/>
739+
</div>
740+
</div>
741+
</div>
742+
743+
{/* CSS Formatting */}
744+
<div className="space-y-3">
745+
<h3 className="text-lg font-semibold">
746+
CSS Auto-Formatting
747+
</h3>
748+
<p className="text-sm text-gray-600">
749+
Unformatted CSS is automatically structured with
750+
proper indentation
751+
</p>
752+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
753+
<div className="space-y-2">
754+
<span className="text-xs font-semibold text-gray-500 uppercase">
755+
Without autoFormat
756+
</span>
757+
<CodeBlock
758+
code={`.button{background:#007bff;color:white;padding:10px 20px;border-radius:5px;}.button:hover{background:#0056b3;}`}
759+
header="styles.css"
760+
/>
761+
</div>
762+
<div className="space-y-2">
763+
<span className="text-xs font-semibold text-green-600 uppercase">
764+
With autoFormat
765+
</span>
766+
<CodeBlock
767+
code={`.button{background:#007bff;color:white;padding:10px 20px;border-radius:5px;}.button:hover{background:#0056b3;}`}
768+
autoFormat={true}
769+
language="css"
770+
header="formatted.css"
771+
/>
772+
</div>
773+
</div>
774+
</div>
775+
776+
{/* HTML Formatting */}
777+
<div className="space-y-3">
778+
<h3 className="text-lg font-semibold">
779+
HTML Auto-Formatting
780+
</h3>
781+
<p className="text-sm text-gray-600">
782+
Unformatted HTML is automatically indented with
783+
proper nesting
784+
</p>
785+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
786+
<div className="space-y-2">
787+
<span className="text-xs font-semibold text-gray-500 uppercase">
788+
Without autoFormat
789+
</span>
790+
<CodeBlock
791+
code={`<div><header><h1>Welcome</h1></header><main><p>This is content</p></main><footer><p>Footer text</p></footer></div>`}
792+
header="index.html"
793+
/>
794+
</div>
795+
<div className="space-y-2">
796+
<span className="text-xs font-semibold text-green-600 uppercase">
797+
With autoFormat
798+
</span>
799+
<CodeBlock
800+
code={`<div><header><h1>Welcome</h1></header><main><p>This is content</p></main><footer><p>Footer text</p></footer></div>`}
801+
autoFormat={true}
802+
language="html"
803+
header="formatted.html"
804+
/>
805+
</div>
806+
</div>
807+
</div>
808+
</div>
809+
</div>
810+
663811
{/* Multi-Language Support */}
664812
<div className="space-y-6" id="multi-language">
665813
<h2 className="text-2xl font-bold">Multi-Language Support</h2>

0 commit comments

Comments
 (0)