Release from Development

[anandmindfire]

Release from Development

New Components or Component API Changes

• DetailViewPage: New compound page template with slots (Root, TopNav, Header, Actions, Metadata, Content, RelatedList, BottomNav) for data-management detail views, supporting theme switching, loading skeleton state, metadata display, and related items list with keyboard activation
• NotificationCenter: New compound dropdown component with subcomponents (Trigger, Content, Header, Filters, List, Item, Footer) featuring unread badge, type/priority filtering, per-item actions (read/flag/dismiss), and "See all" navigation
• Timeline: New timeline view component with multiple visual variants (default/minimal/compact/glow), vertical/horizontal orientations, filtering, optional details drawer, and loading skeleton support
• Badge: Extended variant prop to include "none" option for non-animated badges
• ButtonWithIcon: Updated loading state rendering to position spinner relative to text based on iconPosition prop (right places children before spinner)
• Checkbox: Added dynamic getCheckmarkColor() helper for variant-aware checkmark color; updated primary variant to use indigo colors and subtle/glass to use accent/foreground colors
• ButtonGroupDemo: Enhanced with useMemo for dynamic item generation based on selected variant; added wrap toggle handler that reconciles selected values
• Added demo components: DetailViewPageDemo, NotificationCenterDemo, TimelineViewPageDemo for docs site

Bug Fixes

• CSS: Fixed missing closing brace in custom styles; added overflow handling to prevent notification center dropdown clipping in docs preview
• CLI tool config: Corrected templateLayoutUrl (now points to registry base) and templateLayoutDir (changed from src/templates to src/components/templates)

Tooling / Config Changes

• Tailwind updates: Bumped @tailwindcss/postcss and tailwindcss to ^4.1.14 across docs, POC, and Storybook apps
• Registry: Added three new template entries (notification-center, detail-view-page, timeline-view-page) with component dependencies and external package requirements
• Storybook: Added shimmer keyframe animation CSS variable for loading state indicators
• Call-to-action template: Updated newsletter CTA submission handling to use promise-based delay (500ms) instead of callback-based setTimeout

Docs / Storybook Updates

• Comprehensive Storybook stories: Added story sets for DetailViewPage (Default/DarkTheme/Loading/EmptyRelated/CompoundComposition), NotificationCenter (Default/LightMode/DarkMode/Composable variants), and Timeline (19+ stories covering variants, orientations, filters, details drawer, loading states, dark mode)
• MDX documentation: Added full template pages for detail-view-page, timeline-view, and notification-center with usage examples, prop tables, and installation instructions
• Component index updates: Extended all-components and all-templates pages with new components and sections (Exploding Input, Notification Center, Detail View Page, Timeline View)
• Docs sidebar: Updated v1.0.3 sidebar with new template entries and reorganized sections for better navigation
• Button documentation: Reorganized button-related docs with improved table-of-contents structure and consistent heading levels

Tests Added

• ButtonWithIcon: Unit tests validating spinner position based on iconPosition prop (appears after text when "right", before text otherwise)
• DetailViewPage: Comprehensive test suite covering rendering, navigation, metadata display, related items, action buttons, loading state, and compound composition
• NotificationCenter: Full test suite validating popup behavior, unread badge, sorting, filtering, row interactions, mark-as-read, flag toggling, and dropdown actions
• Timeline: Test suite covering item rendering, date ordering, filtering, keyboard interaction, loading state, skeleton rendering, and variant switching

Breaking Changes

None

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 825f6be6-276f-4b8f-8bb1-6afd61efddb6

📥 Commits

Reviewing files that changed from the base of the PR and between d7b8863 and 2b22d91.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml

📒 Files selected for processing (48)

