From b552a453dd04a14b4fbf7a6c6e445a06824a338f Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Sat, 23 Aug 2025 16:27:39 -0300 Subject: [PATCH] feat: story for expense income category detail --- projects/my-wallet-ds/documentation.json | 130 +++++++++++++----- .../expense-income-category-detail.stories.ts | 71 ++++++++++ 2 files changed, 167 insertions(+), 34 deletions(-) create mode 100644 projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts diff --git a/projects/my-wallet-ds/documentation.json b/projects/my-wallet-ds/documentation.json index 860ee2d..a345d6c 100644 --- a/projects/my-wallet-ds/documentation.json +++ b/projects/my-wallet-ds/documentation.json @@ -31,14 +31,24 @@ "defaultValue": "Template.bind({})" }, { - "name": "ExpenseIncomeCategoryByAccountDetail", + "name": "Default", "ctype": "miscellaneous", "subtype": "variable", "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n args: {\n ...meta.args,\n showCheckbox: false,\n },\n}" + }, + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n}" }, { "name": "Large", @@ -160,7 +170,17 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "defaultValue": "{\n title: 'Molecules/ Expense Income Category By Account Detail',\n component: ExpenseIncomeCategoryByAccountDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 3854.75,\n acumAmount: 15000,\n category: 'Mascota',\n description: 'Urinary SO 1.5kg \\nCuota 05/06',\n variant: 'expense',\n whom: 'Veterinaria',\n /*iconProps */\n iconProps: {\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n showCheckbox: false,\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount: {\n control: 'number',\n description: 'Income/expense amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n acumAmount: {\n control: 'number',\n description: 'An accumulator for grouped income/expenses',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n category: {\n control: 'text',\n description: 'Expense/income category name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter', detail: 'Emits true if checked, false otherwise' },\n }, \n },\n description: {\n control: 'text',\n description: 'Expense/income description',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n showCheckbox: {\n control: 'boolean',\n description: 'Whether or not the element should show a checkbox',\n table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}\n },\n variant: {\n control: 'select',\n description: 'Kind of transaction',\n options: [\n 'expense',\n 'income', \n ],\n table: {defaultValue: {summary: \"income\", detail: \"Income transaction\"}},\n },\n whom: {\n control: 'text',\n description: 'Expense/income payer or payee',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n /*icon props */\n backgroundColor: {\n control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}\n }\n } as any,\n parameters: {\n styles: `\n body {\n font-size: 10px;\n }\n `\n }\n}" + "defaultValue": "{\n title: 'Molecules/ Expense Income Category By Account Detail',\n component: ExpenseIncomeCategoryByAccountDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 3854.75,\n acumAmount: 15000,\n category: 'Mascota',\n description: 'Urinary SO 1.5kg \\nCuota 05/06',\n variant: 'expense',\n whom: 'Veterinaria',\n /*iconProps */\n iconProps: {\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount: {\n control: 'number',\n description: 'Income/expense amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n acumAmount: {\n control: 'number',\n description: 'An accumulator for grouped income/expenses',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n category,\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter', detail: 'Emits true if checked, false otherwise' },\n }, \n },\n description: {\n control: 'text',\n description: 'Expense/income description',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n showCheckbox: {\n control: 'boolean',\n description: 'Whether or not the element should show a checkbox',\n table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}\n },\n variant: {\n control: 'select',\n description: 'Kind of transaction',\n options: [\n 'expense',\n 'income', \n ],\n table: {defaultValue: {summary: \"income\", detail: \"Income transaction\"}},\n },\n whom: {\n control: 'text',\n description: 'Expense/income payer or payee',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n /*icon props */\n backgroundColor: {\n control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}\n }\n } as any\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title:'Molecules/ Expense Income Category Detail',\n component: ExpenseIncomeCategoryDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n iconProps:{\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n category:\"Ocio, recreación y snacks\",\n description:\"Pizza\",\n variant:\"income\",\n whom:\"Rappi\"\n },\n argTypes: {\n category,\n } \n}" }, { "name": "Paragraph", @@ -259,18 +279,18 @@ "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `\n})" + "type": "StoryObj", + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `,\n }),\n}" }, { - "name": "TemplateCheckbox", + "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `\n})" + "type": "StoryObj", + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `,\n }),\n}" }, { "name": "WithCheckbox", @@ -279,8 +299,8 @@ "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "TemplateCheckbox.bind({})" + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n args: {\n ...meta.args,\n showCheckbox: true,\n },\n}" } ], "functions": [], @@ -390,14 +410,14 @@ ], "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts": [ { - "name": "ExpenseIncomeCategoryByAccountDetail", + "name": "Default", "ctype": "miscellaneous", "subtype": "variable", "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n args: {\n ...meta.args,\n showCheckbox: false,\n },\n}" }, { "name": "meta", @@ -407,7 +427,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "defaultValue": "{\n title: 'Molecules/ Expense Income Category By Account Detail',\n component: ExpenseIncomeCategoryByAccountDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 3854.75,\n acumAmount: 15000,\n category: 'Mascota',\n description: 'Urinary SO 1.5kg \\nCuota 05/06',\n variant: 'expense',\n whom: 'Veterinaria',\n /*iconProps */\n iconProps: {\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n showCheckbox: false,\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount: {\n control: 'number',\n description: 'Income/expense amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n acumAmount: {\n control: 'number',\n description: 'An accumulator for grouped income/expenses',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n category: {\n control: 'text',\n description: 'Expense/income category name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter', detail: 'Emits true if checked, false otherwise' },\n }, \n },\n description: {\n control: 'text',\n description: 'Expense/income description',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n showCheckbox: {\n control: 'boolean',\n description: 'Whether or not the element should show a checkbox',\n table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}\n },\n variant: {\n control: 'select',\n description: 'Kind of transaction',\n options: [\n 'expense',\n 'income', \n ],\n table: {defaultValue: {summary: \"income\", detail: \"Income transaction\"}},\n },\n whom: {\n control: 'text',\n description: 'Expense/income payer or payee',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n /*icon props */\n backgroundColor: {\n control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}\n }\n } as any,\n parameters: {\n styles: `\n body {\n font-size: 10px;\n }\n `\n }\n}" + "defaultValue": "{\n title: 'Molecules/ Expense Income Category By Account Detail',\n component: ExpenseIncomeCategoryByAccountDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 3854.75,\n acumAmount: 15000,\n category: 'Mascota',\n description: 'Urinary SO 1.5kg \\nCuota 05/06',\n variant: 'expense',\n whom: 'Veterinaria',\n /*iconProps */\n iconProps: {\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount: {\n control: 'number',\n description: 'Income/expense amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n acumAmount: {\n control: 'number',\n description: 'An accumulator for grouped income/expenses',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n category,\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter', detail: 'Emits true if checked, false otherwise' },\n }, \n },\n description: {\n control: 'text',\n description: 'Expense/income description',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n showCheckbox: {\n control: 'boolean',\n description: 'Whether or not the element should show a checkbox',\n table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}\n },\n variant: {\n control: 'select',\n description: 'Kind of transaction',\n options: [\n 'expense',\n 'income', \n ],\n table: {defaultValue: {summary: \"income\", detail: \"Income transaction\"}},\n },\n whom: {\n control: 'text',\n description: 'Expense/income payer or payee',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n /*icon props */\n backgroundColor: {\n control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}\n }\n } as any\n}" }, { "name": "Template", @@ -416,18 +436,8 @@ "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `\n})" - }, - { - "name": "TemplateCheckbox", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "", - "defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `\n})" + "type": "StoryObj", + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `,\n }),\n}" }, { "name": "WithCheckbox", @@ -436,8 +446,40 @@ "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "TemplateCheckbox.bind({})" + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n args: {\n ...meta.args,\n showCheckbox: true,\n },\n}" + } + ], + "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts": [ + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title:'Molecules/ Expense Income Category Detail',\n component: ExpenseIncomeCategoryDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n iconProps:{\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n category:\"Ocio, recreación y snacks\",\n description:\"Pizza\",\n variant:\"income\",\n whom:\"Rappi\"\n },\n argTypes: {\n category,\n } \n}" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n
\n \n
\n `,\n }),\n}" } ], "projects/my-wallet-ds/src/stories/button.stories.ts": [ @@ -910,7 +952,7 @@ "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", - "name": "ExpenseIncomeCategoryByAccountDetail", + "name": "Default", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" @@ -940,17 +982,37 @@ "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", - "name": "TemplateCheckbox", + "name": "WithCheckbox", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { - "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts", + "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", - "name": "WithCheckbox", + "name": "Default", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" diff --git a/projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts b/projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts new file mode 100644 index 0000000..d55cde3 --- /dev/null +++ b/projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts @@ -0,0 +1,71 @@ +import { Meta, StoryObj } from "@storybook/angular"; +import { ExpenseIncomeCategoryDetailComponent } from "../../lib/molecules/expense-income-category-detail/expense-income-category-detail.component"; +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 = { + title:'Molecules/ Expense Income Category Detail', + component: ExpenseIncomeCategoryDetailComponent, + tags: ['autodocs'], + args: { + amount: 9494, + iconProps:{ + backgroundColor: '#FFC3CD', + color: '#ffffff', + symbol: 'riding-line' + }, + category:"Ocio, recreación y snacks", + description:"Pizza", + variant:"expense", + whom:"Rappi", + /*iconProps*/ + backgroundColor: '#FFC3CD', + color: '#ffffff', + symbol: 'riding-line', + } as any, + argTypes: { + amount, + category, + description, + iconProps: { + control: 'object', + description: 'Properties for the rendered icon' + }, + variant, + whom, + /*icon props */ + backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}}, + color: {...color, table: {...color.table, category: 'iconProps'}}, + symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}} + } as any +} + +export default meta; + +const Template: StoryObj = { + render: (args) => ({ + props: args, + styles: [ + ` + @import url('/assets/styles.css') + ` + ], + template: ` +
+ +
+ `, + }), +}; + +export const Default: StoryObj = { + ...Template, +}; \ No newline at end of file