From 64e2269455583209e3f156f9cab7b691ce5f33ab Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Sat, 23 Aug 2025 12:18:21 -0300
Subject: [PATCH] refactor:  story rendering for proper args switching between
 cmp states

---
 ...come-category-by-account-detail.stories.ts | 80 +++++++++----------
 1 file changed, 36 insertions(+), 44 deletions(-)

diff --git a/projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts b/projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts
index 06cb2cf..49d7ea5 100644
--- a/projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts
+++ b/projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { ExpenseIncomeCategoryByAccountDetailComponent } from '../../lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component';
 import { svgList } from '../svg-list';
 
@@ -19,7 +19,7 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
       color: '#ffffff',
       symbol: 'stethoscope-fill'
     },
-    showCheckbox: false,
+
     backgroundColor: '#f5ea42',
     color: '#ffffff',
     symbol: 'stethoscope-fill',
@@ -97,51 +97,43 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
 
 export default meta;
 
-const Template = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({
-  props: args,
-  styles: [
+const Template: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
+  render: (args) => ({
+    props: args,
+    styles: [
       `
         @import url('/assets/styles.css')
       `
     ],
-  template: `
-  <div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
-    <mw-expense-income-category-by-account-detail
-        [acumAmount]="acumAmount"
-        [amount]="amount"
-        [iconProps]="{symbol,color,backgroundColor}"
-        category="${args.category}"
-        description="${args.description}"
-        [showCheckbox]="showCheckbox"
-        variant="${args.variant}"
-        whom="${args.whom}"
-    />
-  </div>
-  `
-});
+    template: `
+      <div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
+        <mw-expense-income-category-by-account-detail
+            [acumAmount]="acumAmount"
+            [amount]="amount"
+            [iconProps]="{ symbol: symbol, color: color, backgroundColor: backgroundColor }"
+            [category]="category"
+            [description]="description"
+            [showCheckbox]="showCheckbox"
+            [variant]="variant"
+            [whom]="whom"
+        />
+      </div>
+    `,
+  }),
+};
 
-const TemplateCheckbox = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({
-  props: args,
-  styles: [
-      `
-        @import url('/assets/styles.css')
-      `
-    ],
-  template: `
-  <div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
-    <mw-expense-income-category-by-account-detail
-        [acumAmount]="acumAmount"
-        [amount]="amount"
-        [iconProps]="{symbol,color,backgroundColor}"
-        [showCheckbox]="true"
-        category="${args.category}"
-        description="${args.description}"
-        variant="${args.variant}"
-        whom="${args.whom}"
-    />
-  </div>
-  `
-});
+export const Default: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
+  ...Template,
+  args: {
+    ...meta.args,
+    showCheckbox: false,
+  },
+};
 
-export const ExpenseIncomeCategoryByAccountDetail = Template.bind({});
-export const WithCheckbox = TemplateCheckbox.bind({});
\ No newline at end of file
+export const WithCheckbox: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
+  ...Template,
+  args: {
+    ...meta.args,
+    showCheckbox: true,
+  },
+};
\ No newline at end of file