// React — Atoms/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
};
export default meta;
 
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
  args: { variant: 'primary', children: 'Click me' },
};

// Angular — Atoms/Button.stories.ts
import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ButtonComponent } from './button.component';
 
const meta: Meta<ButtonComponent> = {
  title: 'Atoms/Button',
  component: ButtonComponent,
  decorators: [applicationConfig({ providers: [provideAnimations()] })],
};
export default meta;
 
type Story = StoryObj<ButtonComponent>;
export const Primary: Story = {
  args: { variant: 'primary' },
};

import { composeStories } from '@storybook/react';
import * as stories from './Button.stories';
 
const { Primary } = composeStories(stories);
// Primary is a fully configured component ready to render in tests

// An atom using CDK A11yModule — accessible button with focus indicator
import { Component, inject } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
 
@Component({
  selector: 'app-button',
  standalone: true,
  template: `<button #btn>{{ label }}</button>`,
})
export class ButtonComponent {
  private focusMonitor = inject(FocusMonitor);
  // CDK FocusMonitor provides keyboard vs. mouse focus distinction
  // Used to style focus ring only for keyboard navigation
}

// React — Button atom
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  onClick?: () => void;
  children: React.ReactNode;
}
 
export const Button: React.FC<ButtonProps> = ({
  variant,
  size,
  onClick,
  children,
}) => (
  <button
    className={`btn btn-${variant} btn-${size}`}
    onClick={onClick}
  >
    {children}
  </button>
);
// No side effects, no service dependencies — pure UI

// Angular — ButtonComponent atom
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
 
@Component({
  selector: 'app-button',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button
      [class]="'btn btn-' + variant + ' btn-' + size"
      (click)="clicked.emit()"
    >
      <ng-content></ng-content>
    </button>
  `,
})
export class ButtonComponent {
  @Input() variant: 'primary' | 'secondary' | 'ghost' = 'primary';
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Output() clicked = new EventEmitter<void>();
  // No inject() calls — no service dependencies
}

// React — SearchBar molecule (composes Input + Button atoms)
import { useState } from 'react';
import { Input } from './Input';
import { Button } from './Button';
 
interface SearchBarProps {
  onSearch: (query: string) => void;
}
 
export const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
  const [query, setQuery] = useState('');
 
  return (
    <div className="search-bar">
      <Input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <Button variant="primary" size="md" onClick={() => onSearch(query)}>
        Search
      </Button>
    </div>
  );
};
// Local state only — no external service calls

// Angular — SearchBarComponent molecule
import { Component, Output, EventEmitter } from '@angular/core';
import { ButtonComponent } from './button.component';
import { InputComponent } from './input.component';
import { FormsModule } from '@angular/forms';
 
@Component({
  selector: 'app-search-bar',
  standalone: true,
  imports: [ButtonComponent, InputComponent, FormsModule],
  template: `
    <div class="search-bar">
      <app-input [(ngModel)]="query" placeholder="Search..."></app-input>
      <app-button variant="primary" (clicked)="onSearch()">Search</app-button>
    </div>
  `,
})
export class SearchBarComponent {
  query = '';
  @Output() search = new EventEmitter<string>();
 
  onSearch(): void {
    this.search.emit(this.query);
  }
  // No inject() for external services — local state only
}

// React — Header organism (composes Logo atom + SearchBar molecule + NavMenu molecule)
import { useFetch } from '../hooks/useFetch';
import { Logo } from './Logo';
import { SearchBar } from './SearchBar';
import { NavMenu } from './NavMenu';
 
interface User { id: string; name: string; avatarUrl: string; }
 
export const Header: React.FC = () => {
  // Side effects belong at organism level and above
  const { data: user } = useFetch<User>('/api/me');
 
  return (
    <header className="header">
      <Logo />
      <SearchBar onSearch={(q) => console.log('search:', q)} />
      <NavMenu user={user} />
    </header>
  );
};

// Angular — HeaderComponent organism
import { Component, inject } from '@angular/core';
import { LogoComponent } from './logo.component';
import { SearchBarComponent } from './search-bar.component';
import { NavMenuComponent } from './nav-menu.component';
import { AuthService } from '../services/auth.service';
 
@Component({
  selector: 'app-header',
  standalone: true,
  imports: [LogoComponent, SearchBarComponent, NavMenuComponent],
  template: `
    <header class="header">
      <app-logo></app-logo>
      <app-search-bar (search)="onSearch($event)"></app-search-bar>
      <app-nav-menu [user]="user$ | async"></app-nav-menu>
      <ng-content></ng-content>
    </header>
  `,
})
export class HeaderComponent {
  // inject() at organism level — service dependency is appropriate here
  private authService = inject(AuthService);
  user$ = this.authService.currentUser$;
 
  onSearch(query: string): void {
    console.log('search:', query);
  }
}

// Anti-pattern — atom with API call
@Component({ selector: 'app-badge' })
export class BadgeComponent {
  private http = inject(HttpClient); // WRONG: atom with service dependency
  count$ = this.http.get<number>('/api/notifications/count');
}
 
// Correct — receive count as Input from an organism above
@Component({ selector: 'app-badge' })
export class BadgeComponent {
  @Input() count = 0; // Data flows down from organism
}