Add Prettier to project for consistent code formatting (#1558)

.changeset/thick-apples-punch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add Prettier to project for consistent code formatting

.prettierignore

@@ -0,0 +1,5 @@
+dist
+.tmp
+.vscode
+.cache
+node_modules

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"bracketSpacing": true,
+	"jsxSingleQuote": false,
+	"printWidth": 80,
+	"proseWrap": "always",
+	"semi": false,
+	"singleQuote": false,
+	"tabWidth": 2,
+	"trailingComma": "all"
+}

package.json

@@ -20,7 +20,9 @@
     "changelog": "gulp changelog",
     "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
     "download-images": "node build/download-images.js",
-    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done"
+    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
+    "format:check": "prettier --check src/**/*.{js,scss} --cache",
+    "format:write": "prettier --write src/**/*.{js,scss} --cache"
   },
   "repository": {
     "type": "git",
@@ -130,11 +132,13 @@
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
+    "@changesets/cli": "^2.26.1",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/pluginutils": "^5.0.2",
     "@rollup/stream": "^2.0.0",
+    "@shopify/prettier-plugin-liquid": "^1.0.6",
     "@tabler/icons": "^2.17.0",
     "all-contributors-cli": "^6.25.0",
     "apexcharts": "^3.40.0",
@@ -168,6 +172,7 @@
     "nouislider": "^15.7.0",
     "plyr": "^3.7.8",
     "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
     "release-it": "^15.10.3",
     "request": "^2.88.2",
     "rollup": "2.79.1",
@@ -182,7 +187,6 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@changesets/cli": "^2.26.1",
     "@popperjs/core": "^2.11.7",
     "bootstrap": "5.3.0-alpha3"
   },

src/js/demo-theme.js

@@ -4,22 +4,22 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 
-const themeStorageKey = 'tablerTheme'
-const defaultTheme = 'light'
+const themeStorageKey = "tablerTheme"
+const defaultTheme = "light"
 let selectedTheme
 
 // https://stackoverflow.com/a/901144
 const params = new Proxy(new URLSearchParams(window.location.search), {
-	 get: (searchParams, prop) => searchParams.get(prop),
-});
+	get: (searchParams, prop) => searchParams.get(prop),
+})
 
 if (!!params.theme) {
-	 localStorage.setItem(themeStorageKey, params.theme)
-	 selectedTheme = params.theme
+	localStorage.setItem(themeStorageKey, params.theme)
+	selectedTheme = params.theme
 } else {
-	 const storedTheme = localStorage.getItem(themeStorageKey)
-	 selectedTheme = storedTheme ? storedTheme : defaultTheme
+	const storedTheme = localStorage.getItem(themeStorageKey)
+	selectedTheme = storedTheme ? storedTheme : defaultTheme
 }
 
-document.body.classList.remove('theme-dark', 'theme-light');
-document.body.classList.add(`theme-${selectedTheme}`);
+document.body.classList.remove("theme-dark", "theme-light")
+document.body.classList.add(`theme-${selectedTheme}`)

src/js/demo.js

