atomix_design_flutter

🎉 Official First Major Release Atomix Design System v1.0.0 is now live! This release marks the completion of the core library and the system's readiness for enterprise production use.

🌟 Key Enhancements

• 101 Handcrafted Components: Complete catalog covering Atoms, Molecules, Organisms, and Templates.
• Advanced Multi-Strategy Theming:
  • Materialize: Pure Material 3 compliance.
  • Apple Glass: Premium iOS-style glassmorphism with blurs and depth.
  • Expressive: High-contrast, brand-forward styling.
• Form System: Full support for validation, custom inputs, and dynamic layouts.
• Professional Documentation: Comprehensive READMEs, Widgetbook integration, and clear architectural guides.

🚀 Breaking Changes

• Breaking: AtomixTheme architecture has fully migrated to the Strategy pattern. Ensuring stability for future updates.

Added

• 21 New Atoms: Significantly expanded the atomic library with:
  • AtomixActionIcon, AtomixBackdrop, AtomixBullet, AtomixCaption, AtomixCircle, AtomixColorBox, AtomixCornerIndicator, AtomixDataPoint, AtomixFade, AtomixGradient, AtomixHandle, AtomixHeading, AtomixIndicator, AtomixKey, AtomixMask, AtomixOverline, AtomixPlaceholder, AtomixPulse, AtomixStepIndicator, AtomixStroke.
• Expanded Documentation: All new components now feature multiple scenarios (Small, Large, Success, Error, States, etc.) in Widgetbook.
• Form System: Introduced a professional form management library:
  • AtomixForm (Organism): Managed layout with AtomixFormSection for grouping.
  • AtomixTextFormField (Molecule): Native Flutter validation support with Atomix styling.
• Improved Foundation:
  • Added outline, outlineDark, surfaceVariant, and surfaceVariantDark semantic colors to AtomixColors.
  • Added child support to AtomixStroke.
• CI/CD Automation: Added GitHub Actions workflow to automatically build and deploy the documentation app to GitHub Pages on every push to main.

Fixed

• Fixed parameter naming consistency in AtomixAvatar (renamed name to initials).

Added

• Atoms Gallery: Introduced a visual landing page for the "Atoms" category to provide a high-level overview.
• Atoms README: Added conceptual documentation for the atomic level of the design system.

Changed

• Widgetbook Standardization: Unified the navigation structure. All components now use an explicit path: '[Category]/ComponentName' format.
• Improved UX: Eliminated implicit lowercase folders in the sidebar for a cleaner, professional tree structure.
• Layout System: Renamed Playground scenarios and consolidated AtomixBox (Responsive Box) and AtomixGrid.

Added

• Layout System: Introduced AtomixBox and AtomixGrid for powerful structural layouts.
• Templates: Added interactive page-builder templates in Widgetbook.
• Interactive Documentation: Completely revamped all components with Knobs for real-time property editing.

Changed

• Modernized API: Replaced all instances of Color.withOpacity() with the new Color.withValues(alpha: ...).
• Improved Widgetbook UX: Knobs are now logically grouped (e.g., Component > Property).
• Standardized Knobs: Migrated from context.knobs.list to context.knobs.object.dropdown for better type safety and UI.
• Code Generation: All playgrounds now include dynamic, copy-pasteable code snippets.

Fixed

• Resolved all deprecated_member_use warnings across the package and documentation.
• Fixed unnecessary_library_name lint in main package.
• Corrected curly_braces_in_flow_control_structures across the documentation app.
• Fixed Widgetbook configuration for ViewportAddon and TextScaleAddon compatibility.

Changed

• Shortened package description to meet pub.dev requirements
• Updated README with GitHub Pages documentation link

Added

• Example app demonstrating all components
• Interactive Widgetbook documentation at https://osmanjimenez.github.io/atomix_design_flutter/

Fixed

• Improved pub.dev score by adding required example

Added

Foundation

• Design token system with AtomixColors, AtomixSpacing, AtomixRadius, AtomixElevation, and AtomixTypography
• Light and dark theme support with AtomixTheme
• Material Design 3 integration
• Comprehensive color palette with semantic colors
• 4px-based spacing scale
• Border radius values with convenient shortcuts
• Material elevation scale
• Complete text style system

Atoms

• AtomixText - Text component with typography system
• AtomixIcon - Icon component with consistent styling
• AtomixDivider - Visual separator component
• AtomixSpacer - Spacing helper with token shortcuts
• AtomixBadge - Status badges with 5 variants (neutral, success, warning, error, info)

Molecules

• AtomixButton - Button component with 3 variants (primary, secondary, tertiary), 3 sizes, and multiple states
• AtomixTextField - Text input component with validation support, icons, and helper text
• AtomixChip - Chip component with selection states and optional icons
• AtomixListTile - List item component with leading/trailing elements

Organisms

• AtomixAppBar - Application bar with customizable title, leading icon, and actions
• AtomixCard - Card component with 3 variants (filled, outlined, elevated)
• AtomixDialog - Modal dialog component with title, content, and actions
• AtomixBottomSheet - Bottom sheet component with drag handle and flexible content

Documentation & Testing

• Complete DartDoc documentation for all public APIs
• Comprehensive test coverage for core components
• Example implementations for all components

Features

• Atomic Design architecture for scalability
• Consistent design language across all components
• Full accessibility support through Material Design 3
• Type-safe component APIs
• Customizable theming system