From 19b2807ee7b7dd3e405f1bdb989f01a688420545 Mon Sep 17 00:00:00 2001 From: Kordrad Date: Thu, 20 Jun 2024 11:58:40 +0200 Subject: [PATCH] docs(components/stories): improve documentation for components and stories examples add information about license and author add @example in badge component add pin story example rename storybook doc script --- package.json | 2 +- projects/cli/documentation.json | 118 +++++++++++------- .../files/avatar/avatar.component.ts | 3 + .../components/files/badge/badge.component.ts | 7 +- .../components/files/pin/pin.component.ts | 2 + .../cli/stories/components/badge.stories.ts | 17 +++ 6 files changed, 103 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index ca48b73..71ef8be 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "prepare": "husky", "storybook": "ng run cli:storybook", "storybook:build": "ng run cli:build-storybook", - "doc": "compodoc -e json -d projects/cli -p projects/cli/.storybook/tsconfig.json" + "storybook:doc": "compodoc -e json -d projects/cli -p projects/cli/.storybook/tsconfig.json" }, "private": true, "dependencies": { diff --git a/projects/cli/documentation.json b/projects/cli/documentation.json index 692e1d7..456ac59 100644 --- a/projects/cli/documentation.json +++ b/projects/cli/documentation.json @@ -9,7 +9,7 @@ "components": [ { "name": "ZenAvatarComponent", - "id": "component-ZenAvatarComponent-f1595e5c741df4273fc55e778eaaa3e3d4c489e86347c91512d229be75b131d1c6614a98014da728d8253d096568ac688ac9023d6c3a6e055270d70db67a0099", + "id": "component-ZenAvatarComponent-c1c70b2ab78a2d2de01c96f1e02dffd28942dfa13bfd7daf34f2dfe13d8000e1177c0a20cfcab91141d2545206ba45332267ea8feee6b9b5779d6499882cf72c", "file": "projects/cli/schematics/components/files/avatar/avatar.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": ["ViewEncapsulation.None"], @@ -35,20 +35,20 @@ "type": "", "optional": false, "description": "

Path to the image source. If the src is provided, an image element will be rendered.\nOtherwise, the content projected into this component will be displayed.

\n", - "line": 56, + "line": 59, "rawdescription": "\n\nPath to the image source. If the `src` is provided, an image element will be rendered.\nOtherwise, the content projected into this component will be displayed.\n\n", "modifierKind": [148], "jsdoctags": [ { - "pos": 1450, - "end": 1468, + "pos": 1474, + "end": 1491, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { - "pos": 1451, - "end": 1458, + "pos": 1475, + "end": 1482, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, @@ -58,15 +58,15 @@ "comment": "

''

\n" }, { - "pos": 1468, - "end": 1481, + "pos": 1491, + "end": 1503, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { - "pos": 1469, - "end": 1474, + "pos": 1492, + "end": 1497, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, @@ -76,15 +76,15 @@ "comment": "" }, { - "pos": 1481, - "end": 1493, + "pos": 1503, + "end": 1515, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 351, "tagName": { - "pos": 1482, - "end": 1486, + "pos": 1504, + "end": 1508, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, @@ -93,15 +93,15 @@ }, "comment": "", "typeExpression": { - "pos": 1487, - "end": 1493, + "pos": 1509, + "end": 1515, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 316, "type": { - "pos": 1487, - "end": 1493, + "pos": 1509, + "end": 1515, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 1, @@ -124,9 +124,9 @@ } ], "description": "

A component to display an avatar image. If a valid image source URL is provided,\nit will render an image element. Otherwise, it will display projected content.

\n

The component uses Angular's optimized image directives for enhanced performance.

\n

Usage:

\nExample :
<!-- If an image source is provided, it will display the image -->\n<zen-avatar [src]="'/path/to/image.jpg'" />\n\n<!-- If no image source is provided, it will display the projected content -->\n<zen-avatar> A </zen-avatar>
Example :
<zen-avatar src="https://picsum.photos/32" />
", - "rawdescription": "\n\nA component to display an avatar image. If a valid image source URL is provided,\nit will render an image element. Otherwise, it will display projected content.\n\nThe component uses Angular's optimized image directives for enhanced performance.\n\nUsage:\n\n```html\n\n\n\n\n A \n```\n\n```html\n\n```\n", + "rawdescription": "\n\nA component to display an avatar image. If a valid image source URL is provided,\nit will render an image element. Otherwise, it will display projected content.\n\nThe component uses Angular's optimized image directives for enhanced performance.\n\nUsage:\n\n```html\n\n\n\n\n A \n```\n\n```html\n\n```\n\n", "type": "component", - "sourceCode": "import { NgOptimizedImage } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n input,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * A component to display an avatar image. If a valid image source URL is provided,\r\n * it will render an image element. Otherwise, it will display projected content.\r\n *\r\n * The component uses Angular's optimized image directives for enhanced performance.\r\n *\r\n * Usage:\r\n *\r\n * ```html\r\n * \r\n * \r\n *\r\n * \r\n * A \r\n * ```\r\n *\r\n * @example\r\n * \r\n *\r\n * @component\r\n * @selector `zen-avatar`\r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-avatar',\r\n standalone: true,\r\n imports: [NgOptimizedImage],\r\n template: `\r\n @if (src()) {\r\n \"\"\r\n } @else {\r\n \r\n }\r\n `,\r\n styleUrl: './avatar.component.scss',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenAvatarComponent {\r\n /**\r\n * Path to the image source. If the `src` is provided, an image element will be rendered.\r\n * Otherwise, the content projected into this component will be displayed.\r\n *\r\n * @default ''\r\n * @input\r\n * @type string\r\n */\r\n readonly src = input('');\r\n}\r\n", + "sourceCode": "import { NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n input,\n ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * A component to display an avatar image. If a valid image source URL is provided,\n * it will render an image element. Otherwise, it will display projected content.\n *\n * The component uses Angular's optimized image directives for enhanced performance.\n *\n * Usage:\n *\n * ```html\n * \n * \n *\n * \n * A \n * ```\n *\n * @example\n * \n *\n * @component\n * @selector `zen-avatar`\n *\n * @license BSD-2-Clause\n * @author Konrad Stępień \n * @link https://github.com/Kordrad/ng-zen\n */\n@Component({\n selector: 'zen-avatar',\n standalone: true,\n imports: [NgOptimizedImage],\n template: `\n @if (src()) {\n \"\"\n } @else {\n \n }\n `,\n styleUrl: './avatar.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZenAvatarComponent {\n /**\n * Path to the image source. If the `src` is provided, an image element will be rendered.\n * Otherwise, the content projected into this component will be displayed.\n *\n * @default ''\n * @input\n * @type string\n */\n readonly src = input('');\n}\n", "styleUrl": "./avatar.component.scss", "assetsDirs": [], "styleUrlsData": "", @@ -135,7 +135,7 @@ }, { "name": "ZenBadgeComponent", - "id": "component-ZenBadgeComponent-d01ce0cde232ca50236b48fb73b3d2b43b2b037855c6b76d467346da6de1f65cac9919ba4ff6d13365962697b82e3b216e1a53b81b9bc1f9d3e180048b035551", + "id": "component-ZenBadgeComponent-71671a8b2d105a1f0687f42fe45ab78400e69e325611e53f7616e070c60e7801822dd72aeccf688b5239479a7126465643fadc51af581f781fc568460e4682d9", "file": "projects/cli/schematics/components/files/badge/badge.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": ["ViewEncapsulation.None"], @@ -160,10 +160,10 @@ "hostListeners": [], "standalone": true, "imports": [], - "description": "

ZenBadgeComponent is a versatile Angular component used to display badges or indicators\nin various positions within its parent container. It allows for flexible placement\nof badge content such as icons, text, or other elements in the top-left, top,\ntop-right, left, right, bottom-left, bottom, and bottom-right positions.

\n

This component offers standalone usage and is highly customizable through its\ntemplate and styling. It leverages Angular's change detection strategy 'OnPush'\nfor optimal performance.

\n

Additionally, it provides support for CSS variables to customize badge positioning

\nExample :
--zen-badge-offset: unset; // Controls the overall offset of the badge\n--zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n--zen-badge-offset-y: unset; // Controls the vertical offset of the badge.
", - "rawdescription": "\n\nZenBadgeComponent is a versatile Angular component used to display badges or indicators\nin various positions within its parent container. It allows for flexible placement\nof badge content such as icons, text, or other elements in the top-left, top,\ntop-right, left, right, bottom-left, bottom, and bottom-right positions.\n\nThis component offers standalone usage and is highly customizable through its\ntemplate and styling. It leverages Angular's change detection strategy 'OnPush'\nfor optimal performance.\n\nAdditionally, it provides support for CSS variables to customize badge positioning\n\n```css\n--zen-badge-offset: unset; // Controls the overall offset of the badge\n--zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n--zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\n```\n\n\n", + "description": "

ZenBadgeComponent is a versatile Angular component used to display badges or indicators\nin various positions within its parent container. It allows for flexible placement\nof badge content such as icons, text, or other elements in the top-left, top,\ntop-right, left, right, bottom-left, bottom, and bottom-right positions.

\n

This component offers standalone usage and is highly customizable through its\ntemplate and styling. It leverages Angular's change detection strategy 'OnPush'\nfor optimal performance.

\n

Additionally, it provides support for CSS variables to customize badge positioning

\nExample :
--zen-badge-offset: unset; // Controls the overall offset of the badge\n--zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n--zen-badge-offset-y: unset; // Controls the vertical offset of the badge.
Example :
", + "rawdescription": "\n\nZenBadgeComponent is a versatile Angular component used to display badges or indicators\nin various positions within its parent container. It allows for flexible placement\nof badge content such as icons, text, or other elements in the top-left, top,\ntop-right, left, right, bottom-left, bottom, and bottom-right positions.\n\nThis component offers standalone usage and is highly customizable through its\ntemplate and styling. It leverages Angular's change detection strategy 'OnPush'\nfor optimal performance.\n\nAdditionally, it provides support for CSS variables to customize badge positioning\n\n```css\n--zen-badge-offset: unset; // Controls the overall offset of the badge\n--zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n--zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\n```\n\n```html\n```\n\n", "type": "component", - "sourceCode": "import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * ZenBadgeComponent is a versatile Angular component used to display badges or indicators\r\n * in various positions within its parent container. It allows for flexible placement\r\n * of badge content such as icons, text, or other elements in the top-left, top,\r\n * top-right, left, right, bottom-left, bottom, and bottom-right positions.\r\n *\r\n * This component offers standalone usage and is highly customizable through its\r\n * template and styling. It leverages Angular's change detection strategy 'OnPush'\r\n * for optimal performance.\r\n *\r\n * Additionally, it provides support for CSS variables to customize badge positioning\r\n *\r\n * ```css\r\n * --zen-badge-offset: unset; // Controls the overall offset of the badge\r\n * --zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\r\n * --zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\r\n * ```\r\n\r\n * @selector `zen-badge`,`[zenBadge]`\r\n *\r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-badge,[zenBadge]',\r\n standalone: true,\r\n template: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n `,\r\n styleUrl: './badge.component.scss',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenBadgeComponent {}\r\n", + "sourceCode": "import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * ZenBadgeComponent is a versatile Angular component used to display badges or indicators\n * in various positions within its parent container. It allows for flexible placement\n * of badge content such as icons, text, or other elements in the top-left, top,\n * top-right, left, right, bottom-left, bottom, and bottom-right positions.\n *\n * This component offers standalone usage and is highly customizable through its\n * template and styling. It leverages Angular's change detection strategy 'OnPush'\n * for optimal performance.\n *\n * Additionally, it provides support for CSS variables to customize badge positioning\n *\n * ```css\n * --zen-badge-offset: unset; // Controls the overall offset of the badge\n * --zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.\n * --zen-badge-offset-y: unset; // Controls the vertical offset of the badge.\n * ```\n *\n * @example Text 🦆\n *\n * @component\n * @selector `zen-badge`,`[zenBadge]`\n *\n * @license BSD-2-Clause\n * @author Konrad Stępień \n * @link https://github.com/Kordrad/ng-zen\n */\n@Component({\n selector: 'zen-badge,[zenBadge]',\n standalone: true,\n template: `\n \n \n \n \n \n \n \n \n \n `,\n styleUrl: './badge.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZenBadgeComponent {}\n", "styleUrl": "./badge.component.scss", "assetsDirs": [], "styleUrlsData": "", @@ -172,7 +172,7 @@ }, { "name": "ZenPinComponent", - "id": "component-ZenPinComponent-a0a034e3bf2ebe52a11c708123404453db2f0f8818369b3080e549ba3746476a5e70262d9750d6cc8384daecc6be6a7260130ea2999acef255b14dfbf98181ed", + "id": "component-ZenPinComponent-f5995968e7f450be263b72b602e2f2a0c3f7d7630e6e99318ffec6b45f0f168dfb6727dad03038c4bf305c20da200cbb0a9a17c294c83c6074dfe3f195106be7", "file": "projects/cli/schematics/components/files/pin/pin.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": ["ViewEncapsulation.None"], @@ -198,7 +198,7 @@ "type": "", "optional": false, "description": "

Displays waving stream animation

\n", - "line": 36, + "line": 38, "rawdescription": "\n\nDisplays waving stream animation\n", "modifierKind": [148] } @@ -211,7 +211,7 @@ "name": "class.stream", "deprecated": false, "deprecationMessage": "", - "line": 41, + "line": 43, "type": "any", "decorators": [] } @@ -222,7 +222,7 @@ "description": "

The ZenPinComponent represents a simple visual pin with a circular shape.

\nExample :
<zen-pin />
Example :
", "rawdescription": "\n\nThe ZenPinComponent represents a simple visual pin with a circular shape.\n\n```html\n\n```\n\n```html\n```\n", "type": "component", - "sourceCode": "import {\r\n booleanAttribute,\r\n ChangeDetectionStrategy,\r\n Component,\r\n HostBinding,\r\n input,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * The ZenPinComponent represents a simple visual pin with a circular shape.\r\n *\r\n * ```html\r\n * \r\n * ```\r\n *\r\n * @example \r\n * @component\r\n * @selector `zen-pin`\r\n *\r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-pin',\r\n standalone: true,\r\n imports: [],\r\n template: ``,\r\n styleUrl: './pin.component.scss',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenPinComponent {\r\n /**\r\n * Displays waving stream animation\r\n */\r\n readonly stream = input(false, {\r\n transform: booleanAttribute,\r\n });\r\n\r\n @HostBinding('class.stream')\r\n get classStream() {\r\n return this.stream();\r\n }\r\n}\r\n", + "sourceCode": "import {\r\n booleanAttribute,\r\n ChangeDetectionStrategy,\r\n Component,\r\n HostBinding,\r\n input,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/**\r\n * The ZenPinComponent represents a simple visual pin with a circular shape.\r\n *\r\n * ```html\r\n * \r\n * ```\r\n *\r\n * @example \r\n * @component\r\n * @selector `zen-pin`\r\n *\r\n * @license BSD-2-Clause\r\n * @author Konrad Stępień \r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-pin',\r\n standalone: true,\r\n imports: [],\r\n template: ``,\r\n styleUrl: './pin.component.scss',\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenPinComponent {\r\n /**\r\n * Displays waving stream animation\r\n */\r\n readonly stream = input(false, {\r\n transform: booleanAttribute,\r\n });\r\n\r\n @HostBinding('class.stream')\r\n get classStream() {\r\n return this.stream();\r\n }\r\n}\r\n", "styleUrl": "./pin.component.scss", "assetsDirs": [], "styleUrlsData": "", @@ -235,14 +235,14 @@ "name": "classStream", "type": "", "returnType": "", - "line": 41 + "line": 43 } } } }, { "name": "ZenTagComponent", - "id": "component-ZenTagComponent-7df2bee1119d46c9d8de78c4bc78f6d3162f7bb40316d7449c73ad0f9cb752c95fcdc05e016bc9ec184efc0c8e662c2ff33760cde9096b0b1dc374dd150539fb", + "id": "component-ZenTagComponent-5228e187c92b9212421b9a731ff7a0a9454a5fce400d56a32c5064c399c1f34718009176b252df35d2b32a63f44b1cf96d3c9c0a89438226dd6b322afd3ecc33", "file": "projects/cli/schematics/components/files/tag/tag.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], @@ -270,7 +270,7 @@ "description": "

The ZenTagComponent is a reusable UI component designed to display a tag or label.\nIt allows for custom content to be projected inside the tag.

\nExample :
<zen-tag>...</zen-tag>
Example :
", "rawdescription": "\n\nThe `ZenTagComponent` is a reusable UI component designed to display a tag or label.\nIt allows for custom content to be projected inside the tag.\n\n```html\n...\n```\n\n```html\n```\n", "type": "component", - "sourceCode": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/**\n * The `ZenTagComponent` is a reusable UI component designed to display a tag or label.\n * It allows for custom content to be projected inside the tag.\n *\n * ```html\n * ...\n * ```\n *\n * @example Simple tag\n * @component\n * @selector `zen-tag`\n *\n * @license BSD-2-Clause\n * @author Konrad Stępień \n * @link https://github.com/Kordrad/ng-zen\n */\n@Component({\n selector: 'zen-tag',\n standalone: true,\n template: ``,\n styleUrl: './tag.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZenTagComponent {}\n", + "sourceCode": "import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n\r\n/**\r\n * The `ZenTagComponent` is a reusable UI component designed to display a tag or label.\r\n * It allows for custom content to be projected inside the tag.\r\n *\r\n * ```html\r\n * ...\r\n * ```\r\n *\r\n * @example Simple tag\r\n * @component\r\n * @selector `zen-tag`\r\n *\r\n * @license BSD-2-Clause\r\n * @author Konrad Stępień \r\n * @link https://github.com/Kordrad/ng-zen\r\n */\r\n@Component({\r\n selector: 'zen-tag',\r\n standalone: true,\r\n template: ``,\r\n styleUrl: './tag.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class ZenTagComponent {}\r\n", "styleUrl": "./tag.component.scss", "assetsDirs": [], "styleUrlsData": "", @@ -329,7 +329,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenTagComponent, ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n render: () => ({\n template: `\n \n KS\n \n `,\n }),\n}" + "defaultValue": "{\r\n decorators: [\r\n moduleMetadata({\r\n imports: [ZenTagComponent, ZenAvatarComponent, ZenBadgeComponent],\r\n }),\r\n ],\r\n render: () => ({\r\n template: `\r\n \r\n KS\r\n \r\n `,\r\n }),\r\n}" }, { "name": "Component", @@ -359,7 +359,17 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n render: () => ({ template: `Zen Tag` }),\n}" + "defaultValue": "{\r\n render: () => ({ template: `Zen Tag` }),\r\n}" + }, + { + "name": "Emoji", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/cli/stories/components/badge.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n render: () => ({\n template: `\n \n \n 💬\n \n `,\n }),\n}" }, { "name": "Image", @@ -369,7 +379,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n args: {\n src: 'https://picsum.photos/32',\n },\n}" + "defaultValue": "{\r\n args: {\r\n src: 'https://picsum.photos/32',\r\n },\r\n}" }, { "name": "OnElement", @@ -379,7 +389,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\r\n decorators: [\r\n moduleMetadata({\r\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\r\n }),\r\n ],\r\n render: () => ({\r\n template: `\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n AB\r\n \r\n
\r\n `,\r\n }),\r\n}" + "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n render: () => ({\n template: `\n
\n \n \n \n \n\n \n \n AB\n \n
\n `,\n }),\n}" }, { "name": "preview", @@ -399,7 +409,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\r\n decorators: [\r\n moduleMetadata({\r\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\r\n }),\r\n ],\r\n args: {\r\n stream: true,\r\n },\r\n render: args => ({\r\n template: `\r\n \r\n \r\n \r\n \r\n `,\r\n }),\r\n}" + "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n args: {\n stream: true,\n },\n render: args => ({\n template: `\n \n \n \n \n `,\n }),\n}" }, { "name": "Text", @@ -409,7 +419,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n render: () => ({\n template: `\n
\n MI\n IB\n WP\n AI\n
`,\n }),\n}" + "defaultValue": "{\r\n render: () => ({\r\n template: `\r\n
\r\n MI\r\n IB\r\n WP\r\n AI\r\n
`,\r\n }),\r\n}" }, { "name": "WithBadge", @@ -511,6 +521,16 @@ "deprecationMessage": "", "type": "Story", "defaultValue": "{\n render: () => ({\n template: `\n \n TOP-LEFT\n TOP\n TOP-RIGHT\n LEFT\n RIGHT\n BOTTOM-LEFT\n BOTTOM\n BOTTOM-RIGHT\n \"picsum\"/\n \n `,\n }),\n}" + }, + { + "name": "Emoji", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/cli/stories/components/badge.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n render: () => ({\n template: `\n \n \n 💬\n \n `,\n }),\n}" } ], "projects/cli/stories/components/avatar.stories.ts": [ @@ -532,7 +552,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n args: {\n src: 'https://picsum.photos/32',\n },\n}" + "defaultValue": "{\r\n args: {\r\n src: 'https://picsum.photos/32',\r\n },\r\n}" }, { "name": "Text", @@ -542,7 +562,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n render: () => ({\n template: `\n
\n MI\n IB\n WP\n AI\n
`,\n }),\n}" + "defaultValue": "{\r\n render: () => ({\r\n template: `\r\n
\r\n MI\r\n IB\r\n WP\r\n AI\r\n
`,\r\n }),\r\n}" }, { "name": "WithBadge", @@ -564,7 +584,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenTagComponent, ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n render: () => ({\n template: `\n \n KS\n \n `,\n }),\n}" + "defaultValue": "{\r\n decorators: [\r\n moduleMetadata({\r\n imports: [ZenTagComponent, ZenAvatarComponent, ZenBadgeComponent],\r\n }),\r\n ],\r\n render: () => ({\r\n template: `\r\n \r\n KS\r\n \r\n `,\r\n }),\r\n}" }, { "name": "Default", @@ -574,7 +594,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n render: () => ({ template: `Zen Tag` }),\n}" + "defaultValue": "{\r\n render: () => ({ template: `Zen Tag` }),\r\n}" } ], "projects/cli/stories/components/pin.stories.ts": [ @@ -596,7 +616,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\r\n decorators: [\r\n moduleMetadata({\r\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\r\n }),\r\n ],\r\n render: () => ({\r\n template: `\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n AB\r\n \r\n
\r\n `,\r\n }),\r\n}" + "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n render: () => ({\n template: `\n
\n \n \n \n \n\n \n \n AB\n \n
\n `,\n }),\n}" }, { "name": "StreamAttribute", @@ -606,7 +626,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\r\n decorators: [\r\n moduleMetadata({\r\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\r\n }),\r\n ],\r\n args: {\r\n stream: true,\r\n },\r\n render: args => ({\r\n template: `\r\n \r\n \r\n \r\n \r\n `,\r\n }),\r\n}" + "defaultValue": "{\n decorators: [\n moduleMetadata({\n imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],\n }),\n ],\n args: {\n stream: true,\n },\n render: args => ({\n template: `\n \n \n \n \n `,\n }),\n}" } ], "projects/cli/.storybook/preview.ts": [ @@ -681,7 +701,7 @@ }, "routes": [], "coverage": { - "count": 20, + "count": 19, "status": "low", "files": [ { @@ -810,6 +830,16 @@ "coverageCount": "0/1", "status": "low" }, + { + "filePath": "projects/cli/stories/components/badge.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Emoji", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, { "filePath": "projects/cli/stories/components/pin.stories.ts", "type": "variable", diff --git a/projects/cli/schematics/components/files/avatar/avatar.component.ts b/projects/cli/schematics/components/files/avatar/avatar.component.ts index fb21711..1d65b78 100644 --- a/projects/cli/schematics/components/files/avatar/avatar.component.ts +++ b/projects/cli/schematics/components/files/avatar/avatar.component.ts @@ -27,6 +27,9 @@ import { * * @component * @selector `zen-avatar` + * + * @license BSD-2-Clause + * @author Konrad Stępień * @link https://github.com/Kordrad/ng-zen */ @Component({ diff --git a/projects/cli/schematics/components/files/badge/badge.component.ts b/projects/cli/schematics/components/files/badge/badge.component.ts index bc3d1ac..f15bbec 100644 --- a/projects/cli/schematics/components/files/badge/badge.component.ts +++ b/projects/cli/schematics/components/files/badge/badge.component.ts @@ -21,9 +21,14 @@ import { * --zen-badge-offset-x: unset; // Controls the horizontal offset of the badge. * --zen-badge-offset-y: unset; // Controls the vertical offset of the badge. * ``` - + * + * @example Text 🦆 + * + * @component * @selector `zen-badge`,`[zenBadge]` * + * @license BSD-2-Clause + * @author Konrad Stępień * @link https://github.com/Kordrad/ng-zen */ @Component({ diff --git a/projects/cli/schematics/components/files/pin/pin.component.ts b/projects/cli/schematics/components/files/pin/pin.component.ts index b3aa1cb..9ff4d3b 100644 --- a/projects/cli/schematics/components/files/pin/pin.component.ts +++ b/projects/cli/schematics/components/files/pin/pin.component.ts @@ -18,6 +18,8 @@ import { * @component * @selector `zen-pin` * + * @license BSD-2-Clause + * @author Konrad Stępień * @link https://github.com/Kordrad/ng-zen */ @Component({ diff --git a/projects/cli/stories/components/badge.stories.ts b/projects/cli/stories/components/badge.stories.ts index 0a049d2..24c61a8 100644 --- a/projects/cli/stories/components/badge.stories.ts +++ b/projects/cli/stories/components/badge.stories.ts @@ -1,5 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; +import { ZenAvatarComponent } from '../../schematics/components/files/avatar'; import { ZenBadgeComponent } from '../../schematics/components/files/badge'; import { OnElement } from './pin.stories'; import { AvatarWithTag as _AvatarWithTag } from './tag.stories'; @@ -50,5 +52,20 @@ export const Attribute: Story = { }), }; +export const Emoji: Story = { + decorators: [ + moduleMetadata({ + imports: [ZenAvatarComponent, ZenBadgeComponent], + }), + ], + render: () => ({ + template: ` + + + 💬 + + `, + }), +}; export const Avatar = OnElement; export const AvatarWithATag = _AvatarWithTag;