@djangocfg/layouts 1.2.17 → 1.2.19

package/src/layouts/UILayout/types/navigation.ts

@@ -0,0 +1,33 @@
+/**
+ * Navigation Types
+ */
+
+/**
+ * Navigation State
+ * Tracks navigation history and current position
+ */
+export interface NavigationState {
+  /** Current category ID */
+  currentCategory: string;
+  /** Navigation history */
+  history: string[];
+  /** Can navigate back */
+  canGoBack: boolean;
+  /** Can navigate forward */
+  canGoForward: boolean;
+}
+
+/**
+ * Sidebar State
+ * Tracks sidebar open/close state
+ */
+export interface SidebarState {
+  /** Is sidebar open (mobile) */
+  isOpen: boolean;
+  /** Toggle sidebar */
+  toggle: () => void;
+  /** Open sidebar */
+  open: () => void;
+  /** Close sidebar */
+  close: () => void;
+}

package/src/layouts/UILayout/utils/ai-export/formatters.ts

@@ -0,0 +1,71 @@
+/**
+ * AI Export Formatters
+ * Formatting utilities for AI documentation
+ */
+
+import type { ComponentConfig } from '../../types';
+
+/**
+ * Format component as markdown
+ */
+export function formatComponentAsMarkdown(component: ComponentConfig): string {
+  return `
+### ${component.name}
+${component.description}
+
+\`\`\`tsx
+${component.importPath}
+
+${component.example}
+\`\`\`
+`.trim();
+}
+
+/**
+ * Format multiple components as markdown list
+ */
+export function formatComponentsAsMarkdownList(
+  components: ComponentConfig[]
+): string {
+  return components.map(formatComponentAsMarkdown).join('\n\n');
+}
+
+/**
+ * Format import statements
+ */
+export function formatImports(components: ComponentConfig[]): string {
+  const uniqueImports = new Set(components.map((c) => c.importPath));
+  return Array.from(uniqueImports).join('\n');
+}
+
+/**
+ * Format code block
+ */
+export function formatCodeBlock(code: string, language = 'tsx'): string {
+  return `\`\`\`${language}\n${code}\n\`\`\``;
+}
+
+/**
+ * Format section header
+ */
+export function formatSectionHeader(
+  title: string,
+  level: number = 2,
+  count?: number
+): string {
+  const hashes = '#'.repeat(level);
+  const countStr = count !== undefined ? ` (${count})` : '';
+  return `${hashes} ${title}${countStr}`;
+}
+
+/**
+ * Format list
+ */
+export function formatList(items: string[], ordered = false): string {
+  return items
+    .map((item, index) => {
+      const prefix = ordered ? `${index + 1}. ` : '- ';
+      return `${prefix}${item}`;
+    })
+    .join('\n');
+}

package/src/layouts/UILayout/utils/ai-export/generators.ts

