@truenas/ui-components 0.1.2

package/scripts/icon-sprite/lib/get-icon-paths.ts

@@ -0,0 +1,95 @@
+import fs from 'fs';
+import { resolve } from 'path';
+
+/**
+ * Find the node_modules directory by checking project root and parent directories
+ */
+function findNodeModules(projectRoot: string): string {
+  // Try project root first
+  const projectNodeModules = resolve(projectRoot, 'node_modules');
+  if (fs.existsSync(projectNodeModules)) {
+    return projectNodeModules;
+  }
+
+  // Try parent directory (for monorepo/library structure)
+  const parentNodeModules = resolve(projectRoot, '../../node_modules');
+  if (fs.existsSync(parentNodeModules)) {
+    return parentNodeModules;
+  }
+
+  // Fallback to project root (will error later if doesn't exist)
+  return projectNodeModules;
+}
+
+export function getIconPaths(names: Set<string>, projectRoot: string = process.cwd()): Map<string, string> {
+  const iconPaths = new Map<string, string>();
+  const nodeModulesPath = findNodeModules(projectRoot);
+
+  names.forEach((name) => {
+    // Library custom icons (tn- prefix) - ONLY from library package
+    if (name.startsWith('tn-')) {
+      // When building the library itself, icons are in the source directory
+      // When consuming the library, icons are in node_modules
+      const sourceLibraryPath = resolve(projectRoot, `assets/tn-icons/custom/${name.slice(3)}.svg`);
+      const installedLibraryPath = resolve(nodeModulesPath, `@truenas/ui-components/assets/tn-icons/custom/${name.slice(3)}.svg`);
+
+      // Check source first (for library development), then installed package (for consumers)
+      if (fs.existsSync(sourceLibraryPath)) {
+        iconPaths.set(name, sourceLibraryPath);
+      } else if (fs.existsSync(installedLibraryPath)) {
+        iconPaths.set(name, installedLibraryPath);
+      } else {
+        console.warn(`⚠ Library custom icon not found: ${name} (looking for ${name.slice(3)}.svg in library)`);
+        // Fallback to source path (will error if doesn't exist, which is expected)
+        iconPaths.set(name, sourceLibraryPath);
+      }
+      return;
+    }
+
+    // Consumer custom icons (app- prefix) - ONLY from consumer's assets
+    if (name.startsWith('app-')) {
+      // Try src/assets first (Angular convention), then assets (fallback)
+      const srcAssetsPath = resolve(projectRoot, `src/assets/icons/custom/${name.slice(4)}.svg`);
+      const assetsPath = resolve(projectRoot, `assets/icons/custom/${name.slice(4)}.svg`);
+
+      let localPath = srcAssetsPath;
+      if (!fs.existsSync(srcAssetsPath) && fs.existsSync(assetsPath)) {
+        localPath = assetsPath;
+      } else if (!fs.existsSync(srcAssetsPath)) {
+        console.warn(`⚠ Consumer custom icon not found: ${name} (looking for ${name.slice(4)}.svg in src/assets/icons/custom/ or assets/icons/custom/)`);
+      }
+      iconPaths.set(name, localPath);
+      return;
+    }
+
+    // MDI icons
+    if (name.startsWith('mdi-')) {
+      const mdiPath = resolve(nodeModulesPath, `@mdi/svg/svg/${name.slice(4)}.svg`);
+      if (!fs.existsSync(mdiPath)) {
+        console.warn(`⚠ MDI icon not found: ${name} (looking for ${name.slice(4)}.svg in @mdi/svg)`);
+        console.warn(`  This icon may not exist in the current MDI version. Check https://pictogrammers.com/library/mdi/`);
+      }
+      iconPaths.set(name, mdiPath);
+      return;
+    }
+
+    // Material Design Icons (mat- prefix)
+    if (name.startsWith('mat-')) {
+      const materialPath = resolve(nodeModulesPath, `@material-design-icons/svg/filled/${name.slice(4)}.svg`);
+      if (!fs.existsSync(materialPath)) {
+        console.warn(`⚠ Material icon not found: ${name} (looking for ${name.slice(4)}.svg in @material-design-icons)`);
+      }
+      iconPaths.set(name, materialPath);
+      return;
+    }
+
+    // Fallback for icons without recognized prefix (should be rare)
+    const materialPath = resolve(nodeModulesPath, `@material-design-icons/svg/filled/${name}.svg`);
+    if (!fs.existsSync(materialPath)) {
+      console.warn(`⚠ Material icon not found: ${name} (looking for ${name}.svg in @material-design-icons)`);
+    }
+    iconPaths.set(name, materialPath);
+  });
+
+  return iconPaths;
+}

