Skip to content

Commit 2cff156

Browse files
smnandresmnandre
committed
[Site] Isolate React/Svelte build
1 parent 320e635 commit 2cff156

34 files changed

+175
-859
lines changed

Diff for: ‎ux.symfony.com/assets/build/README.md

-8
This file was deleted.

Diff for: ‎ux.symfony.com/assets/app-react.js renamed to ‎ux.symfony.com/assets/react/app-react.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {registerReactControllerComponents} from '@symfony/ux-react';
22

3-
import './app.js';
3+
import '../app.js';
44

55
registerReactControllerComponents();

Diff for: ‎ux.symfony.com/assets/react/components/PackageList.jsx

-37
This file was deleted.

Diff for: ‎ux.symfony.com/assets/build/react/components/PackageList.js renamed to ‎ux.symfony.com/assets/react/dist/components/PackageList.js

File renamed without changes.

Diff for: ‎ux.symfony.com/assets/build/react/controllers/PackageSearch.js renamed to ‎ux.symfony.com/assets/react/dist/controllers/PackageSearch.js

File renamed without changes.

Diff for: ‎ux.symfony.com/assets/react/src/components/PackageList.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
export default function (props) {
4+
if (props.packages.length === 0) {
5+
return 'No packages found';
6+
}
7+
8+
return (
9+
props.packages.map(item => (
10+
<div class="PackageListItem">
11+
<div class="PackageListItem__icon" style={`--gradient: ${item.gradient}`}>
12+
<img src={item.imageUrl} alt={`Image for the ${item.humanName} UX package`} />
13+
</div>
14+
<h3 class="PackageListItem__title">
15+
<a href={item.url}>{item.humanName}</a>
16+
</h3>
17+
</div>
18+
))
19+
);
20+
}

Diff for: ‎ux.symfony.com/assets/react/controllers/PackageSearch.jsx renamed to ‎ux.symfony.com/assets/react/src/controllers/PackageSearch.jsx

File renamed without changes.

Diff for: ‎ux.symfony.com/assets/react/src/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"devDependencies": {
3+
"@babel/cli": "^7.25.6",
4+
"@babel/core": "^7.25.2",
5+
"@babel/preset-react": "^7.24.7"
6+
},
7+
"license": "MIT",
8+
"private": true,
9+
"scripts": {
10+
"build": "../build/node_modules/.bin/babel ../. --out-dir ../../build/react --presets=@babel/preset-react"
11+
}
12+
}

Diff for: ‎ux.symfony.com/assets/styles/app.scss

+1
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ $utilities: map-remove(
143143
@import "components/ProductGrid";
144144
@import "components/PackageHeader";
145145
@import "components/PackageBox";
146+
@import "components/PackageList";
146147
@import "components/Cookbook";
147148
@import "components/SupportBox";
148149
@import "components/Tabs";

Diff for: ‎ux.symfony.com/assets/styles/components/_PackageList.scss

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.PackageList {
2+
--gradient: #202427;
3+
--color: #C8CED2;
4+
display: grid;
5+
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
6+
gap: .75rem;
7+
}
8+
9+
.PackageListItem {
10+
background: var(--bs-body-bg);
11+
border-radius: .75rem;
12+
border: 0.66px solid var(--bs-secondary-bg-subtle);
13+
padding: .5rem;
14+
display: flex;
15+
align-items: center;
16+
justify-content: flex-start;
17+
gap: .75rem;
18+
position: relative;
19+
}
20+
21+
.PackageListItem__icon {
22+
width: 3rem;
23+
aspect-ratio: 1;
24+
border-radius: 14%;
25+
background: var(--gradient);
26+
display: grid;
27+
place-items: center;
28+
29+
img {
30+
width: 100%;
31+
height: 100%;
32+
max-width: 50%;
33+
max-height: 50%;
34+
transition: transform 0.35s;
35+
.PackageListItem:hover & {
36+
transform: scale(1.05);
37+
}
38+
}
39+
}
40+
41+
.PackageListItem__label {
42+
font-size: 1.25rem;
43+
font-family: var(--font-family-title);
44+
font-weight: 600;
45+
margin: 0;
46+
flex: 1;
47+
opacity: .85;
48+
transition: opacity 0.5s;
49+
letter-spacing: -0.07ch;
50+
51+
.PackageListItem:hover & {
52+
opacity: 1;
53+
transition: opacity 0.25s;
54+
}
55+
56+
a:after {
57+
content: " ";
58+
inset: 0;
59+
position: absolute;
60+
}
61+
}

Diff for: ‎ux.symfony.com/assets/app-svelte.js renamed to ‎ux.symfony.com/assets/svelte/app-svelte.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {registerSvelteControllerComponents} from '@symfony/ux-svelte';
22

3-
import './app.js';
3+
import '../app.js';
44

55
registerSvelteControllerComponents();

Diff for: ‎ux.symfony.com/assets/build/svelte/components/PackageList.js renamed to ‎ux.symfony.com/assets/svelte/dist/components/PackageList.js

File renamed without changes.

Diff for: ‎ux.symfony.com/assets/build/svelte/controllers/PackageSearch.js renamed to ‎ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js

File renamed without changes.

Diff for: ‎ux.symfony.com/bin/compile_svelte.js renamed to ‎ux.symfony.com/assets/svelte/src/build.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@ function compileDirectory(inputDir, outputDir) {
3131
}
3232

3333
compileDirectory(
34-
path.join(__dirname, '..', 'assets', 'svelte'),
35-
path.join(__dirname, '..', 'assets', 'build', 'svelte'),
34+
path.join(__dirname, '..', 'src' ),
35+
path.join(__dirname, '..', 'dist' ),
3636
);

Diff for: ‎ux.symfony.com/assets/svelte/components/PackageList.svelte renamed to ‎ux.symfony.com/assets/svelte/src/components/PackageList.svelte

File renamed without changes.

Diff for: ‎ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte renamed to ‎ux.symfony.com/assets/svelte/src/controllers/PackageSearch.svelte

File renamed without changes.

Diff for: ‎ux.symfony.com/package.json renamed to ‎ux.symfony.com/assets/svelte/src/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
"private": true,
1010
"scripts": {
1111
"build": "yarn build-react && yarn build-svelte",
12-
"build-react": "babel assets/react --out-dir assets/build/react --presets=@babel/preset-react",
1312
"build-svelte": "node bin/compile_svelte.js"
1413
}
1514
}

