valtech-components 2.0.688 → 2.0.689

package/src/lib/components/molecules/comment/comment.stories.ts

@@ -0,0 +1,384 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { CommentComponent } from './comment.component';
+import { CommentMetadata, CommentAuthor, CommentReaction, CommentAction, CommentMenuItem } from './types';
+
+const createAuthor = (overrides: Partial<CommentAuthor> = {}): CommentAuthor => ({
+  name: 'John Doe',
+  username: 'johndoe',
+  ...overrides,
+});
+
+const createReaction = (overrides: Partial<CommentReaction> = {}): CommentReaction => ({
+  token: 'like',
+  icon: 'heart-outline',
+  count: 0,
+  ...overrides,
+});
+
+const createAction = (overrides: Partial<CommentAction> = {}): CommentAction => ({
+  token: 'reply',
+  label: 'Reply',
+  icon: 'chatbubble-outline',
+  ...overrides,
+});
+
+const createMenuItem = (overrides: Partial<CommentMenuItem> = {}): CommentMenuItem => ({
+  token: 'edit',
+  label: 'Edit',
+  icon: 'pencil',
+  ...overrides,
+});
+
+const createCommentProps = (overrides: Partial<CommentMetadata> = {}): CommentMetadata => ({
+  token: 'comment-1',
+  author: createAuthor(),
+  content: 'This is a great post! Really enjoyed reading it.',
+  timestamp: '2 hours ago',
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createCommentProps();
+
+const withReactionsProps = createCommentProps({
+  token: 'comment-reactions',
+  author: createAuthor({ name: 'Jane Smith', username: 'janesmith', verified: true }),
+  content: 'Amazing content! This really helped me understand the topic better.',
+  timestamp: '1 hour ago',
+  reactions: [
+    createReaction({ token: 'like', icon: 'heart-outline', count: 42 }),
+    createReaction({ token: 'thumbsup', icon: 'thumbs-up-outline', count: 18 }),
+    createReaction({ token: 'laugh', icon: 'happy-outline', count: 7 }),
+  ],
+});
+
+const withActionsProps = createCommentProps({
+  token: 'comment-actions',
+  author: createAuthor({ name: 'Mike Johnson', username: 'mikej' }),
+  content: 'Does anyone know how to solve this issue?',
+  timestamp: '30 minutes ago',
+  actions: [
+    createAction({ token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }),
+    createAction({ token: 'share', label: 'Share', icon: 'share' }),
+  ],
+});
+
+const withMenuProps = createCommentProps({
+  token: 'comment-menu',
+  author: createAuthor({ name: 'Sarah Wilson', username: 'sarahw' }),
+  content: 'Here is my detailed review of the product...',
+  timestamp: '5 minutes ago',
+  edited: true,
+  menuItems: [
+    createMenuItem({ token: 'edit', label: 'Edit', icon: 'pencil' }),
+    createMenuItem({ token: 'delete', label: 'Delete', icon: 'trash', color: 'danger', dividerBefore: true }),
+    createMenuItem({ token: 'report', label: 'Report', icon: 'flag' }),
+  ],
+});
+
+const pinnedProps = createCommentProps({
+  token: 'comment-pinned',
+  author: createAuthor({ name: 'Admin', username: 'admin', verified: true }),
+  content: 'Important announcement: Please read the community guidelines before posting.',
+  timestamp: '1 day ago',
+  pinned: true,
+});
+
+const highlightedProps = createCommentProps({
+  token: 'comment-highlighted',
+  author: createAuthor({ name: 'Featured User', username: 'featured' }),
+  content: 'This comment was selected as the best answer!',
+  timestamp: '3 hours ago',
+  highlighted: true,
+  reactions: [
+    createReaction({ token: 'like', icon: 'heart', count: 156, active: true, activeColor: 'danger' }),
+  ],
+});
+
+const withRepliesProps = createCommentProps({
+  token: 'comment-parent',
+  author: createAuthor({ name: 'Original Poster', username: 'op' }),
+  content: 'What do you all think about this new feature?',
+  timestamp: '4 hours ago',
+  reactions: [
+    createReaction({ token: 'like', icon: 'heart-outline', count: 24 }),
+  ],
+  actions: [
+    createAction({ token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }),
+  ],
+  children: [
+    createCommentProps({
+      token: 'reply-1',
+      author: createAuthor({ name: 'Reply User 1', username: 'user1' }),
+      content: 'I think it\'s great! Really improves the workflow.',
+      timestamp: '3 hours ago',
+      reactions: [
+        createReaction({ token: 'like', icon: 'heart-outline', count: 8 }),
+      ],
+    }),
+    createCommentProps({
+      token: 'reply-2',
+      author: createAuthor({ name: 'Reply User 2', username: 'user2', verified: true }),
+      content: 'Agreed! The team did an excellent job on this one.',
+      timestamp: '2 hours ago',
+      reactions: [
+        createReaction({ token: 'like', icon: 'heart-outline', count: 5 }),
+      ],
+    }),
+  ],
+  replyCount: 5,
+});
+
+const collapsedProps = createCommentProps({
+  token: 'comment-collapsed',
+  author: createAuthor({ name: 'Hidden User', username: 'hidden' }),
+  content: 'This comment has been collapsed.',
+  timestamp: '6 hours ago',
+  collapsed: true,
+});
+
+const fullFeaturedProps = createCommentProps({
+  token: 'comment-full',
+  author: createAuthor({ name: 'Power User', username: 'poweruser', verified: true }),
+  content: 'Check out this link https://example.com and follow @johndoe for more updates! #trending',
+  timestamp: new Date(Date.now() - 3600000),
+  edited: true,
+  reactions: [
+    createReaction({ token: 'like', icon: 'heart-outline', count: 89, active: true, activeColor: 'danger' }),
+    createReaction({ token: 'thumbsup', icon: 'thumbs-up-outline', count: 34 }),
+    createReaction({ token: 'laugh', icon: 'happy-outline', count: 12 }),
+  ],
+  actions: [
+    createAction({ token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }),
+    createAction({ token: 'share', label: 'Share', icon: 'share' }),
+  ],
+  menuItems: [
+    createMenuItem({ token: 'edit', label: 'Edit', icon: 'pencil' }),
+    createMenuItem({ token: 'pin', label: 'Pin', icon: 'pin' }),
+    createMenuItem({ token: 'delete', label: 'Delete', icon: 'trash', color: 'danger', dividerBefore: true }),
+  ],
+});
+
+// Showcase props
+const showcaseComment1 = createCommentProps({
+  token: 'showcase-1',
+  author: createAuthor({ name: 'Alice Chen', username: 'alicec', verified: true }),
+  content: 'Just shipped a major update! Check out the new features and let us know what you think.',
+  timestamp: '2 hours ago',
+  reactions: [
+    createReaction({ token: 'like', icon: 'heart-outline', count: 234 }),
+    createReaction({ token: 'celebrate', icon: 'happy-outline', count: 56 }),
+  ],
+  actions: [
+    createAction({ token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }),
+  ],
+});
+
+const showcaseComment2 = createCommentProps({
+  token: 'showcase-2',
+  author: createAuthor({ name: 'Bob Martinez', username: 'bobm' }),
+  content: 'Great work! The performance improvements are very noticeable.',
+  timestamp: '1 hour ago',
+  reactions: [
+    createReaction({ token: 'like', icon: 'heart-outline', count: 18 }),
+  ],
+});
+
+const meta: Meta<CommentComponent> = {
+  title: 'Molecules/Comment',
+  component: CommentComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, CommentComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Comment configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'CommentMetadata',
+          detail: `{
+  token: string;
+  author: CommentAuthor;
+  content: string;
+  timestamp: string | Date;
+  reactions?: CommentReaction[];
+  actions?: CommentAction[];
+  menuItems?: CommentMenuItem[];
+  children?: CommentMetadata[];
+  edited?: boolean;
+  pinned?: boolean;
+  highlighted?: boolean;
+  collapsed?: boolean;
+  replyCount?: number;
+  autoLinkify?: boolean;
+  maxDepth?: number;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-comment
+
+A versatile comment component for forums, reviews, and social media.
+
+### Features
+
+- **Author Info**: Name, username, avatar, verified badge
+- **Reactions**: Like, love, laugh with counts
+- **Actions**: Reply, share buttons
+- **Menu**: Edit, delete, report options
+- **Nested Replies**: Recursive comment threading
+- **States**: Pinned, highlighted, collapsed, edited
+- **Auto-linkify**: URLs, @mentions, #hashtags
+
+### Usage
+
+\`\`\`html
+<val-comment
+  [props]="{
+    token: '1',
+    author: { name: 'John Doe', username: 'johnd', verified: true },
+    content: 'Great post!',
+    timestamp: '2 hours ago',
+    reactions: [{ token: 'like', icon: 'heart-outline', count: 42 }],
+    actions: [{ token: 'reply', label: 'Reply', icon: 'chatbubble-outline' }]
+  }"
+  (reactionClick)="onReaction($event)"
+  (actionClick)="onAction($event)"
+></val-comment>
+\`\`\`
+
+### Events
+
+- **authorClick**: When author name/avatar is clicked
+- **reactionClick**: When a reaction button is clicked
+- **actionClick**: When an action button is clicked
+- **menuItemClick**: When a menu item is selected
+- **loadMoreClick**: When "load more replies" is clicked
+- **collapseToggle**: When comment is collapsed/expanded
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CommentComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: defaultProps },
+  }),
+};
+
+export const WithReactions: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: withReactionsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comment with multiple reaction types and counts.',
+      },
+    },
+  },
+};
+
+export const WithActions: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: withActionsProps },
+  }),
+};
+
+export const WithMenu: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: withMenuProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comment with dropdown menu for edit, delete, and report actions.',
+      },
+    },
+  },
+};
+
+export const Pinned: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: pinnedProps },
+  }),
+};
+
+export const Highlighted: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: highlightedProps },
+  }),
+};
+
+export const WithReplies: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: withRepliesProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comment with nested replies showing threaded conversation.',
+      },
+    },
+  },
+};
+
+export const Collapsed: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: collapsedProps },
+  }),
+};
+
+export const FullFeatured: Story = {
+  render: () => ({
+    template: `<div style="max-width: 600px;"><val-comment [props]="commentProps"></val-comment></div>`,
+    props: { commentProps: fullFeaturedProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full-featured comment with reactions, actions, menu, and auto-linkified content.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Comment Thread</h3>
+
+        <val-comment [props]="comment1"></val-comment>
+        <val-comment [props]="comment2"></val-comment>
+      </div>
+    `,
+    props: {
+      comment1: showcaseComment1,
+      comment2: showcaseComment2,
+    },
+  }),
+};

