valtech-components 2.0.691 → 2.0.692

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

@@ -1,384 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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() {}
-}