diff --git a/src/Toolkit/kits/shadcn/field/EXAMPLES.md b/src/Toolkit/kits/shadcn/field/EXAMPLES.md new file mode 100644 index 00000000000..e01f9554087 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/EXAMPLES.md @@ -0,0 +1,228 @@ +# Examples + +## Input + +```twig {"preview":true,"height":"500px"} +
+ + + + Username + + + Choose a unique username for your account. + + + + Password + + Must be at least 8 characters long. + + + + + +
+``` + +## Textarea + +```twig {"preview":true,"height":"400px"} +
+ + + + Feedback + + + Share your thoughts about our service. + + + + +
+``` + +## Select + +```twig {"preview":true,"height":"360px"} +
+ + Department + + + + + + + + + + + + Select your department or area of work. + + +
+``` + +## Field set + +```twig {"preview":true,"height":"400px"} +
+ + Address information + + We need your address to deliver your order. + + + + Street address + + +
+ + City + + + + Postal code + + +
+ + +
+``` + +## Checkbox + +```twig {"preview":true,"height":"520px"} +
+ + + + Show these items on the desktop + + + Select the items you want to show on the desktop. + + + + + + Hard disks + + + + + + External disks + + + + + + CDs, DVDs, and iPods + + + + + + Connected servers + + + + + + + + + + Sync Desktop & Documents folders + + + Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices. + + + + +
+``` + +## Switch + +```twig {"preview":true,"height":"240px"} +
+ + + Multi-factor authentication + + Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email. + + + + +
+``` + +## Field group + +```twig {"preview":true,"height":"520px"} +
+ + + Responses + + Get notified when ChatGPT responds to requests that take time, like research or image generation. + + + + + + Push notifications + + + + + + + Tasks + + Get notified when tasks you've created have updates. Manage tasks + + + + + + Push notifications + + + + + + Email notifications + + + + + +
+``` diff --git a/src/Toolkit/kits/shadcn/field/manifest.json b/src/Toolkit/kits/shadcn/field/manifest.json new file mode 100644 index 00000000000..5128b7f008e --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/manifest.json @@ -0,0 +1,13 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Field", + "description": "Layout helpers for form fields with labels, descriptions, errors, grouping, and separators.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"], + "recipe": ["label", "separator"] + } +} diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig new file mode 100644 index 00000000000..3ddcb5eaf73 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field.html.twig @@ -0,0 +1,23 @@ +{# @prop orientation 'vertical'|'horizontal'|'responsive' The orientation of the field, default to `vertical` #} +{# @block content The default block #} +{%- props orientation = 'vertical' -%} +{%- set style = html_cva( + base: 'group/field flex w-full gap-3 data-[invalid=true]:text-destructive', + variants: { + orientation: { + vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto', + horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px', + responsive: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px', + }, + }, +) -%} + +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Content.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Content.html.twig new file mode 100644 index 00000000000..1880bd40583 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Content.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Description.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Description.html.twig new file mode 100644 index 00000000000..c989966c05a --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Description.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +

+ {%- block content %}{% endblock -%} +

diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig new file mode 100644 index 00000000000..c7f21088688 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Error.html.twig @@ -0,0 +1,36 @@ +{# @prop errors array A list of errors (string or objects with a `message` field), defaults to `[]` #} +{# @block content The default block #} +{%- props errors = [] -%} +{%- set slot_content -%}{%- block content %}{% endblock -%}{%- endset -%} +{%- set slot_content = slot_content|trim -%} + +{%- if slot_content == '' -%} + {%- set messages = [] -%} + {%- for error in errors|default([]) -%} + {%- set message = error.message ?? error -%} + {%- if message is not same as(false) and message is not null and message != '' and not (message in messages) -%} + {%- set messages = messages|merge([message]) -%} + {%- endif -%} + {%- endfor -%} +{%- endif -%} + +{%- if slot_content != '' or (messages ?? [])|length > 0 -%} + +{%- endif -%} diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Group.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Group.html.twig new file mode 100644 index 00000000000..8f8f9e1b4b0 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Group.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Label.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Label.html.twig new file mode 100644 index 00000000000..e1daef48823 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Label.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} + + {{- block(outerBlocks.content) -}} + diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig new file mode 100644 index 00000000000..bd5dd7d596d --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Legend.html.twig @@ -0,0 +1,20 @@ +{# @prop variant 'legend'|'label' The variant, default to `legend` #} +{# @block content The default block #} +{%- props variant = 'legend' -%} +{%- set style = html_cva( + base: 'mb-3 font-medium', + variants: { + variant: { + legend: 'text-base', + label: 'text-sm', + }, + }, +) %} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Separator.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Separator.html.twig new file mode 100644 index 00000000000..ffc037a49e1 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Separator.html.twig @@ -0,0 +1,19 @@ +{# @block content The default block #} +{%- set content -%}{%- block content %}{% endblock -%}{%- endset -%} +{%- set has_content = content|trim != '' -%} +
+ + {%- if has_content -%} + + {{ content }} + + {%- endif -%} +
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Set.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Set.html.twig new file mode 100644 index 00000000000..d56c8d06c71 --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Set.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/field/templates/components/Field/Title.html.twig b/src/Toolkit/kits/shadcn/field/templates/components/Field/Title.html.twig new file mode 100644 index 00000000000..20635e5283e --- /dev/null +++ b/src/Toolkit/kits/shadcn/field/templates/components/Field/Title.html.twig @@ -0,0 +1,8 @@ +{# @block content The default block #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 1__1.html new file mode 100644 index 00000000000..db5bcab870a --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 1__1.html @@ -0,0 +1,47 @@ + +
+
+
+
+ + + +

Choose a unique username for your account. +

+
+
+ +

Must be at least 8 characters long. +

+ + +
+
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 2__1.html new file mode 100644 index 00000000000..b778a54300e --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 2__1.html @@ -0,0 +1,37 @@ + +
+
+
+
+ + + +

Share your thoughts about our service. +

+
+
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 3__1.html new file mode 100644 index 00000000000..ba4a2d6c35d --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 3__1.html @@ -0,0 +1,41 @@ + +
+
+ + +

Select your department or area of work. +

+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 4__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 4__1.html new file mode 100644 index 00000000000..bcaaed93e74 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 4__1.html @@ -0,0 +1,57 @@ + +
+
+Address information +

We need your address to deliver your order. +

+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 5__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 5__1.html new file mode 100644 index 00000000000..04e458a262b --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 5__1.html @@ -0,0 +1,120 @@ + +
+
+
+Show these items on the desktop + +

Select the items you want to show on the desktop. +

+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+ +
+ + +
+ +

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices. +

+
+
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 6__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 6__1.html new file mode 100644 index 00000000000..8635531d898 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 6__1.html @@ -0,0 +1,32 @@ + +
+
+
+ +

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email. +

+
+ + +
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 7__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 7__1.html new file mode 100644 index 00000000000..d3a6d25bcd1 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component field, code 7__1.html @@ -0,0 +1,86 @@ + +
+
+
+ +

Get notified when ChatGPT responds to requests that take time, like research or image generation. +

+
+
+ + + +
+
+
+
+
+
+ +
+ +

Get notified when tasks you've created have updates. Manage tasks +

+
+
+ + + +
+
+ + + +
+
+
+
+
\ No newline at end of file