Skip to content

Commit 4f9cf39

Browse files
immohammadjavedimmohammadjaved
committed
docs(skeleton): Add skeleton docs
1 parent 455f40e commit 4f9cf39

File tree

5 files changed

+186
-2
lines changed

5 files changed

+186
-2
lines changed

‎projects/docs/src/app/pages/docs/components/components.routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ export const routes: Routes = [
9292
path: 'toggle-group',
9393
loadComponent: () => import('./toggle-group/toggle-group').then(m => m.ToggleGroup)
9494
},
95+
{
96+
path: 'skeleton',
97+
loadComponent: () => import('./skeleton/skeleton').then(m => m.Skeleton)
98+
},
9599
{
96100
path: '',
97101
redirectTo: 'alert',

‎projects/docs/src/app/pages/docs/components/skeleton/skeleton.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component } from '@angular/core';
2+
import { ComponentPreview } from '@components/component-preview/component-preview';
3+
import { skeletonVariants, skeletonMeta } from './skeleton.variants';
4+
5+
@Component({
6+
selector: 'docs-skeleton',
7+
imports: [ComponentPreview],
8+
template: `
9+
<docs-component-preview
10+
[meta]="skeletonMeta"
11+
[variants]="skeletonVariants">
12+
</docs-component-preview>
13+
`
14+
})
15+
export class Skeleton {
16+
skeletonMeta = skeletonMeta;
17+
skeletonVariants = skeletonVariants;
18+
}