• apps/docs/package.json
• apps/docs/src/components/Demo/ButtonGroupDemo.tsx
• apps/docs/src/components/Demo/DetailViewPageDemo.tsx
• apps/docs/src/components/Demo/NotificationCenterDemo.tsx
• apps/docs/src/components/Demo/TimelineViewPageDemo.tsx
• apps/docs/src/components/UI/badge/index.tsx
• apps/docs/src/components/UI/button-with-icon/index.tsx
• apps/docs/src/components/UI/checkbox/index.tsx
• apps/docs/src/components/UI/detail-view-page/index.tsx
• apps/docs/src/components/UI/notification-center/index.tsx
• apps/docs/src/components/UI/timeline-view-page/index.tsx
• apps/docs/src/css/custom.css
• apps/docs/versioned_docs/version-1.0.3/components/all-components/index.mdx
• apps/docs/versioned_docs/version-1.0.3/components/all-layouts/index.mdx
• apps/docs/versioned_docs/version-1.0.3/components/all-templates/index.mdx
• apps/docs/versioned_docs/version-1.0.3/components/badge.mdx
• apps/docs/versioned_docs/version-1.0.3/components/button.mdx
• apps/docs/versioned_docs/version-1.0.3/components/checkbox.mdx
• apps/docs/versioned_docs/version-1.0.3/templates/pages/data-management/detail-view-page.mdx
• apps/docs/versioned_docs/version-1.0.3/templates/pages/data-management/timeline-view.mdx
• apps/docs/versioned_docs/version-1.0.3/templates/pages/notification-center-page.mdx
• apps/docs/versioned_sidebars/version-1.0.3-sidebars.json
• apps/poc/package.json
• apps/storybook/package.json
• apps/storybook/src/components/badge/index.tsx
• apps/storybook/src/components/button-group/button-group.stories.tsx
• apps/storybook/src/components/button-with-icon/index.tsx
• apps/storybook/src/components/checkbox/index.tsx
• apps/storybook/src/index.css
• apps/storybook/src/templates/notification-center/index.tsx
• apps/storybook/src/templates/notification-center/notification-center.stories.tsx
• apps/storybook/src/templates/pages/data-management/detail-view-page/detail-view-page.stories.tsx
• apps/storybook/src/templates/pages/data-management/detail-view-page/index.tsx
• apps/storybook/src/templates/pages/data-management/timeline-view-page/index.tsx
• apps/storybook/src/templates/pages/data-management/timeline-view-page/timeline-view.stories.tsx
• packages/cli-tool/templates/ignix.config.js
• packages/registry/components/badge/index.tsx
• packages/registry/components/buttonwithicon/button-with-icon.test.tsx
• packages/registry/components/buttonwithicon/index.tsx
• packages/registry/components/checkbox/index.tsx
• packages/registry/registry.json
• packages/registry/templates/pages/detail-view-page/detail-view-page.test.tsx
• packages/registry/templates/pages/detail-view-page/index.tsx
• packages/registry/templates/pages/notification-center/index.tsx
• packages/registry/templates/pages/notification-center/notification-center.test.tsx
• packages/registry/templates/pages/timeline-view-page/index.tsx
• packages/registry/templates/pages/timeline-view-page/timeline-view.test.tsx
• packages/registry/templates/sections/call-to-action/index.tsx

---

Walkthrough

Introduces three new UI templates (Notification Center, Detail View Page, Timeline) across docs, Storybook, and registry with tests and docs. Also updates Badge, Checkbox, and ButtonWithIcon behaviors, reorganizes docs indices/TOC, bumps Tailwind deps, adjusts CLI config, and minor CSS/CTA tweaks.

Changes

Timeline View Page feature

