Add recipes (#55)

* Add Webpack config

* Remove config for webpack

* Add twig component configuration

* add symfony ux packages

* add a way to ignore thelia setting the default view

---------

Co-authored-by: yannleravallec <[email protected]>

.gitignore

@@ -1,4 +1,5 @@
 # Ignore compiled files.
+dist
 dist/**/*
 !dist/.gitkeep
 

.storybook/main.ts

@@ -55,7 +55,9 @@ const config: StorybookConfig = {
     });
 
     if (Array.isArray(config?.entry)) {
-      config.entry.push(path.resolve(__dirname, '../twig/custom-twig.ts'));
+      config.entry.push(
+        path.resolve(__dirname, '../assets/js/twig/custom-twig.ts')
+      );
     }
     config.resolve = {
       ...config.resolve,

anon-components/Alert.html.twig

@@ -0,0 +1,3 @@
+<div class="alert" role="alert">
+  {{ message }}
+</div>

assets/app.js

@@ -8,6 +8,8 @@
 // any CSS you import will output into a single css file (app.css in this case)
 import '@components/base.css';
 
+import './bootstrap.js';
+
 import HeaderScript from '@components/Layout/Header/Header.js';
 import MobileDrawer from './js/mobileDrawer';
 import filterSelectFunction from '@components/Molecules/Filters/FilterSelect/FilterSelect';
@@ -19,6 +21,7 @@ import StepsFunction from '@components/Molecules/Step/Steps.js';
 
 function main() {
   document.body.classList.remove('no-js');
+
   HeaderScript();
   MobileDrawer();
   filterSelectFunction();

assets/bootstrap.js

@@ -0,0 +1,15 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+import { registerReactControllerComponents } from '@symfony/ux-react';
+
+registerReactControllerComponents(
+  require.context('./react/controllers', true, /\.(j|t)sx?$/)
+);
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(
+  require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.[jt]sx?$/
+  )
+);

assets/controllers.json

@@ -0,0 +1,20 @@
+{
+  "controllers": {
+    "@symfony/ux-live-component": {
+      "live": {
+        "enabled": true,
+        "fetch": "eager",
+        "autoimport": {
+          "@symfony/ux-live-component/dist/live.min.css": true
+        }
+      }
+    },
+    "@symfony/ux-react": {
+      "react": {
+        "enabled": true,
+        "fetch": "eager"
+      }
+    }
+  },
+  "entrypoints": []
+}

assets/controllers/hello_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+import { trans, EXPIRED } from '../translator';
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+class HelloController extends Controller {
+  connect() {
+    this.element.textContent = `Hello Stimulus! Edit me in assets/controllers/hello_controller.js \n
+       test translation: ${trans(EXPIRED)}`;
+  }
+}
+
+export default HelloController;

twig/custom-twig.ts → assets/js/twig/custom-twig.ts

@@ -1,4 +1,6 @@
+// @ts-ignore
 import Twig from 'twig';
+// @ts-ignore
 import IconTwig from './IconTwig.twig';
 
 Twig.extendFunction('svg', (iconName: string): string => {

assets/react/controllers/Hello.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function (props) {
+  return <div>Hello {props.fullName}</div>;
+}

assets/translator.js

@@ -0,0 +1,16 @@
+import { localeFallbacks } from '../translations/compiled/configuration';
+import { trans, setLocaleFallbacks } from '@symfony/ux-translator';
+/*
+ * This file is part of the Symfony UX Translator package.
+ *
+ * If folder "../var/translations" does not exist, or some translations are missing,
+ * you must warmup your Symfony cache to refresh JavaScript translations.
+ *
+ * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
+ */
+
+setLocaleFallbacks(localeFallbacks);
+
+export { trans };
+
+export * from '../translations/compiled';

base.html.twig

@@ -16,14 +16,9 @@
 		{% endblock %}
 	</head>
 	<body class="no-js">
-		{% block header %}
-			{% include '@components/Layout/Header/Header.twig' %}
-		{% endblock %}
 
 		{% block body %}{% endblock %}
 
-		{% block footer %}
-			{% include '@components/Layout/Footer/Footer.twig' %}
-		{% endblock %}
+
 	</body>
 </html>

composer.json

@@ -1,10 +1,22 @@
 {
   "name": "thelia/flexy",
-  "type": "thelia-frontoffice-template",
+  "type": "symfony-bundle",
   "description": "thelia design system",
   "license": "LGPL-3.0+",
   "require": {
     "composer/installers": "~1.0",
-    "symfony/webpack-encore-bundle": "*"
+    "symfony/webpack-encore-bundle": "^2.1",
+    "symfony/ux-twig-component": "^2.19",
+    "symfony/stimulus-bundle": "^2.19",
+    "symfony/ux-react": "^2.19",
+    "symfony/ux-icons": "^2.19",
+    "symfony/ux-translator": "^2.19",
+    "symfony/ux-live-component": "^2.19"
+  },
+  "autoload": {
+    "psr-4": {
+      "FlexyBundle\\": "src/",
+      "FlexyBundle\\Twig\\": "src/Twig/"
+    }
   }
 }

index.html.twig

@@ -3,8 +3,24 @@
 {% block title %}index{% endblock %}
 
 {% block body %}
+
+  <div data-controller="hello"></div>
+
+  <twig:Alert message="I am a success alert!" />
+  <twig:Flexy:Message message="I am a message" />
+  <twig:Flexy:RandomNumber />
+
+  <div {{ react_component('Hello', { fullName: 'React' }) }}>
+      Loading...
+  </div>
+
+
+  <twig:ux:icon name="account" class="w-4 h-4" />
+
+
+
   {% set categories = resources('/api/front/categories', {itemsPerPage:3}) %}
-  {% dump(categories) %}
+
 
   {% set categoriesFiltered = categories|map((c) => ({
     title: c.i18ns.title,

package.json

@@ -15,6 +15,9 @@
   "dependencies": {
     "@openstudio/thelia-api-utils": "^0.5.2",
     "@storybook/addon-a11y": "^8.0.9",
+    "@symfony/ux-live-component": "https://gitpkg.vercel.app/symfony/ux-live-component/assets?2.x",
+    "@symfony/ux-react": "https://gitpkg.vercel.app/symfony/ux-react/assets?2.x",
+    "@symfony/ux-translator": "https://gitpkg.vercel.app/symfony/ux-translator/assets?2.x",
     "lodash": "^4.17.21",
     "react-intl": "^6.6.8",
     "react-query": "^3.39.3",
@@ -24,8 +27,9 @@
     "@babel/core": "^7.17.0",
     "@babel/eslint-parser": "^7.25.1",
     "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.24.7",
     "@chromatic-com/storybook": "^1.3.3",
-    "@hotwired/stimulus": "^3.0.0",
+    "@hotwired/stimulus": "^3.2.2",
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
     "@storybook/addon-links": "^8.0.9",
@@ -35,8 +39,7 @@
     "@storybook/html": "^8.0.9",
     "@storybook/html-webpack5": "^8.0.9",
     "@storybook/test": "^8.0.9",
-    "@symfony/stimulus-bridge": "^3.2.0",
-    "@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
+    "@symfony/stimulus-bridge": "^3.2.2",
     "@symfony/webpack-encore": "^4.0.0",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.3.0",