Skip to content

Commit af48de2

Browse files
ishansasikaclaude
ishansasika
and
claude
committed
fix: Correct demo app component props to match library
- Fix SkeletonList prop names (count→items, spacing→gap) - Add missing props: gap (SkeletonText), showHeader (SkeletonTable), gridSize (SpinnerGrid), itemHeight (SkeletonList) - Add baseColor/highlightColor color controls to all skeleton components for customization - Add 'overlay' to ComponentCategory type to fix build error All component prop controls now match the library's feature set from v1.0.1, enabling proper animation and customization in the playground. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 41036fb commit af48de2

2 files changed

Lines changed: 129 additions & 13 deletions

File tree

‎demo/src/data/components.ts‎

Lines changed: 128 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export const COMPONENTS: ComponentMetadata[] = [
104104
defaultProps: {
105105
lines: 3,
106106
width: '100%',
107+
gap: '0.5rem',
107108
},
108109
propDefinitions: [
109110
{
@@ -120,13 +121,34 @@ export const COMPONENTS: ComponentMetadata[] = [
120121
description: 'Width of skeleton lines',
121122
defaultValue: '100%',
122123
},
124+
{
125+
name: 'gap',
126+
type: 'number | string',
127+
control: { type: 'text' },
128+
description: 'Gap between lines',
129+
defaultValue: '0.5rem',
130+
},
123131
{
124132
name: 'animate',
125133
type: 'boolean',
126134
control: { type: 'boolean' },
127135
description: 'Enable shimmer animation',
128136
defaultValue: true,
129137
},
138+
{
139+
name: 'baseColor',
140+
type: 'string',
141+
control: { type: 'color' },
142+
description: 'Base background color',
143+
defaultValue: '#e0e0e0',
144+
},
145+
{
146+
name: 'highlightColor',
147+
type: 'string',
148+
control: { type: 'color' },
149+
description: 'Shimmer highlight color',
150+
defaultValue: '#f5f5f5',
151+
},
130152
],
131153
examples: [
132154
{ name: 'Default', props: {} },
@@ -167,6 +189,20 @@ export const COMPONENTS: ComponentMetadata[] = [
167189
description: 'Enable shimmer animation',
168190
defaultValue: true,
169191
},
192+
{
193+
name: 'baseColor',
194+
type: 'string',
195+
control: { type: 'color' },
196+
description: 'Base background color',
197+
defaultValue: '#e0e0e0',
198+
},
199+
{
200+
name: 'highlightColor',
201+
type: 'string',
202+
control: { type: 'color' },
203+
description: 'Shimmer highlight color',
204+
defaultValue: '#f5f5f5',
205+
},
170206
],
171207
examples: [
172208
{ name: 'Default', props: {} },
@@ -215,6 +251,20 @@ export const COMPONENTS: ComponentMetadata[] = [
215251
description: 'Enable shimmer animation',
216252
defaultValue: true,
217253
},
254+
{
255+
name: 'baseColor',
256+
type: 'string',
257+
control: { type: 'color' },
258+
description: 'Base background color',
259+
defaultValue: '#e0e0e0',
260+
},
261+
{
262+
name: 'highlightColor',
263+
type: 'string',
264+
control: { type: 'color' },
265+
description: 'Shimmer highlight color',
266+
defaultValue: '#f5f5f5',
267+
},
218268
],
219269
examples: [
220270
{ name: 'Default', props: {} },
@@ -271,6 +321,20 @@ export const COMPONENTS: ComponentMetadata[] = [
271321
description: 'Enable shimmer animation',
272322
defaultValue: true,
273323
},
324+
{
325+
name: 'baseColor',
326+
type: 'string',
327+
control: { type: 'color' },
328+
description: 'Base background color',
329+
defaultValue: '#e0e0e0',
330+
},
331+
{
332+
name: 'highlightColor',
333+
type: 'string',
334+
control: { type: 'color' },
335+
description: 'Shimmer highlight color',
336+
defaultValue: '#f5f5f5',
337+
},
274338
],
275339
examples: [
276340
{ name: 'Default', props: {} },
@@ -286,23 +350,30 @@ export const COMPONENTS: ComponentMetadata[] = [
286350
component: SkeletonList,
287351
description: 'List of skeleton items with customizable count',
288352
defaultProps: {
289-
count: 5,
290-
spacing: 16,
353+
items: 5,
354+
gap: 12,
291355
},
292356
propDefinitions: [
293357
{
294-
name: 'count',
358+
name: 'items',
295359
type: 'number',
296360
control: { type: 'range', min: 1, max: 10, step: 1 },
297361
description: 'Number of list items',
298362
defaultValue: 5,
299363
},
300364
{
301-
name: 'spacing',
302-
type: 'number',
303-
control: { type: 'range', min: 4, max: 32, step: 4 },
304-
description: 'Spacing between items',
305-
defaultValue: 16,
365+
name: 'gap',
366+
type: 'number | string',
367+
control: { type: 'text' },
368+
description: 'Gap between items',
369+
defaultValue: 12,
370+
},
371+
{
372+
name: 'itemHeight',
373+
type: 'number | string',
374+
control: { type: 'text' },
375+
description: 'Height of each item',
376+
defaultValue: '3rem',
306377
},
307378
{
308379
name: 'animate',
@@ -311,11 +382,25 @@ export const COMPONENTS: ComponentMetadata[] = [
311382
description: 'Enable shimmer animation',
312383
defaultValue: true,
313384
},
385+
{
386+
name: 'baseColor',
387+
type: 'string',
388+
control: { type: 'color' },
389+
description: 'Base background color',
390+
defaultValue: '#e0e0e0',
391+
},
392+
{
393+
name: 'highlightColor',
394+
type: 'string',
395+
control: { type: 'color' },
396+
description: 'Shimmer highlight color',
397+
defaultValue: '#f5f5f5',
398+
},
314399
],
315400
examples: [
316401
{ name: 'Default', props: {} },
317-
{ name: 'Few Items', props: { count: 3 } },
318-
{ name: 'Many Items', props: { count: 8, spacing: 12 } },
402+
{ name: 'Few Items', props: { items: 3 } },
403+
{ name: 'Many Items', props: { items: 8, gap: 12 } },
319404
],
320405
importPath: "import { SkeletonList } from 'premium-react-loaders';",
321406
},
@@ -328,6 +413,7 @@ export const COMPONENTS: ComponentMetadata[] = [
328413
defaultProps: {
329414
rows: 5,
330415
columns: 4,
416+
showHeader: true,
331417
},
332418
propDefinitions: [
333419
{
@@ -344,18 +430,40 @@ export const COMPONENTS: ComponentMetadata[] = [
344430
description: 'Number of table columns',
345431
defaultValue: 4,
346432
},
433+
{
434+
name: 'showHeader',
435+
type: 'boolean',
436+
control: { type: 'boolean' },
437+
description: 'Show table header row',
438+
defaultValue: true,
439+
},
347440
{
348441
name: 'animate',
349442
type: 'boolean',
350443
control: { type: 'boolean' },
351444
description: 'Enable shimmer animation',
352445
defaultValue: true,
353446
},
447+
{
448+
name: 'baseColor',
449+
type: 'string',
450+
control: { type: 'color' },
451+
description: 'Base background color',
452+
defaultValue: '#e0e0e0',
453+
},
454+
{
455+
name: 'highlightColor',
456+
type: 'string',
457+
control: { type: 'color' },
458+
description: 'Shimmer highlight color',
459+
defaultValue: '#f5f5f5',
460+
},
354461
],
355462
examples: [
356463
{ name: 'Default', props: {} },
357464
{ name: 'Small Table', props: { rows: 3, columns: 3 } },
358465
{ name: 'Large Table', props: { rows: 8, columns: 5 } },
466+
{ name: 'No Header', props: { showHeader: false } },
359467
],
360468
importPath: "import { SkeletonTable } from 'premium-react-loaders';",
361469
},
@@ -626,6 +734,7 @@ export const COMPONENTS: ComponentMetadata[] = [
626734
description: 'Grid of fading squares',
627735
defaultProps: {
628736
size: 40,
737+
gridSize: 3,
629738
color: '#3b82f6',
630739
speed: 'normal',
631740
},
@@ -637,6 +746,13 @@ export const COMPONENTS: ComponentMetadata[] = [
637746
description: 'Size of the grid',
638747
defaultValue: 40,
639748
},
749+
{
750+
name: 'gridSize',
751+
type: 'number',
752+
control: { type: 'range', min: 2, max: 5, step: 1 },
753+
description: 'Grid size (e.g., 3 for 3x3)',
754+
defaultValue: 3,
755+
},
640756
{
641757
name: 'color',
642758
type: 'string',
@@ -654,8 +770,8 @@ export const COMPONENTS: ComponentMetadata[] = [
654770
],
655771
examples: [
656772
{ name: 'Default', props: {} },
657-
{ name: 'Small', props: { size: 24 } },
658-
{ name: 'Large', props: { size: 60 } },
773+
{ name: 'Small 2x2', props: { size: 24, gridSize: 2 } },
774+
{ name: 'Large 4x4', props: { size: 60, gridSize: 4 } },
659775
],
660776
importPath: "import { SpinnerGrid } from 'premium-react-loaders';",
661777
},

‎demo/src/types/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ComponentType } from 'react';
22

3-
export type ComponentCategory = 'skeleton' | 'spinner' | 'progress' | 'pulse';
3+
export type ComponentCategory = 'skeleton' | 'spinner' | 'progress' | 'pulse' | 'overlay';
44

55
export type ControlType = 'number' | 'color' | 'select' | 'boolean' | 'range' | 'text';
66

0 commit comments

Comments
 (0)