Layer / File(s)	Summary
Docs Timeline UI component and demo apps/docs/src/components/UI/timeline-view-page/index.tsx, apps/docs/src/components/Demo/TimelineViewPageDemo.tsx	Adds Timeline component with variants/orientations, filters, drawer; interactive demo renders and generates code.
Storybook Timeline template and stories apps/storybook/src/templates/pages/data-management/timeline-view-page/*	Template implements Timeline and details drawer; stories cover variants, orientations, filters, loading, and dark mode.
Versioned Timeline docs page apps/docs/versioned_docs/.../templates/pages/data-management/timeline-view.mdx	Docs include install, usage, API, and internal components.
Registry timeline tests packages/registry/templates/pages/timeline-view-page/timeline-view.test.tsx	Tests cover rendering, filters, loading, drawer, orientations, and components.
Registry/Sidebar wiring for Timeline packages/registry/registry.json, apps/docs/versioned_sidebars/...json	Adds registry entry and sidebar items for Timeline.

Detail View Page feature

Layer / File(s)	Summary
Docs DetailViewPage component apps/docs/src/components/UI/detail-view-page/index.tsx	Compound page with Top/Bottom nav, Header, Actions, Metadata, Content, RelatedList, and Skeleton.
Docs DetailViewPage demo apps/docs/src/components/Demo/DetailViewPageDemo.tsx	Interactive preview with labels/styles and code tab.
Storybook DetailViewPage template apps/storybook/src/templates/pages/data-management/detail-view-page/index.tsx	Exports composed page and slots.
Storybook stories for DetailViewPage .../detail-view-page.stories.tsx	Interactive, dark, loading, empty, and compound composition stories.
Versioned Detail View Page docs apps/docs/versioned_docs/.../detail-view-page.mdx	Docs with install, usage patterns, slot reference, and API.
Registry DetailViewPage and tests packages/registry/templates/pages/detail-view-page/*	Exports DetailViewPage; tests cover UI, actions, nav, loading, labels, slots.
Registry entry for DetailViewPage packages/registry/registry.json	Adds detail-view-page entry.

Notification Center feature

Layer / File(s)	Summary
Docs Notification Center component apps/docs/src/components/UI/notification-center/index.tsx	Compound Notification Center with provider, filters, list, item actions, and popup.
Docs demo and CSS overflow apps/docs/src/components/Demo/NotificationCenterDemo.tsx, apps/docs/src/css/custom.css	Interactive demo with resize handling; CSS ensures dropdown not clipped.
Storybook Notification Center template apps/storybook/src/templates/notification-center/index.tsx	Template with compound API and behavior.
Storybook stories for Notification Center .../notification-center.stories.tsx	Default, theme variants, composable, and state-focused stories.
Versioned Notification Center docs page apps/docs/versioned_docs/.../notification-center-page.mdx	Install, usage examples, and API docs.
Registry Notification Center implementation and tests packages/registry/templates/pages/notification-center/*	Exports component and tests interactions, filters, open/close, actions.
Registry and sidebar wiring for Notification Center packages/registry/registry.json, apps/docs/versioned_sidebars/...json	Adds registry entry and sidebar placement.

UI components: ButtonWithIcon, Checkbox, Badge

Layer / File(s)	Summary
ButtonWithIcon loading behavior and tests apps/docs/src/components/UI/button-with-icon/index.tsx, apps/storybook/src/components/button-with-icon/index.tsx, packages/registry/components/buttonwithicon/*	Spinner element added; order depends on iconPosition; tests assert DOM order.
Checkbox variants and checkmark color apps/docs/src/components/UI/checkbox/index.tsx, apps/storybook/src/components/checkbox/index.tsx, packages/registry/components/checkbox/index.tsx, apps/docs/versioned_docs/.../checkbox.mdx	Palette tweaks; dynamic checkmark color helper; docs updated.
Badge variant 'none' across code and docs apps/docs/src/components/UI/badge/index.tsx, apps/storybook/src/components/badge/index.tsx, packages/registry/components/badge/index.tsx, apps/docs/versioned_docs/.../badge.mdx	Adds non-animated variant supported and documented.

Docs content reorg and ButtonGroup demo

Layer / File(s)	Summary
ButtonGroup demo logic and story arg apps/docs/src/components/Demo/ButtonGroupDemo.tsx, apps/storybook/src/components/button-group/button-group.stories.tsx	Demo uses useMemo items and wrap-aware state; story enables wrap.
Button-related MDX TOC and sections apps/docs/versioned_docs/.../button.mdx	TOC depth and headings normalized; sections reorganized.
Components/Layouts/Templates index MDX updates apps/docs/versioned_docs/.../all-*.mdx	Adds/moves cards and sections across indices.
Sidebar JSON ordering tweaks apps/docs/versioned_sidebars/version-1.0.3-sidebars.json	Adjusts Feedback, Forms, Error Pages ordering.

Infra, deps, CSS, CLI, CTA

Layer / File(s)	Summary
Tailwind dependency bumps apps/*/package.json	Bumps Tailwind and related packages.
Storybook shimmer CSS apps/storybook/src/index.css	Adds shimmer keyframes/var.
CLI template config paths packages/cli-tool/templates/ignix.config.js	Updates registry URL and template dir.
CTA newsletter async submit packages/registry/templates/sections/call-to-action/index.tsx	Await-based delay and immediate reset.

Sequence Diagram(s)

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• mindfiredigital/ignix-ui#847: Overlaps with Notification Center template/components and docs.
• mindfiredigital/ignix-ui#834: Introduces DetailViewPage demo and component in the same areas.
• mindfiredigital/ignix-ui#833: Adds a similar Timeline docs UI and demo.

Suggested labels

component: new, component: enhancement, animation, tailwind, cli, docs, tests, dependencies

Suggested reviewers

• deepakyadav-01

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch development