[Toolkit] Add CONTRIBUTING.md

Author: Kocal

src/Toolkit/CONTRIBUTING.md

@@ -0,0 +1,78 @@
+# Contributing
+
+Due to its nature, the Symfony UX Toolkit requires a specific setup to be able to
+develop and test it properly. Please follow the instructions below to set up your
+development environment.
+
+## Setting up the development environment
+
+First, ensure to have followed the [Symfony UX's Contribution Guide](https://github.com/symfony/ux/blob/2.x/CONTRIBUTING.md) to set up your fork of the main repository, install dependencies, etc.
+
+Then, install UX Toolkit dependencies:
+```shell
+# src/Toolkit
+composer install
+```
+
+## Preview kits
+
+For the moment, kits can only be previewed by the Symfony UX Website. installation instructions can be found at [Symfony UX Website's `README.md`](https://github.com/symfony/ux/tree/2.x/ux.symfony.com).
+
+Then, run the following commands from the `ux.symfony.com/` directory:
+```shell
+# Link local UX packages
+php ../link
+
+# Run the local web server
+symfony serve -d
+```
+
+When the server is running, you can access:
+- the UX Toolkit homepage at https://127.0.0.1:9044/toolkit,
+- the list of available Kits at https://127.0.0.1:9044/toolkit#kits,
+- a dedicated section for each Kit, e.g. https://127.0.0.1:9044/toolkit/kits/shadcn for the Shadcn UI Kit.
+
+## Kit's structure
+
+A Kit is composed of several Recipes, each providing Twig components, styles, and JavaScript.
+
+1. Each kit is located in the `src/Toolkit/kits/` directory.
+2. Each kit has its own directory named after the kit, e.g. `shadcn/` for the Shadcn UI Kit.
+3. Each kit directory contains:
+    - a `INSTALL.md` file with installation instructions, it is used by the UX Website,
+    - a `manifest.json` file containing metadata about the kit: its name, description, license, homepage, etc.,
+    - a folder for each Recipe provided by the kit, e.g. `button/` for the Button Recipe,
+4. Each Recipe directory contains:
+    - a `manifest.json` file containing metadata about the Recipe: its type, name, description, files to copy, dependencies, etc.,
+    - a `EXAMPLES.md` file with usage examples, it is used by the UX Website.
+    - based on the "files to copy" setting, the Kit may contain subdirectories like:
+        - `templates/components/` for Twig components,
+        - `assets/controllers/` for Stimulus controllers,
+    - the "files to copy" structure is flexible, but we recommend to follow the above conventions for consistency accross kits and Symfony apps.
+
+## Working with kits
+
+After setting up your development environment and the UX Website locally, you can start modifying the kits and test them.
+
+Adding new recipes, or modifying existing ones, will be automatically reflected in the UX Website, thanks to the local linking done with the `php link` command.
+You can then preview your changes by navigating to the relevant sections in the UX Website.
+
+### Running tests & snapshots
+
+Tests use snapshots to ensure that the kits and their recipes work as expected, and to prevent regressions.
+
+Snapshots are created through all Twig code examples provided in each Recipe's `EXAMPLES.md` file. The Twig code examples are rendered in an isolated environment.
+
+The rendered output is then compared to stored snapshots to ensure that the Kit's recipes work as expected.
+
+To update the snapshots, run the following command from the `src/Toolkit/` directory:
+```shell
+# Remove existing snapshots, may be useful if some Twig code examples were removed
+rm -fr tests/Functional/__snapshots__
+
+# Run tests and update snapshots
+php vendor/bin/simple-phpunit -d --update-snapshots
+
+# Add the updated snapshots to git
+git add tests/Functional/__snapshots__
+```