Update stories to match new component organization

stories/ContextMenu/ContextMenu.stories.js

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

stories/buttons/Button.stories.js

@@ -1,7 +1,7 @@
-import Button from "../app/components/Button";
+import Button from "../../app/components/buttons/Button";
 
 export default {
-  title: "Components/Button",
+  title: "Components/Buttons/Button",
   component: Button,
   parameters: {
     layout: "centered",

stories/buttons/Button.visual.stories.js

@@ -1,8 +1,8 @@
-import Button from "../app/components/Button";
+import Button from "../../app/components/buttons/Button";
 import { within, userEvent } from "@storybook/test";
 
 export default {
-  title: "Components/Button/Visual Regression",
+  title: "Components/Buttons/Button/Visual Regression",
   component: Button,
   parameters: {
     // Chromatic configuration for visual testing

stories/cards/IconCard.stories.js

@@ -1,8 +1,8 @@
-import IconCard from "../app/components/IconCard";
+import IconCard from "../../app/components/cards/IconCard";
-import { getAssetPath } from "../lib/assetUtils";
+import { getAssetPath } from "../../lib/assetUtils";
 
 export default {
-  title: "Components/IconCard",
+  title: "Components/Cards/IconCard",
   component: IconCard,
   parameters: {
     layout: "centered",

stories/cards/MiniCard.stories.js

@@ -1,7 +1,7 @@
-import MiniCard from "../app/components/cards/MiniCard";
+import MiniCard from "../../app/components/cards/MiniCard";
 
 export default {
-  title: "Components/MiniCard",
+  title: "Components/Cards/MiniCard",
   component: MiniCard,
   parameters: {
     layout: "centered",

stories/cards/NumberCard.stories.js

@@ -1,7 +1,7 @@
-import NumberCard from "../app/components/NumberCard";
+import NumberCard from "../../app/components/cards/NumberCard";
 
 export default {
-  title: "Components/NumberCard",
+  title: "Components/Cards/NumberCard",
   component: NumberCard,
   parameters: {
     layout: "centered",

stories/cards/RuleCard.stories.js

@@ -1,8 +1,8 @@
-import RuleCard from "../app/components/cards/RuleCard";
+import RuleCard from "../../app/components/cards/RuleCard";
 import Image from "next/image";
 
 export default {
-  title: "Components/RuleCard",
+  title: "Components/Cards/RuleCard",
   component: RuleCard,
   parameters: {
     layout: "centered",

stories/content/ContentContainer.stories.js

@@ -1,4 +1,4 @@
-import ContentContainer from "../app/components/content/ContentContainer";
+import ContentContainer from "../../app/components/content/ContentContainer";
 
 const mockPost = {
   slug: "sample-article",
@@ -12,7 +12,7 @@ const mockPost = {
 };
 
 export default {
-  title: "Components/ContentContainer",
+  title: "Components/Content/ContentContainer",
   component: ContentContainer,
   parameters: {
     docs: {

stories/content/ContentThumbnailTemplate.stories.js

@@ -1,4 +1,4 @@
-import ContentThumbnailTemplate from "../app/components/content/ContentThumbnailTemplate";
+import ContentThumbnailTemplate from "../../app/components/content/ContentThumbnailTemplate";
 
 const mockPost = {
   slug: "sample-article",
@@ -14,7 +14,7 @@ const mockPost = {
 const mockSlugOrder = ["sample-article", "another-article", "third-article"];
 
 export default {
-  title: "Components/ContentThumbnailTemplate",
+  title: "Components/Content/ContentThumbnailTemplate",
   component: ContentThumbnailTemplate,
   parameters: {
     docs: {

stories/controls/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Checkbox from "../app/components/controls/Checkbox";
+import Checkbox from "../../app/components/controls/Checkbox";
 import { within, userEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
@@ -27,7 +27,7 @@ const CheckedInteraction = {
 };
 
 export default {
-  title: "Forms/Checkbox",
+  title: "Components/Controls/Checkbox",
   component: Checkbox,
   parameters: {
     layout: "centered",

stories/controls/CheckboxGroup.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import CheckboxGroup from "../app/components/CheckboxGroup";
+import CheckboxGroup from "../../app/components/controls/CheckboxGroup";
 
 export default {
-  title: "Forms/CheckboxGroup",
+  title: "Components/Controls/CheckboxGroup",
   component: CheckboxGroup,
   parameters: {
     layout: "centered",

stories/controls/RadioButton.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import RadioButton from "../app/components/controls/RadioButton";
+import RadioButton from "../../app/components/controls/RadioButton";
 
 export default {
-  title: "Forms/RadioButton",
+  title: "Components/Controls/RadioButton",
   component: RadioButton,
   parameters: {
     layout: "centered",

stories/controls/RadioGroup.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import RadioGroup from "../app/components/RadioGroup";
+import RadioGroup from "../../app/components/controls/RadioGroup";
 
 export default {
-  title: "Forms/RadioGroup",
+  title: "Components/Controls/RadioGroup",
   component: RadioGroup,
   parameters: {
     layout: "centered",

stories/controls/SelectInput.stories.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import SelectInput from "../app/components/SelectInput";
+import SelectInput from "../../app/components/controls/SelectInput";
 
 export default {
-  title: "Forms/SelectInput",
+  title: "Components/Controls/SelectInput",
   component: SelectInput,
   parameters: {
     layout: "centered",

stories/controls/Switch.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Switch from "../app/components/Switch";
+import Switch from "../../app/components/controls/Switch";
 
 export default {
-  title: "Forms/Switch",
+  title: "Components/Controls/Switch",
   component: Switch,
   parameters: {
     layout: "centered",

stories/controls/TextArea.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import TextArea from "../app/components/TextArea";
+import TextArea from "../../app/components/controls/TextArea";
 
 export default {
-  title: "Forms/TextArea",
+  title: "Components/Controls/TextArea",
   component: TextArea,
   parameters: {
     layout: "centered",

stories/controls/TextInput.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import TextInput from "../app/components/TextInput";
+import TextInput from "../../app/components/controls/TextInput";
 
 export default {
-  title: "Forms/TextInput",
+  title: "Components/Controls/TextInput",
   component: TextInput,
   parameters: {
     layout: "centered",

stories/controls/Toggle.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Toggle from "../app/components/Toggle";
+import Toggle from "../../app/components/controls/Toggle";
 
 export default {
-  title: "Forms/Toggle",
+  title: "Components/Controls/Toggle",
   component: Toggle,
   parameters: {
     layout: "centered",

stories/controls/ToggleGroup.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import ToggleGroup from "../app/components/ToggleGroup";
+import ToggleGroup from "../../app/components/controls/ToggleGroup";
 
 export default {
-  title: "Forms/ToggleGroup",
+  title: "Components/Controls/ToggleGroup",
   component: ToggleGroup,
   parameters: {
     layout: "centered",

stories/icons/Avatar.stories.js

@@ -1,7 +1,7 @@
-import Avatar from "../app/components/Avatar";
+import Avatar from "../../app/components/icons/Avatar";
 
 export default {
-  title: "Components/Avatar",
+  title: "Components/Icons/Avatar",
   component: Avatar,
   parameters: {
     layout: "centered",

stories/icons/Logo.stories.js

@@ -1,7 +1,7 @@
-import Logo from "../app/components/Logo";
+import Logo from "../../app/components/icons/Logo";
 
 export default {
-  title: "Components/Logo",
+  title: "Components/Icons/Logo",
   component: Logo,
   parameters: {
     layout: "centered",

stories/modals/Alert.stories.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import Alert from "../app/components/Alert";
+import Alert from "../../app/components/modals/Alert";
 
 export default {
-  title: "Components/Alert",
+  title: "Components/Modals/Alert",
   component: Alert,
   argTypes: {
     status: {

stories/modals/Create.stories.js

@@ -1,8 +1,8 @@
-import Create from "../app/components/Create";
+import Create from "../../app/components/modals/Create";
-import TextInput from "../app/components/TextInput";
+import TextInput from "../../app/components/controls/TextInput";
 
 export default {
-  title: "Components/Create",
+  title: "Components/Modals/Create",
   component: Create,
   parameters: {
     layout: "fullscreen",

stories/modals/Tooltip.stories.js

@@ -1,9 +1,9 @@
 import React from "react";
-import Tooltip from "../app/components/Tooltip";
+import Tooltip from "../../app/components/modals/Tooltip";
-import Button from "../app/components/Button";
+import Button from "../../app/components/buttons/Button";
 
 export default {
-  title: "Components/Tooltip",
+  title: "Components/Modals/Tooltip",
   component: Tooltip,
   argTypes: {
     position: {

stories/navigation/ConditionalHeader.stories.js

@@ -1,7 +1,7 @@
-import ConditionalHeader from "../app/components/navigation/ConditionalHeader";
+import ConditionalHeader from "../../app/components/navigation/ConditionalHeader";
 
 export default {
-  title: "Components/ConditionalHeader",
+  title: "Components/Navigation/ConditionalHeader",
   component: ConditionalHeader,
   parameters: {
     docs: {

stories/navigation/Footer.responsive.stories.js

@@ -1,8 +1,8 @@
-import Footer from "../app/components/Footer";
+import Footer from "../../app/components/navigation/Footer";
 import { within, userEvent } from "@storybook/test";
 
 export default {
-  title: "Components/Footer/Responsive",
+  title: "Components/Navigation/Footer/Responsive",
   component: Footer,
   parameters: {
     // Chromatic configuration for responsive testing

stories/navigation/Footer.stories.js

@@ -1,7 +1,7 @@
-import Footer from "../app/components/Footer";
+import Footer from "../../app/components/navigation/Footer";
 
 export default {
-  title: "Components/Footer",
+  title: "Components/Navigation/Footer",
   component: Footer,
   parameters: {
     layout: "fullscreen",

stories/navigation/Header.responsive.stories.js

@@ -1,7 +1,7 @@
-import Header from "../app/components/Header";
+import Header from "../../app/components/navigation/Header";
 
 export default {
-  title: "Components/Header/Responsive",
+  title: "Components/Navigation/Header/Responsive",
   component: Header,
   parameters: {
     // Chromatic configuration for responsive testing

stories/navigation/Header.stories.js

@@ -1,7 +1,7 @@
-import Header from "../app/components/Header";
+import Header from "../../app/components/navigation/Header";
 
 export default {
-  title: "Components/Header",
+  title: "Components/Navigation/Header",
   component: Header,
   parameters: {
     layout: "fullscreen",

stories/navigation/HeaderTab.stories.js

@@ -1,8 +1,8 @@
-import HeaderTab from "../app/components/HeaderTab";
+import HeaderTab from "../../app/components/navigation/HeaderTab";
-import Logo from "../app/components/Logo";
+import Logo from "../../app/components/icons/Logo";
 
 export default {
-  title: "Components/HeaderTab",
+  title: "Components/Navigation/HeaderTab",
   component: HeaderTab,
   parameters: {
     layout: "centered",

stories/navigation/HomeHeader.stories.js

@@ -1,7 +1,7 @@
-import HomeHeader from "../app/components/HomeHeader";
+import HomeHeader from "../../app/components/navigation/HomeHeader";
 
 export default {
-  title: "Components/HomeHeader",
+  title: "Components/Navigation/HomeHeader",
   component: HomeHeader,
   parameters: {
     layout: "fullscreen",

stories/navigation/MenuBar.stories.js

@@ -1,8 +1,8 @@
-import MenuBar from "../app/components/MenuBar";
+import MenuBar from "../../app/components/navigation/MenuBar";
-import MenuBarItem from "../app/components/MenuBarItem";
+import MenuBarItem from "../../app/components/navigation/MenuBarItem";
 
 export default {
-  title: "Components/MenuBar",
+  title: "Components/Navigation/MenuBar",
   component: MenuBar,
   parameters: {
     layout: "centered",

stories/navigation/MenuBarItem.stories.js

@@ -1,7 +1,7 @@
-import MenuBarItem from "../app/components/MenuBarItem";
+import MenuBarItem from "../../app/components/navigation/MenuBarItem";
 
 export default {
-  title: "Components/MenuBarItem",
+  title: "Components/Navigation/MenuBarItem",
   component: MenuBarItem,
   parameters: {
     layout: "centered",

stories/progress/Progress.stories.js

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

stories/progress/Stepper.stories.js

@@ -1,7 +1,7 @@
-import Stepper from "../app/components/Stepper";
+import Stepper from "../../app/components/progress/Stepper";
 
 export default {
-  title: "Components/Stepper",
+  title: "Components/Progress/Stepper",
   component: Stepper,
   parameters: {
     layout: "centered",

stories/sections/AskOrganizer.stories.js

@@ -1,7 +1,7 @@
-import AskOrganizer from "../app/components/AskOrganizer";
+import AskOrganizer from "../../app/components/sections/AskOrganizer";
 
 export default {
-  title: "Components/AskOrganizer",
+  title: "Components/Sections/AskOrganizer",
   component: AskOrganizer,
   parameters: {
     docs: {

stories/sections/ContentBanner.stories.js

@@ -1,4 +1,4 @@
-import ContentBanner from "../app/components/ContentBanner";
+import ContentBanner from "../../app/components/sections/ContentBanner";
 
 const mockBlogPost = {
   slug: "sample-article",
@@ -21,7 +21,7 @@ const mockBlogPost = {
 };
 
 export default {
-  title: "Components/ContentBanner",
+  title: "Components/Sections/ContentBanner",
   component: ContentBanner,
   parameters: {
     docs: {

stories/sections/FeatureGrid.stories.js

@@ -1,7 +1,7 @@
-import FeatureGrid from "../app/components/FeatureGrid";
+import FeatureGrid from "../../app/components/sections/FeatureGrid";
 
 export default {
-  title: "Components/FeatureGrid",
+  title: "Components/Sections/FeatureGrid",
   component: FeatureGrid,
   parameters: {
     layout: "fullscreen",

stories/sections/HeroBanner.stories.js

@@ -1,7 +1,7 @@
-import HeroBanner from "../app/components/HeroBanner";
+import HeroBanner from "../../app/components/sections/HeroBanner";
 
 export default {
-  title: "Components/HeroBanner",
+  title: "Components/Sections/HeroBanner",
   component: HeroBanner,
   parameters: {
     layout: "fullscreen",

stories/sections/HeroBannerSystem.stories.js

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

stories/sections/HeroDecor.stories.js

@@ -1,7 +1,7 @@
-import HeroDecor from "../app/components/sections/HeroBanner/HeroDecor";
+import HeroDecor from "../../app/components/sections/HeroBanner/HeroDecor";
 
 export default {
-  title: "Components/HeroDecor",
+  title: "Components/Sections/HeroDecor",
   component: HeroDecor,
   parameters: {
     layout: "centered",

stories/sections/LogoWall.stories.js

@@ -1,7 +1,7 @@
-import LogoWall from "../app/components/LogoWall";
+import LogoWall from "../../app/components/sections/LogoWall";
 
 export default {
-  title: "Components/LogoWall",
+  title: "Components/Sections/LogoWall",
   component: LogoWall,
   parameters: {
     layout: "fullscreen",

stories/sections/NumberedCards.stories.js

@@ -1,7 +1,7 @@
-import NumberedCards from "../app/components/NumberedCards";
+import NumberedCards from "../../app/components/sections/NumberedCards";
 
 export default {
-  title: "Components/NumberedCards",
+  title: "Components/Sections/NumberedCards",
   component: NumberedCards,
   parameters: {
     layout: "fullscreen",

stories/sections/QuoteBlock.stories.js

@@ -1,7 +1,7 @@
-import QuoteBlock from "../app/components/QuoteBlock";
+import QuoteBlock from "../../app/components/sections/QuoteBlock";
 
 export default {
-  title: "Components/QuoteBlock",
+  title: "Components/Sections/QuoteBlock",
   component: QuoteBlock,
   parameters: {
     layout: "fullscreen",

stories/sections/RelatedArticles.stories.js

@@ -1,4 +1,4 @@
-import RelatedArticles from "../app/components/RelatedArticles";
+import RelatedArticles from "../../app/components/sections/RelatedArticles";
 
 const mockRelatedPosts = [
   {
@@ -31,7 +31,7 @@ const mockRelatedPosts = [
 ];
 
 export default {
-  title: "Components/RelatedArticles",
+  title: "Components/Sections/RelatedArticles",
   component: RelatedArticles,
   parameters: {
     docs: {

stories/sections/RuleStack.stories.js

@@ -1,7 +1,7 @@
-import RuleStack from "../app/components/RuleStack";
+import RuleStack from "../../app/components/sections/RuleStack";
 
 export default {
-  title: "Components/RuleStack",
+  title: "Components/Sections/RuleStack",
   component: RuleStack,
   parameters: {
     layout: "fullscreen",

stories/sections/SectionHeader.stories.js

@@ -1,7 +1,7 @@
-import SectionHeader from "../app/components/SectionHeader";
+import SectionHeader from "../../app/components/sections/SectionHeader";
 
 export default {
-  title: "Components/SectionHeader",
+  title: "Components/Sections/SectionHeader",
   component: SectionHeader,
   parameters: {
     layout: "centered",

stories/sections/SectionNumber.stories.js

@@ -1,7 +1,7 @@
-import SectionNumber from "../app/components/SectionNumber";
+import SectionNumber from "../../app/components/sections/SectionNumber";
 
 export default {
-  title: "Components/SectionNumber",
+  title: "Components/Sections/SectionNumber",
   component: SectionNumber,
   parameters: {
     layout: "centered",

stories/type/ContentLockup.stories.js

@@ -1,7 +1,7 @@
-import ContentLockup from "../app/components/ContentLockup";
+import ContentLockup from "../../app/components/type/ContentLockup";
 
 export default {
-  title: "Components/ContentLockup",
+  title: "Components/Type/ContentLockup",
   component: ContentLockup,
   parameters: {
     layout: "centered",

stories/utility/AvatarContainer.stories.js

@@ -1,8 +1,8 @@
-import AvatarContainer from "../app/components/AvatarContainer";
+import AvatarContainer from "../../app/components/utility/AvatarContainer";
-import Avatar from "../app/components/Avatar";
+import Avatar from "../../app/components/icons/Avatar";
 
 export default {
-  title: "Components/AvatarContainer",
+  title: "Components/Utility/AvatarContainer",
   component: AvatarContainer,
   parameters: {
     layout: "centered",

stories/utility/ErrorBoundary.stories.js

@@ -1,7 +1,7 @@
-import ErrorBoundary from "../app/components/ErrorBoundary";
+import ErrorBoundary from "../../app/components/utility/ErrorBoundary";
 
 export default {
-  title: "Components/ErrorBoundary",
+  title: "Components/Utility/ErrorBoundary",
   component: ErrorBoundary,
   parameters: {
     layout: "centered",