desy-html 8.13.1 → 9.0.1

package/gulpfile.js

@@ -1,45 +1,50 @@
 // https://github.com/idmytro/tailwindcss-gulp-starter
 // https://gist.github.com/taylorbryant/91fc05b12472a88a8b6494f610647cd4
 
-const gulp = require('gulp');
-const { series, parallel } = require('gulp');
-const clean = require('gulp-clean');
-const nunjucksRender = require('gulp-nunjucks-render');
-const browserSync = require('browser-sync').create();
-const postcss = require('gulp-postcss');
-const atimport = require('postcss-import');
-const tailwindnesting = require('tailwindcss/nesting');
-const stripCssComments = require('gulp-strip-css-comments');
-const footer = require('gulp-footer');
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
+import gulp from 'gulp';
+import sourcemaps from 'gulp-sourcemaps';
+import clean from 'gulp-clean';
+import nunjucksRender from 'gulp-nunjucks-render';
+import browserSyncPackage from 'browser-sync';
+import postcss from 'gulp-postcss';
+import atimport from 'postcss-import';
+import stripCssComments from 'gulp-strip-css-comments';
+import footer from 'gulp-footer';
+import tailwindcss from 'tailwindcss';
+import tailwindcssNesting from 'tailwindcss/nesting/index.js';
+import autoprefixer from 'autoprefixer';
+import babel from 'gulp-babel';
+
+import { SOURCE_NUNJUCKS_GLOBALS } from './src/js/globals/index.js';
+import { SOURCE_NUNJUCKS_FILTERS } from './src/js/filters/index.js';
+
+import { series } from 'gulp';
+
+const browserSync = browserSyncPackage.create();
 
 const TAILWIND_CONFIG = './config/tailwind.config.js';
 const SOURCE_HTML_DIR = './docs/**.html';
 const SOURCE_NUNJUCKS_PATHS = ['./src/templates/','./docs/'];
 const SOURCE_NUNJUCKS_FILES = ['./src/templates/**/*','./docs/**/*'];
 const SOURCE_NUNJUCKS_DIR = './docs/**/*.html';
-const SOURCE_JS_FILES = ['./src/**/**.js','!./src/js/globals/**', '!./src/js/filters/**'];
+const SOURCE_JS_FILES = ['./src/**/*.js','!./src/js/globals/**', '!./src/js/filters/**'];
 const SOURCE_STYLESHEET = './src/css/styles.css';
 const SOURCE_STYLESHEET_DIR = './src/**/*.css';
-const SOURCE_NUNJUCKS_GLOBALS = require('./src/js/globals/index.js');
-const SOURCE_NUNJUCKS_FILTERS = require('./src/js/filters/index.js');
 const DESTINATION_HTML_DIR = './dist/';
 const DESTINATION_JS_DIR = './dist/';
 const DESTINATION_STYLESHEET = './dist/css/';
 
-
 const manageEnvironment = function(environment) {
   // Custom globals
   for (const key in SOURCE_NUNJUCKS_GLOBALS) {
-    environment.addGlobal(key, SOURCE_NUNJUCKS_GLOBALS[key])
+    environment.addGlobal(key, SOURCE_NUNJUCKS_GLOBALS[key]);
   }
 
   // Custom filters
   for (const key in SOURCE_NUNJUCKS_FILTERS) {
-    environment.addFilter(key, SOURCE_NUNJUCKS_FILTERS[key])
+    environment.addFilter(key, SOURCE_NUNJUCKS_FILTERS[key]);
   }
-}
+};
 
 function bs(cb) {
   browserSync.init({
@@ -52,27 +57,24 @@ function bs(cb) {
   cb();
 }
 
-
 function watchFiles(cb) {
   gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, SOURCE_HTML_DIR, ...SOURCE_JS_FILES, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, css, reload));
   cb();
 }
 
-
 function reload(cb) {
   browserSync.reload();
   cb();
 }
 
-
 function css() {
   return gulp.src(SOURCE_STYLESHEET)
     .pipe(
       postcss([
-      atimport(),
-      tailwindnesting(),
-      tailwindcss(TAILWIND_CONFIG),
-      autoprefixer()
+        atimport(),
+        tailwindcssNesting(),
+        tailwindcss(TAILWIND_CONFIG),
+        autoprefixer()
       ])
     )
     .pipe(stripCssComments({preserve: false}))
@@ -80,13 +82,11 @@ function css() {
     .pipe(gulp.dest(DESTINATION_STYLESHEET));
 }
 
-
 function html() {
   return gulp.src(SOURCE_HTML_DIR)
     .pipe(gulp.dest(DESTINATION_HTML_DIR));
 }
 
-
 function nunjucks() {
   return gulp.src(SOURCE_NUNJUCKS_DIR)
     .pipe(nunjucksRender({
@@ -102,30 +102,26 @@ function nunjucks() {
     .pipe(gulp.dest(DESTINATION_HTML_DIR));
 }
 
-
 function js() {
-  return gulp.src(SOURCE_JS_FILES)
+  return gulp.src(SOURCE_JS_FILES, { sourcemaps: true })
+    .pipe(babel())
     .pipe(gulp.dest(DESTINATION_JS_DIR));
 }
 
-
 function version() {
   return gulp.src('./package.json')
     .pipe(gulp.dest('./dist/'));
 }
 
-
 function license() {
   return gulp.src('./src/EUPL-1.2.txt')
     .pipe(gulp.dest('./dist/'));
 }
 
-
 function cleanFolder() {
   return gulp.src(DESTINATION_HTML_DIR, {read: false, allowEmpty: true})
     .pipe(clean());
 }
 
-
-exports.default = series(cleanFolder, html, nunjucks, js, css, license, version, bs, watchFiles);
-exports.prod = series(cleanFolder, html, nunjucks, js, css, license, version, bs);
+export default series(cleanFolder, html, nunjucks, js, css, license, version, bs, watchFiles);
+export const prod = series(cleanFolder, html, nunjucks, js, css, license, version, bs);

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "desy-html",
-  "version": "8.13.1",
+  "version": "9.0.1",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
+  "type": "module",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",
     "email": "sda@aragon.es"
@@ -43,13 +44,19 @@
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/register": "^7.24.6",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "browser-sync": "^2.26.13",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.0",
+    "gulp-babel": "^8.0.0",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-footer": "^2.0.2",
     "gulp-nunjucks-render": "^2.2.3",
     "gulp-postcss": "^9.0.1",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-strip-css-comments": "^2.0.0",
     "js-beautify": "^1.14.7",
     "outdent": "^0.8.0"

package/src/css/styles.css

@@ -21,6 +21,7 @@
 @import "../templates/components/button-loader/_styles.button-loader.css";
 @import "../templates/components/checkboxes/_styles.checkboxes.css";
 @import "../templates/components/collapsible/_styles.collapsible.css";
+@import "../templates/components/datepicker/_styles.datepicker.css";
 @import "../templates/components/dialog/_styles.dialog.css";
 @import "../templates/components/dropdown/_styles.dropdown.css";
 @import "../templates/components/footer/_styles.footer.css";