symfony · weaverryan · Jan 21, 2022 · Jan 17, 2022 · Jan 17, 2022 · Jan 17, 2022
diff --git a/README.md b/README.md
@@ -9,55 +9,20 @@
 Symfony UX is an initiative and set of libraries to seamlessly
 integrate JavaScript tools into your application. For example,
 want to render a chart with [Chart.js](https://www.chartjs.org/)? Use
-[UX Chart.js](https://github.com/symfony/ux-chartjs)
+[UX Chart.js](https://symfony.com/bundles/ux-chartjs/current/index.html)
 to build the chart in PHP. The JavaScript is handled for you automatically.
 
 **That's Symfony UX.**
 
-[Read all the details about the Symfony UX initiative](https://symfony.com/ux)
-
-Or watch the [Stimulus Screencast on SymfonyCasts](https://symfonycasts.com/screencast/stimulus).
-
-## Components of UX
-
 Symfony UX leverages [Stimulus](https://stimulus.hotwired.dev/) for JavaScript
 and the [Stimulus Bridge](https://github.com/symfony/stimulus-bridge) for
 integrating it into [Webpack Encore](https://github.com/symfony/webpack-encore).
 
-## Packages
-
--   [UX Chart.js](https://github.com/symfony/ux-chartjs):
-    [Chart.js](https://www.chartjs.org/) chart library integration for Symfony
--   [UX Cropper.js](https://github.com/symfony/ux-cropperjs):
-    [Cropper.js](https://fengyuanchen.github.io/cropperjs/) image cropper library integration for Symfony
--   [UX Dropzone](https://github.com/symfony/ux-dropzone):
-    File input drag-and-drop zones for Symfony Forms
--   [UX LazyImage](https://github.com/symfony/ux-lazy-image):
-    Improve image loading performances through lazy-loading and data-uri thumbnails
--   [UX Swup](https://github.com/symfony/ux-swup):
-    [Swup](https://swup.js.org/) page transition library integration for Symfony
--   [UX Turbo](https://github.com/symfony/ux-turbo): [Hotwire Turbo](https://turbo.hotwired.dev/) library integration for Symfony
--   [Twig Component](https://github.com/symfony/ux-twig-component):
-    A system to build reusable "components" with Twig
--   [Live Component](https://github.com/symfony/ux-live-component):
-    Gives Twig Components a URL and a JavaScript library to automatically re-render via Ajax as your user interacts with it
-
-## Stimulus Tools around the World
-
-Because Stimulus is used by developers outside of Symfony, many tools
-exist beyond the UX packages:
-
--   [stimulus-use](https://github.com/stimulus-use/stimulus-use): Add composable
-    behaviors to your Stimulus controllers, like [debouncing](https://stimulus-use.github.io/stimulus-use/#/use-debounce),
-    [detecting outside clicks](https://stimulus-use.github.io/stimulus-use/#/use-click-outside)
-    and many other things. See: https://stimulus-use.github.io/stimulus-use/#/
+## Resources
 
--   [stimulus-components](https://stimulus-components.netlify.app/): A
-    large number of pre-made Stimulus controllers, like for
-    [Copying to clipboard](https://stimulus-components.netlify.app/docs/components/stimulus-clipboard/),
-    [Sortable](https://stimulus-components.netlify.app/docs/components/stimulus-sortable/),
-    [Popover](https://stimulus-components.netlify.app/docs/components/stimulus-popover/) (similar to tooltips)
-    and much more.
+-   [Install Symfony UX](https://symfony.com/doc/current/frontend/ux.html).
+-   [List of UX Packages](https://symfony.com/doc/current/frontend/ux.html#ux-packages-list).
+-   Watch the [Stimulus Screencast on SymfonyCasts](https://symfonycasts.com/screencast/stimulus).
 
 ## Let's build an amazing ecosystem together
 
@@ -68,7 +33,7 @@ fields of your Symfony forms? Or the ability to make the `EntityType` render wit
 [AJAX auto-completion](https://tarekraafat.github.io/autoComplete.js)? Anything you
 do in JavaScript could be done streamlined as a UX package.
 
-We have some ideas and we will release more packages in the coming days. The rest
+We have some ideas, and we will release more packages in the coming days. The rest
 is on you: let's create an amazing ecosystem together!
 
 ## Contributing

diff --git a/src/Chartjs/.symfony.bundle.yaml b/src/Chartjs/.symfony.bundle.yaml
@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "Resources/doc"
diff --git a/src/Chartjs/README.md b/src/Chartjs/README.md
@@ -3,161 +3,12 @@
 Symfony UX Chart.js is a Symfony bundle integrating the [Chart.js](https://www.chartjs.org/)
 library in Symfony applications. It is part of [the Symfony UX initiative](https://symfony.com/ux).
 
-## Installation
+**This repository is a READ-ONLY sub-tree split**. See
+https://github.com/symfony/ux to create issues or submit pull requests.
 
-Symfony UX Chart.js requires PHP 7.2+ and Symfony 4.4+.
+## Resources
 
-Install this bundle using Composer and Symfony Flex:
-
-```sh
-composer require symfony/ux-chartjs
-
-# Don't forget to install the JavaScript dependencies as well and compile
-yarn install --force
-yarn encore dev
-```
-
-Also make sure you have at least version 3.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge)
-in your `package.json` file.
-
-## Usage
-
-To use Symfony UX Chart.js, inject the `ChartBuilderInterface` service and
-create charts in PHP:
-
-```php
-// ...
-use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
-use Symfony\UX\Chartjs\Model\Chart;
-
-class HomeController extends AbstractController
-{
-    #[Route('/', name: 'app_homepage')]
-    public function index(ChartBuilderInterface $chartBuilder): Response
-    {
-        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
-
-        $chart->setData([
-            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            'datasets' => [
-                [
-                    'label' => 'My First dataset',
-                    'backgroundColor' => 'rgb(255, 99, 132)',
-                    'borderColor' => 'rgb(255, 99, 132)',
-                    'data' => [0, 10, 5, 2, 20, 30, 45],
-                ],
-            ],
-        ]);
-
-        $chart->setOptions([
-            'scales' => [
-                'y' => [
-                   'suggestedMin' => 0,
-                   'suggestedMax' => 100,
-                ],
-            ],
-        ]);
-
-        return $this->render('home/index.html.twig', [
-            'chart' => $chart,
-        ]);
-    }
-}
-```
-
-All options and data are provided as-is to Chart.js. You can read
-[Chart.js documentation](https://www.chartjs.org/docs/latest/) to discover them all.
-
-Once created in PHP, a chart can be displayed using Twig if installed
-(requires [Symfony Webpack Encore](https://symfony.com/doc/current/frontend/encore/installation.html)):
-
-```twig
-{{ render_chart(chart) }}
-
-{# You can pass HTML attributes as a second argument to add them on the <canvas> tag #}
-{{ render_chart(chart, {'class': 'my-chart'}) }}
-```
-
-### Extend the default behavior
-
-Symfony UX Chart.js allows you to extend its default behavior using a custom Stimulus controller:
-
-```js
-// mychart_controller.js
-
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-    connect() {
-        this.element.addEventListener('chartjs:pre-connect', this._onPreConnect);
-        this.element.addEventListener('chartjs:connect', this._onConnect);
-    }
-
-    disconnect() {
-        // You should always remove listeners when the controller is disconnected to avoid side effects
-        this.element.removeEventListener('chartjs:pre-connect', this._onPreConnect);
-        this.element.removeEventListener('chartjs:connect', this._onConnect);
-    }
-
-    _onPreConnect(event) {
-        // The chart is not yet created
-        console.log(event.detail.options); // You can access the chart options using the event details
-
-        // For instance you can format Y axis
-        event.detail.options.scales = {
-            yAxes: [
-                {
-                    ticks: {
-                        callback: function (value, index, values) {
-                            /* ... */
-                        },
-                    },
-                },
-            ],
-        };
-    }
-
-    _onConnect(event) {
-        // The chart was just created
-        console.log(event.detail.chart); // You can access the chart instance using the event details
-
-        // For instance you can listen to additional events
-        event.detail.chart.options.onHover = (mouseEvent) => {
-            /* ... */
-        };
-        event.detail.chart.options.onClick = (mouseEvent) => {
-            /* ... */
-        };
-    }
-}
-```
-
-Then in your render call, add your controller as an HTML attribute:
-
-```twig
-{{ render_chart(chart, {'data-controller': 'mychart'}) }}
-```
-
-## Backward Compatibility promise
-
-This bundle aims at following the same Backward Compatibility promise as the Symfony framework:
-[https://symfony.com/doc/current/contributing/code/bc.html](https://symfony.com/doc/current/contributing/code/bc.html)
-
-However it is currently considered
-[**experimental**](https://symfony.com/doc/current/contributing/code/experimental.html),
-meaning it is not bound to Symfony's BC policy for the moment.
-
-## Run tests
-
-### PHP tests
-
-```sh
-php vendor/bin/phpunit
-```
-
-### JavaScript tests
-
-```sh
-cd Resources/assets
-yarn test
-```
+-   [Documentation](https://symfony.com/bundles/ux-chartjs/current/index.html)
+-   [Report issues](https://github.com/symfony/ux/issues) and
+    [send Pull Requests](https://github.com/symfony/ux/pulls)
+    in the [main Symfony UX repository](https://github.com/symfony/ux)