fix: improved storybook rendering, put stories in dedicated folders

Author: iroybotlinio

templates/storybook/.storybook/preview.ts

@@ -48,46 +48,69 @@ const preview: Preview = {
           const anchorContainer = document.querySelector('.sb-anchor');
           const controlsContainer = document.querySelector('.css-14m39zm, .docblock-argstable');
 
-          if (anchorContainer && controlsContainer) {
+          // If no controls container, find the docs story div as fallback
+          const docsStory = document.querySelector('.docs-story');
+          const insertionPoint = controlsContainer || (docsStory?.parentElement?.parentElement);
+
+          if (anchorContainer && insertionPoint) {
             // Remove any existing custom sections to avoid duplicates
             const existingArgs = document.getElementById('custom-args-section');
             const existingHTML = document.getElementById('custom-html-section');
             if (existingArgs) existingArgs.remove();
             if (existingHTML) existingHTML.remove();
 
-            // Create Args JSON section
-            const argsSection = document.createElement('div');
-            argsSection.id = 'custom-args-section';
-            argsSection.style.cssText = 'margin: 2rem 0;';
-
-            const argsTitle = document.createElement('span');
-            argsTitle.className = 'custom-subtitle';
-            argsTitle.textContent = 'Current Args';
-            argsSection.appendChild(argsTitle);
-
-            const argsCodeBlock = document.createElement('div');
-            argsCodeBlock.className = 'custom-code-block sb-unstyled theme-atom-one-dark';
-            const argsPre = document.createElement('pre');
-            argsPre.className = 'sb-unstyled';
-            const argsCode = document.createElement('code');
-            argsCode.className = 'language-json sb-unstyled';
-            argsCode.textContent = JSON.stringify(context.args, null, 2);
-            argsPre.appendChild(argsCode);
-            argsCodeBlock.appendChild(argsPre);
-            argsSection.appendChild(argsCodeBlock);
-
-            // Apply syntax highlighting
-            hljs.highlightElement(argsCode);
+            // Check if args object is not empty
+            const hasArgs = context.args && Object.keys(context.args).length > 0;
+
+            // Create Args JSON section only if args exist
+            let argsSection: HTMLDivElement | null = null;
+            if (hasArgs) {
+              argsSection = document.createElement('div');
+              argsSection.id = 'custom-args-section';
+              argsSection.style.cssText = 'margin: 2rem 0;';
+
+              const argsTitle = document.createElement('span');
+              argsTitle.className = 'custom-subtitle';
+              argsTitle.textContent = 'Current Args';
+              argsSection.appendChild(argsTitle);
+
+              const argsCodeBlock = document.createElement('div');
+              argsCodeBlock.className = 'custom-code-block sb-unstyled theme-atom-one-dark';
+              const argsPre = document.createElement('pre');
+              argsPre.className = 'sb-unstyled';
+              const argsCode = document.createElement('code');
+              argsCode.className = 'language-json sb-unstyled';
+              argsCode.textContent = JSON.stringify(context.args, null, 2);
+              argsPre.appendChild(argsCode);
+              argsCodeBlock.appendChild(argsPre);
+              argsSection.appendChild(argsCodeBlock);
+
+              // Apply syntax highlighting
+              hljs.highlightElement(argsCode);
+            }
 
             // Create HTML Output section
             const htmlSection = document.createElement('div');
             htmlSection.id = 'custom-html-section';
             htmlSection.style.cssText = 'margin: 2rem 0;';
 
-            // Insert sections before the controls container
-            if (controlsContainer.parentNode) {
-              controlsContainer.parentNode.insertBefore(htmlSection, controlsContainer);
-              controlsContainer.parentNode.insertBefore(argsSection, controlsContainer);
+            // Insert sections after the insertion point
+            if (controlsContainer) {
+              // If controls exist, insert before them
+              if (controlsContainer.parentNode) {
+                controlsContainer.parentNode.insertBefore(htmlSection, controlsContainer);
+                if (argsSection) {
+                  controlsContainer.parentNode.insertBefore(argsSection, controlsContainer);
+                }
+              }
+            } else if (insertionPoint) {
+              // If no controls, insert after the grandparent of docs-story
+              if (argsSection) {
+                insertionPoint.insertAdjacentElement('afterend', argsSection);
+                argsSection.insertAdjacentElement('afterend', htmlSection);
+              } else {
+                insertionPoint.insertAdjacentElement('afterend', htmlSection);
+              }
             }
 
             // Format HTML with Prettier