From 6f9ffb600bd5db815ffb58a21d9166c5d2f4308f Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Fri, 22 Aug 2025 01:25:29 -0300 Subject: [PATCH] feat: add sb documentation for checkbox component --- projects/my-wallet-ds/documentation.json | 126 ++++++++++++++++++ .../lib/atoms/checkbox/checkbox.component.ts | 3 + .../src/stories/checkbox.stories.ts | 26 ++++ 3 files changed, 155 insertions(+) create mode 100644 projects/my-wallet-ds/src/stories/checkbox.stories.ts diff --git a/projects/my-wallet-ds/documentation.json b/projects/my-wallet-ds/documentation.json index 06f1996..d8dae45 100644 --- a/projects/my-wallet-ds/documentation.json +++ b/projects/my-wallet-ds/documentation.json @@ -10,6 +10,16 @@ "modules": [], "miscellaneous": { "variables": [ + { + "name": "Checkbox", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "Template.bind({})" + }, { "name": "Large", "ctype": "miscellaneous", @@ -70,6 +80,16 @@ "type": "Meta", "defaultValue": "{\n title: 'Atoms/Button',\n component: ButtonComponent,\n tags: ['autodocs'],\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: { onClick: fn() },\n}" }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "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 control: {'type':'boolean', value: false},\n \n }\n },\n\n}" + }, { "name": "meta", "ctype": "miscellaneous", @@ -160,6 +180,16 @@ "type": "", "defaultValue": "Template.bind({})" }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "() => ({\n template: `\n
\n
console.log('clicked'\">\n \n
\n
`\n})" + }, { "name": "Template", "ctype": "miscellaneous", @@ -194,6 +224,17 @@ "description": "", "kind": 183 }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + }, { "name": "Story", "ctype": "miscellaneous", @@ -219,6 +260,38 @@ ], "enumerations": [], "groupedVariables": { + "projects/my-wallet-ds/src/stories/checkbox.stories.ts": [ + { + "name": "Checkbox", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "Template.bind({})" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "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 control: {'type':'boolean', value: false},\n \n }\n },\n\n}" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "() => ({\n template: `\n
\n
console.log('clicked'\">\n \n
\n
`\n})" + } + ], "projects/my-wallet-ds/src/stories/button.stories.ts": [ { "name": "Large", @@ -418,6 +491,19 @@ "kind": 183 } ], + "projects/my-wallet-ds/src/stories/checkbox.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } + ], "projects/my-wallet-ds/src/stories/header.stories.ts": [ { "name": "Story", @@ -521,6 +607,46 @@ "coverageCount": "0/1", "status": "low" }, + { + "filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Checkbox", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Template", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "type": "type alias", + "linktype": "miscellaneous", + "linksubtype": "typealias", + "name": "Story", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, { "filePath": "projects/my-wallet-ds/src/stories/header.stories.ts", "type": "variable", diff --git a/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts index 9b8f568..457551a 100644 --- a/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts +++ b/projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts @@ -8,5 +8,8 @@ import { Component, output } from '@angular/core'; styleUrl: './checkbox.component.css' }) export class CheckboxComponent { + /** + * @description Emits true if checked, false otherwise + */ checked = output(); } diff --git a/projects/my-wallet-ds/src/stories/checkbox.stories.ts b/projects/my-wallet-ds/src/stories/checkbox.stories.ts new file mode 100644 index 0000000..c543026 --- /dev/null +++ b/projects/my-wallet-ds/src/stories/checkbox.stories.ts @@ -0,0 +1,26 @@ +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 = { + title: 'Atoms/Checkbox', + component: CheckboxComponent, + tags: ['autodocs'], + argTypes: { + checked: { + description: 'Emitted when the checkbox is clicked', + table: { + category: 'Outputs', + type: { summary: 'EventEmitter', detail: 'Emits true if checked, false otherwise' }, + }, + } + }, + +}; + +export default meta; +type Story = StoryObj; + +export const Checkbox: Story = {}; +