ps with puik fork: initial commit

mattgoud · Jan 29, 2024 · ea05ce3 · ea05ce3
1 parent 50e7e04
commit ea05ce3
Show file tree

Hide file tree

Showing 14 changed files with 11,190 additions and 36,779 deletions.
diff --git a/admin-dev/themes/default/package-lock.json b/admin-dev/themes/default/package-lock.json
diff --git a/admin-dev/themes/new-theme/js/pages/themes/index.ts b/admin-dev/themes/new-theme/js/pages/themes/index.ts
@@ -22,6 +22,7 @@
  * @copyright Since 2007 PrestaShop SA and Contributors
  * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
  */
+
 import ResetThemeLayoutsHandler from './reset-theme-layouts-handler';
 import UseThemeHandler from './use-theme-handler';
 import MultiStoreRestrictionField from '../../components/multi-store-restriction-field/multi-store-restriction-field';

diff --git a/admin-dev/themes/new-theme/js/theme.ts b/admin-dev/themes/new-theme/js/theme.ts
@@ -25,6 +25,9 @@
 
 // Dependencies
 
+import {
+  initWeb, PuikAlertCe, PuikButtonCe,
+} from '@prestashopcorp/puik-web-components';
 import 'prestakit/dist/js/prestashop-ui-kit';
 import 'jquery-ui-dist/jquery-ui';
 import 'bootstrap-tokenfield';
@@ -73,3 +76,6 @@ $(() => {
   initNumberCommaTransformer('.js-comma-transformer');
   watchSymfonyDebugBar();
 });
+
+initWeb('button-web', PuikButtonCe);
+initWeb('alert-web', PuikAlertCe);
diff --git a/admin-dev/themes/new-theme/package-lock.json b/admin-dev/themes/new-theme/package-lock.json
diff --git a/admin-dev/themes/new-theme/package.json b/admin-dev/themes/new-theme/package.json
@@ -17,6 +17,11 @@
   "author": "PrestaShop",
   "license": "OSL-3.0",
   "dependencies": {
+    "@prestashopcorp/puik-components": "file:/home/mattgoud/squad-compliance/puik/packages-tars/prestashopcorp-puik-components-0.0.1.tgz",
+    "@prestashopcorp/puik-theme": "file:/home/mattgoud/squad-compliance/puik/packages-tars/prestashopcorp-puik-theme-0.0.1.tgz",
+    "@prestashopcorp/puik-resolver": "file:/home/mattgoud/squad-compliance/puik/packages-tars/prestashopcorp-puik-resolver-0.0.1.tgz",
+    "@prestashopcorp/puik-web-components": "file:/home/mattgoud/squad-compliance/puik/packages-tars/prestashopcorp-puik-web-components-0.0.1.tgz",
+    "@prestashopcorp/puik-tailwind-preset": "file:/home/mattgoud/squad-compliance/puik/packages-tars/prestashopcorp-puik-tailwind-preset-0.0.1.tgz",
     "bignumber.js": "^9.0.1",
     "bootstrap-colorpicker": "^3.2.0",
     "bootstrap-tokenfield": "^0.12.0",
@@ -53,8 +58,8 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.18.9",
     "@babel/core": "^7.15.7",
+    "@babel/eslint-parser": "^7.18.9",
     "@types/bootstrap": "^4.5.0",
     "@types/dropzone": "^5.7.4",
     "@types/jquery": "^3.5.5",
@@ -91,10 +96,10 @@
     "imports-loader": "^4.0.1",
     "mini-css-extract-plugin": "^2.6.1",
     "mocha": "^6",
-    "sass-embedded": "^1.55.0",
     "path": "^0.12.7",
     "postcss-loader": "^7.0.1",
     "postcss-preset-env": "^7.8.2",
+    "sass-embedded": "^1.55.0",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
     "stylelint": "^14.1.0",

diff --git a/admin-dev/themes/new-theme/scss/theme.scss b/admin-dev/themes/new-theme/scss/theme.scss
@@ -1,3 +1,6 @@
+
+@import url('https://unpkg.com/@prestashopcorp/puik/dist/index.css');
+
 // Settings
 @import "config/settings";
 @import "config/keyframes";

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/PrestaShopBundle/Resources/views/Admin/Common/Grid/Blocks/bulk_actions.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Common/Grid/Blocks/bulk_actions.html.twig
@@ -25,7 +25,7 @@
 
 {% if grid.actions.bulk|length > 0 and grid.data.records_total > 0 %}
     <div class="btn-group">
-      <button class="btn btn-outline-secondary dropdown-toggle js-bulk-actions-btn"
+      <button class="puik-button puik-button--secondary puik-button--md js-bulk-actions-btn"
               data-toggle="dropdown"
               disabled
       >

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Common/Grid/grid_panel.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Common/Grid/grid_panel.html.twig
@@ -24,36 +24,38 @@
  *#}
 {% set displayName = true %}
 {% if (grid.view_options.display_name is defined) %}
-    {% set displayName = grid.view_options.display_name %}
+	{% set displayName = grid.view_options.display_name %}
 {% endif %}
+		{% if displayName is not same as(false) or grid.actions.grid|length > 0 %}
+			<div class="test card-header js-grid-header">
+				{% if displayName is not same as(false) %}
+					<h3 class="d-inline-block card-header-title">
+						{{ grid.name }}
+						(
+						{{ grid.data.records_total }}
+						)
+					</h3>
+				{% endif %}
+				{% block grid_actions_block %}
+					<div class="d-inline-block float-right">
+						{{ include('@PrestaShop/Admin/Common/Grid/Blocks/grid_actions.html.twig', {'grid': grid}) }}
+					</div>
+				{% endblock %}
+			</div>
+		{% endif %}
+	{% endblock %}
 
-<div class="card js-grid-panel" id="{{ grid.id }}_grid_panel">
-  {% block grid_panel_header %}
-    {% if displayName is not same as(false) or grid.actions.grid|length > 0 %}
-    <div class="card-header js-grid-header">
-      {% if displayName is not same as(false) %}
-        <h3 class="d-inline-block card-header-title">
-          {{ grid.name }} ({{ grid.data.records_total }})
-        </h3>
-      {% endif %}
-      {% block grid_actions_block %}
-        <div class="d-inline-block float-right">
-          {{ include('@PrestaShop/Admin/Common/Grid/Blocks/grid_actions.html.twig', {'grid': grid}) }}
-        </div>
-      {% endblock %}
-    </div>
-    {% endif %}
-  {% endblock %}
+	{% block grid_panel_body %}
+		<div class="card-body">
+			{% block grid_view_block %}
+				{{ include('@PrestaShop/Admin/Common/Grid/grid.html.twig', {'grid': grid }) }}
+			{% endblock %}
+		</div>
+	{% endblock %}
 
-  {% block grid_panel_body %}
-    <div class="card-body">
-      {% block grid_view_block %}
-        {{ include('@PrestaShop/Admin/Common/Grid/grid.html.twig', {'grid': grid }) }}
-      {% endblock %}
-    </div>
-  {% endblock %}
-
-  {% block grid_panel_footer %}{% endblock %}
+	{% block grid_panel_footer %}
+	{% endblock %}
 </div>
 
-{% block grid_panel_extra_content %}{% endblock %}
+{% block grid_panel_extra_content %}
+{% endblock %}
diff --git a/src/PrestaShopBundle/Resources/views/Admin/Sell/Catalog/Suppliers/index.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Sell/Catalog/Suppliers/index.html.twig
@@ -37,15 +37,188 @@
 %}
 
 {% block content %}
