Update test workflow to run on multiple operating systems

Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
Co-authored-by: codecalm <codecalm@gmail.com>

.browserslistrc

@@ -1,11 +1,6 @@
 >= 1%
-last 1 major version
+last 2 versions
+Firefox ESR 
 not dead
-Chrome >= 60
+safari >= 15.4
-Firefox >= 60
+iOS >= 15.4
-Edge >= 15.15063
-Explorer 11
-iOS >= 10
-Safari >= 10
-Android >= 6
-not ExplorerMobile <= 11

.build/download-images.js

@@ -1,57 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('node:fs')
-const path = require('node:path')
-const request = require('request')
-const filePath = path.join(__dirname, '../src/pages/_data/photos.json')
-
-const photos = JSON.parse(fs.readFileSync(filePath, 'utf8'))
-
-const urlTitle = (str) => {
-	str = str
-		.toLowerCase()
-		.replaceAll('&', 'and')
-		.replace(/[^[a-z0-9-]/g, '-')
-		.replace(/-+/g, '-')
-
-	return str
-}
-
-const download = function (uri, filename, callback, error) {
-	request.head(uri, function (err, res, body) {
-		request(uri).pipe(fs.createWriteStream(filename))
-			.on('close', callback)
-			.on('error', error)
-	})
-}
-
-async function downloadPhotos() {
-	for (const key in photos) {
-		const photo = photos[key]
-
-		let filename, i = 1;
-
-		do {
-			filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
-			i++
-		} while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
-
-		await new Promise((resolve, reject) => {
-			download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function () {
-				resolve()
-			}, function () {
-				reject()
-			});
-		})
-
-		photos[key]['file'] = filename
-		photos[key]['horizontal'] = photo['width'] > photo['height']
-	}
-
-	fs.writeFileSync(filePath, JSON.stringify(photos))
-}
-
-downloadPhotos();
-

.build/import-icons.js

@@ -1,37 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path');
-
-const iconsTags = require('../node_modules/@tabler/icons/icons.json'),
-	iconsPkg = require('../node_modules/@tabler/icons/package.json');
-
-const prepareSvgFile = (svg) => {
-	return svg.replace(/\n/g, '').replace(/>\s+</g, '><').replace(/\s+/g, ' ')
-}
-
-let svgList = {}
-for (let iconName in iconsTags) {
-	let iconData = iconsTags[iconName]
-	svgList[iconName] = {
-		name: iconName,
-		svg: {
-			outline: iconData.styles.outline ? prepareSvgFile(fs.readFileSync(path.join(__dirname, `../node_modules/@tabler/icons/icons/outline/${iconName}.svg`), 'utf8')) : null,
-			filled: iconData.styles.filled ? prepareSvgFile(fs.readFileSync(path.join(__dirname, `../node_modules/@tabler/icons/icons/filled/${iconName}.svg`), 'utf8')) : null,
-		}
-	}
-}
-
-fs.writeFileSync(
-	path.join(__dirname, `../src/pages/_data/icons-info.json`),
-	JSON.stringify({
-		version: iconsPkg.version,
-		count: Object.values(svgList).reduce((acc, icon) => {
-			return acc + (icon.svg.outline ? 1 : 0) + (icon.svg.filled ? 1 : 0)
-		}, 0)
-	})
-)
-
-fs.writeFileSync(path.join(__dirname, `../src/pages/_data/icons.json`), JSON.stringify(svgList))

.build/import-illustrations.js

@@ -1,44 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path'),
-	glob = require('glob');
-
-const illustrations = glob
-	.sync(path.join(__dirname, `../src/static/illustrations/light/*.png`))
-	.map((file) => {
-		return path.basename(file, '.png')
-	})
-
-fs.writeFileSync(
-	path.join(__dirname, `../src/pages/_data/illustrations.json`),
-	JSON.stringify(illustrations)
-)
-
-
-// let i = {}
-// const dirs = ['light', 'dark', 'autodark']
-// const ilustrations = ['not-found', 'computer-fix', 'boy-with-key', 'boy-girl']
-
-// for(const dir of dirs) {
-// 	i[dir] = {}
-
-// 	for(const ilustration of ilustrations) {
-// 		let svg = fs.readFileSync(path.join(__dirname, `../src/pages/_free-illustrations/${dir}/${ilustration}.svg`), 'utf8')
-
-// 		svg = svg
-// 			.replace(/\n+/g, ' ')
-// 			.replace(/>\s+</g, '><')
-// 			.replace(/\s+/g, ' ')
-// 			.replace(/^[\n\s-]+/, '')
-
-// 		i[dir][ilustration] = svg
-// 	}
-// }
-
-// fs.writeFileSync(
-// 	path.join(__dirname, `../src/pages/_data/free-illustrations.json`),
-// 	JSON.stringify(i)
-// )

