Reorganize components

app/blog/page.tsx

@@ -1,5 +1,5 @@
 import { getAllBlogPosts } from "../../lib/content";
-import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../components/content/ContentThumbnailTemplate";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {

app/components/content/ContentContainer/ContentContainer.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentContainerView from "./ContentContainer.view";
 import type { ContentContainerProps } from "./ContentContainer.types";
-import { normalizeContentContainerSize } from "../../../lib/propNormalization";
+import { normalizeContentContainerSize } from "../../../../lib/propNormalization";
 
 const ContentContainerContainer = memo<ContentContainerProps>(
   ({ post, width = "200px", size: sizeProp = "responsive" }) => {

app/components/content/ContentContainer/ContentContainer.types.ts

@@ -1,4 +1,4 @@
-import type { BlogPost } from "../../../lib/content";
+import type { BlogPost } from "../../../../lib/content";
 
 export type ContentContainerSizeValue = "xs" | "responsive" | "Xs" | "Responsive";
 

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
 import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
-import { normalizeContentThumbnailVariant } from "../../../lib/propNormalization";
+import { normalizeContentThumbnailVariant } from "../../../../lib/propNormalization";
 
 const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
   ({ post, className = "", variant: variantProp = "vertical" }) => {

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts

@@ -1,4 +1,4 @@
-import type { BlogPost } from "../../../lib/content";
+import type { BlogPost } from "../../../../lib/content";
 
 export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal" | "Vertical" | "Horizontal";
 

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Chip from "../Chip";
-import InputLabel from "../../InputLabel";
+import InputLabel from "../../utility/InputLabel";
 import type { MultiSelectViewProps } from "./MultiSelect.types";
 
 function MultiSelectView({

app/components/controls/SelectInput/SelectInput.view.tsx

@@ -1,7 +1,7 @@
 import React, { Children, type ReactNode } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
-import SelectDropdown from "../../SelectDropdown";
-import SelectOption from "../../SelectOption";
+import SelectDropdown from "./SelectDropdown";
+import SelectOption from "./SelectOption";
 import type { SelectOptionData } from "./SelectInput.types";
 
 export interface SelectInputViewProps {

app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, memo, useCallback } from "react";
 import { SelectOptionView } from "./SelectOption.view";
 import type { SelectOptionProps } from "./SelectOption.types";
-import { normalizeContextMenuItemSize } from "../../../lib/propNormalization";
+import { normalizeContextMenuItemSize } from "../../../../lib/propNormalization";
 
 const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
   (

app/components/localization/LanguageSwitcher/LanguageSwitcher.view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import { useTranslation } from "../../contexts/MessagesContext";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import type { LanguageSwitcherProps, Language } from "./LanguageSwitcher.types";
 
 function LanguageSwitcherView({ className = "" }: LanguageSwitcherProps) {

app/components/navigation/ConditionalHeader/ConditionalHeader.view.tsx

@@ -1,5 +1,5 @@
-import HomeHeader from "../navigation/HomeHeader";
-import Header from "../navigation/Header";
+import HomeHeader from "../HomeHeader";
+import Header from "../Header";
 import type { ConditionalHeaderViewProps } from "./ConditionalHeader.types";
 
 export function ConditionalHeaderView({

app/components/sections/ContentBanner.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { getAssetPath } from "../../../lib/assetUtils";
-import ContentContainer from "../ContentContainer";
+import ContentContainer from "../content/ContentContainer";
 import type { BlogPost } from "../../../lib/content";
 
 interface ContentBannerProps {

app/components/sections/FeatureGrid/FeatureGrid.view.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslation } from "../../../contexts/MessagesContext";
 import ContentLockup from "../../type/ContentLockup";
-import MiniCard from "../../MiniCard";
+import MiniCard from "../../cards/MiniCard";
 import type { FeatureGridViewProps } from "./FeatureGrid.types";
 
 function FeatureGridView({

app/components/sections/HeroBanner/HeroBanner.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import { useTranslation } from "../../contexts/MessagesContext";
-import ContentLockup from "../type/ContentLockup";
-import HeroDecor from "../HeroDecor";
-import { getAssetPath } from "../../../lib/assetUtils";
+import { useTranslation } from "../../../contexts/MessagesContext";
+import ContentLockup from "../../type/ContentLockup";
+import HeroDecor from "./HeroDecor";
+import { getAssetPath } from "../../../../lib/assetUtils";
 
 interface HeroBannerProps {
   title?: string;

app/components/sections/HeroBanner/index.tsx

@@ -0,0 +1 @@
+export { default } from "./HeroBanner";

app/components/sections/QuoteBlock/QuoteBlock.view.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 import Image from "next/image";
 import { useTranslation } from "../../../contexts/MessagesContext";
-import QuoteDecor from "../../QuoteDecor";
+import QuoteDecor from "./QuoteDecor";
 import type { QuoteBlockViewProps } from "./QuoteBlock.types";
 
 function QuoteBlockView({

app/components/sections/RelatedArticles/RelatedArticles.view.tsx

@@ -1,4 +1,4 @@
-import ContentThumbnailTemplate from "../../ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../../content/ContentThumbnailTemplate";
 import type { RelatedArticlesViewProps } from "./RelatedArticles.types";
 
 export function RelatedArticlesView({

app/components/utility/InputLabel/InputLabel.container.tsx

@@ -6,7 +6,7 @@ import type { InputLabelProps } from "./InputLabel.types";
 import {
   normalizeInputLabelSize,
   normalizeInputLabelPalette,
-} from "../../../lib/propNormalization";
+} from "../../../../lib/propNormalization";
 
 const InputLabelContainer = memo<InputLabelProps>(
   ({

app/components/utility/InputLabel/InputLabel.view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import type { InputLabelViewProps } from "./InputLabel.types";
 
 function InputLabelView({

app/layout.tsx

@@ -5,7 +5,7 @@ import dynamic from "next/dynamic";
 import { MessagesProvider } from "./contexts/MessagesContext";
 import messages from "../messages/en/index";
 import "./globals.css";
-import ConditionalHeader from "./components/ConditionalHeader";
+import ConditionalHeader from "./components/navigation/ConditionalHeader";
 
 // Code split Footer - below the fold, can be lazy loaded
 const Footer = dynamic(() => import("./components/navigation/Footer"), {

app/learn/page.tsx

@@ -1,6 +1,6 @@
 import messages from "../../messages/en/index";
 import { getTranslation } from "../../lib/i18n/getTranslation";
-import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../components/content/ContentThumbnailTemplate";
 import ContentLockup from "../components/type/ContentLockup";
 import AskOrganizer from "../components/sections/AskOrganizer";
 import { getAllBlogPosts } from "../../lib/content";

stories/ConditionalHeader.stories.js

@@ -1,4 +1,4 @@
-import ConditionalHeader from "../app/components/ConditionalHeader";
+import ConditionalHeader from "../app/components/navigation/ConditionalHeader";
 
 export default {
   title: "Components/ConditionalHeader",

stories/ContentContainer.stories.js

@@ -1,4 +1,4 @@
-import ContentContainer from "../app/components/ContentContainer";
+import ContentContainer from "../app/components/content/ContentContainer";
 
 const mockPost = {
   slug: "sample-article",

stories/ContentThumbnailTemplate.stories.js

@@ -1,4 +1,4 @@
-import ContentThumbnailTemplate from "../app/components/ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../app/components/content/ContentThumbnailTemplate";
 
 const mockPost = {
   slug: "sample-article",

stories/ContextMenu.stories.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import ContextMenu from "../app/components/ContextMenu";
-import ContextMenuItem from "../app/components/ContextMenuItem";
-import ContextMenuSection from "../app/components/ContextMenuSection";
-import ContextMenuDivider from "../app/components/ContextMenuDivider";
+import ContextMenu from "../app/components/ContextMenu/ContextMenu";
+import ContextMenuItem from "../app/components/ContextMenu/ContextMenuItem";
+import ContextMenuSection from "../app/components/ContextMenu/ContextMenuSection";
+import ContextMenuDivider from "../app/components/ContextMenu/ContextMenuDivider";
 
 export default {
   title: "Forms/ContextMenu",

stories/HeroBannerSystem.stories.js

@@ -1,6 +1,6 @@
-import HeroBanner from "../app/components/HeroBanner";
-import ContentLockup from "../app/components/ContentLockup";
-import HeroDecor from "../app/components/HeroDecor";
+import HeroBanner from "../app/components/sections/HeroBanner";
+import ContentLockup from "../app/components/type/ContentLockup";
+import HeroDecor from "../app/components/sections/HeroBanner/HeroDecor";
 
 export default {
   title: "Systems/HeroBanner System",

stories/HeroDecor.stories.js

@@ -1,4 +1,4 @@
-import HeroDecor from "../app/components/HeroDecor";
+import HeroDecor from "../app/components/sections/HeroBanner/HeroDecor";
 
 export default {
   title: "Components/HeroDecor",

stories/MiniCard.stories.js

@@ -1,4 +1,4 @@
-import MiniCard from "../app/components/MiniCard";
+import MiniCard from "../app/components/cards/MiniCard";
 
 export default {
   title: "Components/MiniCard",

tests/components/ContextMenu.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import ContextMenu from "../../app/components/ContextMenu";
-import ContextMenuItem from "../../app/components/ContextMenuItem";
+import ContextMenu from "../../app/components/ContextMenu/ContextMenu";
+import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type ContextMenuProps = React.ComponentProps<typeof ContextMenu>;

tests/components/ContextMenuItem.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ContextMenuItem from "../../app/components/ContextMenuItem";
+import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type ContextMenuItemProps = React.ComponentProps<typeof ContextMenuItem>;

tests/components/InputLabel.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderWithProviders as render } from "../utils/test-utils";
-import InputLabel from "../../app/components/InputLabel";
+import InputLabel from "../../app/components/utility/InputLabel";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,

tests/unit/ContentContainer.test.jsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import ContentContainer from "../../app/components/ContentContainer";
+import ContentContainer from "../../app/components/content/ContentContainer";
 
 // Mock asset utils
 vi.mock("../../lib/assetUtils", () => ({

tests/unit/ContentThumbnailTemplate.test.jsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import ContentThumbnailTemplate from "../../app/components/ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../../app/components/content/ContentThumbnailTemplate";
 
 // Mock Next.js components
 vi.mock("next/link", () => {