From ce97770ed835da4fbe0a92fff7cf03b938c14872 Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 3 Aug 2026 23:52:40 +0200 Subject: [PATCH] Add @tabler/screenshots package with initial configuration and components --- package.json | 4 +- pnpm-lock.yaml | 19 ++++++ pnpm-workspace.yaml | 1 + screenshots/.gitignore | 6 ++ screenshots/assets/favicon-dev.ico | Bin 0 -> 15086 bytes screenshots/assets/favicon.ico | Bin 0 -> 33310 bytes screenshots/astro.config.mjs | 66 +++++++++++++++++++++ screenshots/env.d.ts | 1 + screenshots/layouts/ScreenshotLayout.astro | 62 +++++++++++++++++++ screenshots/package.json | 26 ++++++++ screenshots/pages/avatar-list.astro | 14 +++++ screenshots/pages/badge.astro | 24 ++++++++ screenshots/pages/button.astro | 32 ++++++++++ screenshots/pages/index.astro | 25 ++++++++ screenshots/tsconfig.json | 14 +++++ turbo.json | 20 +++++++ 16 files changed, 312 insertions(+), 2 deletions(-) create mode 100644 screenshots/.gitignore create mode 100644 screenshots/assets/favicon-dev.ico create mode 100644 screenshots/assets/favicon.ico create mode 100644 screenshots/astro.config.mjs create mode 100644 screenshots/env.d.ts create mode 100644 screenshots/layouts/ScreenshotLayout.astro create mode 100644 screenshots/package.json create mode 100644 screenshots/pages/avatar-list.astro create mode 100644 screenshots/pages/badge.astro create mode 100644 screenshots/pages/button.astro create mode 100644 screenshots/pages/index.astro create mode 100644 screenshots/tsconfig.json diff --git a/package.json b/package.json index ef61ccbaa..c71820e5d 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,10 @@ "lint:fix": "pnpm run lint-md-fix && pnpm run format-prettier", "lint-md": "markdownlint --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"", "lint-md-fix": "markdownlint --fix --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"", - "lint-prettier": "prettier --check \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,shared}/**/*.astro\" \"{preview,docs}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache", + "lint-prettier": "prettier --check \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,screenshots,shared}/**/*.astro\" \"{preview,docs,screenshots}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache", "lint-scss-vars": "pnpm --filter @tabler/core css-lint", "format": "pnpm run format-prettier && pnpm run reformat-md", - "format-prettier": "prettier --write \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,shared}/**/*.astro\" \"{preview,docs}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache", + "format-prettier": "prettier --write \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,screenshots,shared}/**/*.astro\" \"{preview,docs,screenshots}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache", "check": "pnpm run lint && pnpm run type-check", "zip-package": "tsx .build/zip-package.ts", "start": "pnpm dev" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 25836cf8c..633f9b019 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -271,6 +271,25 @@ importers: specifier: ^5.7.3 version: 5.9.3 + screenshots: + dependencies: + '@tabler/core': + specifier: workspace:* + version: link:../core + astro: + specifier: ^7.1.6 + version: 7.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@26.1.1)(sass@1.102.0)(terser@5.49.0)(tsx@4.23.1)(yaml@2.9.0) + devDependencies: + '@astrojs/check': + specifier: ^0.9.4 + version: 0.9.10(prettier-plugin-astro@0.14.1)(prettier@3.9.6)(typescript@5.9.3) + shx: + specifier: ^0.4.0 + version: 0.4.0 + typescript: + specifier: ^5.7.3 + version: 5.9.3 + shared: dependencies: '@tabler/core': diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index b5a991a61..e7cd8df06 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,6 +2,7 @@ packages: - core - preview - docs + - screenshots - shared allowBuilds: diff --git a/screenshots/.gitignore b/screenshots/.gitignore new file mode 100644 index 000000000..1e62fda04 --- /dev/null +++ b/screenshots/.gitignore @@ -0,0 +1,6 @@ +# build output +dist/ +.astro/ + +# public/ is fully generated by .build/copy-assets.ts +public/ diff --git a/screenshots/assets/favicon-dev.ico b/screenshots/assets/favicon-dev.ico new file mode 100644 index 0000000000000000000000000000000000000000..596394062180a51d023de17a21ca5c32a1dfc087 GIT binary patch literal 15086 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 fileURLToPath(new URL(p, import.meta.url)) + +// https://astro.build/config +export default defineConfig({ + // pages live at the package root (./pages) — components/lib/data are shared + // (see the @shared alias) + srcDir: '.', + server: { + port: 3020, + // bind on all interfaces so the dev server is reachable from Docker + // port mappings and other devices on the local network + host: true, + }, + vite: { + resolve: { + alias: { + '@data': fileURLToPath(new URL('../shared/data', import.meta.url)), + '@shared': fileURLToPath(new URL('../shared', import.meta.url)), + '@ui': fileURLToPath(new URL('../shared/ui', import.meta.url)), + '@components': fileURLToPath(new URL('../shared/components', import.meta.url)), + }, + }, + }, + build: { + // Emit button.html instead of button/index.html — a stable, predictable + // URL per component for the screenshot tool to iterate over. + format: 'file', + }, + compressHTML: false, + integrations: [ + copyAssets({ + repo: path('..'), + publicDir: path('./public'), + copies: [ + { + // @tabler/core dist (css/js/fonts/img/libs). + // Fallback keeps current assets if core rebuilds dist mid-copy in turbo dev. + from: path('./node_modules/@tabler/core/dist'), + to: path('./public/dist'), + label: '@tabler/core', + allowDestinationFallback: true, + }, + { + // static assets referenced by demo data (avatar photos, brand svgs...). + from: path('../shared/static'), + to: path('./public/static'), + label: 'shared assets', + }, + { from: path('./assets/favicon.ico'), to: path('./public/favicon.ico'), label: '@tabler/screenshots' }, + { from: path('./assets/favicon-dev.ico'), to: path('./public/favicon-dev.ico'), label: '@tabler/screenshots' }, + ], + // Watch the real core/dist, not the node_modules symlink the startup copy + // reads from — same directory. + syncDirs: [ + { from: path('../core/dist'), to: path('./public/dist') }, + { from: path('../shared/static'), to: path('./public/static') }, + ], + }), + ], +}) diff --git a/screenshots/env.d.ts b/screenshots/env.d.ts new file mode 100644 index 000000000..f964fe0cf --- /dev/null +++ b/screenshots/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/screenshots/layouts/ScreenshotLayout.astro b/screenshots/layouts/ScreenshotLayout.astro new file mode 100644 index 000000000..03186cef4 --- /dev/null +++ b/screenshots/layouts/ScreenshotLayout.astro @@ -0,0 +1,62 @@ +--- +// Chrome-free layout for component screenshots: just @tabler/core CSS/JS +// around a single component, no navbar/sidebar/demo styling. Dark/light is +// driven by the same ?theme= query param and dist/js/tabler-theme.min.js +// as preview/pages/screenshot.astro, so a screenshot tool can request +// /button.html?theme=dark without depending on stored/localStorage state. +interface Props { + title: string + /** dir="rtl" + the .rtl.css variant of tabler.css */ + rtl?: boolean + /** extra classes on the wrapping container the component is rendered into */ + class?: string +} + +const { title, rtl = false, class: className } = Astro.props +const rtlSuffix = rtl ? '.rtl' : '' +--- + + + + + + + + {title} - Tabler screenshots + + + + + + + + + + + +
+ +
+ + + + + diff --git a/screenshots/package.json b/screenshots/package.json new file mode 100644 index 000000000..680a44d60 --- /dev/null +++ b/screenshots/package.json @@ -0,0 +1,26 @@ +{ + "name": "@tabler/screenshots", + "private": true, + "type": "module", + "version": "0.0.1", + "description": "Astro app: one page per UI component, for automated screenshotting", + "engines": { + "node": ">=22.12.0" + }, + "scripts": { + "dev": "astro dev", + "build": "astro build", + "preview": "astro preview", + "clean": "shx rm -rf dist public .astro", + "type-check": "astro check" + }, + "dependencies": { + "@tabler/core": "workspace:*", + "astro": "^7.1.6" + }, + "devDependencies": { + "@astrojs/check": "^0.9.4", + "shx": "^0.4.0", + "typescript": "^5.7.3" + } +} diff --git a/screenshots/pages/avatar-list.astro b/screenshots/pages/avatar-list.astro new file mode 100644 index 000000000..8858a333b --- /dev/null +++ b/screenshots/pages/avatar-list.astro @@ -0,0 +1,14 @@ +--- +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import AvatarList from '@ui/AvatarList.astro' +--- + + +
+ + + + + +
+ diff --git a/screenshots/pages/badge.astro b/screenshots/pages/badge.astro new file mode 100644 index 000000000..eaf954d0c --- /dev/null +++ b/screenshots/pages/badge.astro @@ -0,0 +1,24 @@ +--- +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import Badge from '@ui/Badge.astro' +import BadgesList from '@ui/BadgesList.astro' +import site from '@data/site.json' + +const colors = ['default', ...Object.keys(site.colors), 'dark'] +--- + + +
+ + {colors.map((color) => )} + + + {colors.map((color) => )} + + + + + + +
+ diff --git a/screenshots/pages/button.astro b/screenshots/pages/button.astro new file mode 100644 index 000000000..17bb538d7 --- /dev/null +++ b/screenshots/pages/button.astro @@ -0,0 +1,32 @@ +--- +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import Button from '@ui/Button.astro' +import ButtonList from '@ui/ButtonList.astro' +import site from '@data/site.json' + +const colors = ['default', ...Object.keys(site.colors), 'dark'] +--- + + +
+ + {colors.map((color) =>
+ diff --git a/screenshots/pages/index.astro b/screenshots/pages/index.astro new file mode 100644 index 000000000..d1a0545e2 --- /dev/null +++ b/screenshots/pages/index.astro @@ -0,0 +1,25 @@ +--- +// Every other page under pages/ is a screenshot target. Listing them via a +// glob (instead of a hand-maintained array) means adding a new component +// page is the only step needed for it to show up here. +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' + +const pageModules = import.meta.glob('./*.astro') +const pages = Object.keys(pageModules) + .map((path) => path.replace(/^\.\//, '').replace(/\.astro$/, '')) + .filter((slug) => slug !== 'index') + .sort() +--- + + +

Components

+
+ { + pages.map((slug) => ( + + {slug.replace(/-/g, ' ')} + + )) + } +
+ diff --git a/screenshots/tsconfig.json b/screenshots/tsconfig.json new file mode 100644 index 000000000..cb68b41ea --- /dev/null +++ b/screenshots/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist", "public"], + "compilerOptions": { + "paths": { + "@data/*": ["../shared/data/*"], + "@shared/*": ["../shared/*"], + "@ui/*": ["../shared/ui/*"], + "@components/*": ["../shared/components/*"] + }, + "baseUrl": "." + } +} diff --git a/turbo.json b/turbo.json index ff592312c..1b72d5e7e 100644 --- a/turbo.json +++ b/turbo.json @@ -47,6 +47,19 @@ ], "cache": true }, + "@tabler/screenshots#build": { + "dependsOn": [ + "^build" + ], + "inputs": [ + "$TURBO_DEFAULT$", + "$TURBO_ROOT$/shared/**" + ], + "outputs": [ + "dist/**" + ], + "cache": true + }, "dev": { "cache": false, "persistent": true @@ -74,6 +87,13 @@ "cache": false, "persistent": true }, + "@tabler/screenshots#dev": { + "dependsOn": [ + "@tabler/core#dev-prepare" + ], + "cache": false, + "persistent": true + }, "@tabler/docs#dev": { "dependsOn": [ "@tabler/core#dev-prepare",