diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig index bf31fcc8993..d67a5d6460f 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig @@ -1,3 +1,5 @@ +{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #} +{# @block content The default block #} {%- props open = false, id -%} {%- set _alert_dialog_open = open %} diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig index cc4ed5b61d9..e24fabcf554 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig @@ -1,4 +1,6 @@ -{% props variant = 'default' %} +{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #} +{# @block content The default block #} +{%- props variant = 'default' -%} {{- block(outerBlocks.content) -}} diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Cancel.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Cancel.html.twig index d4a9dd77ca8..917ced48e7b 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Cancel.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Cancel.html.twig @@ -1,7 +1,4 @@ - +{# @block content The default block #} + {{- block(outerBlocks.content) -}} diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig index c0d6833bcfe..3fe2fb21d18 100644 --- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig +++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #} alert-dialog#open', 'data-alert-dialog-target': 'trigger', diff --git a/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig b/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig index cee7937e9e7..43966bae903 100644 --- a/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig +++ b/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig @@ -1,3 +1,5 @@ +{# @prop variant 'default'|'destructive' The variant, default to `default` #} +{# @block content The default block #} {%- props variant = 'default' -%} {%- set style = html_cva( base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', diff --git a/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig b/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig index 712d8722850..3fb3628c3ad 100644 --- a/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig +++ b/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #}

+ Landscape photograph by Tobias Tullius + Bukchon Hanok Village by Y K ``` -## With a 1 / 1 aspect ratio +## With 2 / 3 aspect ratio ```twig {"preview":true,"height":"400px"} - + Landscape photograph by Tobias Tullius + Bukchon Hanok Village by Y K ``` -## With a 16 / 9 aspect ratio +## With 16 / 9 aspect ratio ```twig {"preview":true,"height":"400px"} - + Landscape photograph by Tobias Tullius + Bukchon Hanok Village by Y K ``` diff --git a/src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig b/src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig index f10b04ff765..704f0228579 100644 --- a/src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig +++ b/src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig @@ -1,3 +1,6 @@ +{# @prop ratio string The ratio to use, example `3 / 4`, `16 / 9` #} +{# @prop style string Additional CSS styles to apply #} +{# @block content The default block #} {%- props ratio, style = '' -%}

{%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/breadcrumb/EXAMPLES.md b/src/Toolkit/kits/shadcn/breadcrumb/EXAMPLES.md index b42da460625..a71e216b0d2 100644 --- a/src/Toolkit/kits/shadcn/breadcrumb/EXAMPLES.md +++ b/src/Toolkit/kits/shadcn/breadcrumb/EXAMPLES.md @@ -10,7 +10,7 @@ - Docs + diff --git a/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb.html.twig b/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb.html.twig index 8681b5131ee..cd72b6761fe 100644 --- a/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb.html.twig +++ b/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #} {%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Ellipsis.html.twig b/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Ellipsis.html.twig index 32aa63b39eb..99d09582513 100644 --- a/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Ellipsis.html.twig +++ b/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Ellipsis.html.twig @@ -1,13 +1,8 @@ diff --git a/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Item.html.twig b/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Item.html.twig index e3e28dedda9..252a1f43d99 100644 --- a/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Item.html.twig +++ b/src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Item.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #}
  • Outline +Secondary ``` ## Destructive @@ -67,3 +67,13 @@ Please wait ``` + +## Different sizes + +```twig {"preview":true} +
    + Small + Default + Large +
    +``` diff --git a/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig b/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig index 8925c761405..8f44f2040da 100644 --- a/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig +++ b/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig @@ -1,4 +1,8 @@ -{%- props variant = 'default', outline = false, size = 'default', as = 'button' -%} +{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #} +{# @prop size 'default'|'sm'|'lg'|'icon' The size, default to `default` #} +{# @prop as 'button' The HTML tag to use, default to `button` #} +{# @block content The default block #} +{%- props variant = 'default', size = 'default', as = 'button' -%} {%- set style = html_cva( base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', variants: { @@ -20,7 +24,7 @@ ) -%} <{{ as }} - class="{{ style.apply({variant: variant, outline: outline, size: size}, attributes.render('class'))|tailwind_merge }}" + class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}" {{ attributes }} > {%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/card/templates/components/Card.html.twig b/src/Toolkit/kits/shadcn/card/templates/components/Card.html.twig index 96ef038885d..2f584a601f4 100644 --- a/src/Toolkit/kits/shadcn/card/templates/components/Card.html.twig +++ b/src/Toolkit/kits/shadcn/card/templates/components/Card.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #}
    diff --git a/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig b/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig index be0d3058264..80df99b10b7 100644 --- a/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig +++ b/src/Toolkit/kits/shadcn/label/templates/components/Label.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #}
    • diff --git a/src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig b/src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig index 86c8adc46fe..d50bbfbae18 100644 --- a/src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig +++ b/src/Toolkit/kits/shadcn/pagination/templates/components/Pagination/Link.html.twig @@ -1,9 +1,11 @@ -{%- props isActive = false, size = 'icon' -%} +{# @prop active boolean Whether the link is active or not, default to `false` #} +{# @block content The default block #} +{%- props active = false -%} {{- block(outerBlocks.content) -}} diff --git a/src/Toolkit/kits/shadcn/progress/templates/components/Progress.html.twig b/src/Toolkit/kits/shadcn/progress/templates/components/Progress.html.twig index 8f9bcc5ba79..b7909e5a3a2 100644 --- a/src/Toolkit/kits/shadcn/progress/templates/components/Progress.html.twig +++ b/src/Toolkit/kits/shadcn/progress/templates/components/Progress.html.twig @@ -1,5 +1,5 @@ +{# @prop value integer The progress value between 0 and 100, default to `0` #} {%- props value = 0 -%} -
    -
    +>
    diff --git a/src/Toolkit/kits/shadcn/table/templates/components/Table.html.twig b/src/Toolkit/kits/shadcn/table/templates/components/Table.html.twig index b9f3399d446..8acc902e074 100644 --- a/src/Toolkit/kits/shadcn/table/templates/components/Table.html.twig +++ b/src/Toolkit/kits/shadcn/table/templates/components/Table.html.twig @@ -1,3 +1,4 @@ +{# @block content The default block #}
    ``` +## With default content + +```twig {"preview":true} +This is the default content of the textarea. +``` + ## With Label ```twig {"preview":true}
    - + Your message
    ``` diff --git a/src/Toolkit/kits/shadcn/textarea/templates/components/Textarea.html.twig b/src/Toolkit/kits/shadcn/textarea/templates/components/Textarea.html.twig index 317a57e1774..de9dc96e35b 100644 --- a/src/Toolkit/kits/shadcn/textarea/templates/components/Textarea.html.twig +++ b/src/Toolkit/kits/shadcn/textarea/templates/components/Textarea.html.twig @@ -1,4 +1,7 @@ +{# @block content The default block #} +> + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 1__1.html index 43bc314bead..5c2b13031cf 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 1__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 1__1.html @@ -3,15 +3,17 @@ - Component: Aspect Ratio - Code: ```twig - + Landscape photograph by Tobias Tullius + Bukchon Hanok Village by Y K ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
    -Landscape photograph by Tobias Tullius +
    +Bukchon Hanok Village by Y K + Bukchon Hanok Village by Y K
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 2__1.html index 575669dae14..fc066f92b27 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 2__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 2__1.html @@ -3,15 +3,17 @@ - Component: Aspect Ratio - Code: ```twig - + Landscape photograph by Tobias Tullius + Bukchon Hanok Village by Y K ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
    -Landscape photograph by Tobias Tullius +
    +Bukchon Hanok Village by Y K + Bukchon Hanok Village by Y K
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 3__1.html index f24a255ecea..4d45319958a 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 3__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component aspect-ratio, code 3__1.html @@ -3,15 +3,17 @@ - Component: Aspect Ratio - Code: ```twig - + Landscape photograph by Tobias Tullius + Bukchon Hanok Village by Y K ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
    -Landscape photograph by Tobias Tullius +
    +Bukchon Hanok Village by Y K + Bukchon Hanok Village by Y K
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component breadcrumb, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component breadcrumb, code 1__1.html index bf1b2ba5f91..518a14f07c7 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component breadcrumb, code 1__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component breadcrumb, code 1__1.html @@ -10,7 +10,7 @@ - Docs + @@ -31,7 +31,10 @@
  • -Docs + +
    • diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 11__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 11__1.html new file mode 100644 index 00000000000..93e598ce4d4 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 11__1.html @@ -0,0 +1,17 @@ + +
    + + + +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 3__1.html index 51fee13723d..45ef468f4a1 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 3__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component button, code 3__1.html @@ -3,7 +3,7 @@ - Component: Button - Code: ```twig -Outline +Secondary ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> - \ No newline at end of file + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 1__1.html index 1e51cbcdbd4..c88b9633ed9 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 1__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 1__1.html @@ -6,4 +6,4 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> - \ No newline at end of file + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 2__1.html index 426ba17ddf4..def280e9e17 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 2__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 2__1.html @@ -11,6 +11,6 @@ - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
    - +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 3__1.html index 9ef448ac461..f6071832586 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 3__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 3__1.html @@ -6,4 +6,4 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> - \ No newline at end of file + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 4__1.html index 3ee2727d1b8..7c87fc25115 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 4__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 4__1.html @@ -11,6 +11,6 @@ - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
    - +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 5__1.html index 1811212cd22..3bb269b787f 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 5__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input, code 5__1.html @@ -10,7 +10,7 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
    - +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 2__1.html index 2ac19e5f059..a48c5b51248 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 2__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 2__1.html @@ -11,6 +11,6 @@ - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
    - +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 3__1.html index ccf0432e0ef..e9896afdffd 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 3__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component label, code 3__1.html @@ -11,6 +11,6 @@ - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
    - +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component pagination, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component pagination, code 1__1.html index 5e0cbf94c03..61f22c120c8 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component pagination, code 1__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component pagination, code 1__1.html @@ -12,7 +12,7 @@ 1 - 2 + 2 3 @@ -44,7 +44,7 @@ 3
  • -
  • -
  • -
    • -
    -
    +
    Website -
    -
    +
    Packages -
    -
    +
    Source
    diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component separator, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component separator, code 2__1.html index dbd412538bf..19225979f32 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component separator, code 2__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component separator, code 2__1.html @@ -14,12 +14,10 @@ - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
    Blog
    -
    -
    +
    Docs
    -
    -
    +
    Source
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 2__1.html index 61f1f01f337..06e22390e50 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 2__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 2__1.html @@ -3,14 +3,7 @@ - Component: Textarea - Code: ```twig -
    - - -
    +This is the default content of the textarea. ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
    - - - -
    \ No newline at end of file + \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 3__1.html index ff0e2502d34..a4a0c24c40e 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 3__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 3__1.html @@ -3,7 +3,14 @@ - Component: Textarea - Code: ```twig - +
    + Your message + +
    ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> - \ No newline at end of file +
    + + + +
    \ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 4__1.html new file mode 100644 index 00000000000..ff0e2502d34 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component textarea, code 4__1.html @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/ux.symfony.com/assets/styles/components/_Wysiwyg.scss b/ux.symfony.com/assets/styles/components/_Wysiwyg.scss index 739279b010d..832d7286e55 100644 --- a/ux.symfony.com/assets/styles/components/_Wysiwyg.scss +++ b/ux.symfony.com/assets/styles/components/_Wysiwyg.scss @@ -26,4 +26,14 @@ color: var(--bs-link-color); text-decoration: underline; } + + .table-responsive { + margin-bottom: $spacer; + border: 1px solid var(--bs-border-color); + border-radius: .75rem; + } + + .table-responsive .table { + margin-bottom: 0; + } } diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json index d1c4fa895d8..2d727c46f6d 100644 --- a/ux.symfony.com/composer.json +++ b/ux.symfony.com/composer.json @@ -29,6 +29,7 @@ "symfony/runtime": "^7.2", "symfony/serializer": "7.2.*", "symfony/stimulus-bundle": "2.x-dev", + "symfony/string": "7.2.*", "symfony/translation": "7.2.*", "symfony/twig-bundle": "7.2.*", "symfony/uid": "7.2.*", diff --git a/ux.symfony.com/composer.lock b/ux.symfony.com/composer.lock index d96f1e66a6e..bdc172a453a 100644 --- a/ux.symfony.com/composer.lock +++ b/ux.symfony.com/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "0866bbab4d07cd77c2832549a45b8d0b", + "content-hash": "823754b33f16ed72a8cf393aab684f2d", "packages": [ { "name": "composer/semver", diff --git a/ux.symfony.com/src/Service/CommonMark/ConverterFactory.php b/ux.symfony.com/src/Service/CommonMark/ConverterFactory.php index 9ed9c4991b1..6d238545b65 100644 --- a/ux.symfony.com/src/Service/CommonMark/ConverterFactory.php +++ b/ux.symfony.com/src/Service/CommonMark/ConverterFactory.php @@ -15,9 +15,12 @@ use App\Service\Toolkit\ToolkitService; use League\CommonMark\CommonMarkConverter; use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode; +use League\CommonMark\Extension\DefaultAttributes\DefaultAttributesExtension; use League\CommonMark\Extension\ExternalLink\ExternalLinkExtension; use League\CommonMark\Extension\FrontMatter\FrontMatterExtension; use League\CommonMark\Extension\Mention\MentionExtension; +use League\CommonMark\Extension\Table\Table; +use League\CommonMark\Extension\Table\TableExtension; use Symfony\Component\DependencyInjection\Attribute\AsDecorator; /** @@ -34,6 +37,11 @@ public function __construct( public function __invoke(): CommonMarkConverter { $converter = new CommonMarkConverter([ + 'default_attributes' => [ + Table::class => [ + 'class' => 'table', + ], + ], 'mentions' => [ 'github_handle' => [ 'prefix' => '@', @@ -49,12 +57,21 @@ public function __invoke(): CommonMarkConverter 'external_link' => [ 'internal_hosts' => ['/(^|\.)symfony\.com$/'], ], + 'table' => [ + 'wrap' => [ + 'enabled' => true, + 'tag' => 'div', + 'attributes' => ['class' => 'table-responsive'], + ], + ], ]); $converter->getEnvironment() + ->addExtension(new DefaultAttributesExtension()) ->addExtension(new ExternalLinkExtension()) ->addExtension(new MentionExtension()) ->addExtension(new FrontMatterExtension()) + ->addExtension(new TableExtension()) ->addRenderer(FencedCode::class, new CodeBlockRenderer($this->toolkitService)) ; diff --git a/ux.symfony.com/src/Service/Toolkit/ToolkitService.php b/ux.symfony.com/src/Service/Toolkit/ToolkitService.php index 4b6ba540522..acccc673e41 100644 --- a/ux.symfony.com/src/Service/Toolkit/ToolkitService.php +++ b/ux.symfony.com/src/Service/Toolkit/ToolkitService.php @@ -23,8 +23,20 @@ use Symfony\UX\Toolkit\Recipe\RecipeType; use Symfony\UX\Toolkit\Registry\RegistryFactory; +use function Symfony\Component\String\s; + class ToolkitService { + /** + * @see https://regex101.com/r/3JXNX7/1 + */ + private const RE_API_PROPS = '/{#\s+@prop\s+(?P\w+)\s+(?P[^\s]+)\s+(?P.+?)\s+#}/s'; + + /** + * @see https://regex101.com/r/jYjXpq/1 + */ + private const RE_API_BLOCKS = '/{#\s+@block\s+(?P\w+)\s+(?P.+?)\s+#}/s'; + public function __construct( #[Autowire(service: 'ux_toolkit.registry.registry_factory')] private readonly RegistryFactory $registryFactory, @@ -142,6 +154,65 @@ public function renderInstallationSteps(ToolkitKitId $kitId, Recipe $recipe): st ]); } + public function renderApiReference(Recipe $recipe): ?string + { + $return = ''; + + foreach ($recipe->getFiles() as $file) { + $filePath = Path::join($recipe->absolutePath, $file->sourceRelativePathName); + if (!file_exists($filePath)) { + continue; + } + + $fileContent = s(file_get_contents($filePath)); + + // Twig files... + if (str_ends_with($file->sourceRelativePathName, '.html.twig')) { + $props = $fileContent->match(self::RE_API_PROPS, \PREG_SET_ORDER); + $blocks = $fileContent->match(self::RE_API_BLOCKS, \PREG_SET_ORDER); + + if ([] === $props && [] === $blocks) { + continue; + } + + $componentName = s($file->sourceRelativePathName) + ->replace('templates/components/', '') + ->replace('.html.twig', '') + ->replace('/', ':') + ->toString(); + + $return .= '### '.htmlspecialchars($componentName).\PHP_EOL.\PHP_EOL; + if ([] !== $props) { + $return .= "| Prop | Type | Description |\n"; + $return .= "| ---- | ---- | ----------- |\n"; + foreach ($props as $prop) { + $return .= \sprintf( + "| `%s` | `%s` | %s |\n", + $prop['name'], + str_replace('|', '\|', $prop['type']), + trim(preg_replace('/\s+/', ' ', $prop['description'])) + ); + } + $return .= \PHP_EOL; + } + if ([] !== $blocks) { + $return .= "| Block | Description |\n"; + $return .= "| ----- | ----------- |\n"; + foreach ($blocks as $block) { + $return .= \sprintf( + "| `%s` | %s |\n", + $block['name'], + trim(preg_replace('/\s+/', ' ', $block['description'])) + ); + } + $return .= \PHP_EOL; + } + } + } + + return $return ?: null; + } + /** * @param non-empty-array $tabs */ diff --git a/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php b/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php index a60e759b952..349e2d8d04a 100644 --- a/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php +++ b/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php @@ -36,6 +36,8 @@ public function getContent(): string { $examples = $this->getExamples(); + $apiReference = $this->toolkitService->renderApiReference($this->component); + return $this->adaptPreviewableCodeBlocks(\sprintf(<<component->manifest->name, @@ -64,7 +67,8 @@ public function getContent(): string $acc .= '### '.$exampleTitle.\PHP_EOL.$examples[$exampleTitle].\PHP_EOL; return $acc; - }, '') + }, ''), + $apiReference ? '## API Reference'.\PHP_EOL.$apiReference : '', )); }