package/scripts/icon-sprite/lib/warn-about-duplicates.ts

@@ -0,0 +1,13 @@
+export function warnAboutDuplicates(icons: Set<string>): void {
+  icons.forEach((icon) => {
+    if (icon.startsWith('mdi-')) {
+      return;
+    }
+
+    if (!icons.has(`mdi-${icon}`)) {
+      return;
+    }
+
+    console.warn(`Both "${icon}" and "mdi-${icon}" are used in the application. Consider only using the 'mdi' version.`);
+  });
+}

package/scripts/icon-sprite/make-sprite.ts

@@ -0,0 +1,26 @@
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { generateSprite } from './generate-sprite.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * Generate sprite for the truenas-ui library itself
+ * This uses the library-specific paths for development
+ */
+async function makeSprite(): Promise<void> {
+  // Library structure: scripts are in projects/truenas-ui/scripts/icon-sprite/
+  // Source files are in projects/truenas-ui/src/
+  // Assets are in projects/truenas-ui/assets/
+  const projectRoot = resolve(__dirname, '../..');
+
+  await generateSprite({
+    projectRoot,
+    srcDirs: ['./src/lib', './src/stories'],
+    // outputDir defaults to './assets/tn-icons' (namespaced to avoid collisions)
+    customIconsDir: './assets/tn-icons/custom',
+  });
+}
+
+makeSprite();

package/scripts/icon-sprite/sprite-config-interface.ts