-  {% block supplier_grid %}
-    {{ ps.infotip(settingsTipMessage, true) }}
-    {% include'@PrestaShop/Admin/Common/Grid/grid_panel.html.twig' with {'grid': supplierGrid} %}
-  {% endblock %}
+
+	<div class="puik-card puik-card--default mb-4">
+
+		<button-web size="sm" variant="primary" :fluid="false" :wrap-label="true" :disabled="false" left-icon="home" right-icon="favorite">
+			button-web test blablabblablab
+		</button-web>
+
+		<alert-web title="title" description="f" variant="info" button-label="buttonLabel">
+			<slot name="default">
+				alert-web
+			</slot>
+		</alert-web>
+
+		<h1 class="puik-h1">
+			puik h1
+		</h1>
+		<h2 class="puik-h2">
+			puik h2
+		</h2>
+		<h3 class="puik-h3">
+			puik h3
+		</h3>
+
+		<div class="puik-alert puik-alert--info" aria-live="polite">
+			<div class="puik-alert__content">
+				<span class="puik-icon puik-alert__icon">
+					info
+				</span>
+				<div class="puik-alert__text">
+					<p class="puik-alert__title">
+						Alert
+					</p>
+					<span class="puik-alert__description">
+						info alert
+					</span>
+				</div>
+			</div>
+			<button class="puik-button puik-button--info puik-button--md puik-alert__button">
+				Button
+			</button>
+		</div>
+
+		<div class="puik-alert puik-alert--success" aria-live="polite">
+			<div class="puik-alert__content">
+				<span class="puik-icon puik-alert__icon">
+					check_circle
+				</span>
+				<div class="puik-alert__text">
+					<p class="puik-alert__title">
+						Alert
+					</p>
+					<span class="puik-alert__description">
+						success alert
+					</span>
+				</div>
+			</div>
+			<button class="puik-button puik-button--success puik-button--md puik-alert__button">
+				Button
+			</button>
+		</div>
+
+		<div class="puik-alert puik-alert--warning" aria-live="polite">
+			<div class="puik-alert__content">
+				<span class="puik-icon puik-alert__icon">
+					warning
+				</span>
+				<div class="puik-alert__text">
+					<p class="puik-alert__title">
+						Alert
+					</p>
+					<span class="puik-alert__description">
+						warning alert
+					</span>
+				</div>
+			</div>
+			<button class="puik-button puik-button--warning puik-button--md puik-alert__button">
+				Button
+			</button>
+		</div>
+
+		<div class="puik-alert puik-alert--danger" aria-live="polite">
+			<div class="puik-alert__content">
+				<span class="puik-icon puik-alert__icon">
+					error
+				</span>
+				<div class="puik-alert__text">
+					<p class="puik-alert__title">
+						Alert
+					</p>
+					<span class="puik-alert__description">
+						danger alert
+					</span>
+				</div>
+			</div>
+
+			<button class="puik-button puik-button--danger puik-button--md puik-alert__button">
+				Button
+			</button>
+		</div>
+
+		<div class="flex">
+			<div class="puik-badge puik-badge--success">
+				success badge
+			</div>
+			<div class="puik-badge puik-badge--warning">
+				warning badge
+			</div>
+			<div class="puik-badge puik-badge--danger">
+				danger badge
+			</div>
+			<div class="puik-badge puik-badge--info">
+				info badge
+			</div>
+			<div class="puik-badge puik-badge--neutral">
+				neutral badge
+			</div>
+		</div>
+
+
+		<div class="flex flex-col">
+			<label class="puik-label" for="input">
+				Label
+			</label>
+			<div class="puik-input">
+				<div class="puik-input__wrapper">
+					<input id="" class="puik-input__field" placeholder="input text" type="text" autocomplete="" name="">
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-col">
+			<label class="puik-label" for="input">
+				Label
+			</label>
+			<div class="puik-input">
+				<div class="puik-input__wrapper">
+					<input id="" class="puik-input__field" placeholder="input text" type="text" autocomplete="" name="">
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-col">
+			<label class="puik-label" for="input">
+				Label
+			</label>
+			<div class="puik-input">
+				<div class="puik-input__wrapper">
+					<input id="" class="puik-input__field" placeholder="input text" type="text" autocomplete="" name="">
+				</div>
+			</div>
+		</div>
+
+		<div class="puik-tooltip" tabindex="0" aria-describedby="tooltip-id">
+			<div class="puik-tooltip__wrapper">
+				<div class="puik-icon material-icons-round" style="font-size: 1.25rem;">
+					help_outline
+				</div>
+			</div>
+			<div id="tooltip-id" class="puik-tooltip__tip" role="tooltip" style="z-index: 1000; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(-589px, 146px); display: none;" data-popper-placement="left">
+				<div class="puik-tooltip__tip__content">
+					<span class="puik-tooltip__tip__content__title">
+						Title
+					</span>
+					<span class="puik-tooltip__tip__content__description">
+						This is a tooltip
+					</span>
+				</div>
+				<div class="puik-tooltip__tip__arrow" style="position: absolute; top: 0px; transform: translate(0px, 22px);"></div>
+			</div>
+		</div>
+	</div>
+
+
+	{% block supplier_grid %}
+		{{ ps.infotip(settingsTipMessage, true) }}
+		{% include'@PrestaShop/Admin/Common/Grid/grid_panel.html.twig' with {'grid': supplierGrid} %}
+	{% endblock %}
 {% endblock %}
 
 {% block javascripts %}
-  {{ parent() }}
+	{{ parent() }}
 
-  <script src="{{ asset('themes/new-theme/public/supplier.bundle.js') }}"></script>
-  <script src="{{ asset('themes/default/js/bundle/pagination.js') }}"></script>
+	<script src="{{ asset('themes/new-theme/public/supplier.bundle.js') }}"></script>
+	<script src="{{ asset('themes/default/js/bundle/pagination.js') }}"></script>
 {% endblock %}
diff --git a/src/PrestaShopBundle/Resources/views/Admin/layout.html.twig b/src/PrestaShopBundle/Resources/views/Admin/layout.html.twig
@@ -58,7 +58,7 @@
 
 {% block session_alert %}
   {% macro alert(type, flashbagContent) %}
-    <div class="alert alert-{{ type }} d-print-none" role="alert">
+    <div class="puik-alert puik-alert--{{ type }}" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true"><i class="material-icons">close</i></span>
       </button>