Skip to content

Commit 6c0de75

Browse files
KocalKocal
committed
[Toolkit] Rework all components for Shadcn kit, add more, remove some, add docs too
1 parent e052c25 commit 6c0de75

Some content is hidden

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

69 files changed

+1249
-418
lines changed

‎src/Toolkit/.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ vendor
22
composer.lock
33
.phpunit.result.cache
44
var
5+
.twig-cs-fixer.cache
56
tests/ui/output
6-
tests/ui/screens
7+
tests/ui/screens

‎src/Toolkit/composer.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@
4545
"zenstruck/console-test": "^1.7",
4646
"symfony/http-client": "6.4|^7.0",
4747
"symfony/stopwatch": "^6.4|^7.0",
48-
"symfony/phpunit-bridge": "^6.4|^7.0"
48+
"symfony/phpunit-bridge": "^6.4|^7.0",
49+
"vincentlanglet/twig-cs-fixer": "^3.5"
4950
},
5051
"bin": [
5152
"bin/ux-toolkit-kit-create",

‎src/Toolkit/kits/shadcn/docs/components/Alert.md

+35-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,47 @@
11
# Alert
22

3-
The Alert component is used to display important messages or notifications to users, with support for different styles and variants.
3+
Displays a callout for user attention.
4+
5+
```twig {"preview":true}
6+
<twig:Alert class="max-w-lg">
7+
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
8+
<twig:Alert:Title>Heads up!</twig:Alert:Title>
9+
<twig:Alert:Description>
10+
You can add components to your app using the cli.
11+
</twig:Alert:Description>
12+
</twig:Alert>
13+
```
14+
15+
## Installation
16+
17+
<!-- Placeholder: Installation -->
18+
19+
## Usage
20+
21+
<!-- Placeholder: Usage -->
422

523
## Examples
624

7-
### Basic Alert
25+
### Default
826

9-
```twig
10-
<twig:Alert>
11-
This is an alert message.
27+
```twig {"preview":true}
28+
<twig:Alert class="max-w-lg">
29+
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
30+
<twig:Alert:Title>Heads up!</twig:Alert:Title>
31+
<twig:Alert:Description>
32+
You can add components to your app using the cli.
33+
</twig:Alert:Description>
1234
</twig:Alert>
1335
```
1436

15-
### Alert with Custom Class
37+
### Destructive
1638

17-
```twig
18-
<twig:Alert class="bg-red-100 text-red-800">
19-
This is a custom styled alert.
39+
```twig {"preview":true}
40+
<twig:Alert variant="destructive" class="max-w-lg">
41+
<twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
42+
<twig:Alert:Title>Error</twig:Alert:Title>
43+
<twig:Alert:Description>
44+
Your session has expired. Please log in again.
45+
</twig:Alert:Description>
2046
</twig:Alert>
2147
```

‎src/Toolkit/kits/shadcn/docs/components/AlertDialog.md

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# AlertDialog
2+
3+
A modal dialog that interrupts the user with important content and expects a response.
4+
5+
```twig {"preview":true}
6+
<twig:AlertDialog>
7+
<twig:AlertDialog:Trigger>
8+
<twig:Button variant="outline">Show Dialog</twig:Button>
9+
</twig:AlertDialog:Trigger>
10+
<twig:AlertDialog:Content>
11+
<twig:AlertDialog:Header>
12+
<twig:AlertDialog:Title>Are you sure?</twig:AlertDialog:Title>
13+
<twig:AlertDialog:Description>
14+
This action cannot be undone. This will permanently delete your account
15+
and remove your data from our servers.
16+
</twig:AlertDialog:Description>
17+
</twig:AlertDialog:Header>
18+
<twig:AlertDialog:Footer>
19+
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
20+
<twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
21+
</twig:AlertDialog:Footer>
22+
</twig:AlertDialog:Content>
23+
</twig:AlertDialog>
24+
```
25+
26+
## Installation
27+
28+
<!-- Placeholder: Installation -->
29+
30+
## Usage
31+
32+
<!-- Placeholder: Usage -->
33+
34+
## Examples
35+
36+
### Default
37+
38+
```twig {"preview":true}
39+
<twig:AlertDialog>
40+
<twig:AlertDialog:Trigger>
41+
<twig:Button variant="outline">Show Dialog</twig:Button>
42+
</twig:AlertDialog:Trigger>
43+
<twig:AlertDialog:Content>
44+
<twig:AlertDialog:Header>
45+
<twig:AlertDialog:Title>Are you sure?</twig:AlertDialog:Title>
46+
<twig:AlertDialog:Description>
47+
This action cannot be undone. This will permanently delete your account
48+
and remove your data from our servers.
49+
</twig:AlertDialog:Description>
50+
</twig:AlertDialog:Header>
51+
<twig:AlertDialog:Footer>
52+
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
53+
<twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
54+
</twig:AlertDialog:Footer>
55+
</twig:AlertDialog:Content>
56+
</twig:AlertDialog>
57+
```
58+
59+
### Destructive
60+
61+
```twig {"preview":true}
62+
<twig:AlertDialog>
63+
<twig:AlertDialog:Trigger>
64+
<twig:Button variant="destructive">Delete Account</twig:Button>
65+
</twig:AlertDialog:Trigger>
66+
<twig:AlertDialog:Content>
67+
<twig:AlertDialog:Header>
68+
<twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
69+
<twig:AlertDialog:Description>
70+
This action cannot be undone. This will permanently delete your account
71+
and remove your data from our servers.
72+
</twig:AlertDialog:Description>
73+
</twig:AlertDialog:Header>
74+
<twig:AlertDialog:Footer>
75+
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
76+
<twig:AlertDialog:Action variant="destructive">Delete Account</twig:AlertDialog:Action>
77+
</twig:AlertDialog:Footer>
78+
</twig:AlertDialog:Content>
79+
</twig:AlertDialog>
80+
```

‎src/Toolkit/kits/shadcn/docs/components/AspectRatio.md

+35-9
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,46 @@
22

33
The AspectRatio component is a component that allows you to display an element with a specific aspect ratio.
44

5+
```twig {"preview":true,"height":"400px"}
6+
<twig:AspectRatio ratio="1 / 1" class="max-w-[300px]">
7+
<img
8+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
9+
alt="Landscape photograph by Tobias Tullius"
10+
class="h-full w-full rounded-md object-cover"
11+
/>
12+
</twig:AspectRatio>
13+
```
14+
15+
## Installation
16+
17+
<!-- Placeholder: Installation -->
18+
19+
## Usage
20+
21+
<!-- Placeholder: Usage -->
22+
523
## Examples
624

7-
### With a 4/3 aspect ratio
25+
### With a 1 / 1 aspect ratio
826

9-
```twig
10-
<twig:AspectRatio ratio="4/3">
11-
<img src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" alt="Landscape photograph by Tobias Tullius" />
27+
```twig {"preview":true,"height":"400px"}
28+
<twig:AspectRatio ratio="1 / 1" class="max-w-[350px]">
29+
<img
30+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
31+
alt="Landscape photograph by Tobias Tullius"
32+
class="h-full w-full rounded-md object-cover"
33+
/>
1234
</twig:AspectRatio>
1335
```
1436

15-
### With a 16/9 aspect ratio
37+
### With a 16 / 9 aspect ratio
1638

17-
```twig
18-
<twig:AspectRatio ratio="16/9">
19-
<img src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80" alt="Landscape photograph by Tobias Tullius" />
39+
```twig {"preview":true,"height":"400px"}
40+
<twig:AspectRatio ratio="16 / 9" class="max-w-[350px]">
41+
<img
42+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
43+
alt="Landscape photograph by Tobias Tullius"
44+
class="h-full w-full rounded-md object-cover"
45+
/>
2046
</twig:AspectRatio>
21-
```
47+
```

‎src/Toolkit/kits/shadcn/docs/components/Avatar.md

+42-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,56 @@
11
# Avatar
22

3-
The Avatar component displays a user's profile picture or a fallback representation when no image is available.
3+
A component for displaying user profile images with a fallback for when the image is not available.
4+
5+
```twig {"preview":true}
6+
<twig:Avatar>
7+
<twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
8+
</twig:Avatar>
9+
```
10+
11+
## Installation
12+
13+
<!-- Placeholder: Installation -->
14+
15+
## Usage
16+
17+
<!-- Placeholder: Usage -->
418

519
## Examples
620

721
### Avatar with Image
822

9-
```twig
23+
```twig {"preview":true}
1024
<twig:Avatar>
1125
<twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
1226
</twig:Avatar>
1327
```
1428

15-
### Avatar with Fallback
29+
### Avatar with Text
1630

17-
```twig
18-
<twig:Avatar>
19-
<twig:Avatar:Fallback>JF</twig:Avatar:Fallback>
20-
</twig:Avatar>
31+
```twig {"preview":true}
32+
<div class="flex gap-1">
33+
<twig:Avatar>
34+
<twig:Avatar:Text>FP</twig:Avatar:Text>
35+
</twig:Avatar>
36+
<twig:Avatar>
37+
<twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
38+
</twig:Avatar>
39+
</div>
40+
```
41+
42+
### Avatar Group
43+
44+
```twig {"preview":true}
45+
<div class="flex -space-x-2">
46+
<twig:Avatar>
47+
<twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
48+
</twig:Avatar>
49+
<twig:Avatar>
50+
<twig:Avatar:Text>FP</twig:Avatar:Text>
51+
</twig:Avatar>
52+
<twig:Avatar>
53+
<twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
54+
</twig:Avatar>
55+
</div>
2156
```

‎src/Toolkit/kits/shadcn/docs/components/Badge.md

+33-12
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,56 @@
11
# Badge
22

3-
The Badge component is used to highlight and display short pieces of information, such as counts or labels.
3+
A component for displaying short pieces of information, such as counts, labels, or status indicators.
4+
5+
```twig {"preview":true}
6+
<twig:Badge>Badge</twig:Badge>
7+
```
8+
9+
## Installation
10+
11+
<!-- Placeholder: Installation -->
12+
13+
## Usage
14+
15+
<!-- Placeholder: Usage -->
416

517
## Examples
618

7-
### Basic Badge
19+
### Default
820

9-
```twig
21+
```twig {"preview":true}
1022
<twig:Badge>Badge</twig:Badge>
1123
```
1224

13-
### Primary Badge
25+
### Secondary
1426

15-
```twig
16-
<twig:Badge variant="primary">
27+
```twig {"preview":true}
28+
<twig:Badge variant="secondary">
1729
Badge
1830
</twig:Badge>
1931
```
2032

21-
### Outline Badge
33+
### Outline
2234

23-
```twig
24-
<twig:Badge outline>
35+
```twig {"preview":true}
36+
<twig:Badge variant="outline">
2537
Badge
2638
</twig:Badge>
2739
```
2840

29-
### Secondary Outline Badge
41+
### Destructive
3042

31-
```twig
32-
<twig:Badge variant="secondary" outline>
43+
```twig {"preview":true}
44+
<twig:Badge variant="destructive">
3345
Badge
3446
</twig:Badge>
47+
```
48+
49+
### With Icon
50+
51+
```twig {"preview":true}
52+
<twig:Badge>
53+
<twig:ux:icon name="lucide:check" class="mr-1 h-3 w-3" />
54+
Verified
55+
</twig:Badge>
3556
```

0 commit comments

Comments
 (0)