@@ -0,0 +1,130 @@
+/**
+ * AI Export Generators
+ * Functions for generating AI-friendly documentation
+ */
+
+import type { ComponentConfig } from '../../types';
+import type { TailwindGuide } from '../../config/tailwind.config';
+
+export interface UILibraryConfig {
+  projectName: string;
+  version: string;
+  description: string;
+  totalComponents: number;
+}
+
+/**
+ * Generate complete AI context from components and config
+ */
+export function generateAIContext(
+  components: ComponentConfig[],
+  tailwindGuide: TailwindGuide,
+  config: UILibraryConfig
+): string {
+  const { projectName, version, description } = config;
+
+  let output = `# ${projectName} v${version}\n\n`;
+  output += `${description}\n\n`;
+
+  // Tailwind Guide Section
+  output += generateTailwindSection(tailwindGuide);
+
+  // Components by Category
+  output += generateComponentsSection(components);
+
+  return output;
+}
+
+/**
+ * Generate Tailwind CSS section
+ */
+export function generateTailwindSection(guide: TailwindGuide): string {
+  let output = `## Tailwind CSS v${guide.version} Guidelines\n\n`;
+
+  output += `### Key Changes\n`;
+  guide.keyChanges.forEach((change) => {
+    output += `- ${change}\n`;
+  });
+  output += `\n`;
+
+  output += `### Best Practices\n`;
+  guide.bestPractices.forEach((practice) => {
+    output += `- ${practice}\n`;
+  });
+  output += `\n`;
+
+  output += `### Migration Steps\n`;
+  guide.migrationSteps.forEach((step, index) => {
+    output += `${index + 1}. ${step}\n`;
+  });
+  output += `\n`;
+
+  output += `### Examples\n\n`;
+  guide.examples.forEach((example) => {
+    output += `#### ${example.title}\n`;
+    output += `${example.description}\n\n`;
+    output += `\`\`\`css\n${example.code}\n\`\`\`\n\n`;
+  });
+
+  return output;
+}
+
+/**
+ * Generate components section grouped by category
+ */
+export function generateComponentsSection(components: ComponentConfig[]): string {
+  let output = '';
+
+  // Group components by category
+  const byCategory = groupByCategory(components);
+
+  // Generate section for each category
+  Object.entries(byCategory).forEach(([category, comps]) => {
+    output += `## ${formatCategoryName(category)} (${comps.length})\n\n`;
+
+    comps.forEach((comp) => {
+      output += generateComponentDoc(comp);
+    });
+  });
+
+  return output;
+}
+
+/**
+ * Generate documentation for a single component
+ */
+export function generateComponentDoc(component: ComponentConfig): string {
+  let output = `### ${component.name}\n`;
+  output += `${component.description}\n\n`;
+  output += `\`\`\`tsx\n`;
+  output += `${component.importPath}\n\n`;
+  output += `${component.example}\n`;
+  output += `\`\`\`\n\n`;
+
+  return output;
+}
+
+/**
+ * Group components by category
+ */
+function groupByCategory(
+  components: ComponentConfig[]
+): Record<string, ComponentConfig[]> {
+  return components.reduce(
+    (acc, comp) => {
+      if (!acc[comp.category]) {
+        acc[comp.category] = [];
+      }
+      acc[comp.category].push(comp);
+      return acc;
+    },
+    {} as Record<string, ComponentConfig[]>
+  );
+}
+
+/**
+ * Format category name for display
+ */
+function formatCategoryName(category: string): string {
+  return category.charAt(0).toUpperCase() + category.slice(1);
+}

package/src/layouts/UILayout/utils/ai-export/index.ts

@@ -0,0 +1,6 @@
+/**
+ * AI Export Utilities
+ */
+
+export * from './generators';
+export * from './formatters';

package/src/layouts/UILayout/utils/component-helpers/filter.ts

@@ -0,0 +1,109 @@
+/**
+ * Component Filter Utilities
+ */
+
+import type { ComponentConfig } from '../../types';
+
+/**
+ * Filter options
+ */
+export interface FilterOptions {
+  /** Category to filter by */
+  category?: string;
+  /** Tags to filter by (OR logic) */
+  tags?: string[];
+  /** Search query */
+  query?: string;
+  /** Search fields */
+  searchFields?: Array<keyof ComponentConfig>;
+}
+
+/**
+ * Apply multiple filters to components
+ */
+export function applyFilters(
+  components: ComponentConfig[],
+  options: FilterOptions
+): ComponentConfig[] {
+  let filtered = components;
+
+  // Filter by category
+  if (options.category) {
+    filtered = filtered.filter((comp) => comp.category === options.category);
+  }
+
+  // Filter by tags
+  if (options.tags && options.tags.length > 0) {
+    filtered = filtered.filter((comp) => {
+      if (!comp.tags) return false;
+      return options.tags!.some((tag) => comp.tags?.includes(tag));
+    });
+  }
+
+  // Filter by search query
+  if (options.query && options.query.trim()) {
+    const lowerQuery = options.query.toLowerCase();
+    const searchFields = options.searchFields || [
+      'name',
+      'description',
+      'category',
+    ];
+
+    filtered = filtered.filter((comp) => {
+      return searchFields.some((field) => {
+        const value = comp[field];
+        if (typeof value === 'string') {
+          return value.toLowerCase().includes(lowerQuery);
+        }
+        if (Array.isArray(value)) {
+          return value.some((item) =>
+            String(item).toLowerCase().includes(lowerQuery)
+          );
+        }
+        return false;
+      });
+    });
+  }
+
+  return filtered;
+}
+
+/**
+ * Sort components by field
+ */
+export function sortComponents(
+  components: ComponentConfig[],
+  field: keyof ComponentConfig,
+  order: 'asc' | 'desc' = 'asc'
+): ComponentConfig[] {
+  return [...components].sort((a, b) => {
+    const aVal = String(a[field]);
+    const bVal = String(b[field]);
+
+    if (order === 'asc') {
+      return aVal.localeCompare(bVal);
+    } else {
+      return bVal.localeCompare(aVal);
+    }
+  });
+}
+
+/**
+ * Group components by field
+ */
+export function groupComponentsBy<K extends keyof ComponentConfig>(
+  components: ComponentConfig[],
+  field: K
+): Record<string, ComponentConfig[]> {
+  return components.reduce(
+    (acc, comp) => {
+      const key = String(comp[field]);
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(comp);
+      return acc;
+    },
+    {} as Record<string, ComponentConfig[]>
+  );
+}