@@ -1,24 +1,27 @@
 // Setting items
 const items = {
-	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
-	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
-	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
+	"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
+	"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
+	"container-layout": {
+		localStorage: "tablerContainerLayout",
+		default: "boxed",
+	},
 }
 
 // Theme config
 const config = {}
 for (const [key, params] of Object.entries(items)) {
-   const lsParams = localStorage.getItem(params.localStorage)
-   config[key] = lsParams ? lsParams : params.default
+	const lsParams = localStorage.getItem(params.localStorage)
+	config[key] = lsParams ? lsParams : params.default
 }
 
 // Parse url params
 const parseUrl = () => {
 	const search = window.location.search.substring(1)
-	const params = search.split('&')
+	const params = search.split("&")
 
 	for (let i = 0; i < params.length; i++) {
-		const arr = params[i].split('=')
+		const arr = params[i].split("=")
 		const key = arr[0]
 		const value = arr[1]
 
@@ -35,7 +38,9 @@ const parseUrl = () => {
 // Toggle form controls
 const toggleFormControls = (form) => {
 	for (const [key, params] of Object.entries(items)) {
-		const elem = form.querySelector(`[name="settings-${key}"][value="${config[key]}"]`)
+		const elem = form.querySelector(
+			`[name="settings-${key}"][value="${config[key]}"]`,
+		)
 
 		if (elem) {
 			elem.checked = true
@@ -55,26 +60,24 @@ const submitForm = (form) => {
 		config[key] = value
 	}
 
-	window.dispatchEvent(new Event('resize'));
+	window.dispatchEvent(new Event("resize"))
 
-	(new bootstrap.Offcanvas(form)).hide()
+	new bootstrap.Offcanvas(form).hide()
 }
 
-
 // Parse url
 parseUrl()
 
 // Elements
-const form = document.querySelector('#offcanvasSettings')
+const form = document.querySelector("#offcanvasSettings")
 
 // Toggle form controls
 if (form) {
-
-	form.addEventListener('submit', function (e) {
+	form.addEventListener("submit", function (e) {
 		e.preventDefault()
 
 		submitForm(form)
 	})
 
 	toggleFormControls(form)
-}
+}

src/js/tabler.esm.js

@@ -1,10 +1,9 @@
 //Vendor
 
-import './src/autosize';
-import './src/input-mask';
-import './src/dropdown';
-import './src/tooltip';
-import './src/popover';
-import './src/switch-icon';
-import './src/toast';
-
+import "./src/autosize"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/toast"

src/js/tabler.js

@@ -1,15 +1,15 @@
 //Vendor
 
-import './src/autosize';
-import './src/input-mask';
-import './src/dropdown';
-import './src/tooltip';
-import './src/popover';
-import './src/switch-icon';
-import './src/tab';
-import './src/toast';
-import * as bootstrap from 'bootstrap';
-import * as tabler from './src/tabler';
+import "./src/autosize"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/tab"
+import "./src/toast"
+import * as bootstrap from "bootstrap"
+import * as tabler from "./src/tabler"
 
-globalThis.bootstrap = bootstrap;
-globalThis.tabler = tabler;
+globalThis.bootstrap = bootstrap
+globalThis.tabler = tabler

src/scss/_bootstrap-components.scss

@@ -35,4 +35,4 @@
 @import "bootstrap/scss/helpers";
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@import "bootstrap/scss/utilities/api";

src/scss/_bootstrap-config.scss

@@ -4,4 +4,4 @@
 @import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities";

src/scss/_bootstrap-override.scss

@@ -1,8 +1,8 @@
 @mixin caret($direction: down) {
-  $selector: 'after';
+  $selector: "after";
 
-  @if $direction == 'left' {
-    $selector: 'before'
+  @if $direction == "left" {
+    $selector: "before";
   }
 
   &:#{$selector} {
@@ -13,9 +13,9 @@
     height: $caret-width;
     border-bottom: 1px var(--#{$prefix}border-style);
     border-left: 1px var(--#{$prefix}border-style);
-    margin-right: .1em;
+    margin-right: 0.1em;
 
-    @if $direction != 'left' {
+    @if $direction != "left" {
       margin-left: $caret-spacing;
     } @else {
       margin-right: $caret-spacing;
@@ -32,18 +32,14 @@
     }
   }
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
     &:after {
       content: none;
     }
   }
 }
 
-@mixin alert-variant(
-  $background: null,
-  $border: null,
-  $color: null
-) {
+@mixin alert-variant($background: null, $border: null, $color: null) {
   // Override bootstrap core
 }
 
@@ -79,4 +75,4 @@
 //
 @function opaque($background, $foreground) {
   @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
+}

src/scss/_core.scss

@@ -69,4 +69,4 @@
 @import "utils/shadow";
 @import "utils/text";
 
-@import "debug";
+@import "debug";

src/scss/_debug.scss

@@ -1,38 +1,49 @@
 $debug: false;
 
 @if $debug {
-	$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "lime": $lime, "green": $green, "teal": $teal, "cyan": $cyan);
+  $colors: (
+    "blue": $blue,
+    "azure": $azure,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "lime": $lime,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+  );
 
-	@each $name, $color in $colors {
-		@debug ("#{$name}: '#{$color}'");
-		@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
-		@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
-		@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
-		@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
-		@debug ("#{$name}-500: '#{$color}'");
-		@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
-		@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
-		@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
-		@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
-	}
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
 
-	@debug ("gray: '#{$gray-500}'");
-	@debug ("gray-100: '#{$gray-100}'");
-	@debug ("gray-200: '#{$gray-200}'");
-	@debug ("gray-300: '#{$gray-300}'");
-	@debug ("gray-400: '#{$gray-400}'");
-	@debug ("gray-500: '#{$gray-500}'");
-	@debug ("gray-600: '#{$gray-600}'");
-	@debug ("gray-700: '#{$gray-700}'");
-	@debug ("gray-800: '#{$gray-800}'");
-	@debug ("gray-900: '#{$gray-900}'");
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
 
-	@debug ("border-color: '#{$border-color}'");
-	@debug ("text-muted: '#{$text-muted}'");
+  @debug ("border-color: '#{$border-color}'");
+  @debug ("text-muted: '#{$text-muted}'");
 
-	@each $name, $color in $social-colors {
-     @debug ("#{$name}: '#{$color}'");
-   }
+  @each $name, $color in $social-colors {
+    @debug ("#{$name}: '#{$color}'");
+  }
 }
-
-

src/scss/_utilities.scss

@@ -1,6 +1,8 @@
 $border-values: (
-  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
-  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style)
+    $border-color-translucent,
   0: 0,
 );
 
@@ -15,16 +17,16 @@ $utilities: (
       fill: fill,
       scale-down: scale-down,
       none: none,
-    )
+    ),
   ),
   "spacing": (
     property: letter-spacing,
     class: tracking,
     values: (
-      tight: -.05em,
+      tight: -0.05em,
       normal: 0,
-      wide: .05em,
-    )
+      wide: 0.05em,
+    ),
   ),
   "cursor": (
     property: cursor,
@@ -45,54 +47,54 @@ $utilities: (
       v-text: vertical-text,
       grab: grab,
       grabbing: grabbing,
-    )
+    ),
   ),
   "border": (
     property: border,
-    values: $border-values
+    values: $border-values,
   ),
   "border-top": (
     property: border-top,
-    values: $border-values
+    values: $border-values,
   ),
   "border-end": (
     class: border-end,
     property: border-right,
-    values: $border-values
+    values: $border-values,
   ),
   "border-bottom": (
     property: border-bottom,
-    values: $border-values
+    values: $border-values,
   ),
   "border-start": (
     class: border-start,
     property: border-left,
-    values: $border-values
+    values: $border-values,
   ),
   "border-x": (
     class: border-x,
     property: border-left border-right,
-    values: $border-values
+    values: $border-values,
   ),
   "border-y": (
     class: border-y,
     property: border-top border-bottom,
-    values: $border-values
+    values: $border-values,
   ),
   "width": (
     property: width,
     class: w,
-    values: $size-values
+    values: $size-values,
   ),
   "height": (
     property: height,
     class: h,
-    values: $size-values
+    values: $size-values,
   ),
   "columns": (
     property: columns,
     class: columns,
     responsive: true,
-    values: 2 3 4
-  )
-) !default;
+    values: 2 3 4,
+  ),
+) !default;

