From 8dae258731a20cdda3380f66867de5f601488935 Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Mon, 25 Aug 2025 00:10:24 -0300 Subject: [PATCH] feat: story for money text --- projects/my-wallet-ds/documentation.json | 292 +++++++++++++++--- .../control-constants/currencyCodes.ts | 181 +++++++++++ .../stories/molecules/money-text.stories.ts | 71 +++++ 3 files changed, 506 insertions(+), 38 deletions(-) create mode 100644 projects/my-wallet-ds/src/stories/control-constants/currencyCodes.ts create mode 100644 projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts diff --git a/projects/my-wallet-ds/documentation.json b/projects/my-wallet-ds/documentation.json index 96e1538..d395eed 100644 --- a/projects/my-wallet-ds/documentation.json +++ b/projects/my-wallet-ds/documentation.json @@ -50,6 +50,46 @@ "type": "StoryObj", "defaultValue": "{\n ...Template,\n}" }, + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{\n ...Template,\n}" + }, + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{}" + }, + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{\n \n}" + }, + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{}" + }, { "name": "Large", "ctype": "miscellaneous", @@ -138,7 +178,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "defaultValue": "{\n title: 'Atoms/Checkbox',\n component: CheckboxComponent,\n tags: ['autodocs'],\n argTypes: {\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 },\n\n}" + "defaultValue": "{\n title: 'Atoms/Checkbox',\n component: CheckboxComponent,\n tags: ['autodocs'],\n argTypes: {\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 },\n render: (args) => ({\n props: {...args, handler: (checked: boolean) => alert(`checked: ${checked}`)},\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: flex;\n justify-content: center;\n }\n `\n ],\n template: `\n \n `,\n })\n\n}" }, { "name": "meta", @@ -170,7 +210,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 backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n /*iconProps */\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount,\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 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 whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\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 backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n /*iconProps */\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount,\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 iconProps,\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 whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\n}" }, { "name": "meta", @@ -180,7 +220,7 @@ "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: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n category:\"Ocio, recreación y snacks\",\n description:\"Pizza\",\n variant:\"expense\",\n whom:\"Rappi\",\n /*iconProps*/\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line',\n } as any,\n argTypes: {\n amount,\n category,\n description,\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n variant,\n whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\n}" + "defaultValue": "{\n title:'Molecules/ Expense Income Category Detail',\n component: ExpenseIncomeCategoryDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n category:\"Ocio, recreación y snacks\",\n description:\"Pizza\",\n iconProps:{\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n variant:\"expense\",\n whom:\"Rappi\",\n /*iconProps*/\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line',\n } as any,\n argTypes: {\n amount,\n category,\n description,\n iconProps,\n variant,\n whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\n}" }, { "name": "meta", @@ -190,7 +230,37 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "defaultValue": "{\n title: 'Molecules / Expense income date detail',\n component: ExpenseIncomeDateDetailComponent,\n tags: ['autodocs'],\n args: {\n\n },\n argTypes: {\n\n }\n}" + "defaultValue": "{\n title: 'Molecules / Expense Income Date Detail',\n component: ExpenseIncomeDateDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n date: new Date(),\n description:\"Pizza\",\n iconProps:{\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n variant: 'expense',\n whom: 'Rappi',\n /*iconProps */\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line',\n },\n argTypes: {\n amount,\n date: {\n control: 'date',\n description: 'Expense/income date',\n table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n },\n description,\n iconProps,\n variant,\n whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n }\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Money Text',\n component: MoneyTextComponent,\n tags:['autodocs'],\n args: {\n amount: 9999,\n color: '#777777',\n currencyCode: 'USD',\n lineHeight: '1.6rem',\n size: '1.6rem',\n },\n argTypes: {\n amount: {\n control: 'number',\n description: 'Money amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n color: {\n description: 'Money amount color',\n control: {type: 'color'},\n table: {defaultValue: {detail: 'Defaults to var(--mw-gray-500) (#777777)', summary: '#777777'}}\n },\n currencyCode: {\n control: {type: 'select'},\n description: 'The ISO 4217 currency code',\n table: {defaultValue: {detail: 'Defaults to USD', summary: 'USD'}},\n options: currencyCodes\n },\n lineHeight: {\n description: \"Sets the height of a line box for amount. Can be set to null, if null it will be the same as the font-size.\",\n control: {\n type: \"text\"\n },\n table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to font-size\"}}\n },\n size: {\n description: \"Amount font size with it's units\",\n table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to 1.6rem\"}},\n },\n },\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px;\n margin: auto;\n padding: 0 4px;\n width: 375px;\n }\n `],\n template: `\n `\n })\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Title Bar Category',\n component: TitleBarCategoryComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n category: 'Ocio, recreación y snacks',\n maxWidth: '19rem'\n },\n argTypes: {\n amount,\n category: {\n control: 'text',\n description: 'Title (group) category',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n maxWidth: {\n control: 'text',\n description: 'Max width with it\\'s unit for the category text before ellipsis',\n table: {defaultValue: {detail: 'Defaults to 19rem', summary: '19rem'}},\n }\n },\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `],\n template: `\n \n `\n })\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Title Bar Date',\n component: TitleBarDateComponent,\n tags:['autodocs'],\n args: {\n amount: 15000,\n date: new Date(),\n },\n argTypes: {\n amount,\n date: {\n control: 'date',\n description: 'Title (group) date',\n table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n }\n },\n render: (args) => ({\n\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px;\n margin: auto;\n padding: 0 4px;\n width: 375px;\n }\n `]\n })\n}" }, { "name": "Paragraph", @@ -260,7 +330,7 @@ "deprecated": false, "deprecationMessage": "", "type": "", - "defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n props: args,\n template: `\n
\n \n
`\n})" + "defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n props: args,\n styles: `\n :host {\n display:flex; \n justify-content: center;\n }\n `,\n template: `\n \n `\n})" }, { "name": "Template", @@ -270,7 +340,7 @@ "deprecated": false, "deprecationMessage": "", "type": "", - "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n props: args,\n template: `\n Texto`,\n})" + "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: flex;\n justify-content: center;\n }\n `\n ],\n template: `\n Texto`,\n})" }, { "name": "Template", @@ -290,7 +360,7 @@ "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}" + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `\n ],\n template: `\n \n `,\n }),\n}" }, { "name": "Template", @@ -300,7 +370,7 @@ "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}" + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `\n ],\n template: `\n \n `,\n }),\n}" }, { "name": "Template", @@ -310,7 +380,7 @@ "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}" + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `\n ],\n template: `\n \n `,\n }),\n}" }, { "name": "WithCheckbox", @@ -391,7 +461,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "defaultValue": "{\n title: 'Atoms/Checkbox',\n component: CheckboxComponent,\n tags: ['autodocs'],\n argTypes: {\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 },\n\n}" + "defaultValue": "{\n title: 'Atoms/Checkbox',\n component: CheckboxComponent,\n tags: ['autodocs'],\n argTypes: {\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 },\n render: (args) => ({\n props: {...args, handler: (checked: boolean) => alert(`checked: ${checked}`)},\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: flex;\n justify-content: center;\n }\n `\n ],\n template: `\n \n `,\n })\n\n}" } ], "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts": [ @@ -447,7 +517,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 backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n /*iconProps */\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount,\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 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 whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\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 backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n /*iconProps */\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount,\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 iconProps,\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 whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\n}" }, { "name": "Template", @@ -457,7 +527,7 @@ "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}" + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `\n ],\n template: `\n \n `,\n }),\n}" }, { "name": "WithCheckbox", @@ -489,7 +559,7 @@ "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: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n category:\"Ocio, recreación y snacks\",\n description:\"Pizza\",\n variant:\"expense\",\n whom:\"Rappi\",\n /*iconProps*/\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line',\n } as any,\n argTypes: {\n amount,\n category,\n description,\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n variant,\n whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\n}" + "defaultValue": "{\n title:'Molecules/ Expense Income Category Detail',\n component: ExpenseIncomeCategoryDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n category:\"Ocio, recreación y snacks\",\n description:\"Pizza\",\n iconProps:{\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n variant:\"expense\",\n whom:\"Rappi\",\n /*iconProps*/\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line',\n } as any,\n argTypes: {\n amount,\n category,\n description,\n iconProps,\n variant,\n whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n } as any\n}" }, { "name": "Template", @@ -499,7 +569,105 @@ "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}" + "defaultValue": "{\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `\n ],\n template: `\n \n `,\n }),\n}" + } + ], + "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts": [ + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-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-date-detail.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Expense Income Date Detail',\n component: ExpenseIncomeDateDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n date: new Date(),\n description:\"Pizza\",\n iconProps:{\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line'\n },\n variant: 'expense',\n whom: 'Rappi',\n /*iconProps */\n backgroundColor: '#FFC3CD',\n color: '#ffffff',\n symbol: 'riding-line',\n },\n argTypes: {\n amount,\n date: {\n control: 'date',\n description: 'Expense/income date',\n table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n },\n description,\n iconProps,\n variant,\n whom,\n /*icon props */\n backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n color: {...color, table: {...color.table, category: 'iconProps'}},\n symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n }\n}" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-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 :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `\n ],\n template: `\n \n `,\n }),\n}" + } + ], + "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts": [ + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Money Text',\n component: MoneyTextComponent,\n tags:['autodocs'],\n args: {\n amount: 9999,\n color: '#777777',\n currencyCode: 'USD',\n lineHeight: '1.6rem',\n size: '1.6rem',\n },\n argTypes: {\n amount: {\n control: 'number',\n description: 'Money amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n color: {\n description: 'Money amount color',\n control: {type: 'color'},\n table: {defaultValue: {detail: 'Defaults to var(--mw-gray-500) (#777777)', summary: '#777777'}}\n },\n currencyCode: {\n control: {type: 'select'},\n description: 'The ISO 4217 currency code',\n table: {defaultValue: {detail: 'Defaults to USD', summary: 'USD'}},\n options: currencyCodes\n },\n lineHeight: {\n description: \"Sets the height of a line box for amount. Can be set to null, if null it will be the same as the font-size.\",\n control: {\n type: \"text\"\n },\n table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to font-size\"}}\n },\n size: {\n description: \"Amount font size with it's units\",\n table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to 1.6rem\"}},\n },\n },\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px;\n margin: auto;\n padding: 0 4px;\n width: 375px;\n }\n `],\n template: `\n `\n })\n}" + } + ], + "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts": [ + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{\n \n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Title Bar Category',\n component: TitleBarCategoryComponent,\n tags: ['autodocs'],\n args: {\n amount: 9494,\n category: 'Ocio, recreación y snacks',\n maxWidth: '19rem'\n },\n argTypes: {\n amount,\n category: {\n control: 'text',\n description: 'Title (group) category',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n maxWidth: {\n control: 'text',\n description: 'Max width with it\\'s unit for the category text before ellipsis',\n table: {defaultValue: {detail: 'Defaults to 19rem', summary: '19rem'}},\n }\n },\n render: (args) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px; \n margin: auto; \n padding: 0 4px;\n width: 375px; \n }\n `],\n template: `\n \n `\n })\n}" + } + ], + "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts": [ + { + "name": "Default", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "StoryObj", + "defaultValue": "{}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "defaultValue": "{\n title: 'Molecules / Title Bar Date',\n component: TitleBarDateComponent,\n tags:['autodocs'],\n args: {\n amount: 15000,\n date: new Date(),\n },\n argTypes: {\n amount,\n date: {\n control: 'date',\n description: 'Title (group) date',\n table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n }\n },\n render: (args) => ({\n\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: block;\n height: 40px;\n margin: auto;\n padding: 0 4px;\n width: 375px;\n }\n `]\n })\n}" } ], "projects/my-wallet-ds/src/stories/button.stories.ts": [ @@ -647,29 +815,7 @@ "deprecated": false, "deprecationMessage": "", "type": "", - "defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n props: args,\n template: `\n
\n \n
`\n})" - } - ], - "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts": [ - { - "name": "meta", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Meta", - "defaultValue": "{\n title: 'Molecules / Expense income date detail',\n component: ExpenseIncomeDateDetailComponent,\n tags: ['autodocs'],\n args: {\n\n },\n argTypes: {\n\n }\n}" - }, - { - "name": "Template", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-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}" + "defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n props: args,\n styles: `\n :host {\n display:flex; \n justify-content: center;\n }\n `,\n template: `\n \n `\n})" } ], "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts": [ @@ -691,7 +837,7 @@ "deprecated": false, "deprecationMessage": "", "type": "", - "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n props: args,\n template: `\n Texto`,\n})" + "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css');\n :host {\n display: flex;\n justify-content: center;\n }\n `\n ],\n template: `\n Texto`,\n})" } ], "projects/my-wallet-ds/.storybook/preview.ts": [ @@ -1059,6 +1205,16 @@ "coverageCount": "0/1", "status": "low" }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Default", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, { "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts", "type": "variable", @@ -1079,6 +1235,66 @@ "coverageCount": "0/1", "status": "low" }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Default", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/money-text.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/title-bar-category.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Default", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.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/title-bar-date.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Default", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, { "filePath": "projects/my-wallet-ds/src/stories/page.stories.ts", "type": "variable", diff --git a/projects/my-wallet-ds/src/stories/control-constants/currencyCodes.ts b/projects/my-wallet-ds/src/stories/control-constants/currencyCodes.ts new file mode 100644 index 0000000..021d169 --- /dev/null +++ b/projects/my-wallet-ds/src/stories/control-constants/currencyCodes.ts @@ -0,0 +1,181 @@ +export const currencyCodes = [ + "AED", + "AFN", + "ALL", + "AMD", + "AOA", + "ARS", + "AUD", + "AWG", + "AZN", + "BAM", + "BBD", + "BDT", + "BGN", + "BHD", + "BIF", + "BMD", + "BND", + "BOB", + "BOV", + "BRL", + "BSD", + "BTN", + "BWP", + "BYN", + "BZD", + "CAD", + "CDF", + "CHE", + "CHF", + "CHW", + "CLF", + "CLP", + "CNY", + "COP", + "COU", + "CRC", + "CUP", + "CVE", + "CZK", + "DJF", + "DKK", + "DOP", + "DZD", + "EGP", + "ERN", + "ETB", + "EUR", + "FJD", + "FKP", + "GBP", + "GEL", + "GHS", + "GIP", + "GMD", + "GNF", + "GTQ", + "GYD", + "HKD", + "HNL", + "HTG", + "HUF", + "IDR", + "ILS", + "INR", + "IQD", + "IRR", + "ISK", + "JMD", + "JOD", + "JPY", + "KES", + "KGS", + "KHR", + "KMF", + "KPW", + "KRW", + "KWD", + "KYD", + "KZT", + "LAK", + "LBP", + "LKR", + "LRD", + "LSL", + "LYD", + "MAD", + "MDL", + "MGA", + "MKD", + "MMK", + "MNT", + "MOP", + "MRU", + "MUR", + "MVR", + "MWK", + "MXN", + "MXV", + "MYR", + "MZN", + "NAD", + "NGN", + "NIO", + "NOK", + "NPR", + "NZD", + "OMR", + "PAB", + "PEN", + "PGK", + "PHP", + "PKR", + "PLN", + "PYG", + "QAR", + "RON", + "RSD", + "RUB", + "RWF", + "SAR", + "SBD", + "SCR", + "SDG", + "SEK", + "SGD", + "SHP", + "SLE", + "SOS", + "SRD", + "SSP", + "STN", + "SVC", + "SYP", + "SZL", + "THB", + "TJS", + "TMT", + "TND", + "TOP", + "TRY", + "TTD", + "TWD", + "TZS", + "UAH", + "UGX", + "USD", + "USN", + "UYI", + "UYU", + "UYW", + "UZS", + "VED", + "VES", + "VND", + "VUV", + "WST", + "XAD", + "XAF", + "XAG", + "XAU", + "XBA", + "XBB", + "XBC", + "XBD", + "XCD", + "XCG", + "XDR", + "XOF", + "XPD", + "XPF", + "XPT", + "XSU", + "XTS", + "XUA", + "XXX", + "YER", + "ZAR", + "ZMW", + "ZWG" +] \ No newline at end of file diff --git a/projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts b/projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts new file mode 100644 index 0000000..f5dc5a6 --- /dev/null +++ b/projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts @@ -0,0 +1,71 @@ +import { Meta, StoryObj } from "@storybook/angular"; +import { MoneyTextComponent } from "../../public-api"; +import { currencyCodes } from "../control-constants/currencyCodes"; + +const meta: Meta = { + title: 'Molecules / Money Text', + component: MoneyTextComponent, + tags:['autodocs'], + args: { + amount: 9999, + color: '#777777', + currencyCode: 'USD', + lineHeight: '1.6rem', + size: '1.6rem', + }, + argTypes: { + amount: { + control: 'number', + description: 'Money amount', + table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}}, + }, + color: { + description: 'Money amount color', + control: {type: 'color'}, + table: {defaultValue: {detail: 'Defaults to var(--mw-gray-500) (#777777)', summary: '#777777'}} + }, + currencyCode: { + control: {type: 'select'}, + description: 'The ISO 4217 currency code', + table: {defaultValue: {detail: 'Defaults to USD', summary: 'USD'}}, + options: currencyCodes + }, + lineHeight: { + description: "Sets the height of a line box for amount. Can be set to null, if null it will be the same as the font-size.", + control: { + type: "text" + }, + table: {defaultValue: {summary: "1.6rem", detail: "Defaults to font-size"}} + }, + size: { + description: "Amount font size with it's units", + table: {defaultValue: {summary: "1.6rem", detail: "Defaults to 1.6rem"}}, + }, + }, + render: (args) => ({ + props: args, + styles: [ + ` + @import url('/assets/styles.css'); + :host { + display: block; + height: 40px; + margin: auto; + padding: 0 4px; + width: 375px; + } + `], + template: ` + ` + }) +} + +export default meta; + +export const Default: StoryObj = {}; \ No newline at end of file