@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/Details.stories-BacIPYUH.js

@@ -0,0 +1,290 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{N as t}from"./Update-DflVXGGQ-qVV03FlC.js";import"./Text-BAwif7rv-BYvLGGQV.js";import"./index-CzKwSnp0.js";import"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";const T={title:"Components/Writer/Details",component:t,parameters:{docs:{description:{component:"Details component provides collapsible content sections with three variants: primary, secondary, and tertiary. Each variant has different visual styling and structure."}}},argTypes:{children:{description:"The content to be displayed inside the details element",control:"text"},label:{description:"Label text displayed in the summary",control:"text"},title:{description:"Title text or element displayed in the summary (for secondary and tertiary variants)",control:"text"},kind:{description:"The variant of the details component",control:{type:"select"},options:["primary","secondary","tertiary"]},icon:{description:"Optional icon element to be displayed in the summary",control:!1},className:{description:"Optional CSS class name for custom styling",control:"text"}}},n={args:{label:"Getting Started",children:"This is the primary variant of the Details component. It has a simple structure with just a label and content."},render:i=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...i})})},s={args:{kind:"secondary",title:"API Reference",label:"Complete documentation for all endpoints",children:"This is the secondary variant with both a title and label. It provides more detailed information in the summary."},render:i=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...i})})},a={args:{kind:"tertiary",title:"Advanced Configuration",label:"For experienced users",children:"This is the tertiary variant, which also includes both title and label but with different styling."},render:i=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...i})})},r={args:{kind:"secondary",title:"Comprehensive Guide",label:"Detailed step-by-step instructions",children:e.jsxs("div",{children:[e.jsx("p",{children:"This details component contains a substantial amount of content to demonstrate how it handles longer text and multiple paragraphs."}),e.jsx("p",{children:"The content can include various HTML elements like paragraphs, lists, and other components. This makes it perfect for organizing documentation and providing expandable sections."}),e.jsxs("ul",{children:[e.jsx("li",{children:"First step in the process"}),e.jsx("li",{children:"Second step with additional details"}),e.jsx("li",{children:"Third step with important notes"})]}),e.jsx("p",{children:"You can include any type of content within the details component, making it very flexible for different use cases."})]})},render:i=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...i})})},o={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("div",{style:{marginBottom:"20px"},children:e.jsxs(t,{label:"Installation",children:[e.jsx("p",{children:"Follow these steps to install the package:"}),e.jsxs("ol",{children:[e.jsxs("li",{children:["Run ",e.jsx("code",{children:"npm install package-name"})]}),e.jsx("li",{children:"Import the component in your file"}),e.jsx("li",{children:"Start using it in your application"})]})]})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsxs(t,{kind:"secondary",title:"Configuration",label:"Optional settings",children:[e.jsx("p",{children:"Configure the component with these options:"}),e.jsxs("ul",{children:[e.jsx("li",{children:"Set the theme property"}),e.jsx("li",{children:"Configure the layout"}),e.jsx("li",{children:"Customize the styling"})]})]})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsxs(t,{kind:"tertiary",title:"Advanced Usage",label:"For power users",children:[e.jsx("p",{children:"Advanced techniques and best practices:"}),e.jsxs("ul",{children:[e.jsx("li",{children:"Custom styling approaches"}),e.jsx("li",{children:"Performance optimization"}),e.jsx("li",{children:"Integration patterns"})]})]})})]})},l={args:{kind:"secondary",title:"Custom Icon Example",label:"Shows custom icon usage",icon:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})}),children:"This details component uses a custom star icon instead of the default icon."},render:i=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...i})})},d={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Primary Variant"}),e.jsx(t,{label:"Simple collapsible content",children:e.jsx("p",{children:"This is the primary variant with just a label. It's the simplest form of the Details component."})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Secondary Variant"}),e.jsx(t,{kind:"secondary",title:"Enhanced Details",label:"With title and label",children:e.jsx("p",{children:"This secondary variant includes both a title and label, providing more context in the summary."})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Tertiary Variant"}),e.jsx(t,{kind:"tertiary",title:"Advanced Details",label:"For complex content",children:e.jsx("p",{children:"This tertiary variant also has title and label but with different visual styling."})})]})]})},c={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"FAQ Section"}),e.jsx("p",{children:"Details components are perfect for FAQ sections and frequently asked questions."}),e.jsxs("div",{style:{marginTop:"20px"},children:[e.jsx(t,{label:"How do I get started?",children:e.jsx("p",{children:"Getting started is easy! Simply follow our quick start guide which will walk you through the basic setup process."})}),e.jsxs(t,{kind:"secondary",title:"Installation",label:"Step-by-step guide",children:[e.jsx("p",{children:"Install the package using npm or yarn:"}),e.jsx("pre",{children:e.jsx("code",{children:"npm install @xyd-js/components"})}),e.jsx("p",{children:"Then import and use the components in your project."})]}),e.jsx(t,{kind:"tertiary",title:"Troubleshooting",label:"Common issues",children:e.jsx("p",{children:"If you encounter any issues, check our troubleshooting guide or contact support."})})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Documentation Sections"}),e.jsx("p",{children:"Organize documentation into collapsible sections for better navigation."}),e.jsxs("div",{style:{marginTop:"20px"},children:[e.jsx(t,{label:"Basic Concepts",children:e.jsx("p",{children:"Learn the fundamental concepts and principles that underpin our framework."})}),e.jsx(t,{kind:"secondary",title:"API Reference",label:"Complete documentation",children:e.jsx("p",{children:"Comprehensive API documentation with examples and usage patterns."})}),e.jsx(t,{kind:"tertiary",title:"Advanced Topics",label:"For experienced users",children:e.jsx("p",{children:"Advanced concepts and techniques for power users and complex use cases."})})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Feature Documentation"}),e.jsx("p",{children:"Use details components to organize feature documentation and tutorials."}),e.jsxs("div",{style:{marginTop:"20px"},children:[e.jsx(t,{label:"Getting Started",children:e.jsx("p",{children:"Quick start guide to get you up and running in minutes."})}),e.jsx(t,{kind:"secondary",title:"Core Features",label:"Essential functionality",children:e.jsx("p",{children:"Overview of the core features and how to use them effectively."})}),e.jsx(t,{kind:"tertiary",title:"Advanced Features",label:"Optional capabilities",children:e.jsx("p",{children:"Advanced features and customization options for complex requirements."})})]})]})]}),parameters:{docs:{description:{story:"This example shows how Details components are typically used in real applications for organizing content."}}}},p={args:{kind:"secondary",title:"Interactive Details",label:"Click to expand",children:e.jsxs("div",{children:[e.jsx("p",{children:"This details component demonstrates the interactive behavior. Click the summary to expand or collapse the content."}),e.jsx("p",{children:"The component automatically handles the open/closed state and provides appropriate visual feedback."})]})},render:i=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx(t,{...i}),e.jsx("p",{style:{marginTop:"10px",fontSize:"14px",color:"#666"},children:"The Details component provides semantic HTML structure and accessible collapsible content."})]}),parameters:{docs:{description:{story:"This details component demonstrates the interactive behavior and accessibility features."}}}},h={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(t,{kind:"secondary",title:"Main Section",label:"Contains subsections",children:[e.jsx("p",{children:"This main section contains several subsections organized with nested details components."}),e.jsx(t,{label:"Subsection 1",children:e.jsx("p",{children:"This is the first subsection with its own content."})}),e.jsx(t,{kind:"secondary",title:"Subsection 2",label:"With title",children:e.jsx("p",{children:"This subsection has both a title and label."})}),e.jsx(t,{kind:"tertiary",title:"Subsection 3",label:"Tertiary style",children:e.jsx("p",{children:"This subsection uses the tertiary variant styling."})})]})}),parameters:{docs:{description:{story:"This example shows how Details components can be nested to create hierarchical content structures."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Getting Started',
+    children: 'This is the primary variant of the Details component. It has a simple structure with just a label and content.'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Details {...args} />
+        </div>
+}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'secondary',
+    title: 'API Reference',
+    label: 'Complete documentation for all endpoints',
+    children: 'This is the secondary variant with both a title and label. It provides more detailed information in the summary.'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Details {...args} />
+        </div>
+}`,...s.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'tertiary',
+    title: 'Advanced Configuration',
+    label: 'For experienced users',
+    children: 'This is the tertiary variant, which also includes both title and label but with different styling.'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Details {...args} />
+        </div>
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'secondary',
+    title: 'Comprehensive Guide',
+    label: 'Detailed step-by-step instructions',
+    children: <div>
+                <p>This details component contains a substantial amount of content to demonstrate how it handles longer text and multiple paragraphs.</p>
+                <p>The content can include various HTML elements like paragraphs, lists, and other components. This makes it perfect for organizing documentation and providing expandable sections.</p>
+                <ul>
+                    <li>First step in the process</li>
+                    <li>Second step with additional details</li>
+                    <li>Third step with important notes</li>
+                </ul>
+                <p>You can include any type of content within the details component, making it very flexible for different use cases.</p>
+            </div>
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Details {...args} />
+        </div>
+}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <Details label="Installation">
+                    <p>Follow these steps to install the package:</p>
+                    <ol>
+                        <li>Run <code>npm install package-name</code></li>
+                        <li>Import the component in your file</li>
+                        <li>Start using it in your application</li>
+                    </ol>
+                </Details>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <Details kind="secondary" title="Configuration" label="Optional settings">
+                    <p>Configure the component with these options:</p>
+                    <ul>
+                        <li>Set the theme property</li>
+                        <li>Configure the layout</li>
+                        <li>Customize the styling</li>
+                    </ul>
+                </Details>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <Details kind="tertiary" title="Advanced Usage" label="For power users">
+                    <p>Advanced techniques and best practices:</p>
+                    <ul>
+                        <li>Custom styling approaches</li>
+                        <li>Performance optimization</li>
+                        <li>Integration patterns</li>
+                    </ul>
+                </Details>
+            </div>
+        </div>
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'secondary',
+    title: 'Custom Icon Example',
+    label: 'Shows custom icon usage',
+    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+            </svg>,
+    children: 'This details component uses a custom star icon instead of the default icon.'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Details {...args} />
+        </div>
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Primary Variant</h3>
+                <Details label="Simple collapsible content">
+                    <p>This is the primary variant with just a label. It's the simplest form of the Details component.</p>
+                </Details>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Secondary Variant</h3>
+                <Details kind="secondary" title="Enhanced Details" label="With title and label">
+                    <p>This secondary variant includes both a title and label, providing more context in the summary.</p>
+                </Details>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Tertiary Variant</h3>
+                <Details kind="tertiary" title="Advanced Details" label="For complex content">
+                    <p>This tertiary variant also has title and label but with different visual styling.</p>
+                </Details>
+            </div>
+        </div>
+}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '800px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>FAQ Section</h2>
+                <p>Details components are perfect for FAQ sections and frequently asked questions.</p>
+                <div style={{
+        marginTop: '20px'
+      }}>
+                    <Details label="How do I get started?">
+                        <p>Getting started is easy! Simply follow our quick start guide which will walk you through the basic setup process.</p>
+                    </Details>
+                    
+                    <Details kind="secondary" title="Installation" label="Step-by-step guide">
+                        <p>Install the package using npm or yarn:</p>
+                        <pre><code>npm install @xyd-js/components</code></pre>
+                        <p>Then import and use the components in your project.</p>
+                    </Details>
+                    
+                    <Details kind="tertiary" title="Troubleshooting" label="Common issues">
+                        <p>If you encounter any issues, check our troubleshooting guide or contact support.</p>
+                    </Details>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Documentation Sections</h2>
+                <p>Organize documentation into collapsible sections for better navigation.</p>
+                <div style={{
+        marginTop: '20px'
+      }}>
+                    <Details label="Basic Concepts">
+                        <p>Learn the fundamental concepts and principles that underpin our framework.</p>
+                    </Details>
+                    
+                    <Details kind="secondary" title="API Reference" label="Complete documentation">
+                        <p>Comprehensive API documentation with examples and usage patterns.</p>
+                    </Details>
+                    
+                    <Details kind="tertiary" title="Advanced Topics" label="For experienced users">
+                        <p>Advanced concepts and techniques for power users and complex use cases.</p>
+                    </Details>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Feature Documentation</h2>
+                <p>Use details components to organize feature documentation and tutorials.</p>
+                <div style={{
+        marginTop: '20px'
+      }}>
+                    <Details label="Getting Started">
+                        <p>Quick start guide to get you up and running in minutes.</p>
+                    </Details>
+                    
+                    <Details kind="secondary" title="Core Features" label="Essential functionality">
+                        <p>Overview of the core features and how to use them effectively.</p>
+                    </Details>
+                    
+                    <Details kind="tertiary" title="Advanced Features" label="Optional capabilities">
+                        <p>Advanced features and customization options for complex requirements.</p>
+                    </Details>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how Details components are typically used in real applications for organizing content.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'secondary',
+    title: 'Interactive Details',
+    label: 'Click to expand',
+    children: <div>
+                <p>This details component demonstrates the interactive behavior. Click the summary to expand or collapse the content.</p>
+                <p>The component automatically handles the open/closed state and provides appropriate visual feedback.</p>
+            </div>
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Details {...args} />
+            <p style={{
+      marginTop: '10px',
+      fontSize: '14px',
+      color: '#666'
+    }}>
+                The Details component provides semantic HTML structure and accessible collapsible content.
+            </p>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This details component demonstrates the interactive behavior and accessibility features.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Details kind="secondary" title="Main Section" label="Contains subsections">
+                <p>This main section contains several subsections organized with nested details components.</p>
+                
+                <Details label="Subsection 1">
+                    <p>This is the first subsection with its own content.</p>
+                </Details>
+                
+                <Details kind="secondary" title="Subsection 2" label="With title">
+                    <p>This subsection has both a title and label.</p>
+                </Details>
+                
+                <Details kind="tertiary" title="Subsection 3" label="Tertiary style">
+                    <p>This subsection uses the tertiary variant styling.</p>
+                </Details>
+            </Details>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how Details components can be nested to create hierarchical content structures.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};const k=["Primary","Secondary","Tertiary","LongContent","MultipleDetails","WithCustomIcon","AllVariants","RealWorldExamples","Interactive","NestedDetails"];export{d as AllVariants,p as Interactive,r as LongContent,o as MultipleDetails,h as NestedDetails,n as Primary,c as RealWorldExamples,s as Secondary,a as Tertiary,l as WithCustomIcon,k as __namedExportsOrder,T as default};