juxscript 1.0.67 → 1.0.69

package/create/all.jux

@@ -1,343 +0,0 @@
-import { jux, state } from 'juxscript';
-import { initializeGrid } from 'layout.jux';
-
-// Initialize the grid layout - this executes the rendering
-const grid = initializeGrid();
-
-// ═══════════════════════════════════════════════════════════════════
-// ALL COMPONENTS SHOWCASE - Maximum DOM nodes per component
-// ═══════════════════════════════════════════════════════════════════
-
-// Hero - All DOM-generating options
-jux.heading('hero-heading').level(3).text('jux.hero').render("#appmain-content");
-jux.hero('all-hero', {
-  title: 'Hero Title',
-  subtitle: 'Hero Subtitle',
-  content: 'Hero body content goes here',
-  cta: 'Call to Action',
-  ctaLink: '#',
-  backgroundOverlay: true,
-  centered: true
-}).render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('chart-heading').level(3).text('jux.chart, jux.calendar, jux.chatbox, jux.aiwidget, jux.media, jux.icons, jux.data!').render("#appmain-content");
-jux.element('all-element')
-.text('Need Elements! shadcn and tailwind analysis. Mobiles. ios/android - .text')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('alert-heading').level(3).text('jux.alert').render("#appmain-content");
-jux.alert('all-alert')
-.message('this is it - .message').render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('badge-heading').level(3).text('jux.badge').render("#appmain-content");
-jux.badge('all-badge')
-.text('Badge Text - .text').render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('button-heading').level(3).text('jux.button').render("#appmain-content");
-jux.button('all-button')
-.label('Button Label - .label').render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('card-heading').level(3).text('jux.card').render("#appmain-content");
-jux.card('all-card')
-.title('Card Title - .title')
-.content('Card content goes here - .content')
-.footer('Card Footer - .footer')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('checkbox-heading').level(3).text('jux.checkbox').render("#appmain-content");
-jux.checkbox('all-checkbox')
-.label('Checkbox Label - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('code-heading').level(3).text('jux.code').render("#appmain-content");
-jux.code('all-code')
-.code(`// Sample code - .code`)
-.language('javascript')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('container-heading').level(3).text('jux.container').render("#appmain-content");
-jux.container('all-container')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('datepicker-heading').level(3).text('jux.datepicker').render("#appmain-content");
-jux.datepicker('all-datepicker')
-.label('Select Date - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('dropdown-heading').level(3).text('jux.dropdown').render("#appmain-content");
-jux.dropdown('all-dropdown', {
-  items: [{ label: 'Item 1', value: '1' }, { label: 'Item 2', value: '2' }]
-})
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('fileupload-heading').level(3).text('jux.fileupload').render("#appmain-content");
-jux.fileupload('all-fileupload')
-.label('File Upload - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('heading-heading').level(3).text('jux.heading').render("#appmain-content");
-jux.heading('all-h1')
-.text('Heading Level 1 - .text')
-.level(1)
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-// jux.heading('icon-heading').level(3).text('jux.icon').render("#appmain-content");
-// jux.icon('all-icon').render("#appmain-content");
-// jux.divider().render("#appmain-content");
-
-jux.heading('input-heading').level(3).text('jux.input').render("#appmain-content");
-jux.input('all-input')
-.label('Input Label - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('kpicard-heading').level(3).text('jux.kpicard').render("#appmain-content");
-jux.kpicard('all-kpicard')
-.delta('+5% - .delta')
-.prefix('$ - .prefix')
-.value('1,000 - .value')
-.title('KPI Card Title - .title')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('list-heading').level(3).text('jux.list').render("#appmain-content");
-jux.list('all-list', {
-  items: ['Item 1', 'Item 2', 'Item 3']
-})
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('loading-heading').level(3).text('jux.loading').render("#appmain-content");
-jux.loading('all-loading')
-.variant('spinner')
-.size('lg')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('sidebar-heading').level(3).text('jux.sidebar').render("#appaside");
-jux.sidebar('all-sidebar')
-.collapsible(true)
-.render("#appaside");
-jux.divider().render("#appaside");
-
-jux.heading('menu-heading').level(3).text('jux.menu').render("#appaside");
-jux.menu('all-menu', {
-  items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
-})
-.render("#appaside");
-jux.divider().render("#appaside");
-
-jux.heading('nav-heading').level(3).text('jux.nav').render("#appmain-content");
-jux.nav('all-nav', {
-  items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
-}).render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('paragraph-heading').level(3).text('jux.paragraph').render("#appmain-content");
-jux.paragraph('all-paragraph')
-.text('This is a sample paragraph created with jux.paragraph - .text')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('progress-heading').level(3).text('jux.progress').render("#appmain-content");
-jux.progress('all-progress')
-.value(70)
-.max(100)
-.variant('success')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('radio-heading').level(3).text('jux.radio').render("#appmain-content");
-jux.radio('all-radio', {
-  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
-})
-.label('Radio Label - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('select-heading').level(3).text('jux.select').render("#appmain-content");
-jux.select('all-select', {
-  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
-})
-.label('Select Label - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-
-
-jux.heading('switch-heading').level(3).text('jux.switch').render("#appmain-content");
-jux.switch('all-switch')
-.label('Switch Label - .label')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('table-heading').level(3).text('jux.table').render("#appmain-content");
-jux.table('all-table', {
-    columns: ['Name', 'Age'],
-    rows: [
-        { Name: 'John', Age: '25' },
-        { Name: 'Jane', Age: '30' },
-        { Name: 'Jane', Age: '30' },
-        { Name: 'Jane', Age: '30' },
-        { Name: 'Jane', Age: '30' }
-    ]
-})
-.bordered(true)
-.selectable(true)
-.filterable(true)
-.paginated(true)
-.rowsPerPage(2)
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('tabs-heading').level(3).text('jux.tabs').render("#appmain-content");
-jux.tabs('all-tabs', {
-  tabs: [{ id: 1, label: 'Tab 1', content: 'Content 1' }, { id: 2, label: 'Tab 2', content: 'Content 2' }]
-})
-.activeTab('1')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-jux.heading('tooltip-heading').level(3).text('jux.tooltip').render("#appmain-content");
-jux.button('tooltip-trigger').label('Hover for tooltip').render("#appmain-content");
-jux.tooltip('all-tooltip', {
-  text: 'Tooltip content',
-  position: 'top'
-}).render('#tooltip-trigger');
-jux.divider().render("#appmain-content");
-
-jux.heading('view-heading').level(3).text('jux.view').render("#appmain-content");
-jux.view('all-view')
-.title('View Title - Need to Rethink - this is for nesting! - .title')
-.render("#appmain-content");
-jux.divider().render("#appmain-content");
-
-// ═══════════════════════════════════════════════════════════════════
-// SELF-ANALYSIS: Build component tree from #app
-// ═══════════════════════════════════════════════════════════════════
-
-function buildComponentTree(element, depth = 0) {
-  const indent = '  '.repeat(depth);
-  const tagName = element.tagName.toLowerCase();
-  // ✅ Fix: Check if className exists and is a string
-  const classes = (element.className && typeof element.className === 'string') 
-    ? `.${element.className.split(' ').join('.')}` 
-    : '';
-  
-  let tree = `${indent}${tagName}${classes}\n`;
-  
-  // Recurse through children
-  Array.from(element.children).forEach(child => {
-    tree += buildComponentTree(child, depth + 1);
-  });
-  
-  return tree;
-}
-
-function analyzeComponents() {
-  const app = document.getElementById('app');
-  if (!app) return 'No #app container found';
-  
-  const components = Array.from(app.children);
-  const componentTypes = new Map();
-  
-  let analysis = `═══════════════════════════════════════════════════════════════
-COMPONENT TREE ANALYSIS
-═══════════════════════════════════════════════════════════════
-
-Found ${components.length} components in #app
-
-`;
-  
-  components.forEach((component, index) => {
-    const componentId = component.id || `component-${index}`;
-    // ✅ Fix: Safely handle className
-    const className = (component.className && typeof component.className === 'string') 
-      ? component.className 
-      : '';
-    const rootClasses = className.split(' ').filter(c => c);
-    const primaryClass = rootClasses.find(c => c.startsWith('jux-')) || rootClasses[0] || 'unknown';
-    
-    const componentName = primaryClass
-      .replace(/^jux-/, '')
-      .split('-')
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join('');
-    
-    // Track component types
-    const typeName = primaryClass.replace(/^jux-/, '');
-    componentTypes.set(typeName, (componentTypes.get(typeName) || 0) + 1);
-    
-    analysis += `┌─ ${componentName} (${componentId})\n`;
-    analysis += '│\n';
-    
-    const tree = buildComponentTree(component);
-    tree.split('\n').forEach(line => {
-      if (line.trim()) {
-        analysis += `│   ${line}\n`;
-      }
-    });
-    
-    analysis += `└${'─'.repeat(66)}\n\n`;
-  });
-  
-  // Add summary
-  analysis += `═══════════════════════════════════════════════════════════════
-SUMMARY
-═══════════════════════════════════════════════════════════════
-
-Component Types:
-`;
-  
-  Array.from(componentTypes.entries())
-    .sort(([a], [b]) => a.localeCompare(b))
-    .forEach(([type, count]) => {
-      analysis += `  - ${type}: ${count}\n`;
-    });
-  
-  analysis += `\nTotal: ${components.length} components rendered\n`;
-  
-  return analysis;
-}
-
-// Wait for DOM to be fully rendered
-setTimeout(() => {
-  const analysis = analyzeComponents();
-  
-  // Create analysis display
-  jux.container('analysis-container')
-    .style('margin-top: 3rem; padding: 2rem; background: #1e1e1e; border-radius: 8px;')
-    .render("#appmain-content");
-  
-  jux.heading('analysis-title')
-    .level(2)
-    .text('🔍 Self-Analysis')
-    .style('color: #10b981; margin-bottom: 1rem;')
-    .render('#analysis-container');
-  
-  jux.code('component-tree')
-    .language('text')
-    .code(analysis)
-    .style('background: #0d1117; color: #c9d1d9; font-size: 0.875rem; max-height: 600px; overflow-y: auto;')
-    .render('#analysis-container');
-  
-  jux.paragraph('analysis-note')
-    .text('This tree was generated by JavaScript analyzing the DOM structure of this page.')
-    .style('margin-top: 1rem; color: #8b949e; font-size: 0.875rem;')
-    .render('#analysis-container');
-}, 100);
-
-