@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Tab/Tab.tsx

@@ -6,17 +6,17 @@ export interface TabItemProps {
    * Label for the tab
    */
   label: string;
-  
+
   /**
    * Content of the tab panel
    */
   content: ReactNode;
-  
+
   /**
    * Whether the tab is initially active
    */
   isActive?: boolean;
-  
+
   /**
    * Additional CSS class for the tab
    */
@@ -28,17 +28,17 @@ export interface TabProps {
    * Array of tab items
    */
   items: TabItemProps[];
-  
+
   /**
    * Initial active tab index
    */
   activeIndex?: number;
-  
+
   /**
    * Callback when tab changes
    */
   onTabChange?: (index: number) => void;
-  
+
   /**
    * Additional CSS class for the tab component
    */
@@ -57,7 +57,7 @@ export const Tab: React.FC<TabProps> = ({
   const [currentTab, setCurrentTab] = useState(activeIndex);
   const tabRef = useRef<HTMLDivElement>(null);
   const tabInstance = useRef<any>(null);
-  
+
   // Handle tab instance initialization and cleanup
   useEffect(() => {
     // Only run on client-side
@@ -69,7 +69,7 @@ export const Tab: React.FC<TabProps> = ({
         tabInstance.current = new TabClass(tabRef.current);
       }
     });
-    
+
     // Cleanup on unmount
     return () => {
       if (tabInstance.current) {
@@ -77,7 +77,7 @@ export const Tab: React.FC<TabProps> = ({
       }
     };
   }, []);
-  
+
   // Handle tab change
   const handleTabClick = (index: number) => {
     setCurrentTab(index);
@@ -85,13 +85,13 @@ export const Tab: React.FC<TabProps> = ({
       onTabChange(index);
     }
   };
-  
+
   return (
     <div className={`c-tabs js-atomix-tab ${className}`} ref={tabRef}>
       <ul className="c-tabs__nav">
         {items.map((item, index) => (
           <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
-            <button 
+            <button
               className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
               onClick={() => handleTabClick(index)}
               data-tabindex={index}
@@ -106,29 +106,27 @@ export const Tab: React.FC<TabProps> = ({
       </ul>
       <div className="c-tabs__panels">
         {items.map((item, index) => (
-          <div 
+          <div
             className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
             key={`tab-panel-${index}`}
             data-tabindex={index}
             id={`tab-panel-${index}`}
             role="tabpanel"
             aria-labelledby={`tab-nav-${index}`}
-            style={{ 
+            style={{
               height: index === currentTab ? 'auto' : '0px',
               opacity: index === currentTab ? 1 : 0,
               overflow: 'hidden',
-              transition: 'height 0.3s ease, opacity 0.3s ease'
+              transition: 'height 0.3s ease, opacity 0.3s ease',
             }}
           >
-            <div className="c-tabs__panel-body">
-              {item.content}
-            </div>
+            <div className="c-tabs__panel-body">{item.content}</div>
           </div>
         ))}
       </div>
     </div>
   );
-}; 
+};
 
 Tab.displayName = 'Tab';
 

package/src/components/Tab/index.ts

@@ -1,2 +1,2 @@
-export { Tab } from "./Tab";
-export type { TabProps, TabItemProps } from "./Tab"; 
+export { Tab } from './Tab';
+export type { TabProps, TabItemProps } from './Tab';

package/src/components/Tab/scripts/index.ts

@@ -29,7 +29,7 @@ const DEFAULT_OPTIONS = {
   panels: TAB.SELECTORS.PANELS,
   panelBodys: TAB.SELECTORS.PANEL_BODIES,
   activeClass: TAB.CLASSES.ACTIVE,
-  activeIndex: TAB.DEFAULTS.ACTIVE_INDEX
+  activeIndex: TAB.DEFAULTS.ACTIVE_INDEX,
 };
 
 /**
@@ -53,7 +53,7 @@ class Tab implements TabInstance {
     this.$element =
       typeof selector === 'string'
         ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
+        : (selector as HTMLElement);
     this.options = { ...DEFAULT_OPTIONS, ...options } as TabOptions;
     this.$navItems = null;
     this.$panels = null;
@@ -77,7 +77,7 @@ class Tab implements TabInstance {
    */
   private _initializeElements(): void {
     if (!this.$element) return;
-    
+
     this.$navItems = this.$element.querySelectorAll<HTMLElement>(this.options.navItems);
     this.$panels = this.$element.querySelectorAll<HTMLElement>(this.options.panels);
     this.$panelBodys = this.$element.querySelectorAll<HTMLElement>(this.options.panelBodys);
@@ -88,8 +88,8 @@ class Tab implements TabInstance {
    */
   private _bindEvents(): void {
     if (!this.$navItems) return;
-    
-    this.$navItems.forEach((item) => {
+
+    this.$navItems.forEach(item => {
       const btn = item.querySelector<HTMLElement>(this.options.navBtn);
       if (btn) {
         btn.addEventListener('click', () => this._handleTabClick(btn));
@@ -104,7 +104,7 @@ class Tab implements TabInstance {
   private _handleTabClick(btn: HTMLElement): void {
     const tabIndex = btn.dataset.tabindex;
     if (tabIndex === undefined) return;
-    
+
     this._hideAllTabs();
     this._showTab(tabIndex);
   }
@@ -114,14 +114,14 @@ class Tab implements TabInstance {
    */
   private _hideAllTabs(): void {
     if (!this.$panels || !this.$navItems) return;
-    
-    this.$panels.forEach((panel) => {
+
+    this.$panels.forEach(panel => {
       panel.style.height = '0px';
       panel.classList.remove(this.options.activeClass);
       panel.style.opacity = '0';
     });
 
-    this.$navItems.forEach((item) => {
+    this.$navItems.forEach(item => {
       const btn = item.querySelector<HTMLElement>(this.options.navBtn);
       if (btn) {
         btn.classList.remove(this.options.activeClass);
@@ -135,7 +135,7 @@ class Tab implements TabInstance {
    */
   private _showTab(index: number | string): void {
     if (!this.$panels || !this.$navItems || !this.$panelBodys) return;
-    
+
     this.$panels.forEach((panel, pIndex) => {
       if (panel.dataset.tabindex == index.toString()) {
         const panelBody = this.$panelBodys?.[pIndex];
@@ -163,7 +163,7 @@ class Tab implements TabInstance {
   public destroy(): void {
     if (!this.$element || !this.$navItems) return;
 
-    this.$navItems.forEach((item) => {
+    this.$navItems.forEach(item => {
       const btn = item.querySelector<HTMLElement>(this.options.navBtn);
       if (btn) {
         // Need to recreate the bound function to remove it correctly
@@ -185,7 +185,7 @@ export function initializeTabs(selector = TAB.SELECTORS.TAB, options = {}): TabI
 
   if (!tabElements.length) return tabInstances;
 
-  tabElements.forEach((element) => {
+  tabElements.forEach(element => {
     try {
       const instance = new Tab(element, options);
       tabInstances.push(instance);
@@ -197,4 +197,4 @@ export function initializeTabs(selector = TAB.SELECTORS.TAB, options = {}): TabI
   return tabInstances;
 }
 
-export default Tab; 
+export default Tab;

package/src/components/Testimonial/Testimonial.stories.tsx

@@ -18,7 +18,7 @@ export default {
   },
 } as Meta<typeof Testimonial>;
 
-const Template: StoryFn<typeof Testimonial> = (args) => (
+const Template: StoryFn<typeof Testimonial> = args => (
   <div style={{ padding: '30px' }}>
     <Testimonial {...args} />
   </div>
@@ -27,12 +27,14 @@ const Template: StoryFn<typeof Testimonial> = (args) => (
 // Default testimonial
 export const Default = Template.bind({});
 Default.args = {
-  quote: "The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.",
+  quote:
+    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
   author: {
-    name: "Emily Rodriguez",
-    role: "Software Engineer, Acme",
-    avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    avatarAlt: "Emily Rodriguez"
+    name: 'Emily Rodriguez',
+    role: 'Software Engineer, Acme',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    avatarAlt: 'Emily Rodriguez',
   },
   size: '',
 };
@@ -40,12 +42,14 @@ Default.args = {
 // Large testimonial
 export const Large = Template.bind({});
 Large.args = {
-  quote: "The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.",
+  quote:
+    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
   author: {
-    name: "Emily Rodriguez",
-    role: "Software Engineer, Acme",
-    avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    avatarAlt: "Emily Rodriguez"
+    name: 'Emily Rodriguez',
+    role: 'Software Engineer, Acme',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    avatarAlt: 'Emily Rodriguez',
   },
   size: 'lg',
 };
@@ -53,12 +57,14 @@ Large.args = {
 // Small testimonial
 export const Small = Template.bind({});
 Small.args = {
-  quote: "The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.",
+  quote:
+    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
   author: {
-    name: "Emily Rodriguez",
-    role: "Software Engineer, Acme",
-    avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    avatarAlt: "Emily Rodriguez"
+    name: 'Emily Rodriguez',
+    role: 'Software Engineer, Acme',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    avatarAlt: 'Emily Rodriguez',
   },
   size: 'sm',
 };
@@ -87,10 +93,11 @@ RichContent.args = {
     </>
   ),
   author: {
-    name: "John Smith",
-    role: "Product Manager, XYZ Corp",
-    avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3",
-    avatarAlt: "John Smith"
+    name: 'John Smith',
+    role: 'Product Manager, XYZ Corp',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
+    avatarAlt: 'John Smith',
   },
 };
 
@@ -100,38 +107,41 @@ const TestimonialGrid: React.FC = () => {
     <div className="o-container">
       <div className="o-grid">
         <div className="o-grid__col o-grid__col--4">
-          <Testimonial 
+          <Testimonial
             size="sm"
             quote="The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before."
             author={{
-              name: "Emily Rodriguez",
-              role: "Software Engineer, Acme",
-              avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-              avatarAlt: "Emily Rodriguez"
+              name: 'Emily Rodriguez',
+              role: 'Software Engineer, Acme',
+              avatarSrc:
+                'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+              avatarAlt: 'Emily Rodriguez',
             }}
           />
         </div>
         <div className="o-grid__col o-grid__col--4">
-          <Testimonial 
+          <Testimonial
             size="sm"
             quote="I feel more in charge of my schedule and less overwhelmed. Highly recommended for professionals and anyone aiming to enhance their productivity."
             author={{
-              name: "John Smith",
-              role: "Product Manager, XYZ Corp",
-              avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3",
-              avatarAlt: "John Smith"
+              name: 'John Smith',
+              role: 'Product Manager, XYZ Corp',
+              avatarSrc:
+                'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
+              avatarAlt: 'John Smith',
             }}
           />
         </div>
         <div className="o-grid__col o-grid__col--4">
-          <Testimonial 
+          <Testimonial
             size="sm"
             quote="I've tried numerous productivity apps in the past, but this one truly stands out. It strikes the perfect balance between simplicity and functionality."
             author={{
-              name: "Sarah Johnson",
-              role: "Marketing Director, ABC Inc",
-              avatarSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3",
-              avatarAlt: "Sarah Johnson"
+              name: 'Sarah Johnson',
+              role: 'Marketing Director, ABC Inc',
+              avatarSrc:
+                'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
+              avatarAlt: 'Sarah Johnson',
             }}
           />
         </div>
@@ -140,9 +150,7 @@ const TestimonialGrid: React.FC = () => {
   );
 };
 
-export const TestimonialGridLayout: StoryFn<typeof Testimonial> = () => (
-  <TestimonialGrid />
-);
+export const TestimonialGridLayout: StoryFn<typeof Testimonial> = () => <TestimonialGrid />;
 
 // Testimonial with image
 const TestimonialWithImage: React.FC = () => {
@@ -150,28 +158,23 @@ const TestimonialWithImage: React.FC = () => {
     <div className="o-container">
       <div className="o-grid u-align-items-center">
         <div className="o-grid__col o-grid__col--6">
-          <Testimonial 
+          <Testimonial
             quote="The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before."
             author={{
-              name: "Emily Rodriguez",
-              role: "Software Engineer, Acme",
-              avatarSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-              avatarAlt: "Emily Rodriguez"
+              name: 'Emily Rodriguez',
+              role: 'Software Engineer, Acme',
+              avatarSrc:
+                'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+              avatarAlt: 'Emily Rodriguez',
             }}
           />
         </div>
         <div className="o-grid__col o-grid__col--6">
-          <img
-            src="https://unsplash.it/g/727/250"
-            alt="Image"
-            className="c-river__image"
-          />
+          <img src="https://unsplash.it/g/727/250" alt="Image" className="c-river__image" />
         </div>
       </div>
     </div>
   );
 };
 
-export const WithImage: StoryFn<typeof Testimonial> = () => (
-  <TestimonialWithImage />
-); 
+export const WithImage: StoryFn<typeof Testimonial> = () => <TestimonialWithImage />;

package/src/components/Testimonial/Testimonial.tsx

@@ -6,17 +6,17 @@ export interface TestimonialAuthor {
    * The author's name
    */
   name: string;
-  
+
   /**
    * The author's role or title
    */
   role: string;
-  
+
   /**
    * The URL to the author's avatar image
    */
   avatarSrc?: string;
-  
+
   /**
    * Alternative text for the avatar image
    */
@@ -28,22 +28,22 @@ export interface TestimonialProps {
    * The testimonial quote text or content
    */
   quote: ReactNode;
-  
+
   /**
    * Author information
    */
   author?: TestimonialAuthor;
-  
+
   /**
    * Size variant
    */
   size?: 'sm' | 'lg' | '';
-  
+
   /**
    * Whether to show a skeleton loading state
    */
   skeleton?: boolean;
-  
+
   /**
    * Additional CSS class
    */
@@ -62,7 +62,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
 }) => {
   const testimonialRef = useRef<HTMLDivElement>(null);
   const testimonialInstance = useRef<any>(null);
-  
+
   useEffect(() => {
     // Only run on client-side
     if (typeof window === 'undefined' || !testimonialRef.current) return undefined;
@@ -72,11 +72,11 @@ export const Testimonial: React.FC<TestimonialProps> = ({
       if (testimonialRef.current) {
         testimonialInstance.current = new TestimonialClass(testimonialRef.current, {
           size,
-          skeleton
+          skeleton,
         });
       }
     });
-    
+
     // Cleanup on unmount
     return () => {
       if (testimonialInstance.current) {
@@ -84,15 +84,17 @@ export const Testimonial: React.FC<TestimonialProps> = ({
       }
     };
   }, [size, skeleton]);
-  
+
   // Determine CSS classes
   const testimonialClasses = [
     'c-testimonial',
     size === 'sm' ? TESTIMONIAL.CLASSES.SMALL : '',
     size === 'lg' ? TESTIMONIAL.CLASSES.LARGE : '',
-    className
-  ].filter(Boolean).join(' ');
-  
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   // Render skeleton version
   if (skeleton) {
     return (
@@ -117,13 +119,11 @@ export const Testimonial: React.FC<TestimonialProps> = ({
       </div>
     );
   }
-  
+
   // Render normal version
   return (
     <div className={testimonialClasses} ref={testimonialRef}>
-      <blockquote className="c-testimonial__quote">
-        {quote}
-      </blockquote>
+      <blockquote className="c-testimonial__quote">{quote}</blockquote>
       {author && (
         <div className="c-testimonial__author">
           {author.avatarSrc && (
@@ -143,7 +143,6 @@ export const Testimonial: React.FC<TestimonialProps> = ({
   );
 };
 
-
 Testimonial.displayName = 'Testimonial';
 
 export default Testimonial;

package/src/components/Testimonial/index.ts

@@ -1,3 +1,3 @@
 export { Testimonial } from './Testimonial';
 export type { TestimonialProps, TestimonialAuthor } from './Testimonial';
-export { default } from './Testimonial'; 
+export { default } from './Testimonial';

package/src/components/Testimonial/scripts/index.ts

@@ -21,7 +21,7 @@ interface TestimonialInstance {
  */
 const DEFAULT_OPTIONS: TestimonialOptions = {
   size: '',
-  skeleton: false
+  skeleton: false,
 };
 
 /**
@@ -42,7 +42,7 @@ class Testimonial implements TestimonialInstance {
     this.$element =
       typeof selector === 'string'
         ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
+        : (selector as HTMLElement);
     this.options = { ...DEFAULT_OPTIONS, ...options } as TestimonialOptions;
     this._initialize();
   }
@@ -54,9 +54,15 @@ class Testimonial implements TestimonialInstance {
     if (!this.$element) return;
 
     // Apply size classes if specified
-    if (this.options.size === 'sm' && !this.$element.classList.contains(TESTIMONIAL.CLASSES.SMALL)) {
+    if (
+      this.options.size === 'sm' &&
+      !this.$element.classList.contains(TESTIMONIAL.CLASSES.SMALL)
+    ) {
       this.$element.classList.add(TESTIMONIAL.CLASSES.SMALL);
-    } else if (this.options.size === 'lg' && !this.$element.classList.contains(TESTIMONIAL.CLASSES.LARGE)) {
+    } else if (
+      this.options.size === 'lg' &&
+      !this.$element.classList.contains(TESTIMONIAL.CLASSES.LARGE)
+    ) {
       this.$element.classList.add(TESTIMONIAL.CLASSES.LARGE);
     }
   }
@@ -75,13 +81,18 @@ class Testimonial implements TestimonialInstance {
  * @param {Object} options - Custom options to override defaults
  * @returns {TestimonialInstance[]} Array of Testimonial instances
  */
-export function initializeTestimonials(selector = TESTIMONIAL.SELECTORS.TESTIMONIAL, options = {}): TestimonialInstance[] {
+export function initializeTestimonials(
+  selector = TESTIMONIAL.SELECTORS.TESTIMONIAL,
+  options = {}
+): TestimonialInstance[] {
   const testimonialInstances: TestimonialInstance[] = [];
-  const testimonialElements = document.querySelectorAll<HTMLElement>(typeof selector === 'string' ? selector : TESTIMONIAL.SELECTORS.TESTIMONIAL);
+  const testimonialElements = document.querySelectorAll<HTMLElement>(
+    typeof selector === 'string' ? selector : TESTIMONIAL.SELECTORS.TESTIMONIAL
+  );
 
   if (!testimonialElements.length) return testimonialInstances;
 
-  testimonialElements.forEach((element) => {
+  testimonialElements.forEach(element => {
     try {
       const instance = new Testimonial(element, options);
       testimonialInstances.push(instance);
@@ -93,4 +104,4 @@ export function initializeTestimonials(selector = TESTIMONIAL.SELECTORS.TESTIMON
   return testimonialInstances;
 }
 
-export default Testimonial; 
+export default Testimonial;

package/src/components/Todo/Todo.stories.tsx

@@ -72,7 +72,7 @@ export const Interactive: Story = {
     placeholder: 'Add a new todo',
     showCompleted: true,
   },
-  render: (args) => {
+  render: args => {
     const [items, setItems] = useState<TodoItem[]>([
       { id: uuidv4(), text: 'Learn React', completed: true },
       { id: uuidv4(), text: 'Build a todo app', completed: false },
@@ -90,9 +90,7 @@ export const Interactive: Story = {
 
     const handleToggleTodo = (id: string) => {
       setItems(
-        items.map(item =>
-          item.id === id ? { ...item, completed: !item.completed } : item
-        )
+        items.map(item => (item.id === id ? { ...item, completed: !item.completed } : item))
       );
     };
 
@@ -121,26 +119,11 @@ export const Sizes: Story = {
     items: sampleItems.slice(0, 3),
     showCompleted: true,
   },
-  render: (args) => (
+  render: args => (
     <div className="u-d-flex u-flex-column u-gap-4">
-      <Todo
-        {...args}
-        title="Small Todo List"
-        items={args.items}
-        size="sm"
-      />
-      <Todo
-        {...args}
-        title="Medium Todo List"
-        items={args.items}
-        size="md"
-      />
-      <Todo
-        {...args}
-        title="Large Todo List"
-        items={args.items}
-        size="lg"
-      />
+      <Todo {...args} title="Small Todo List" items={args.items} size="sm" />
+      <Todo {...args} title="Medium Todo List" items={args.items} size="md" />
+      <Todo {...args} title="Large Todo List" items={args.items} size="lg" />
     </div>
   ),
 };
@@ -169,4 +152,4 @@ export const Disabled: Story = {
     items: sampleItems,
     disabled: true,
   },
-}; 
+};