package/src/layouts/UILayout/utils/component-helpers/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Component Helper Utilities
+ */
+
+export * from './search';
+export * from './filter';

package/src/layouts/UILayout/utils/component-helpers/search.ts

@@ -0,0 +1,95 @@
+/**
+ * Component Search Utilities
+ */
+
+import type { ComponentConfig } from '../../types';
+
+/**
+ * Search components by query
+ */
+export function searchComponents(
+  components: ComponentConfig[],
+  query: string,
+  fields: Array<keyof ComponentConfig> = ['name', 'description', 'category']
+): ComponentConfig[] {
+  if (!query.trim()) {
+    return components;
+  }
+
+  const lowerQuery = query.toLowerCase();
+
+  return components.filter((component) => {
+    return fields.some((field) => {
+      const value = component[field];
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(lowerQuery);
+      }
+      if (Array.isArray(value)) {
+        return value.some((item) =>
+          String(item).toLowerCase().includes(lowerQuery)
+        );
+      }
+      return false;
+    });
+  });
+}
+
+/**
+ * Filter components by category
+ */
+export function filterByCategory(
+  components: ComponentConfig[],
+  category: string
+): ComponentConfig[] {
+  return components.filter((comp) => comp.category === category);
+}
+
+/**
+ * Filter components by tags
+ */
+export function filterByTags(
+  components: ComponentConfig[],
+  tags: string[]
+): ComponentConfig[] {
+  if (tags.length === 0) {
+    return components;
+  }
+
+  return components.filter((comp) => {
+    if (!comp.tags) return false;
+    return tags.some((tag) => comp.tags?.includes(tag));
+  });
+}
+
+/**
+ * Get unique categories from components
+ */
+export function getUniqueCategories(
+  components: ComponentConfig[]
+): string[] {
+  const categories = new Set(components.map((c) => c.category));
+  return Array.from(categories).sort();
+}
+
+/**
+ * Get unique tags from components
+ */
+export function getUniqueTags(components: ComponentConfig[]): string[] {
+  const tags = new Set<string>();
+  components.forEach((comp) => {
+    comp.tags?.forEach((tag) => tags.add(tag));
+  });
+  return Array.from(tags).sort();
+}
+
+/**
+ * Find component by name
+ */
+export function findComponentByName(
+  components: ComponentConfig[],
+  name: string
+): ComponentConfig | undefined {
+  return components.find(
+    (comp) => comp.name.toLowerCase() === name.toLowerCase()
+  );
+}

package/src/layouts/UILayout/utils/index.ts

@@ -0,0 +1,6 @@
+/**
+ * UILayout Utilities
+ */
+
+export * from './ai-export';
+export * from './component-helpers';