refactor: improve stories, remove wrappers use styles instead

projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CheckboxComponent } from './../../lib/atoms/checkbox/checkbox.component';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<CheckboxComponent> = {
   title: 'Atoms/Checkbox',
   component: CheckboxComponent,
@@ -16,6 +15,21 @@ const meta: Meta<CheckboxComponent> = {
       },      
     }
   },
+  render: (args) => ({
+    props: {...args, handler: (checked: boolean) => alert(`checked: ${checked}`)},
+    styles: [
+      `
+        @import url('/assets/styles.css');
+        :host {
+          display: flex;
+          justify-content: center;
+        }
+      `
+    ],
+    template: `
+      <mw-checkbox (checked)="handler($event)"/>
+    `,
+  })
 
 };
 

projects/my-wallet-ds/src/stories/atoms/svg.stories.ts

@@ -30,15 +30,20 @@ export default meta;
 
 const Template = (args: { width: string, height: string, color: string, symbol: string,}) => ({
   props: args,
+  styles: `
+    :host {
+        display:flex; 
+        justify-content: center;
+    }
+  `,
   template: `
-  <div style="display:flex; justify-content: center;">
     <mw-svg
-        width="${args.width}"
-        height="${args.height}"
-        color="${args.color}"
-        symbol="${args.symbol}"
-    ></mw-svg>
-  </div>`
+        [width]="width"
+        [height]="height"
+        [color]="color"
+        [symbol]="symbol"
+    />
+  `
 });
 
 export const Svg = Template.bind({});

projects/my-wallet-ds/src/stories/atoms/typography.stories.ts

@@ -10,8 +10,8 @@ export default {
         color: "#000000",
         ellipsis: false,
         letterSpacing: "normal",
-        lineHeight: null,
-        maxWidth: null,
+        lineHeight: '',
+        maxWidth: '',
         size: '1.4rem',
         variant: 0,
     },
@@ -23,7 +23,7 @@ export default {
         ellipsis: {
             type: 'boolean',
             description: "If true, turns overflowing text into ellipsis (...) when the maxWidth attr is set",
-            table: {'defaultValue':{'detail': 'Defaults to false', 'summary': 'false'}}
+            table: {defaultValue:{detail: 'Defaults to false', summary: 'false'} },
         },
         letterSpacing: {
             description: "Sets the horizontal spacing behavior between text characters",
@@ -74,16 +74,25 @@ export default {
 
 const Template = (args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({
   props: args,
+  styles: [
+    `
+    @import url('/assets/styles.css');
+    :host {
+        display: flex;
+        justify-content: center;
+    }
+    `
+  ],
   template: `
   <mw-typography 
-    [variant]="${args.variant}"
-    [ellipsis]="${args.ellipsis}" 
-    color="${args.color}"
-    letterSpacing="${args.letterSpacing}"
-    lineHeight="${args.lineHeight}"
-    maxWidth="${args.maxWidth}"
-    size="${args.size}"
-    >Texto</mw-typography>`,
+    [variant]="variant"
+    [ellipsis]="ellipsis" 
+    [color]="color"
+    [letterSpacing]="letterSpacing"
+    [lineHeight]="lineHeight"
+    [maxWidth]="maxWidth"
+    [size]="size"
+  >Texto</mw-typography>`,
 });
 
 export const Paragraph = Template.bind({});

projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts

@@ -63,22 +63,27 @@ const Template: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
     props: args,
     styles: [
       `
-        @import url('/assets/styles.css')
+        @import url('/assets/styles.css');
+        :host {
+          display: block;
+          height: 40px; 
+          margin: auto; 
+          padding: 0 4px;
+          width: 375px; 
+        }
       `
     ],
     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]="category"
-            [description]="description"
-            [showCheckbox]="showCheckbox"
-            [variant]="variant"
-            [whom]="whom"
-        />
-      </div>
+      <mw-expense-income-category-by-account-detail
+          [acumAmount]="acumAmount"
+          [amount]="amount"
+          [iconProps]="{ symbol, color, backgroundColor }"
+          [category]="category"
+          [description]="description"
+          [showCheckbox]="showCheckbox"
+          [variant]="variant"
+          [whom]="whom"
+      />
     `,
   }),
 };

projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts

@@ -45,11 +45,17 @@ const Template: StoryObj<ExpenseIncomeCategoryDetailComponent> = {
     props: args,
     styles: [
       `
-        @import url('/assets/styles.css')
+        @import url('/assets/styles.css');
+        :host {
+          display: block;
+          height: 40px; 
+          margin: auto; 
+          padding: 0 4px;
+          width: 375px; 
+        }
       `
     ],
     template: `
-      <div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
         <mw-expense-income-category-detail 
             [amount]="amount"
             [iconProps]="{ symbol: symbol, color: color, backgroundColor: backgroundColor }"
@@ -58,7 +64,6 @@ const Template: StoryObj<ExpenseIncomeCategoryDetailComponent> = {
             [variant]="variant"
             [whom]="whom"
         />
-      </div>
     `,
   }),
 };

projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts

@@ -49,11 +49,17 @@ const Template: StoryObj<ExpenseIncomeDateDetailComponent> = {
     props: args,
     styles: [
       `
-        @import url('/assets/styles.css')
+        @import url('/assets/styles.css');
+        :host {
+          display: block;
+          height: 40px; 
+          margin: auto; 
+          padding: 0 4px;
+          width: 375px; 
+        }
       `
     ],
     template: `
-      <div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
         <mw-expense-income-date-detail
             [amount]="amount"
             [date]="date"
@@ -62,7 +68,6 @@ const Template: StoryObj<ExpenseIncomeDateDetailComponent> = {
             [variant]="variant"
             [whom]="whom"
         />
-      </div>
     `,
   }),
 };