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";