Skip to content

Feature/atomic sturcture components - #4

Open
vaibhav-cw wants to merge 5 commits into
feature/reusable-sectionsfrom
feature/atomic-sturcture-components
Open

vaibhav-cw wants to merge 5 commits into
feature/reusable-sectionsfrom
feature/atomic-sturcture-components

Conversation

@vaibhav-cw

Copy link
Copy Markdown
Collaborator

What does this PR do?

  • Implements the Atomic Design methodology by restructuring components into atoms, molecules, and organisms for better scalability and maintainability.
  • Adds atomic components: Button (with variants and sizes), Container (for layout), Heading (typography), ResponsiveImage (Next.js Image wrapper), and Text (body text variants).
  • Adds molecular components: FeatureCard, FeatureListSection, HeroSection, and TextImageSection, composed from atoms.
  • Adds organism component: PageRenderer, which dynamically renders sections based on CMS data.
  • Updates globals.css with custom animations (fadeIn, subtleZoom) and corresponding CSS classes for component interactions.
  • Refactors app/[slug]/page.tsx to import PageRenderer from the new organisms location.
  • Deletes legacy components: old PageRenderer.tsx, PageRenderer.type.ts, sectionMap.ts, and individual section files (HeroSection, FeatureListSection, TextImageSection).
  • Adds comprehensive README.md documentation for the component structure, usage examples, and best practices.

What steps does your reviewer have to take to test this PR manually?

  1. Check out the branch feature/atomic-sturcture-components.
  2. Run the Next.js application locally and navigate to a page that uses the PageRenderer (e.g., a slug page).
  3. Verify that all sections (HeroSection, FeatureListSection, TextImageSection) render correctly with the new atomic components.
  4. Test interactive elements like Button variants, Heading levels, and animations (fade-in, subtle zoom) on the rendered page.
  5. Ensure no console errors and that the component imports work from the new structure.

Pull Request standards checklist - Please check off

  • This Branch will be carrying one single responsibility - feature/bugfix/style/refactor...
  • I have followed conventional commit messages and descriptive Branch naming.
  • My PR has descriptive folder/file names that I have worked on.

Testing checklist - Please check off

  • I have performed manual testing on my local to validate all changes.

Definition of Done - Please check off

  • My code is well tested and I have confidence my code works as I expect in a variety of situations.
  • I have lint and format code is enabled when the file is saved and I have fixed all errors highlighted by lint.
  • I have deleted all non-descriptive comments and dead code from the files I've touched.
  • I have rebased my branch with the base branch I want to merge into and all the commits in this PR are my own.

@mergemitra

mergemitra Bot commented Feb 11, 2026

Copy link
Copy Markdown

Change Summary

Rebuilds the UI layer around Atomic Design, introducing dedicated atoms/molecules/organisms for scalability and clarity.
Adds new atoms (Button, Container, Heading, ResponsiveImage, Text) with exports, along with composed molecules for hero, feature, and text-image layouts.
Creates a typed PageRenderer organism, documents the new structure in README, updates global animations, and removes legacy section files.

File Changes
File Summary
app/[slug]/page.tsx Refactors slug page to import the new PageRenderer organism and updated section types.
app/globals.css Adds fadeIn and subtleZoom keyframes with utility classes for animated components.
components/PageRenderer.tsx Removes legacy PageRenderer component in favor of the new organism implementation.
components/PageRenderer.type.ts Removes old PageRenderer type definitions replaced by organism-specific types.
components/README.md Documents the atomic directory structure, usage examples, and best practices.
Files in components/atoms/** (16 files) Adds atomic Button, Container, Heading, ResponsiveImage, and Text components with exports/types.
components/index.ts Re-exports atoms, molecules, and organisms for simplified top-level imports.
Files in components/molecules/** (13 files) Adds molecule sections/cards built from atoms, offering hero, feature list, and text-image layouts.
Files in components/organisms/** (4 files) Introduces the typed PageRenderer organism and exports for dynamic CMS-rendered sections.
components/sectionMap.ts Removes the legacy sectionMap helper replaced by the organism-based renderer.
Files in components/sections/** (6 files) Deletes obsolete section components/types now covered by the atomic molecule stack.

Based on 245d72a...04d59e4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant