ng-comps 1.0.2 → 2.0.0

package/src/stories/mf-sidenav.stories.ts

@@ -1,331 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { Component, signal } from '@angular/core';
-import { MfSidenavComponent, MfSidenavNavItem } from '../app/components/sidenav';
-
-const NAV_ITEMS: MfSidenavNavItem[] = [
-  { id: 'home', icon: 'home', label: 'Home', active: true },
-  { id: 'dashboard', icon: 'dashboard', label: 'Dashboard' },
-  { id: 'analytics', icon: 'bar_chart', label: 'Analytics', badge: 3 },
-  { id: 'users', icon: 'group', label: 'Users' },
-  { id: 'messages', icon: 'mail', label: 'Messages', badge: 12 },
-  { id: 'settings', icon: 'settings', label: 'Settings' },
-  { id: 'archived', icon: 'archive', label: 'Archived', disabled: true },
-];
-
-const meta: Meta<MfSidenavComponent> = {
-  title: 'Organisms/MfSidenav',
-  component: MfSidenavComponent,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: `
-**MfSidenav** is the side navigation component from the ng-comps library.
-It wraps Angular Material \`mat-sidenav-container\` with custom styling, Material icons, active and disabled states, notification badges, and a customizable header.
-
-**Two usage patterns:**
-
-1. **Declarative nav items** - Provide \`navItems\`, \`headerTitle\`, and \`headerIcon\`.
-2. **Content projection** - Project \`[mfSidenavContent]\` for full control over the panel content.
-
-Main content is always projected through the default slot.
-
-| Property       | Description                                                  |
-|----------------|--------------------------------------------------------------|
-| \`navItems\`     | Array of items \`{ id, icon, label, active?, disabled?, badge? }\` |
-| \`headerTitle\`  | Sidenav header title                                         |
-| \`headerIcon\`   | Header Material icon                                         |
-| \`opened\`       | Whether the sidenav is open                                  |
-| \`mode\`         | \`side\` · \`over\` · \`push\`                                 |
-| \`position\`     | \`start\` (left) · \`end\` (right)                            |
-| \`sidenavWidth\` | Panel width (CSS value)                                      |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    opened: { control: 'boolean', description: 'Open or closed' },
-    mode: {
-      control: 'select',
-      options: ['side', 'over', 'push'],
-      description: 'Opening mode',
-    },
-    position: {
-      control: 'select',
-      options: ['start', 'end'],
-      description: 'Panel position',
-    },
-    sidenavWidth: { control: 'text', description: 'Side panel width' },
-    headerTitle: { control: 'text', description: 'Header title' },
-    headerIcon: { control: 'text', description: 'Header Material icon' },
-    mfOpenedChange: { action: 'mfOpenedChange' },
-    mfNavItemClick: { action: 'mfNavItemClick' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfSidenavComponent>;
-
-const mainContent = `
-  <div style="padding: 24px;">
-    <h2 style="margin: 0 0 8px; font-size: 1.25rem; color: var(--mf-color-on-surface);">Main content</h2>
-    <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem; margin: 0;">
-      The side panel is rendered on the left. You can interact with the menu items.
-    </p>
-  </div>
-`;
-
-export const Default: Story = {
-  name: 'With navItems (side mode)',
-  args: {
-    opened: true,
-    mode: 'side',
-    headerTitle: 'MF App',
-    headerIcon: 'apps',
-    navItems: NAV_ITEMS,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="height: 480px;">
-        <mf-sidenav
-          [opened]="opened"
-          [mode]="mode"
-          [position]="position"
-          [navItems]="navItems"
-          [headerTitle]="headerTitle"
-          [headerIcon]="headerIcon"
-          [sidenavWidth]="sidenavWidth || '260px'"
-          (mfNavItemClick)="mfNavItemClick($event)"
-          (mfOpenedChange)="mfOpenedChange($event)"
-        >
-          ${mainContent}
-        </mf-sidenav>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfSidenavComponent] },
-  }),
-};
-
-export const Over: Story = {
-  name: 'Over mode',
-  args: {
-    opened: true,
-    mode: 'over',
-    headerTitle: 'MF App',
-    headerIcon: 'apps',
-    navItems: NAV_ITEMS,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="height: 480px;">
-        <mf-sidenav
-          [opened]="opened"
-          [mode]="mode"
-          [navItems]="navItems"
-          [headerTitle]="headerTitle"
-          [headerIcon]="headerIcon"
-          (mfNavItemClick)="mfNavItemClick($event)"
-        >
-          ${mainContent}
-        </mf-sidenav>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfSidenavComponent] },
-  }),
-};
-
-export const EndPosition: Story = {
-  name: 'Right position',
-  args: {
-    opened: true,
-    mode: 'side',
-    position: 'end',
-    headerTitle: 'Details',
-    headerIcon: 'info',
-    navItems: [
-      { id: 'notifications', icon: 'notifications', label: 'Notifications', badge: 5, active: true },
-      { id: 'messages', icon: 'mail', label: 'Messages', badge: 2 },
-      { id: 'activity', icon: 'history', label: 'Recent activity' },
-      { id: 'bookmarks', icon: 'bookmark', label: 'Saved' },
-    ],
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="height: 480px;">
-        <mf-sidenav
-          [opened]="opened"
-          [mode]="mode"
-          [position]="position"
-          [navItems]="navItems"
-          [headerTitle]="headerTitle"
-          [headerIcon]="headerIcon"
-          (mfNavItemClick)="mfNavItemClick($event)"
-        >
-          ${mainContent}
-        </mf-sidenav>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfSidenavComponent] },
-  }),
-};
-
-export const Closed: Story = {
-  name: 'Closed',
-  args: {
-    opened: false,
-    mode: 'over',
-    headerTitle: 'MF App',
-    headerIcon: 'apps',
-    navItems: NAV_ITEMS,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="height: 480px;">
-        <mf-sidenav
-          [opened]="opened"
-          [mode]="mode"
-          [navItems]="navItems"
-          [headerTitle]="headerTitle"
-          [headerIcon]="headerIcon"
-        >
-          <div style="padding: 24px;">
-            <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem;">
-              The sidenav is closed. In <code>over</code> mode it overlays the content when opened.
-            </p>
-          </div>
-        </mf-sidenav>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfSidenavComponent] },
-  }),
-};
-
-@Component({
-  selector: 'mf-sidenav-interactive-demo',
-  imports: [MfSidenavComponent],
-  template: `
-    <div style="height: 520px; display: flex; flex-direction: column;">
-      <div style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mf-color-border); background: var(--mf-color-surface); flex-shrink: 0;">
-        <button
-          type="button"
-          (click)="toggle()"
-          style="display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--mf-color-border); border-radius: 9999px; background: var(--mf-color-surface); font-family: var(--mf-font-base); font-size: 0.875rem; font-weight: 500; cursor: pointer; color: var(--mf-color-on-surface);"
-        >
-          <span style="font-family: 'Material Icons'; font-size: 18px; line-height: 1;">menu</span>
-          {{ opened() ? 'Close panel' : 'Open panel' }}
-        </button>
-        <span style="font-size: 0.875rem; color: var(--mf-color-neutral-400);">Panel: {{ opened() ? 'open' : 'closed' }}</span>
-      </div>
-      <div style="flex: 1; min-height: 0;">
-        <mf-sidenav
-          [opened]="opened()"
-          mode="over"
-          headerTitle="MF App"
-          headerIcon="apps"
-          [navItems]="items()"
-          (mfOpenedChange)="opened.set($event)"
-          (mfNavItemClick)="onNavItemClick($event)"
-        >
-          <div style="padding: 24px;">
-            <h2 style="margin: 0 0 8px; font-size: 1.25rem; color: var(--mf-color-on-surface);">{{ activeLabel() }}</h2>
-            <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem; margin: 0;">
-              Click the menu items to change the active section.
-            </p>
-          </div>
-        </mf-sidenav>
-      </div>
-    </div>
-  `,
-})
-class MfSidenavInteractiveDemoComponent {
-  readonly opened = signal(false);
-  readonly activeId = signal('home');
-
-  readonly items = signal<MfSidenavNavItem[]>([
-    { id: 'home', icon: 'home', label: 'Home', active: true },
-    { id: 'dashboard', icon: 'dashboard', label: 'Dashboard' },
-    { id: 'analytics', icon: 'bar_chart', label: 'Analytics', badge: 3 },
-    { id: 'users', icon: 'group', label: 'Users' },
-    { id: 'messages', icon: 'mail', label: 'Messages', badge: 12 },
-    { id: 'settings', icon: 'settings', label: 'Settings' },
-  ]);
-
-  readonly activeLabel = () =>
-    this.items().find((i) => i.id === this.activeId())?.label ?? 'Home';
-
-  toggle(): void {
-    this.opened.set(!this.opened());
-  }
-
-  onNavItemClick(item: MfSidenavNavItem): void {
-    this.activeId.set(item.id);
-    this.items.set(
-      this.items().map((i) => ({ ...i, active: i.id === item.id })),
-    );
-    this.opened.set(false);
-  }
-}
-
-export const Interactive: Story = {
-  name: 'Interactive (toggle + selection)',
-  render: () => ({
-    template: `<mf-sidenav-interactive-demo />`,
-    moduleMetadata: { imports: [MfSidenavInteractiveDemoComponent] },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Panel in `over` mode with a toggle button and active item updates on click.',
-      },
-    },
-  },
-};
-
-export const ContentProjection: Story = {
-  name: 'Content projection (custom)',
-  render: () => ({
-    template: `
-      <div style="height: 480px;">
-        <mf-sidenav opened="true" mode="side" sidenavWidth="240px">
-          <div mfSidenavContent style="display: flex; flex-direction: column; height: 100%;">
-            <div style="padding: 20px 16px 16px; border-bottom: 1px solid var(--mf-color-border);">
-              <span style="font-family: var(--mf-font-display); font-weight: 700; color: var(--mf-color-brand);">Workspace</span>
-            </div>
-            <nav style="flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px;">
-              <a href="#" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--mf-color-on-surface); font-size: 0.875rem; background: var(--mf-color-brand-light); color: var(--mf-color-brand); font-weight: 600;">
-                <span class="material-icons" style="font-size: 20px;">star</span> Highlights
-              </a>
-              <a href="#" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--mf-color-neutral-600); font-size: 0.875rem;">
-                <span class="material-icons" style="font-size: 20px;">folder</span> Projects
-              </a>
-              <a href="#" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--mf-color-neutral-600); font-size: 0.875rem;">
-                <span class="material-icons" style="font-size: 20px;">people</span> Team
-              </a>
-            </nav>
-          </div>
-          <div style="padding: 24px;">
-            <h2 style="margin: 0 0 8px; font-size: 1.25rem; color: var(--mf-color-on-surface);">Custom panel</h2>
-            <p style="color: var(--mf-color-neutral-600); font-size: 0.875rem; margin: 0;">
-              Using <code>[mfSidenavContent]</code> to project fully custom content.
-            </p>
-          </div>
-        </mf-sidenav>
-      </div>
-    `,
-    moduleMetadata: { imports: [MfSidenavComponent] },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'When `navItems` is not provided, the `[mfSidenavContent]` slot is used to project custom HTML.',
-      },
-    },
-  },
-};

package/src/stories/mf-table.stories.ts

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfTableComponent } from '../app/components/table';
-
-const COLUMNS = [
-  { key: 'name', header: 'Name', sortable: true },
-  { key: 'role', header: 'Role' },
-  { key: 'status', header: 'Status' },
-];
-
-const DATA = [
-  { name: 'Ana Torres', role: 'Frontend', status: 'Active' },
-  { name: 'Luis Vega', role: 'Design Ops', status: 'Pending' },
-  { name: 'Marta Solis', role: 'QA', status: 'Active' },
-];
-
-const meta: Meta<MfTableComponent> = {
-  title: 'Organisms/MfTable',
-  component: MfTableComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfTable** renders data with native table semantics and explicit row actions.
-
-The v1 contract avoids clickable rows as the default interaction pattern. If a row needs actions, render focusable controls inside cells and give them contextual accessible names.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'striped', 'bordered'],
-    },
-    rowActionLabel: { control: 'text', description: 'Visible label for the row action button' },
-    rowActionHeader: { control: 'text', description: 'Header text for the action column' },
-    mfSortChange: { action: 'mfSortChange' },
-    mfRowAction: { action: 'mfRowAction' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfTableComponent>;
-
-export const Default: Story = {
-  args: {
-    columns: COLUMNS,
-    data: DATA,
-  },
-};
-
-export const WithExplicitActions: Story = {
-  name: 'With Explicit Actions',
-  args: {
-    columns: COLUMNS,
-    data: DATA,
-    rowActionLabel: 'View details',
-    rowActionHeader: 'Actions',
-    rowActionAriaLabel: (row) => `View details for ${String(row['name'])}`,
-  },
-};
-
-export const IncorrectUsage: Story = {
-  name: 'Incorrect Usage',
-  render: () => ({
-    template: `
-      <section style="max-width: 720px; border: 1px solid var(--mf-color-border); border-radius: 16px; padding: 20px; background: var(--mf-color-surface);">
-        <h2 style="margin: 0 0 12px; font-size: 1rem;">Anti-patterns</h2>
-        <ul style="margin: 0 0 16px; padding-left: 18px;">
-          <li>Making the entire row clickable with \`(click)\` on \`tr\`.</li>
-          <li>Using color as the only status indicator.</li>
-          <li>Repeating the same accessible name for every row action.</li>
-        </ul>
-        <pre style="margin: 0; padding: 16px; border-radius: 12px; background: #111827; color: #f9fafb; overflow: auto;"><code>&lt;tr (click)="openDetail(row)"&gt;...&lt;/tr&gt;</code></pre>
-      </section>
-    `,
-  }),
-};