.build/reformat-mdx.js

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path'),
-	glob = require('glob'),
-	beautifyHtml = require('js-beautify').html;
-
-const docs = glob
-	.sync(path.join(__dirname, `../docs/**/*.mdx`))
-
-docs.forEach((file, i) => {
-	const oldContent = fs.readFileSync(file, 'utf8')
-
-	// get codeblocks from markdown
-	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
-		if (m2 === 'html') {
-			let m3m = beautifyHtml(m3, {
-				"indent_size": 2,
-				"indent_char": " ",
-			}).trim();
-
-			// remove empty lines
-			m3m = m3m.replace(/^\s*[\r\n]/gm, '');
-
-			return m1 + m3m + "\n" + m4;
-		}
-		return m
-	})
-
-	if (content !== oldContent) {
-		fs.writeFileSync(file, content, 'utf8')
-		console.log(`Reformatted ${file}`)
-	}
-})

.build/unused-files.js

@@ -1,26 +0,0 @@
-const glob = require('glob');
-const fs = require('fs')
-const path = require('path')
-
-const srcDir = path.join(__dirname, '../src')
-
-let foundFiles = []
-glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
-	let fileContent = fs.readFileSync(file)
-
-	fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
-		filename = `${srcDir}/pages/_includes/${filename}`
-
-		if (!foundFiles.includes(filename)) {
-			foundFiles.push(filename)
-		}
-	})
-})
-
-let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
-
-includeFiles.forEach((file) => {
-	if (!foundFiles.includes(file)) {
-		console.log('file', file)
-	}
-})

.changeset/famous-items-tap.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enable `scrollSpy` in `countup` module

.changeset/metal-carrots-battle.md

@@ -0,0 +1,4 @@
+---
+---
+
+Refactor bundlewatch workflow to use Turbo 

.changeset/nice-jeans-tie.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix size of `apexcharts` tooltip marker

.changeset/short-rocks-battle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.

.changeset/smart-fans-pump.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix vertical alignment in single page and error layouts

.github/workflows/bundlewatch.yml

@@ -19,6 +19,14 @@ jobs:
       - name: Clone repository
         uses: actions/checkout@v4
 
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with: 
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
@@ -26,8 +34,6 @@ jobs:
      
       - name: Install PNPM
         uses: pnpm/action-setup@v4
-        with:
-          version: 8
 
       - name: Set up Bundler
         uses: ruby/setup-ruby@v1
@@ -38,9 +44,6 @@ jobs:
       - name: Install pnpm dependencies
         run: pnpm install --no-frozen-lockfile
 
-      - name: Run build
-        run: pnpm run build
-
       - name: Run bundlewatch
         run: pnpm run bundlewatch
         env:

.github/workflows/release.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - dev
 
 permissions:
   contents: read
@@ -31,8 +30,6 @@ jobs:
 
       - name: Install PNPM
         uses: pnpm/action-setup@v4
-        with:
-          version: 8
 
       - name: Install Dependencies
         run: pnpm install

.github/workflows/test.yml

@@ -1,8 +1,7 @@
 name: Test build
 
 on:
-  pull_request:
+  pull_request: null
-    types: [ opened, reopened ]
 
 env:
   NODE: 20
@@ -12,11 +11,19 @@ permissions:
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: [ubuntu-latest, window-latest, macos-latest]
     steps:
       - name: Clone repository
         uses: actions/checkout@v4
 
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with: 
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
@@ -24,8 +31,6 @@ jobs:
 
       - name: Install PNPM
         uses: pnpm/action-setup@v4
-        with:
-          version: 8
 
       - run: node --version
 

.gitignore

@@ -28,6 +28,7 @@ node_modules/
 .yarn
 .next
 .vercel
+.turbo
 package-lock.json
 
 demo/

.vscode/settings.json

@@ -1,14 +1,12 @@
 {
    "files.exclude": {
-      "**/.git": false,
+      "**/.git": true,
-      "**/.svn": false,
+      "**/.svn": true,
-      "**/.hg": false,
+      "**/.hg": true,
-      "**/CVS": false,
+      "**/CVS": true,
-      "**/.DS_Store": false,
+      "**/.DS_Store": true,
-      "**/Thumbs.db": false,
+      "**/Thumbs.db": true,
-      "**/.idea/": false,
+      "**/.idea/": true
-      "dist": false,
-      "demo": false
    },
    "explorerExclude.backup": {}
 }