‎projects/docs/src/app/pages/docs/components/skeleton/skeleton.variants.ts‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { Component } from '@angular/core';
2+
import { UiSkeleton } from 'ui';
3+
import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';
4+
5+
@Component({
6+
selector: 'skeleton-default-example',
7+
template: `
8+
<div class="flex items-center space-x-4">
9+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
10+
<div class="space-y-2">
11+
<div uiSkeleton class="h-4 w-[250px]"></div>
12+
<div uiSkeleton class="h-4 w-[200px]"></div>
13+
</div>
14+
</div>
15+
`,
16+
imports: [UiSkeleton]
17+
})
18+
export class SkeletonDefaultExample {}
19+
20+
@Component({
21+
selector: 'skeleton-card-example',
22+
template: `
23+
<div class="flex flex-col space-y-3">
24+
<div uiSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
25+
<div class="space-y-2">
26+
<div uiSkeleton class="h-4 w-[250px]"></div>
27+
<div uiSkeleton class="h-4 w-[200px]"></div>
28+
</div>
29+
</div>
30+
`,
31+
imports: [UiSkeleton]
32+
})
33+
export class SkeletonCardExample {}
34+
35+
@Component({
36+
selector: 'skeleton-list-example',
37+
template: `
38+
<div class="space-y-3">
39+
<div class="flex items-center space-x-4">
40+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
41+
<div class="space-y-2">
42+
<div uiSkeleton class="h-4 w-[250px]"></div>
43+
<div uiSkeleton class="h-4 w-[200px]"></div>
44+
</div>
45+
</div>
46+
<div class="flex items-center space-x-4">
47+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
48+
<div class="space-y-2">
49+
<div uiSkeleton class="h-4 w-[250px]"></div>
50+
<div uiSkeleton class="h-4 w-[200px]"></div>
51+
</div>
52+
</div>
53+
<div class="flex items-center space-x-4">
54+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
55+
<div class="space-y-2">
56+
<div uiSkeleton class="h-4 w-[250px]"></div>
57+
<div uiSkeleton class="h-4 w-[200px]"></div>
58+
</div>
59+
</div>
60+
</div>
61+
`,
62+
imports: [UiSkeleton]
63+
})
64+
export class SkeletonListExample {}
65+
66+
export const skeletonMeta: IComponentMeta = {
67+
title: 'Skeleton',
68+
description: 'Use to show a placeholder while content is loading.',
69+
installation: {
70+
package: 'skeleton',
71+
import: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';`,
72+
usage: `<div uiSkeleton class="h-4 w-[250px]"></div>`
73+
},
74+
api: {
75+
props: [
76+
{ name: 'class', type: 'string', description: 'Additional CSS classes to apply to the skeleton element.' }
77+
]
78+
}
79+
};
80+
81+
export const skeletonVariants: IVariant[] = [
82+
{
83+
title: 'Default',
84+
description: 'A basic skeleton with avatar and text placeholders.',
85+
code: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';
86+
87+
@Component({
88+
selector: 'skeleton-default-example',
89+
template: \`
90+
<div class="flex items-center space-x-4">
91+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
92+
<div class="space-y-2">
93+
<div uiSkeleton class="h-4 w-[250px]"></div>
94+
<div uiSkeleton class="h-4 w-[200px]"></div>
95+
</div>
96+
</div>
97+
\`,
98+
imports: [UiSkeleton]
99+
})
100+
export class SkeletonDefaultExample {}`,
101+
component: SkeletonDefaultExample
102+
},
103+
{
104+
title: 'Card',
105+
description: 'A skeleton for card layouts with image and text placeholders.',
106+
code: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';
107+
108+
@Component({
109+
selector: 'skeleton-card-example',
110+
template: \`
111+
<div class="flex flex-col space-y-3">
112+
<div uiSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
113+
<div class="space-y-2">
114+
<div uiSkeleton class="h-4 w-[250px]"></div>
115+
<div uiSkeleton class="h-4 w-[200px]"></div>
116+
</div>
117+
</div>
118+
\`,
119+
imports: [UiSkeleton]
120+
})
121+
export class SkeletonCardExample {}`,
122+
component: SkeletonCardExample
123+
},
124+
{
125+
title: 'List',
126+
description: 'A skeleton for list layouts with multiple items.',
127+
code: `import { UiSkeleton } from '@workspace/ui/directives/skeleton';
128+
129+
@Component({
130+
selector: 'skeleton-list-example',
131+
template: \`
132+
<div class="space-y-3">
133+
<div class="flex items-center space-x-4">
134+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
135+
<div class="space-y-2">
136+
<div uiSkeleton class="h-4 w-[250px]"></div>
137+
<div uiSkeleton class="h-4 w-[200px]"></div>
138+
</div>
139+
</div>
140+
<div class="flex items-center space-x-4">
141+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
142+
<div class="space-y-2">
143+
<div uiSkeleton class="h-4 w-[250px]"></div>
144+
<div uiSkeleton class="h-4 w-[200px]"></div>
145+
</div>
146+
</div>
147+
<div class="flex items-center space-x-4">
148+
<div uiSkeleton class="h-12 w-12 rounded-full"></div>
149+
<div class="space-y-2">
150+
<div uiSkeleton class="h-4 w-[250px]"></div>
151+
<div uiSkeleton class="h-4 w-[200px]"></div>
152+
</div>
153+
</div>
154+
</div>
155+
\`,
156+
imports: [UiSkeleton]
157+
})
158+
export class SkeletonListExample {}`,
159+
component: SkeletonListExample
160+
}
161+
];

‎projects/docs/src/app/pages/docs/components/toggle-group/toggle-group.variants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export class ToggleGroupTextExample {}
150150

151151
export const toggleGroupMeta: IComponentMeta = {
152152
title: 'Toggle Group',
153-
description: 'A set of two-state buttons that can be toggled on or off. Uses a single tv() method with slots and variants. Toggle group items automatically inherit variant and size from their parent toggle group.',
153+
description: 'A set of two-state buttons that can be toggled on or off.',
154154
installation: {
155155
package: 'toggle-group',
156156
import: `import { UiToggleGroup, UiToggleGroupItem } from '@workspace/ui/directives/toggle-group';`,

‎projects/docs/src/app/shared/components/sidebar/sidebar.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ export class Sidebar {
6868
{ name: 'Tooltip', path: 'tooltip' },
6969
{ name: 'Table', path: 'table' },
7070
{ name: 'Toggle', path: 'toggle' },
71-
{ name: 'Toggle Group', path: 'toggle-group' }
71+
{ name: 'Toggle Group', path: 'toggle-group' },
72+
{ name: 'Skeleton', path: 'skeleton' }
7273
]
7374
}
7475
]);

0 commit comments

Comments
 (0)