package/src/lib/components/molecules/comment/types.ts

@@ -0,0 +1,181 @@
+import { Color } from '@ionic/core';
+import { AvatarMetadata } from '../../atoms/avatar/types';
+
+/**
+ * Author information for a comment.
+ */
+export interface CommentAuthor {
+  /** Display name */
+  name: string;
+  /** Username handle (without @) */
+  username?: string;
+  /** Author avatar configuration */
+  avatar?: AvatarMetadata;
+  /** Whether user is verified */
+  verified?: boolean;
+  /** Optional user ID or reference */
+  userId?: string;
+}
+
+/**
+ * Reaction configuration (like, love, laugh, etc.)
+ */
+export interface CommentReaction {
+  /** Unique identifier for this reaction type */
+  token: string;
+  /** Icon name (ionicon) */
+  icon: string;
+  /** Reaction count */
+  count: number;
+  /** Whether current user has reacted */
+  active?: boolean;
+  /** Icon color when active */
+  activeColor?: Color;
+  /** Icon color when inactive */
+  color?: Color;
+  /** Label for accessibility */
+  label?: string;
+}
+
+/**
+ * Action button configuration (reply, share, etc.)
+ */
+export interface CommentAction {
+  /** Unique identifier */
+  token: string;
+  /** Action label */
+  label: string;
+  /** Optional icon */
+  icon?: string;
+  /** Button color */
+  color?: Color;
+  /** Whether action is disabled */
+  disabled?: boolean;
+  /** Reactive content key */
+  contentKey?: string;
+  /** Component class for content lookup */
+  contentClass?: string;
+  /** Fallback label */
+  contentFallback?: string;
+}
+
+/**
+ * Menu item for the "more" dropdown (edit, delete, report, etc.)
+ */
+export interface CommentMenuItem {
+  /** Unique identifier */
+  token: string;
+  /** Menu item label */
+  label: string;
+  /** Optional icon */
+  icon?: string;
+  /** Item color (danger for delete, etc.) */
+  color?: Color;
+  /** Whether item is disabled */
+  disabled?: boolean;
+  /** Whether to show a divider before this item */
+  dividerBefore?: boolean;
+  /** Reactive content key */
+  contentKey?: string;
+  /** Component class for content lookup */
+  contentClass?: string;
+  /** Fallback label */
+  contentFallback?: string;
+}
+
+/**
+ * Main comment metadata interface.
+ * Supports recursive nesting via children property.
+ */
+export interface CommentMetadata {
+  /** Unique comment identifier */
+  token: string;
+  /** Comment author */
+  author: CommentAuthor;
+  /** Comment text content */
+  content: string;
+  /** Timestamp - can be string ("2 hours ago") or Date object */
+  timestamp: string | Date;
+  /** Available reactions */
+  reactions?: CommentReaction[];
+  /** Action buttons (reply, etc.) */
+  actions?: CommentAction[];
+  /** Menu items for "more" dropdown */
+  menuItems?: CommentMenuItem[];
+  /** Nested child comments (replies) */
+  children?: CommentMetadata[];
+  /** Whether comment was edited */
+  edited?: boolean;
+  /** Whether comment is pinned */
+  pinned?: boolean;
+  /** Whether comment is highlighted */
+  highlighted?: boolean;
+  /** Whether comment is collapsed */
+  collapsed?: boolean;
+  /** Total reply count (may differ from children.length if paginated) */
+  replyCount?: number;
+  /** Whether to auto-linkify URLs in content */
+  autoLinkify?: boolean;
+  /** Maximum nesting depth (default: 3) */
+  maxDepth?: number;
+  /** Current depth level (internal use) */
+  depth?: number;
+  /** Reactive content key for main content */
+  contentKey?: string;
+  /** Component class for content lookup */
+  contentClass?: string;
+  /** Fallback content */
+  contentFallback?: string;
+}
+
+/**
+ * Event emitted when author is clicked.
+ */
+export interface CommentAuthorClickEvent {
+  /** The author that was clicked */
+  author: CommentAuthor;
+  /** Parent comment token */
+  commentToken: string;
+}
+
+/**
+ * Event emitted when a reaction is clicked.
+ */
+export interface CommentReactionClickEvent {
+  /** The reaction that was clicked */
+  reaction: CommentReaction;
+  /** Parent comment token */
+  commentToken: string;
+  /** Whether reaction is now active */
+  isActive: boolean;
+}
+
+/**
+ * Event emitted when an action is clicked.
+ */
+export interface CommentActionClickEvent {
+  /** The action that was clicked */
+  action: CommentAction;
+  /** Parent comment token */
+  commentToken: string;
+}
+
+/**
+ * Event emitted when a menu item is clicked.
+ */
+export interface CommentMenuItemClickEvent {
+  /** The menu item that was clicked */
+  menuItem: CommentMenuItem;
+  /** Parent comment token */
+  commentToken: string;
+}
+
+/**
+ * Event emitted when load more replies is clicked.
+ */
+export interface CommentLoadMoreEvent {
+  /** Parent comment token */
+  commentToken: string;
+  /** Current loaded count */
+  currentCount: number;
+}

package/src/lib/components/molecules/comment-input/comment-input.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonCheckbox, IonTextarea } from '@ionic/angular/standalone';
+import { CommentInputMetadata } from './types';
+
+@Component({
+  selector: 'val-comment-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonCheckbox, IonTextarea],
+  template: `
+    <ion-textarea
+      [formControl]="props.control"
+      [counter]="props.showCounter !== false"
+      [maxlength]="props.maxLength"
+    ></ion-textarea>
+  `,
+  styleUrls: ['./comment-input.component.scss'],
+})
+/**
+ * val-comment-input
+ *
+ * A textarea input for multi-line comments, integrated with Angular forms.
+ *
+ * @example
+ * <val-comment-input [props]="{ control: myControl, maxLength: 200 }"></val-comment-input>
+ *
+ * @input props: CommentInputMetadata - Configuration for the textarea (form control, maxLength, etc.)
+ */
+export class CommentInputComponent implements OnInit {
+  /**
+   * Input configuration object.
+   * @type {CommentInputMetadata}
+   * @property control - The Angular FormControl for the textarea.
+   * @property maxLength - Maximum character length.
+   */
+  @Input() props: CommentInputMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}