CHANGELOG.md

@@ -1,11 +1,5 @@
 # Changelog
 
-## 1.0.1
-
-### Patch Changes
-
-- 11f4487: Use the full license agreement for illustrations in docs
-
 ## 1.0.0 - 2025-01-28
 
 ### Minor Changes

README.md

@@ -110,7 +110,7 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 ## Build locally
 
-You need to have `pnpm` and `bundler` installed.
+You need to have `pnpm` installed.
 
 1. From the root `/tabler` directory, run installation in the command line: `pnpm install` 
 2. Then execute `pnpm run start` to start up the application stack.

build/reformat-mdx.mjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url'
+import { sync } from 'glob';
+import beautify from 'js-beautify';
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx'))
+
+docs.forEach((file, i) => {
+	const oldContent = readFileSync(file, 'utf8')
+
+	// get codeblocks from markdown
+	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
+		if (m2 === 'html') {
+			// m3 = beautify.default.html(m3, {
+			// 	"indent_size": 2,
+			// 	"indent_char": " ",
+			// }).trim();
+
+			// remove empty lines
+			m3 = m3.replace(/^\s*[\r\n]/gm, '');
+
+			return m1 + m3 + "\n" + m4;
+		}
+		return m
+	})
+
+	if (content !== oldContent) {
+		writeFileSync(file, content, 'utf8')
+		console.log(`Reformatted ${file}`)
+	}
+})

core/build/add-banner.mjs

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname, basename } from 'node:path';
+import { fileURLToPath } from 'node:url'
+import { sync } from 'glob';
+import banner from '@repo/banner';
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const styles = sync(join(__dirname, '..', 'dist', 'css', '*.css'))
+
+const plugins = {
+	'tabler-flags': 'Flags',
+	'tabler-flags.rtl': 'Flags RTL',
+	'tabler-marketing': 'Marketing',
+	'tabler-marketing.rtl': 'Marketing RTL',
+	'tabler-payments': 'Payments',
+	'tabler-payments.rtl': 'Payments RTL',
+	'tabler-socials': 'Socials',
+	'tabler-socials.rtl': 'Socials RTL',
+	'tabler-vendors': 'Vendors',
+	'tabler-vendors.rtl': 'Vendors RTL',
+}
+
+styles.forEach((file, i) => {
+	const content = readFileSync(file, 'utf8')
+	const filename = basename(file)
+	const pluginKey = Object.keys(plugins).find(plugin => filename.includes(plugin))
+	const plugin = plugins[pluginKey]
+	const regex = /^(@charset ['"][a-zA-Z0-9-]+['"];?)\n?/i
+
+	let newContent = ''
+
+	if (content.match(regex)) {
+		newContent = content.replace(regex, (m, m1) => {
+			return `${m1}\n${banner(plugin)}\n`
+		})
+	} else {
+		newContent = `${banner(plugin)}\n${content}`
+	}
+
+	writeFileSync(file, newContent, 'utf8')
+})

core/build/postcss.config.mjs

@@ -0,0 +1,15 @@
+export default context => {
+	return {
+		map: {
+			inline: false,
+			annotation: true,
+			sourcesContent: true
+		},
+		plugins: {
+			autoprefixer: {
+				cascade: false
+			},
+			rtlcss: context.env === 'RTL'
+		}
+	}
+}

core/build/rollup.config.mjs

@@ -0,0 +1,46 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import banner from '@repo/banner'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const ESM = process.env.ESM === 'true'
+
+let destinationFile = `tabler${ESM ? '.esm' : ''}`
+const external = []
+const plugins = [
+	babel({
+		exclude: 'node_modules/**',
+		babelHelpers: 'bundled'
+	})
+]
+
+plugins.push(
+	replace({
+		'process.env.NODE_ENV': '"production"',
+		preventAssignment: true
+	}),
+	nodeResolve()
+)
+
+const rollupConfig = {
+	input: path.resolve(__dirname, `../js/tabler.${ESM ? 'esm' : 'umd'}.js`),
+	output: {
+		banner: banner(),
+		file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
+		format: ESM ? 'esm' : 'umd',
+		generatedCode: 'es2015'
+	},
+	external,
+	plugins
+}
+
+if (!ESM) {
+	rollupConfig.output.name = 'tabler'
+}
+
+export default rollupConfig