package/src/stories/mf-toolbar.stories.ts

@@ -1,112 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { MfToolbarComponent } from '../app/components/toolbar';
-import { MfButtonComponent } from '../app/components/button';
-import { MfIconComponent } from '../app/components/icon';
-
-const meta: Meta<MfToolbarComponent> = {
-  title: 'Organisms/MfToolbar',
-  component: MfToolbarComponent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**MfToolbar** is the toolbar component from the ng-comps library.
-It uses Angular Material \`mat-toolbar\` under the hood with a clean, minimal presentation.
-
-| Variant        | When to use it                     |
-|----------------|------------------------------------|
-| \`surface\`      | Default toolbar on a light surface |
-| \`brand\`        | Toolbar using brand color          |
-| \`transparent\`  | Over images or gradient backgrounds |
-        `,
-      },
-    },
-  },
-  argTypes: {
-    title: { control: 'text', description: 'Toolbar title' },
-    variant: {
-      control: 'select',
-      options: ['surface', 'brand', 'transparent'],
-      description: 'Visual variant',
-    },
-    bordered: { control: 'boolean', description: 'Bottom border' },
-    sticky: { control: 'boolean', description: 'Sticky position' },
-    elevated: { control: 'boolean', description: 'Subtle shadow' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<MfToolbarComponent>;
-
-export const Surface: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-toolbar [title]="title" [variant]="variant" [bordered]="bordered">
-        <mf-button mfToolbarEnd label="Sign in" variant="outlined" size="sm" />
-        <mf-button mfToolbarEnd label="Register" variant="filled" size="sm" />
-      </mf-toolbar>
-    `,
-    moduleMetadata: { imports: [MfToolbarComponent, MfButtonComponent] },
-  }),
-  args: {
-    title: 'MF Components',
-    variant: 'surface',
-    bordered: true,
-  },
-};
-
-export const Brand: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mf-toolbar [title]="title" variant="brand" [bordered]="bordered">
-        <mf-button mfToolbarEnd label="Dashboard" variant="text" size="sm" />
-        <mf-button mfToolbarEnd label="Settings" variant="text" size="sm" />
-      </mf-toolbar>
-    `,
-    moduleMetadata: { imports: [MfToolbarComponent, MfButtonComponent] },
-  }),
-  args: {
-    title: 'Dashboard',
-    bordered: true,
-  },
-};
-
-export const WithIcons: Story = {
-  name: 'With icons',
-  render: () => ({
-    template: `
-      <mf-toolbar title="My App" variant="surface" [bordered]="true" [elevated]="true">
-        <mf-icon mfToolbarEnd name="notifications" color="muted" />
-        <mf-icon mfToolbarEnd name="settings" color="muted" />
-        <mf-icon mfToolbarEnd name="account_circle" size="lg" color="brand" />
-      </mf-toolbar>
-    `,
-    moduleMetadata: { imports: [MfToolbarComponent, MfIconComponent] },
-  }),
-};
-
-export const Elevated: Story = {
-  render: () => ({
-    template: `
-      <mf-toolbar title="Elevated" [elevated]="true" [bordered]="false">
-        <mf-button mfToolbarEnd label="Action" variant="filled" size="sm" />
-      </mf-toolbar>
-    `,
-    moduleMetadata: { imports: [MfToolbarComponent, MfButtonComponent] },
-  }),
-};
-
-export const Transparent: Story = {
-  render: () => ({
-    template: `
-      <div style="background: linear-gradient(135deg, var(--mf-color-primary-700), var(--mf-color-primary-900)); padding: 0; border-radius: var(--mf-radius-lg);">
-        <mf-toolbar title="On gradient" variant="transparent" [bordered]="false" />
-      </div>
-    `,
-    moduleMetadata: { imports: [MfToolbarComponent] },
-  }),
-};

package/src/stories/user.ts

@@ -1,3 +0,0 @@
-export interface User {
-  name: string;
-}

package/tsconfig.app.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
-}

package/tsconfig.json

@@ -1,33 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "preserve"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "vitest/globals"
-    ]
-  },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.spec.ts"
-  ]
-}

package/vercel.json

@@ -1,6 +0,0 @@
-{
-  "buildCommand": "npm run build-storybook",
-  "outputDirectory": "storybook-static",
-  "framework": null,
-  "installCommand": "npm ci"
-}