Diff for: ‎ux.symfony.com/assets/app-vue.js renamed to ‎ux.symfony.com/assets/vue/app-vue.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {registerVueControllerComponents} from '@symfony/ux-vue';
22

3-
import './app.js';
3+
import '../app.js';
44

55
registerVueControllerComponents();

Diff for: ‎ux.symfony.com/assets/vue/components/PackageList.js

+11-24
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
11
export default {
22
props: ['packages'],
33
template: `
4-
<div>
5-
<div v-if="packages.length === 0" class="alert alert-info">
6-
Sad trombone... we haven't built any components that match this search yet!
4+
<div v-if="packages.length === 0">
5+
No packages found. Sad trombone...
76
</div>
87
9-
<div v-else class="row">
10-
<a
11-
v-for="uxPackage in packages"
12-
:href="uxPackage.url"
13-
class="col-12 col-md-4 col-lg-3 mb-2"
14-
>
15-
<div class="components-container p-2">
16-
<div class="d-flex">
17-
<div
18-
class="live-component-img d-flex justify-content-center align-items-center"
19-
:style="{background: uxPackage.gradient}">
20-
<img width="17" height="17"
21-
:src="uxPackage.imageUrl"
22-
:alt="'Image for the ' + uxPackage.humanName + ' UX package'"
23-
/>
24-
</div>
25-
<h4 class="ubuntu-title ps-2 align-self-center">
26-
{{ uxPackage.humanName }}
27-
</h4>
8+
<div v-else class="PackageList">
9+
10+
<div v-for="package in packages" class="PackageListItem">
11+
<div class="PackageListItem__icon" :style="{'--gradient': package.gradient}">
12+
<img :src="package.imageUrl" :alt="package.humanName">
2813
</div>
14+
<h4 class="PackageListItem__label">
15+
<a :href="package.url">{{ package.humanName }}</a>
16+
</h4>
2917
</div>
30-
</a>
18+
3119
</div>
32-
</div>
3320
`
3421
};

Diff for: ‎ux.symfony.com/assets/vue/controllers/PackageSearch.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/**
22
| Single-File Components - e.g. PackageSearch.vue -
33
| are supported when using Webpack Encore.
44
*/

Diff for: ‎ux.symfony.com/config/packages/asset_mapper.yaml

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ framework:
77
- '*/assets/styles/_*.scss'
88
- '*/assets/styles/**/_*.scss'
99
- '*/assets/icons/**'
10+
- '*/assets/react/src/**' # Exclude React source + build files
11+
- '*/assets/svelte/src/**' # Exclude Svelte source + build files
1012
importmap_polyfill: false
1113

1214
react:
13-
controllers_path: '%kernel.project_dir%/assets/build/react/controllers'
15+
controllers_path: '%kernel.project_dir%/assets/react/dist/controllers'
1416

