From 02cbf183b3d46d39f72b450276c64218a568120e Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Sat, 23 Aug 2025 16:24:01 -0300 Subject: [PATCH] refactor: common controls for multiple stories --- .../src/stories/atoms/svg.stories.ts | 14 +---- .../stories/control-constants/circled-icon.ts | 7 +++ .../expense-income-detail.ts | 35 +++++++++++ .../src/stories/control-constants/svg.ts | 14 +++++ .../stories/molecules/circled-icon.stories.ts | 22 ++----- ...come-category-by-account-detail.stories.ts | 62 ++++--------------- 6 files changed, 77 insertions(+), 77 deletions(-) create mode 100644 projects/my-wallet-ds/src/stories/control-constants/circled-icon.ts create mode 100644 projects/my-wallet-ds/src/stories/control-constants/expense-income-detail.ts create mode 100644 projects/my-wallet-ds/src/stories/control-constants/svg.ts diff --git a/projects/my-wallet-ds/src/stories/atoms/svg.stories.ts b/projects/my-wallet-ds/src/stories/atoms/svg.stories.ts index 2cd9c8d..621d27b 100644 --- a/projects/my-wallet-ds/src/stories/atoms/svg.stories.ts +++ b/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 = { title: 'Atoms/Svg', @@ -21,16 +21,8 @@ const meta: Meta = { 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, } } ; diff --git a/projects/my-wallet-ds/src/stories/control-constants/circled-icon.ts b/projects/my-wallet-ds/src/stories/control-constants/circled-icon.ts new file mode 100644 index 0000000..9696ef7 --- /dev/null +++ b/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'}}, +} \ No newline at end of file diff --git a/projects/my-wallet-ds/src/stories/control-constants/expense-income-detail.ts b/projects/my-wallet-ds/src/stories/control-constants/expense-income-detail.ts new file mode 100644 index 0000000..5bbe0a3 --- /dev/null +++ b/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)'}}, +} \ No newline at end of file diff --git a/projects/my-wallet-ds/src/stories/control-constants/svg.ts b/projects/my-wallet-ds/src/stories/control-constants/svg.ts new file mode 100644 index 0000000..82fe5ed --- /dev/null +++ b/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)'}} +} \ No newline at end of file diff --git a/projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts b/projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts index dbdfd5a..d5d0682 100644 --- a/projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts +++ b/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 = { 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 }, }; 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 49d7ea5..b443893 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,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 = { title: 'Molecules/ Expense Income Category By Account Detail', @@ -13,33 +15,24 @@ const meta: Meta = { 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 = { type: { summary: 'EventEmitter', 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 = { 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 = {