refactor: common controls for multiple stories

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

@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/angular';
 import { SvgComponent } from './../../lib/atoms/svg/svg.component';
-import { svgList } from './../svg-list';
+import { color, symbol } from '../control-constants/svg';
 
 const meta: Meta<SvgComponent> = {
     title: 'Atoms/Svg',
@@ -21,16 +21,8 @@ const meta: Meta<SvgComponent> = {
             description: 'Icon height with units (px, rem, etc)',
             table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}
         },
-        color: {
-            description: 'Icon color',
-            table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}
-        },
-        symbol: {
-            control: 'select',
-            options: svgList,
-            description: 'Icon name',
-            table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
-        }, 
+        color,
+        symbol, 
     }
 } ;
 

projects/my-wallet-ds/src/stories/control-constants/circled-icon.ts

@@ -0,0 +1,7 @@
+import { InputType } from "storybook/internal/types";
+
+export const backgroundColor: InputType = {
+    control: 'color',
+    description: 'Circle background color',
+    table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},
+}

projects/my-wallet-ds/src/stories/control-constants/expense-income-detail.ts

@@ -0,0 +1,35 @@
+import { InputType } from "storybook/internal/types";
+
+export const amount: InputType = {
+    control: 'number',
+    description: 'Income/expense amount',
+    table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
+}
+
+export const category: InputType = {
+    control: 'text',
+    description: 'Expense/income category name',
+    table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
+}
+
+export const description: InputType = {
+    control: 'text',
+    description: 'Expense/income description',
+    table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
+}
+
+export const variant: InputType = {
+    control: 'select',
+    description: 'Kind of transaction',
+    options: [
+        'expense',
+        'income', 
+    ],
+    table: {defaultValue: {summary: "income", detail: "Income transaction"}},
+}
+
+export const whom: InputType = {
+    control: 'text',
+    description: 'Expense/income payer or payee',
+    table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
+}

projects/my-wallet-ds/src/stories/control-constants/svg.ts

@@ -0,0 +1,14 @@
+import { InputType } from "storybook/internal/types";
+import { svgList } from "../svg-list"
+
+export const color: InputType = {
+    description: 'Icon color',
+    table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}
+}
+
+export const symbol: InputType = {
+    control: 'select',
+    options: svgList,
+    description: 'Icon name',
+    table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
+}

projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta } from '@storybook/angular';
 import { CircledIconComponent } from '../../lib/molecules/circled-icon/circled-icon.component';
-import { svgList } from '../svg-list';
+import { color, symbol } from '../control-constants/svg';
+import { backgroundColor } from '../control-constants/circled-icon';
 /**
  * 
  * **Sizing**: the circled icon takes all space available in it's parent component 
@@ -17,22 +18,9 @@ const meta: Meta<CircledIconComponent> = {
     symbol: 'stock-line',
   },
   argTypes: {
-    backgroundColor: {
-      control: 'color',
-      description: 'Circle background color',
-      table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},
-    },
-    color: {
-      control: 'color',
-      description: 'Icon color',
-      table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}},
-    },
-    symbol: {
-      control: 'select',
-      description: 'Icon name',
-      options: svgList,
-      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
-    }
+    backgroundColor,
+    color,
+    symbol
   },
 };
 

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

@@ -1,6 +1,8 @@
 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';
+import { amount, category, description, variant, whom } from '../control-constants/expense-income-detail';
+import { backgroundColor } from '../control-constants/circled-icon';
+import { color, symbol } from '../control-constants/svg';
 
 const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
   title: 'Molecules/ Expense Income Category By Account Detail',
@@ -13,33 +15,24 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
     description: 'Urinary SO 1.5kg \nCuota 05/06',
     variant: 'expense',
     whom: 'Veterinaria',
-    /*iconProps */
     iconProps: {
       backgroundColor: '#f5ea42',
       color: '#ffffff',
       symbol: 'stethoscope-fill'
     },
-
+    /*iconProps */
     backgroundColor: '#f5ea42',
     color: '#ffffff',
     symbol: 'stethoscope-fill',
   } as any,
   argTypes: {
-    amount: {
-      control: 'number',
-      description: 'Income/expense amount',
-      table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
-    },
+    amount,
     acumAmount: {
       control: 'number',
       description: 'An accumulator for grouped income/expenses',
       table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
     },
-    category: {
-      control: 'text',
-      description: 'Expense/income category name',
-      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
-    },
+    category,
     checked: {
       description: 'Emitted when the checkbox is clicked',
       table: {
@@ -47,11 +40,7 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
         type: { summary: 'EventEmitter<Boolean>', detail: 'Emits true if checked, false otherwise' },
       },      
     },
-    description: {
-      control: 'text',
-      description: 'Expense/income description',
-      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
-    },
+    description,
     iconProps: {
         control: 'object',
         description: 'Properties for the rendered icon'
@@ -61,37 +50,12 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
       description: 'Whether or not the element should show a checkbox',
       table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}
     },
-    variant: {
-      control: 'select',
-      description: 'Kind of transaction',
-      options: [
-          'expense',
-          'income', 
-      ],
-      table: {defaultValue: {summary: "income", detail: "Income transaction"}},
-    },
-    whom: {
-      control: 'text',
-      description: 'Expense/income payer or payee',
-      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
-    },
+    variant,
+    whom,
     /*icon props */
-    backgroundColor: {
-      control: 'color',
-      description: 'Circle background color',
-      table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},
-    },
-    color: {
-      control: 'color',
-      description: 'Icon color',
-      table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},
-    },
-    symbol: {
-      control: 'select',
-      options: svgList,
-      description: 'Icon name',
-      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}
-    }
+    backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},
+    color: {...color, table: {...color.table, category: 'iconProps'}},
+    symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}
   } as any
 };
 
@@ -110,7 +74,7 @@ const Template: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
         <mw-expense-income-category-by-account-detail
             [acumAmount]="acumAmount"
             [amount]="amount"
-            [iconProps]="{ symbol: symbol, color: color, backgroundColor: backgroundColor }"
+            [iconProps]="{ symbol, color, backgroundColor }"
             [category]="category"
             [description]="description"
             [showCheckbox]="showCheckbox"