Skip to content

Commit 799ebe1

Browse files
immohammadjavedimmohammadjaved
authored
Merge pull request #1 from angularcafe/dev
Add new components: toggle-group & skeleton
2 parents c5667ce + 3baaf69 commit 799ebe1

File tree

13 files changed

+805
-15
lines changed

13 files changed

+805
-15
lines changed

‎package-lock.json‎

Lines changed: 6 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@
4545
"rxjs": "~7.8.0",
4646
"tailwind-variants": "^1.0.0",
4747
"tailwindcss": "^4.1.11",
48-
"tslib": "^2.3.0",
49-
"tw-animate-css": "^1.3.7"
48+
"tslib": "^2.3.0"
5049
},
5150
"devDependencies": {
5251
"@angular/build": "^20.1.3",
@@ -63,6 +62,7 @@
6362
"karma-jasmine": "~5.1.0",
6463
"karma-jasmine-html-reporter": "~2.1.0",
6564
"ng-packagr": "^20.1.0",
65+
"tw-animate-css": "^1.3.8",
6666
"typescript": "~5.8.2"
6767
}
6868
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,14 @@ export const routes: Routes = [
8888
path: 'toggle',
8989
loadComponent: () => import('./toggle/toggle').then(m => m.Toggle)
9090
},
91+
{
92+
path: 'toggle-group',
93+
loadComponent: () => import('./toggle-group/toggle-group').then(m => m.ToggleGroup)
94+
},
95+
{
96+
path: 'skeleton',
97+
loadComponent: () => import('./skeleton/skeleton').then(m => m.Skeleton)
98+
},
9199
{
92100
path: '',
93101
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.ts‎

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

0 commit comments

Comments
 (0)