src/scss/_variables.scss

@@ -20,7 +20,9 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
+/* prettier-ignore */
 $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
+/* prettier-ignore */
 $font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 

src/scss/demo.scss

@@ -1,10 +1,7 @@
-
-
 @import "config";
 @import "demo/highlight";
 @import "demo/examples";
 
-
 .card-sponsor {
   background: #dbe7f6 no-repeat center/100% 100%;
   border-color: #548ed2;
@@ -15,7 +12,6 @@ body.no-transitions * {
   transition: none !important;
 }
 
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
@@ -53,13 +49,12 @@ body.no-transitions * {
 }
 
 .demo-dividers {
-  >p {
-    opacity: .2;
+  > p {
+    opacity: 0.2;
     user-select: none;
   }
 }
 
-
 $demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
@@ -68,7 +63,7 @@ $demo-icon-size: 4rem;
   margin: 0 -2px -1px 0;
   list-style: none;
 
-  >* {
+  > * {
     flex: 1 0 $demo-icon-size;
   }
 }
@@ -84,9 +79,11 @@ $demo-icon-size: 4rem;
   justify-content: center;
   aspect-ratio: 1;
   text-align: center;
-  padding: .5rem;
-  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  padding: 0.5rem;
+  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,7 +98,6 @@ $demo-icon-size: 4rem;
   }
 }
 
-
 //
 // Settings
 //
@@ -121,12 +117,27 @@ $demo-icon-size: 4rem;
   height: 3rem;
   width: 3rem;
   position: relative;
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
   box-shadow: $shadow;
 
-  &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
-  &-mixed { background-image: linear-gradient(135deg, $dark 50%, #fff 50%); }
-  &-transparent { background: $light; }
-  &-dark { background: $dark; }
-  &-colored { background-image: linear-gradient(135deg, var(--#{$prefix}primary) 50%, $light 50%); }
-}
+  &-light {
+    background: linear-gradient(135deg, $white 50%, $light 50%);
+  }
+  &-mixed {
+    background-image: linear-gradient(135deg, $dark 50%, #fff 50%);
+  }
+  &-transparent {
+    background: $light;
+  }
+  &-dark {
+    background: $dark;
+  }
+  &-colored {
+    background-image: linear-gradient(
+      135deg,
+      var(--#{$prefix}primary) 50%,
+      $light 50%
+    );
+  }
+}

src/scss/tabler-social.scss

@@ -1,2 +1 @@
 @import "config";
-

src/scss/tabler.scss

@@ -1,2 +1 @@
 @import "core";
-