1517
svelte:
16-
controllers_path: '%kernel.project_dir%/assets/build/svelte/controllers'
18+
controllers_path: '%kernel.project_dir%/assets/svelte/dist/controllers'

Diff for: ‎ux.symfony.com/importmap.php

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@
1717
'entrypoint' => true,
1818
],
1919
'app-react' => [
20-
'path' => './assets/app-react.js',
20+
'path' => './assets/react/app-react.js',
2121
'entrypoint' => true,
2222
],
2323
'app-svelte' => [
24-
'path' => './assets/app-svelte.js',
24+
'path' => './assets/svelte/app-svelte.js',
2525
'entrypoint' => true,
2626
],
2727
'app-vue' => [
28-
'path' => './assets/app-vue.js',
28+
'path' => './assets/vue/app-vue.js',
2929
'entrypoint' => true,
3030
],
3131
'demos/live-memory' => [

Diff for: ‎ux.symfony.com/templates/components/FileTree.html.twig

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="FileTree FileTree-main list-unstyled px-3">
2+
{{ _self.fileTree(files) }}
3+
</div>
4+
5+
{% macro fileTree(files) %}
6+
{% for file_info in files %}
7+
<li class="FileTree-main {{ file_info.isDirectory ? 'FileTree-dir' : 'FileTree-file' }}">
8+
<span
9+
data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right"
10+
title="{{ file_info.description|e('html_attr') }}"
11+
>
12+
<twig:ux:icon name="{{ file_info.isDirectory ? 'folder-open' : 'file' }}" />
13+
{{ file_info.filename }}
14+
</span>
15+
{% if file_info.files is defined %}
16+
<ul class="list-unstyled">
17+
{{ _self.fileTree(file_info.files) }}
18+
</ul>
19+
{% endif %}
20+
</li>
21+
{% endfor %}
22+
{% endmacro %}

Diff for: ‎ux.symfony.com/templates/components/Package/PackageListItem.html.twig

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="PackageListItem">
2+
<div class="PackageListItem__icon" style="--gradient: {{ package.gradient }};">
3+
<img src="{{ asset('images/ux_packages/' ~ package.imageFilename) }}" alt="Symfony UX {{ package.humanName }}" />
4+
</div>
5+
<h4 class="PackageListItem__label">
6+
<a href="{{ url(package.route) }}">{{ package.humanName }}</a>
7+
</h4>
8+
</div>

Diff for: ‎ux.symfony.com/templates/components/Package/SearchPackages.html.twig

+10-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
<div{{ attributes }}>
2-
<input
3-
type="text"
4-
data-model="query"
5-
placeholder="Results update as you type..."
6-
class="form-control"
7-
>
82

9-
{% if computed.packages|length > 0 %}
10-
<div data-loading="addClass(opacity-50)" class="mt-3 row">
11-
{% for package in computed.packages %}
12-
{{ include('main/_package_in_list.html.twig', {package}) }}
13-
{% endfor %}
14-
</div>
15-
{% else %}
16-
<div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
17-
{% endif %}
3+
<input type="text" data-model="query" placeholder="Results update as you type..." class="form-control" />
4+
5+
<div class="PackageList pt-3" data-loading="addClass(opacity-50)">
6+
{% for package in computed.packages %}
7+
{{ include('components/Package/PackageListItem.html.twig', {package}) }}
8+
{% else %}
9+
No packages found "{{ query }}"
10+
{% endfor %}
11+
</div>
12+
1813
</div>

Diff for: ‎ux.symfony.com/templates/main/_file_tree.html.twig

-29
This file was deleted.

Diff for: ‎ux.symfony.com/templates/main/_package_in_list.html.twig

-10
This file was deleted.

Diff for: ‎ux.symfony.com/templates/main/homepage.html.twig

+2-6
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,9 @@
3737
</div>
3838

3939
<div class="col-12 col-md-6 mt-3 mt-md-0">
40-
<div data-controller="tooltips" class="ux-container FileTree flex-grow-1 ms-2 py-3">
40+
<div data-controller="tooltips" class="ux-container FileTree flex-grow-1 ms-2 py-3">
4141
<div style="height: 185px; overflow: auto;">
42-
<ul class="list-unstyled FileTree-main">
43-
{{ include('main/_file_tree.html.twig', {
44-
files: recipeFileTree.files
45-
}) }}
46-
</ul>
42+
<twig:FileTree files="{{ recipeFileTree.files }}" />
4743
</div>
4844
</div>
4945
</div>

0 commit comments

Comments
 (0)