@pallasoft/ps-internal-components 1.0.0

package/dist/pallasoft-internal-tailwind-preset.d.ts

@@ -0,0 +1,2 @@
+import type { Config } from 'tailwindcss';
+export declare const PallasoftInternalTailwindPreset: Partial<Config>;

package/dist/pallasoft-internal-tailwind-preset.js

@@ -0,0 +1,90 @@
+import tailwindAnimate from 'tailwindcss-animate';
+import { PallasoftFontSize } from './constants/pallasoft-font-size.js';
+import { PallasoftMotion } from './constants/pallasoft-motion.js';
+import { PallasoftScreens } from './constants/pallasoft-screens.js';
+import { PallasoftSharedScale } from './constants/pallasoft-shared-scale.js';
+export const PallasoftInternalTailwindPreset = {
+    theme: {
+        screens: PallasoftScreens,
+        extend: {
+            colors: {
+                border: 'var(--border)',
+                input: 'var(--input)',
+                ring: 'var(--ring)',
+                background: 'var(--background)',
+                foreground: 'var(--foreground)',
+                card: {
+                    DEFAULT: 'var(--card)',
+                    foreground: 'var(--card-foreground)',
+                },
+                popover: {
+                    DEFAULT: 'var(--popover)',
+                    foreground: 'var(--popover-foreground)',
+                },
+                primary: {
+                    DEFAULT: 'var(--primary)',
+                    foreground: 'var(--primary-foreground)',
+                    hover: 'var(--primary-hover)',
+                },
+                secondary: {
+                    DEFAULT: 'var(--secondary)',
+                    foreground: 'var(--secondary-foreground)',
+                },
+                muted: {
+                    DEFAULT: 'var(--muted)',
+                    foreground: 'var(--muted-foreground)',
+                },
+                accent: {
+                    DEFAULT: 'var(--accent)',
+                    foreground: 'var(--accent-foreground)',
+                },
+                destructive: {
+                    DEFAULT: 'var(--destructive)',
+                    foreground: 'var(--destructive-foreground)',
+                    muted: 'var(--destructive-muted)',
+                },
+                warning: {
+                    DEFAULT: 'var(--warning)',
+                    foreground: 'var(--warning-foreground)',
+                    muted: 'var(--warning-muted)',
+                },
+                success: {
+                    DEFAULT: 'var(--success)',
+                    foreground: 'var(--success-foreground)',
+                    muted: 'var(--success-muted)',
+                },
+                info: 'var(--info)',
+                sidebar: {
+                    'DEFAULT': 'var(--sidebar)',
+                    'foreground': 'var(--sidebar-foreground)',
+                    'primary': 'var(--sidebar-primary)',
+                    'primary-foreground': 'var(--sidebar-primary-foreground)',
+                    'accent': 'var(--sidebar-accent)',
+                    'accent-foreground': 'var(--sidebar-accent-foreground)',
+                    'border': 'var(--sidebar-border)',
+                    'ring': 'var(--sidebar-ring)',
+                },
+                overlay: 'rgb(15 23 42 / 0.62)',
+                chart: {
+                    '1': 'var(--chart-1)',
+                    '2': 'var(--chart-2)',
+                    '3': 'var(--chart-3)',
+                    '4': 'var(--chart-4)',
+                    '5': 'var(--chart-5)',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+            },
+            fontFamily: {
+                sans: ['Geist Variable', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            },
+            ...PallasoftSharedScale,
+            fontSize: PallasoftFontSize,
+            ...PallasoftMotion,
+        },
+    },
+    plugins: [tailwindAnimate],
+};

package/dist/services/ps-app-switcher-service.d.ts

@@ -0,0 +1,11 @@
+import { PsAppKey } from '../constants/ps-app-key.js';
+import type { PsAppSwitcherSectionData } from '../models/ps-app-switcher-section-data.js';
+import type { PsPallasoftAppUrlsData } from '../models/ps-pallasoft-app-urls-data.js';
+export declare class PsAppSwitcherService {
+    static sections(appUrls: PsPallasoftAppUrlsData, currentAppKey: PsAppKey): PsAppSwitcherSectionData[];
+    private static links;
+    private static siteFaviconUrl;
+    private static iconUrlFromUrl;
+    private static section;
+    private static externalLink;
+}

package/dist/services/ps-app-switcher-service.js

@@ -0,0 +1,56 @@
+import { PsAppCategoryLabels } from '../constants/ps-app-category-labels.js';
+import { PsAppSwitcherConfig } from '../constants/ps-app-switcher-config.js';
+import { PsExternalApps } from '../constants/ps-external-apps.js';
+import { PsPallasoftApps } from '../constants/ps-pallasoft-apps.js';
+export class PsAppSwitcherService {
+    static sections(appUrls, currentAppKey) {
+        const ownSections = PsAppSwitcherConfig.categoryOrder.map((category) => this.section(category, this.links(category, appUrls, currentAppKey)));
+        const externalSections = PsAppSwitcherConfig.externalCategoryOrder.map((category) => this.section(category, PsExternalApps.filter((app) => app.category === category).map((app) => this.externalLink(app))));
+        return [...ownSections, ...externalSections].filter((section) => section.links.length > 0);
+    }
+    static links(category, appUrls, currentAppKey) {
+        return PsPallasoftApps.filter((app) => app.category === category && Boolean(appUrls[app.urlField])).map((app) => ({
+            key: app.key,
+            name: app.name,
+            url: appUrls[app.urlField],
+            iconUrl: this.siteFaviconUrl(appUrls[app.urlField]),
+            fallbackIconUrl: this.iconUrlFromUrl(appUrls[app.urlField]),
+            initials: app.initials,
+            external: app.openInNewTab,
+            current: app.key === currentAppKey,
+        }));
+    }
+    static siteFaviconUrl(url) {
+        try {
+            return new URL(PsAppSwitcherConfig.siteFaviconPath, url).toString();
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+    static iconUrlFromUrl(url) {
+        try {
+            return PsAppSwitcherConfig.faviconUrl(new URL(url).hostname);
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+    static section(category, links) {
+        return { category, label: PsAppCategoryLabels[category], links };
+    }
+    static externalLink(app) {
+        return {
+            key: app.key,
+            name: app.name,
+            url: app.url,
+            iconUrl: PsAppSwitcherConfig.faviconUrl(app.domain),
+            fallbackIconUrl: null,
+            initials: app.name.slice(0, 1),
+            external: true,
+            current: false,
+        };
+    }
+}

package/dist/services/ps-chart-service.d.ts

@@ -0,0 +1,8 @@
+import type { PsChartConfigItem } from '../models/ps-chart-config-item.js';
+import type { PsChartConfig } from '../models/ps-chart-config.js';
+export declare class PsChartService {
+    static chartId(id: string | undefined, generated: string): string;
+    static css(id: string, config: PsChartConfig): string;
+    static itemFor(config: PsChartConfig, payload: unknown, key: string): PsChartConfigItem | undefined;
+    private static color;
+}

package/dist/services/ps-chart-service.js

@@ -0,0 +1,42 @@
+import { PsChartDefaults } from '../constants/ps-chart-defaults.js';
+import { PsChartThemes } from '../constants/ps-chart-themes.js';
+export class PsChartService {
+    static chartId(id, generated) {
+        return `${PsChartDefaults.idPrefix}${id !== undefined ? id : generated.replace(PsChartDefaults.idSeparators, '')}`;
+    }
+    static css(id, config) {
+        const colored = Object.entries(config).filter(([, item]) => item.theme !== undefined || item.color !== undefined);
+        if (colored.length === 0)
+            return '';
+        return Object.entries(PsChartThemes)
+            .map(([theme, prefix]) => {
+            const variables = colored
+                .map(([key, item]) => {
+                const color = PsChartService.color(item, theme === 'dark');
+                return color === undefined ? '' : `  --color-${key}: ${color};`;
+            })
+                .filter((line) => line !== '')
+                .join('\n');
+            return `${prefix} [data-chart=${id}] {\n${variables}\n}`;
+        })
+            .join('\n');
+    }
+    static itemFor(config, payload, key) {
+        if (typeof payload !== 'object' || payload === null)
+            return undefined;
+        const record = payload;
+        const inner = record[PsChartDefaults.payloadKey];
+        const innerRecord = typeof inner === 'object' && inner !== null ? inner : null;
+        let configKey = key;
+        if (typeof record[key] === 'string')
+            configKey = String(record[key]);
+        else if (innerRecord !== null && typeof innerRecord[key] === 'string')
+            configKey = String(innerRecord[key]);
+        return configKey in config ? config[configKey] : config[key];
+    }
+    static color(item, dark) {
+        if (item.theme !== undefined)
+            return dark ? item.theme.dark : item.theme.light;
+        return item.color;
+    }
+}

package/dist/services/ps-class-name-service.d.ts

@@ -0,0 +1,4 @@
+import { type ClassValue } from 'clsx';
+export declare class PsClassNameService {
+    static merge(...classNames: ClassValue[]): string;
+}

package/dist/services/ps-class-name-service.js

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export class PsClassNameService {
+    static merge(...classNames) {
+        return twMerge(clsx(classNames));
+    }
+}

package/dist/services/ps-field-format-service.d.ts

@@ -0,0 +1,6 @@
+export declare class PsFieldFormatService {
+    static url(value: string): string;
+    static moneyValue(text: string): string;
+    static moneyText(value: string, locale: string): string;
+    static currencySymbol(currency: string, locale: string): string;
+}

package/dist/services/ps-field-format-service.js

@@ -0,0 +1,31 @@
+import { Common } from '@pallasoft/ps-utilities';
+import { PsFieldInputConfig } from '../constants/ps-field-input-config.js';
+export class PsFieldFormatService {
+    static url(value) {
+        return Common.ValidationService.withProtocol(value);
+    }
+    static moneyValue(text) {
+        if (!Common.AmountService.isAmount(text))
+            return '';
+        return Common.AmountService.toNumber(text).toFixed(PsFieldInputConfig.moneyFractionDigits);
+    }
+    static moneyText(value, locale) {
+        if (value === '')
+            return '';
+        return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: PsFieldInputConfig.moneyFractionDigits,
+            maximumFractionDigits: PsFieldInputConfig.moneyFractionDigits,
+        }).format(Number(value));
+    }
+    static currencySymbol(currency, locale) {
+        try {
+            const part = new Intl.NumberFormat(locale, { style: 'currency', currency })
+                .formatToParts(0)
+                .find((candidate) => candidate.type === 'currency');
+            return part === undefined ? currency : part.value;
+        }
+        catch {
+            return currency;
+        }
+    }
+}

package/dist/services/ps-file-size-service.d.ts

@@ -0,0 +1,3 @@
+export declare class PsFileSizeService {
+    static label(bytes: number): string;
+}

package/dist/services/ps-file-size-service.js

@@ -0,0 +1,6 @@
+import { Common } from '@pallasoft/ps-utilities';
+export class PsFileSizeService {
+    static label(bytes) {
+        return Common.FileSizeService.format(bytes);
+    }
+}

package/package.json

@@ -0,0 +1,109 @@
+{
+	"name": "@pallasoft/ps-internal-components",
+	"version": "1.0.0",
+	"private": false,
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./theme.css": "./src/styles/theme.css",
+		"./tailwind-preset": {
+			"types": "./dist/pallasoft-internal-tailwind-preset.d.ts",
+			"import": "./dist/pallasoft-internal-tailwind-preset.js",
+			"default": "./dist/pallasoft-internal-tailwind-preset.js"
+		}
+	},
+	"files": [
+		"/dist",
+		"/src/styles"
+	],
+	"scripts": {
+		"husky:prepare": "npx husky",
+		"build": "tsc",
+		"setup:graphify": "sh scripts/graphify-setup.sh",
+		"update:graphify": "sh scripts/graphify-update.sh",
+		"lint": "npm run lint:eslint",
+		"lint:fix": "npm run lint:eslint:fix",
+		"format:check": "npx prettier --check --ignore-unknown \"src/**/*.{ts,tsx,json,md}\"",
+		"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+		"lint:eslint": "npx eslint \"src/**/*.{ts,tsx}\"",
+		"lint:eslint:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"",
+		"release": "semantic-release"
+	},
+	"dependencies": {
+		"@pallasoft/ps-design-system": "^1.7.0",
+		"@pallasoft/ps-utilities": "^2.10.1",
+		"@radix-ui/react-alert-dialog": "^1.1.23",
+		"@radix-ui/react-avatar": "^1.2.6",
+		"@radix-ui/react-checkbox": "^1.3.11",
+		"@radix-ui/react-dialog": "^1.1.23",
+		"@radix-ui/react-dropdown-menu": "^2.1.24",
+		"@radix-ui/react-label": "^2.1.15",
+		"@radix-ui/react-popover": "^1.1.23",
+		"@radix-ui/react-progress": "^1.1.16",
+		"@radix-ui/react-radio-group": "^1.4.7",
+		"@radix-ui/react-scroll-area": "^1.2.18",
+		"@radix-ui/react-select": "^2.3.7",
+		"@radix-ui/react-separator": "^1.1.15",
+		"@radix-ui/react-slot": "^1.3.3",
+		"@radix-ui/react-switch": "^1.3.7",
+		"@radix-ui/react-tabs": "^1.1.21",
+		"@radix-ui/react-toggle": "^1.1.18",
+		"@radix-ui/react-toggle-group": "^1.1.19",
+		"@radix-ui/react-tooltip": "^1.2.16",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"lucide-react": "^1.46.0",
+		"react-day-picker": "^9.14.0",
+		"recharts": "^2.15.4",
+		"tailwind-merge": "^2.6.1",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"peerDependencies": {
+		"@pallasoft/ps-design-system": "^1.7.0",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^20.1.0",
+		"@commitlint/config-conventional": "^20.0.0",
+		"@eslint/compat": "^2.0.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+		"@pallasoft/ps-design-system": "^1.7.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/commit-analyzer": "^13.0.0",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/github": "^11.0.1",
+		"@semantic-release/npm": "^12.0.0",
+		"@semantic-release/release-notes-generator": "^14.0.1",
+		"@types/react": "^18.3.28",
+		"@types/react-dom": "^18.3.7",
+		"@typescript-eslint/eslint-plugin": "^8.48.0",
+		"@typescript-eslint/parser": "^8.48.0",
+		"commitlint": "^20.1.0",
+		"conventional-changelog-conventionalcommits": "^7.0.2",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-prettier": "^5.5.4",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.2.7",
+		"prettier": "^3.6.2",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"semantic-release": "^24.2.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.9.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"description": "Shared Pallasoft internal UI: app header, app switcher and shadcn primitives for staff tools"
+}

package/src/styles/theme.css

@@ -0,0 +1,159 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: oklch(0.985 0 0);
+		--foreground: oklch(0.145 0 0);
+		--card: oklch(1 0 0);
+		--card-foreground: oklch(0.145 0 0);
+		--popover: oklch(1 0 0);
+		--popover-foreground: oklch(0.145 0 0);
+		--primary: oklch(0.18 0 0);
+		--primary-hover: oklch(0.24 0 0);
+		--primary-foreground: oklch(0.985 0 0);
+		--secondary: oklch(0.955 0 0);
+		--secondary-foreground: oklch(0.145 0 0);
+		--muted: oklch(0.965 0 0);
+		--muted-foreground: oklch(0.45 0 0);
+		--accent: oklch(0.965 0 0);
+		--accent-foreground: oklch(0.145 0 0);
+		--destructive: oklch(0.61 0.21 25);
+		--destructive-foreground: oklch(0.985 0 0);
+		--destructive-muted: oklch(0.95 0.035 25);
+		--warning: oklch(0.72 0.16 70);
+		--warning-foreground: oklch(0.28 0.06 58);
+		--warning-muted: oklch(0.96 0.045 82);
+		--success: oklch(0.59 0.13 150);
+		--success-foreground: oklch(0.22 0.06 150);
+		--success-muted: oklch(0.95 0.04 150);
+		--info: oklch(0.55 0.14 250);
+		--border: oklch(0.89 0 0);
+		--input: oklch(0.89 0 0);
+		--ring: oklch(0.145 0 0);
+		--chart-1: oklch(0.18 0 0);
+		--chart-2: oklch(0.35 0 0);
+		--chart-3: oklch(0.5 0 0);
+		--chart-4: oklch(0.7 0 0);
+		--chart-5: oklch(0.82 0 0);
+		--radius: 0.75rem;
+		--sidebar: oklch(0.99 0 0);
+		--sidebar-foreground: oklch(0.145 0 0);
+		--sidebar-primary: oklch(0.145 0 0);
+		--sidebar-primary-foreground: oklch(0.985 0 0);
+		--sidebar-accent: oklch(0.975 0 0);
+		--sidebar-accent-foreground: oklch(0.145 0 0);
+		--sidebar-border: oklch(0.9 0 0);
+		--sidebar-ring: oklch(0.145 0 0);
+	}
+
+	.dark {
+		--background: oklch(0.16 0.018 260);
+		--foreground: oklch(0.97 0.006 255);
+		--card: oklch(0.2 0.02 260);
+		--card-foreground: oklch(0.97 0.006 255);
+		--popover: oklch(0.2 0.02 260);
+		--popover-foreground: oklch(0.97 0.006 255);
+		--primary: oklch(0.72 0.16 286);
+		--primary-hover: oklch(0.78 0.14 286);
+		--primary-foreground: oklch(0.17 0.025 286);
+		--secondary: oklch(0.25 0.022 260);
+		--secondary-foreground: oklch(0.96 0.006 255);
+		--muted: oklch(0.25 0.022 260);
+		--muted-foreground: oklch(0.72 0.02 255);
+		--accent: oklch(0.28 0.05 286);
+		--accent-foreground: oklch(0.94 0.025 286);
+		--destructive: oklch(0.7 0.18 25);
+		--destructive-foreground: oklch(0.98 0.012 25);
+		--destructive-muted: oklch(0.28 0.07 25);
+		--warning: oklch(0.78 0.15 76);
+		--warning-foreground: oklch(0.22 0.055 58);
+		--warning-muted: oklch(0.28 0.06 76);
+		--success: oklch(0.72 0.13 150);
+		--success-foreground: oklch(0.18 0.05 150);
+		--success-muted: oklch(0.25 0.055 150);
+		--info: oklch(0.72 0.12 245);
+		--border: oklch(1 0 0 / 12%);
+		--input: oklch(1 0 0 / 16%);
+		--ring: oklch(0.72 0.16 286);
+		--chart-1: oklch(0.72 0.16 286);
+		--chart-2: oklch(0.72 0.12 245);
+		--chart-3: oklch(0.72 0.13 150);
+		--chart-4: oklch(0.78 0.15 76);
+		--chart-5: oklch(0.7 0.18 25);
+		--sidebar: oklch(0.19 0.018 260);
+		--sidebar-foreground: oklch(0.97 0.006 255);
+		--sidebar-primary: oklch(0.72 0.16 286);
+		--sidebar-primary-foreground: oklch(0.17 0.025 286);
+		--sidebar-accent: oklch(0.27 0.04 286);
+		--sidebar-accent-foreground: oklch(0.94 0.025 286);
+		--sidebar-border: oklch(1 0 0 / 12%);
+		--sidebar-ring: oklch(0.72 0.16 286);
+	}
+
+	* {
+		@apply border-border;
+	}
+
+	html {
+		@apply bg-background font-sans text-foreground antialiased;
+	}
+
+	body {
+		@apply min-h-screen bg-background text-foreground;
+		background-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.9), transparent 34%);
+	}
+
+	button,
+	input,
+	select,
+	textarea {
+		font: inherit;
+	}
+
+	label {
+		@apply text-body-3 leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+	}
+
+	input:where(:not([type='hidden'], [type='checkbox'], [type='range'])),
+	select {
+		@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-body-3 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-body-3 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
+	}
+
+	textarea {
+		@apply flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-body-3 shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
+	}
+
+	input:where([type='checkbox']) {
+		@apply h-4 w-4 shrink-0 rounded-sm border border-input bg-background text-primary shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
+	}
+}
+
+@layer utilities {
+	*::-webkit-scrollbar {
+		@apply h-1.5 w-1.5;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		border-radius: 0.375rem;
+		background-color: color-mix(in oklch, var(--muted-foreground) 40%, transparent);
+	}
+
+	*::-webkit-scrollbar-track {
+		@apply bg-transparent;
+	}
+
+	.scrollbars-green::-webkit-scrollbar-thumb {
+		@apply !bg-success;
+	}
+
+	.scrollbars-none::-webkit-scrollbar {
+		display: none;
+	}
+
+	.scrollbars-none {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+}