@@ -0,0 +1,72 @@
+/**
+ * Default base path for sprite assets (namespaced to avoid collisions with consumer apps)
+ */
+export const defaultSpriteBasePath = 'assets/tn-icons';
+
+/**
+ * Configuration options for icon sprite generation
+ */
+export interface SpriteGeneratorConfig {
+  /**
+   * Source directories to scan for icon usage
+   * Defaults to ['./src/lib', './src/app']
+   */
+  srcDirs?: string[];
+
+  /**
+   * Output directory for generated sprite files
+   * Defaults to `./${defaultSpriteBasePath}`
+   */
+  outputDir?: string;
+
+  /**
+   * Runtime URL path for the sprite (used in sprite-config.json)
+   * If not specified, defaults to outputDir with './' stripped
+   *
+   * Use this when your build process transforms paths (e.g., Angular strips 'src/')
+   * Example: outputDir='./src/assets/tn-icons', spriteUrlPath='assets/tn-icons'
+   */
+  spriteUrlPath?: string;
+
+  /**
+   * Optional directory containing custom SVG icons
+   * Custom icons will be automatically prefixed with 'tn-'
+   */
+  customIconsDir?: string;
+
+  /**
+   * Project root directory (for resolving relative paths)
+   * Defaults to process.cwd()
+   */
+  projectRoot?: string;
+}
+
+/**
+ * Resolved configuration with all defaults applied
+ */
+export interface ResolvedSpriteConfig {
+  srcDirs: string[];
+  outputDir: string;
+  spriteUrlPath: string;
+  customIconsDir: string | null;
+  projectRoot: string;
+}
+
+/**
+ * Applies defaults to partial configuration
+ */
+export function resolveConfig(config: SpriteGeneratorConfig = {}): ResolvedSpriteConfig {
+  const projectRoot = config.projectRoot || process.cwd();
+  const outputDir = config.outputDir || `./${defaultSpriteBasePath}`;
+
+  // If spriteUrlPath is not provided, derive it from outputDir by stripping './'
+  const spriteUrlPath = config.spriteUrlPath || outputDir.replace(/^\.\//, '');
+
+  return {
+    projectRoot,
+    srcDirs: config.srcDirs || ['./src/lib', './src/app'],
+    outputDir,
+    spriteUrlPath,
+    customIconsDir: config.customIconsDir || null,
+  };
+}

package/src/assets/icons/dataset.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 8C5.72 8 5.48 7.9 5.29 7.71C5.1 7.52 5 7.28 5 7C5 6.72 5.1 6.48 5.29 6.29C5.48 6.1 5.72 6 6 6H18C18.28 6 18.52 6.1 18.71 6.29C18.9 6.48 19 6.72 19 7C19 7.28 18.9 7.52 18.71 7.71C18.52 7.9 18.28 8 18 8H6ZM8 5C7.72 5 7.48 4.9 7.29 4.71C7.1 4.52 7 4.28 7 4C7 3.72 7.1 3.48 7.29 3.29C7.48 3.1 7.72 3 8 3H16C16.28 3 16.52 3.1 16.71 3.29C16.9 3.48 17 3.72 17 4C17 4.28 16.9 4.52 16.71 4.71C16.52 4.9 16.28 5 16 5H8ZM3 9L5 21H19L21 9H3ZM14.71 15.1C14.52 15.29 14.28 15.39 14 15.39H10C9.72 15.39 9.48 15.29 9.29 15.1C9.1 14.91 9 14.67 9 14.39C9 14.11 9.1 13.87 9.29 13.68C9.48 13.49 9.72 13.39 10 13.39H14C14.28 13.39 14.52 13.49 14.71 13.68C14.9 13.87 15 14.11 15 14.39C15 14.67 14.9 14.91 14.71 15.1Z" fill="currentColor"/>
+</svg>

package/src/styles/dialog.css

@@ -0,0 +1,150 @@
+/* TN Dialog Global Styles for CDK Dialog */
+
+/* CDK Dialog Container Styles */
+.cdk-dialog-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Dialog Panel - this is the actual dialog box */
+.cdk-dialog-panel,
+.tn-dialog-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  outline: 0;
+  width: 100%;
+  max-width: 80vw;
+  max-height: 80vh;
+  background: var(--tn-bg1, #ffffff);
+  color: var(--tn-fg1, #000000);
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
+              0 24px 38px 3px rgba(0, 0, 0, 0.14),
+              0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+
+/* Dialog backdrop */
+.cdk-dialog-backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* Dialog content structure styling */
+.cdk-dialog-panel > * {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Dialog title should be at the very top */
+.tn-dialog-title {
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0; /* Don't allow shrinking */
+  width: 100%; /* Full width */
+  padding: 24px 48px 20px 24px; /* Top, right (for close button), bottom, left */
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+/* Reset margins for any heading elements inside the title */
+.tn-dialog-title h1, 
+.tn-dialog-title h2, 
+.tn-dialog-title h3, 
+.tn-dialog-title h4, 
+.tn-dialog-title h5, 
+.tn-dialog-title h6 {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+/* Dialog content should expand to fill available space between title and actions */
+.tn-dialog-content {
+  flex-grow: 1;
+  overflow: auto;
+  box-sizing: border-box;
+  min-height: 0; /* Allow flexbox to shrink */
+}
+
+/* Dialog actions styling */
+.tn-dialog-actions {
+  box-sizing: border-box;
+  display: flex !important;
+  flex-shrink: 0; /* Don't allow shrinking - always visible */
+  align-items: center !important;
+  justify-content: flex-end !important;
+  width: 100%; /* Full width */
+  padding: 8px 24px 24px 24px !important; /* Top, right, bottom, left */
+  margin: 0 !important;
+  gap: 12px !important;
+  border-top: 1px solid var(--tn-lines, #e5e7eb) !important;
+}
+
+/* Close button styling */
+.tn-dialog-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--tn-fg2, #6c757d);
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 1;
+  transition: all 0.2s ease-in-out;
+  z-index: 10;
+}
+
+.tn-dialog-close-btn:hover {
+  background: var(--tn-alt-bg1, #f8f9fa);
+  color: var(--tn-fg1, #000000);
+}
+
+.tn-dialog-close-btn:focus {
+  outline: 2px solid var(--tn-primary, #007bff);
+  outline-offset: 2px;
+}
+
+.tn-dialog-close-btn:active {
+  transform: scale(0.95);
+}
+
+.tn-dialog-close-btn span {
+  font-weight: normal;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .cdk-dialog-panel,
+  .tn-dialog-panel {
+    border: 1px solid var(--tn-fg1, #000);
+  }
+}
+
+/* Reduced motion support  */
+@media (prefers-reduced-motion: reduce) {
+  .cdk-dialog-panel,
+  .tn-dialog-panel {
+    /* Animations will be disabled by the animation trigger */
+  }
+}