6.0 parcel - V1

Author: George

package.json

@@ -2,11 +2,12 @@
   "name": "admin",
   "version": "2.0.0",
   "description": "Web starter package suitable for admin applications.",
-  "main": "index.js",
+  "main": "public/index.js",
   "type": "module",
   "scripts": {
     "preview": "php -S 0.0.0.0:8080 -t public",
-    "build": "vite build --watch"
+    "start": "parcel ",
+    "build": "parcel build src/App/assets/js/index.js"
   },
   "repository": {
     "type": "git",
@@ -32,11 +33,10 @@
     "jquery-sparkline": "^2.4.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "parcel": "^2.15.2",
     "perfect-scrollbar": "^1.5.5",
     "skycons": "^1.0.0",
-    "typescript": "^5.5.4",
-    "vite": "^6.3.1",
-    "vite-plugin-static-copy": "^2.3.1"
+    "typescript": "^5.5.4"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -46,6 +46,8 @@
     "@babel/plugin-transform-runtime": "^7.27.1",
     "@babel/runtime": "^7.27.1",
     "@babel/traverse": "^7.27.1",
+    "@parcel/transformer-sass": "^2.15.2",
+    "bootstrap-sass": "^3.4.3",
     "cross-env": "^7.0.3",
     "css-loader": "5.2.7",
     "eslint": "^9.26.0",
@@ -63,12 +65,7 @@
     "shx": "^0.3.4",
     "style-loader": "^4.0.0",
     "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.1",
-    "vite-jsconfig-paths": "^2.0.1",
-    "vite-plugin-bundle-css": "^0.1.1",
-    "vite-plugin-commonjs": "^0.10.4",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-minify": "^2.1.0"
+    "stylelint-config-standard": "^36.0.1"
   },
   "overrides": {
     "graceful-fs": "^4.2.11",

public/css/app.css

@@ -1,11 +1,11 @@
+import '/node_modules/bootstrap/dist/js/bootstrap.bundle';
+require('../scss/index.scss')
 import './components/_chart';
-import './components/_sparkline';
 import './components/_popover';
 import './components/_scrollbar';
 import './components/_search';
 import './components/_sidebar';
 import './components/_main';
+import './components/_sparkline';
 
-import 'bootstrap/dist/js/bootstrap.bundle';
-import '../scss/index.scss'
 window.$ = window.jQuery = require('jquery');

public/js/admin.js

@@ -1,3 +1,6 @@
+@use "./../settings/baseColors";
+@use "./../settings/materialColors";
+
 .checkbox label {
   display: inline-block;
   vertical-align: middle;
@@ -16,9 +19,9 @@
   top: 50%;
   transform: translateY(-50%);
   margin-left: -12px;
-  border: 1px solid $grey-300;
+  border: 1px solid baseColors.$grey-300;
   border-radius: 3px;
-  background-color: $md-white;
+  background-color: materialColors.$md-white;
   -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
   -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
   transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
@@ -36,7 +39,7 @@
   top: 50%;
   transform: translateY(-50%);
   margin-left: -12px;
-  color: $grey-500;
+  color: baseColors.$grey-500;
 }
 
 .checkbox input[type="checkbox"] {
@@ -61,7 +64,7 @@
 }
 
 .checkbox input[type="checkbox"]:disabled + label::before {
-  background-color: $grey-400;
+  background-color: baseColors.$grey-400;
   cursor: not-allowed;
 }
 
@@ -74,48 +77,48 @@
 }
 
 .checkbox-primary input[type="checkbox"]:checked + label::before {
-  background-color: $default-primary;
-  border-color: $default-primary;
+  background-color: baseColors.$default-primary;
+  border-color: baseColors.$default-primary;
 }
 
 .checkbox-primary input[type="checkbox"]:checked + label::after {
   color: #fff;
 }
 
 .checkbox-danger input[type="checkbox"]:checked + label::before {
-  background-color: $default-danger;
-  border-color: $default-danger;
+  background-color: baseColors.$default-danger;
+  border-color: baseColors.$default-danger;
 }
 
 .checkbox-danger input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .checkbox-info input[type="checkbox"]:checked + label::before {
-  background-color: $default-info;
-  border-color: $default-info;
+  background-color: baseColors.$default-info;
+  border-color: baseColors.$default-info;
 }
 
 .checkbox-info input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .checkbox-warning input[type="checkbox"]:checked + label::before {
-  background-color: $default-warning;
-  border-color: $default-warning;
+  background-color: baseColors.$default-warning;
+  border-color: baseColors.$default-warning;
 }
 
 .checkbox-warning input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .checkbox-success input[type="checkbox"]:checked + label::before {
-  background-color: $default-success;
-  border-color: $default-success;
+  background-color: baseColors.$default-success;
+  border-color: baseColors.$default-success;
 }
 
 .checkbox-success input[type="checkbox"]:checked + label::after {
-  color: $md-white;
+  color: materialColors.$md-white;
 }
 
 .radio {

public/js/app.js

@@ -10,17 +10,20 @@
 // ---------------------------------------------------------
 // @Page Container
 // ---------------------------------------------------------
+@use "./../settings/baseColors";
+@use "./../settings/breakpoints";
+@use "./../tools/mixins/mediaQueriesRanges";
 
 .page-container {
   min-height: 100vh;
-  padding-left: $offscreen-size;
+  padding-left: baseColors.$offscreen-size;
   transition: all 0.2s ease;
 
-  @include between($breakpoint-md, $breakpoint-xl) {
-    padding-left: $collapsed-size;
+  @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
+    padding-left: baseColors.$collapsed-size;
   }
 
-  @include to($breakpoint-md) {
+  @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
     padding-left: 0;
   }
 }
@@ -33,7 +36,7 @@
   padding: 85px 20px 20px;
   min-height: calc(100vh - 61px);
 
-  @include to($breakpoint-md) {
+  @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
     padding: 85px 5px 5px;
   }
 }
@@ -47,19 +50,19 @@
 // ---------------------------------------------------------
 
 .full-container {
-  left: $offscreen-size;
-  min-height: calc(100vh - #{$header-height});
+  left: baseColors.$offscreen-size;
+  min-height: calc(100vh - #{baseColors.$header-height});
   position: absolute;
   right: 0;
-  top: $header-height;
+  top: baseColors.$header-height;
   transition: all 0.2s ease;
 
-  @include between($breakpoint-md, $breakpoint-xl) {
+  @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
     left: 0;
-    padding-left: $collapsed-size;
+    padding-left: baseColors.$collapsed-size;
   }
 
-  @include to($breakpoint-md) {
+  @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
     left: 0;
   }
 }
@@ -70,26 +73,26 @@
 
 .is-collapsed {
   .page-container {
-    padding-left: $collapsed-size;
+    padding-left: baseColors.$collapsed-size;
 
-    @include to($breakpoint-md) {
+    @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
       padding-left: 0;
     }
 
-    @include between($breakpoint-md, $breakpoint-xl) {
-      padding-left: $offscreen-size;
+    @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
+      padding-left: baseColors.$offscreen-size;
     }
   }
 
   .full-container {
-    left: $collapsed-size;
+    left: baseColors.$collapsed-size;
 
-    @include to($breakpoint-md) {
+    @include mediaQueriesRanges.to(breakpoints.$breakpoint-md) {
       left: 0;
     }
 
-    @include between($breakpoint-md, $breakpoint-xl) {
-      left: $offscreen-size;
+    @include mediaQueriesRanges.between(breakpoints.$breakpoint-md, breakpoints.$breakpoint-xl) {
+      left: baseColors.$offscreen-size;
       padding-left: 0;
     }
   }