From bf92291cec038e5d0b0bbf25b6d84403b1c8bed1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Andr=C3=A9?= Date: Sat, 19 Oct 2024 19:43:10 +0200 Subject: [PATCH] [Site] Fix React/Svelte/Vue demo --- ux.symfony.com/assets/react/build/.gitignore | 3 + .../assets/react/{src => build}/package.json | 2 +- .../react/dist/components/PackageList.js | 31 +++----- .../react/src/components/PackageList.jsx | 32 ++++---- ux.symfony.com/assets/svelte/build/.gitignore | 3 + .../assets/svelte/{src => build}/build.js | 15 +++- .../assets/svelte/{src => build}/package.json | 4 +- .../svelte/dist/components/PackageList.js | 77 ++++++++----------- .../svelte/dist/controllers/PackageSearch.js | 2 +- .../svelte/src/components/PackageList.svelte | 31 +++----- .../config/packages/asset_mapper.yaml | 6 +- .../templates/ux_packages/vue.html.twig | 7 +- 12 files changed, 101 insertions(+), 112 deletions(-) create mode 100644 ux.symfony.com/assets/react/build/.gitignore rename ux.symfony.com/assets/react/{src => build}/package.json (64%) create mode 100644 ux.symfony.com/assets/svelte/build/.gitignore rename ux.symfony.com/assets/svelte/{src => build}/build.js (78%) rename ux.symfony.com/assets/svelte/{src => build}/package.json (56%) diff --git a/ux.symfony.com/assets/react/build/.gitignore b/ux.symfony.com/assets/react/build/.gitignore new file mode 100644 index 00000000000..dd59f5771a7 --- /dev/null +++ b/ux.symfony.com/assets/react/build/.gitignore @@ -0,0 +1,3 @@ +.yarn +yarn.lock +node_modules diff --git a/ux.symfony.com/assets/react/src/package.json b/ux.symfony.com/assets/react/build/package.json similarity index 64% rename from ux.symfony.com/assets/react/src/package.json rename to ux.symfony.com/assets/react/build/package.json index b6812da41fe..a522c572591 100644 --- a/ux.symfony.com/assets/react/src/package.json +++ b/ux.symfony.com/assets/react/build/package.json @@ -7,6 +7,6 @@ "license": "MIT", "private": true, "scripts": { - "build": "../build/node_modules/.bin/babel ../. --out-dir ../../build/react --presets=@babel/preset-react" + "build": "babel ../src/ --out-dir ../dist/ --presets=@babel/preset-react --no-babelrc" } } diff --git a/ux.symfony.com/assets/react/dist/components/PackageList.js b/ux.symfony.com/assets/react/dist/components/PackageList.js index 3aad7c891e8..97187f90e2e 100644 --- a/ux.symfony.com/assets/react/dist/components/PackageList.js +++ b/ux.symfony.com/assets/react/dist/components/PackageList.js @@ -1,31 +1,24 @@ import React from 'react'; export default function (props) { if (props.packages.length === 0) { - return /*#__PURE__*/React.createElement("div", { - className: "alert alert-info" - }, "Sad trombone... we haven't built any components that match this search yet!"); + return 'No packages found'; } return /*#__PURE__*/React.createElement("div", { - className: "row" - }, props.packages.map(item => /*#__PURE__*/React.createElement("a", { - key: item.name, - href: item.url, - className: "col-12 col-md-4 col-lg-3 mb-2" + className: "PackageList" + }, props.packages.map(item => /*#__PURE__*/React.createElement("div", { + className: "PackageListItem", + key: item.id }, /*#__PURE__*/React.createElement("div", { - className: "components-container p-2" - }, /*#__PURE__*/React.createElement("div", { - className: "d-flex" - }, /*#__PURE__*/React.createElement("div", { - className: "live-component-img d-flex justify-content-center align-items-center", + className: "PackageListItem__icon", style: { - background: item.gradient + '--gradient': item.gradient } }, /*#__PURE__*/React.createElement("img", { - width: "17px", - height: "17px", src: item.imageUrl, alt: `Image for the ${item.humanName} UX package` - })), /*#__PURE__*/React.createElement("h4", { - className: "ubuntu-title ps-2 align-self-center" - }, item.humanName)))))); + })), /*#__PURE__*/React.createElement("h3", { + className: "PackageListItem__label" + }, /*#__PURE__*/React.createElement("a", { + href: item.url + }, item.humanName))))); } \ No newline at end of file diff --git a/ux.symfony.com/assets/react/src/components/PackageList.jsx b/ux.symfony.com/assets/react/src/components/PackageList.jsx index 235b31ca36a..2437a445af7 100644 --- a/ux.symfony.com/assets/react/src/components/PackageList.jsx +++ b/ux.symfony.com/assets/react/src/components/PackageList.jsx @@ -1,20 +1,22 @@ import React from 'react'; export default function (props) { - if (props.packages.length === 0) { - return 'No packages found'; - } + if (props.packages.length === 0) { + return 'No packages found'; + } - return ( - props.packages.map(item => ( -
-
- {`Image -
-

- {item.humanName} -

-
- )) - ); + return ( +
+ {props.packages.map(item => ( +
+
+ {`Image +
+

+ {item.humanName} +

+
+ ))} +
+ ); } diff --git a/ux.symfony.com/assets/svelte/build/.gitignore b/ux.symfony.com/assets/svelte/build/.gitignore new file mode 100644 index 00000000000..dd59f5771a7 --- /dev/null +++ b/ux.symfony.com/assets/svelte/build/.gitignore @@ -0,0 +1,3 @@ +.yarn +yarn.lock +node_modules diff --git a/ux.symfony.com/assets/svelte/src/build.js b/ux.symfony.com/assets/svelte/build/build.js similarity index 78% rename from ux.symfony.com/assets/svelte/src/build.js rename to ux.symfony.com/assets/svelte/build/build.js index 0df0dd3a9b7..13ce4c1605b 100644 --- a/ux.symfony.com/assets/svelte/src/build.js +++ b/ux.symfony.com/assets/svelte/build/build.js @@ -12,18 +12,27 @@ function compileDirectory(inputDir, outputDir) { for (const file of files) { const inputFile = path.join(inputDir, file); + + // Exclude node_modules directory + if (inputFile.includes('node_')) { + continue; + } + const stats = fs.statSync(inputFile); - if (stats.isDirectory()) { const newOutputDir = path.join(outputDir, file); if (!fs.existsSync(newOutputDir)) { fs.mkdirSync(newOutputDir); } + console.log('Entering', inputDir); compileDirectory(inputFile, newOutputDir); - } else if (path.extname(file) === '.svelte') { + continue; + } + + if(path.extname(file) === '.svelte') { + console.log('Compiling', inputFile); const input = fs.readFileSync(inputFile, 'utf-8'); const output = compile(input, { format: 'esm' }); - const outputFile = path.join(outputDir, `${path.basename(file, '.svelte')}.js`); fs.writeFileSync(outputFile, output.js.code); } diff --git a/ux.symfony.com/assets/svelte/src/package.json b/ux.symfony.com/assets/svelte/build/package.json similarity index 56% rename from ux.symfony.com/assets/svelte/src/package.json rename to ux.symfony.com/assets/svelte/build/package.json index bdac40b7000..11d86f9b417 100644 --- a/ux.symfony.com/assets/svelte/src/package.json +++ b/ux.symfony.com/assets/svelte/build/package.json @@ -2,13 +2,11 @@ "devDependencies": { "@babel/cli": "^7.25.6", "@babel/core": "^7.25.2", - "@babel/preset-react": "^7.24.7", "svelte": "^3.59.1" }, "license": "MIT", "private": true, "scripts": { - "build": "yarn build-react && yarn build-svelte", - "build-svelte": "node bin/compile_svelte.js" + "build": "node build.js" } } diff --git a/ux.symfony.com/assets/svelte/dist/components/PackageList.js b/ux.symfony.com/assets/svelte/dist/components/PackageList.js index 4846a635aa0..72e1f2acd7d 100644 --- a/ux.symfony.com/assets/svelte/dist/components/PackageList.js +++ b/ux.symfony.com/assets/svelte/dist/components/PackageList.js @@ -1,4 +1,4 @@ -/* generated by Svelte v3.59.1 */ +/* generated by Svelte v3.59.2 */ import { SvelteComponent, add_render_callback, @@ -33,7 +33,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } -// (13:0) {:else} +// (11:0) {:else} function create_else_block(ctx) { let div; let each_blocks = []; @@ -55,7 +55,7 @@ function create_else_block(ctx) { each_blocks[i].c(); } - attr(div, "class", "row"); + attr(div, "class", "PackageList"); }, m(target, anchor) { insert(target, div, anchor); @@ -92,42 +92,39 @@ function create_else_block(ctx) { // (9:0) {#if packages.length === 0} function create_if_block(ctx) { - let div; + let t; return { c() { - div = element("div"); - div.textContent = "Sad trombone... we haven't built any components that\n match this search yet!"; - attr(div, "class", "alert alert-info"); + t = text("No packages found"); }, m(target, anchor) { - insert(target, div, anchor); + insert(target, t, anchor); }, p: noop, i: noop, o: noop, d(detaching) { - if (detaching) detach(div); + if (detaching) detach(t); } }; } -// (15:8) {#each packages as uxPackage(uxPackage.name)} +// (13:8) {#each packages as uxPackage(uxPackage.name)} function create_each_block(key_1, ctx) { - let a; - let div2; let div1; let div0; let img; let img_src_value; let img_alt_value; let t0; - let h4; + let h3; + let a; let t1_value = /*uxPackage*/ ctx[1].humanName + ""; let t1; - let t2; let a_href_value; - let a_intro; + let t2; + let div1_intro; let rect; let stop_animation = noop; @@ -135,38 +132,32 @@ function create_each_block(key_1, ctx) { key: key_1, first: null, c() { - a = element("a"); - div2 = element("div"); div1 = element("div"); div0 = element("div"); img = element("img"); t0 = space(); - h4 = element("h4"); + h3 = element("h3"); + a = element("a"); t1 = text(t1_value); t2 = space(); - attr(img, "width", "17"); - attr(img, "height", "17"); if (!src_url_equal(img.src, img_src_value = /*uxPackage*/ ctx[1].imageUrl)) attr(img, "src", img_src_value); - attr(img, "alt", img_alt_value = "`Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package`"); - attr(div0, "class", "live-component-img d-flex justify-content-center align-items-center"); - set_style(div0, "background", /*uxPackage*/ ctx[1].gradient); - attr(h4, "class", "ubuntu-title ps-2 align-self-center"); - attr(div1, "class", "d-flex"); - attr(div2, "class", "components-container p-2"); + attr(img, "alt", img_alt_value = "Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package"); + attr(div0, "class", "PackageListItem__icon"); + set_style(div0, "--gradient", /*uxPackage*/ ctx[1].gradient); attr(a, "href", a_href_value = /*uxPackage*/ ctx[1].url); - attr(a, "class", "col-12 col-md-4 col-lg-3 mb-2"); - this.first = a; + attr(h3, "class", "PackageListItem__label"); + attr(div1, "class", "PackageListItem"); + this.first = div1; }, m(target, anchor) { - insert(target, a, anchor); - append(a, div2); - append(div2, div1); + insert(target, div1, anchor); append(div1, div0); append(div0, img); append(div1, t0); - append(div1, h4); - append(h4, t1); - append(a, t2); + append(div1, h3); + append(h3, a); + append(a, t1); + append(div1, t2); }, p(new_ctx, dirty) { ctx = new_ctx; @@ -175,12 +166,12 @@ function create_each_block(key_1, ctx) { attr(img, "src", img_src_value); } - if (dirty & /*packages*/ 1 && img_alt_value !== (img_alt_value = "`Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package`")) { + if (dirty & /*packages*/ 1 && img_alt_value !== (img_alt_value = "Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package")) { attr(img, "alt", img_alt_value); } if (dirty & /*packages*/ 1) { - set_style(div0, "background", /*uxPackage*/ ctx[1].gradient); + set_style(div0, "--gradient", /*uxPackage*/ ctx[1].gradient); } if (dirty & /*packages*/ 1 && t1_value !== (t1_value = /*uxPackage*/ ctx[1].humanName + "")) set_data(t1, t1_value); @@ -190,27 +181,27 @@ function create_each_block(key_1, ctx) { } }, r() { - rect = a.getBoundingClientRect(); + rect = div1.getBoundingClientRect(); }, f() { - fix_position(a); + fix_position(div1); stop_animation(); }, a() { stop_animation(); - stop_animation = create_animation(a, rect, flip, { duration: transitionDuration }); + stop_animation = create_animation(div1, rect, flip, { duration: transitionDuration }); }, i(local) { - if (!a_intro) { + if (!div1_intro) { add_render_callback(() => { - a_intro = create_in_transition(a, fade, { duration: transitionDuration }); - a_intro.start(); + div1_intro = create_in_transition(div1, fade, { duration: transitionDuration }); + div1_intro.start(); }); } }, o: noop, d(detaching) { - if (detaching) detach(a); + if (detaching) detach(div1); } }; } diff --git a/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js b/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js index 6c19cc6901b..e145a7a19fe 100644 --- a/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js +++ b/ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js @@ -1,4 +1,4 @@ -/* generated by Svelte v3.59.1 */ +/* generated by Svelte v3.59.2 */ import { SvelteComponent, append, diff --git a/ux.symfony.com/assets/svelte/src/components/PackageList.svelte b/ux.symfony.com/assets/svelte/src/components/PackageList.svelte index 15a5baef3da..c94878629ee 100644 --- a/ux.symfony.com/assets/svelte/src/components/PackageList.svelte +++ b/ux.symfony.com/assets/svelte/src/components/PackageList.svelte @@ -7,33 +7,20 @@ {#if packages.length === 0} -
Sad trombone... we haven't built any components that - match this search yet! -
+ No packages found {:else} -
+
{#each packages as uxPackage(uxPackage.name)} - -
-
-
- `Image for the {uxPackage.humanName} UX package` -
-

- { uxPackage.humanName } -

-
+
+ Image for the {uxPackage.humanName} UX package
- +

+ {uxPackage.humanName} +

+
{/each}
{/if} diff --git a/ux.symfony.com/config/packages/asset_mapper.yaml b/ux.symfony.com/config/packages/asset_mapper.yaml index 56abd2b3e04..730e2f482a3 100644 --- a/ux.symfony.com/config/packages/asset_mapper.yaml +++ b/ux.symfony.com/config/packages/asset_mapper.yaml @@ -7,8 +7,10 @@ framework: - '*/assets/styles/_*.scss' - '*/assets/styles/**/_*.scss' - '*/assets/icons/**' - - '*/assets/react/src/**' # Exclude React source + build files - - '*/assets/svelte/src/**' # Exclude Svelte source + build files + - '*/assets/react/build**' # React build dir + - '*/assets/react/src**' # React sources + - '*/assets/svelte/build**' # ESvelte build dir + - '*/assets/svelte/src**' # Svelte source files importmap_polyfill: false react: diff --git a/ux.symfony.com/templates/ux_packages/vue.html.twig b/ux.symfony.com/templates/ux_packages/vue.html.twig index d529fd1a41c..d901ef5e7e7 100644 --- a/ux.symfony.com/templates/ux_packages/vue.html.twig +++ b/ux.symfony.com/templates/ux_packages/vue.html.twig @@ -20,14 +20,15 @@ {% endblock %} {% block code_block_left %} - + {% endblock %} {% block code_block_right %} {% endblock %}