feat: phone mocks use correct viewport

src/components/views/EditorView.stories.tsx → src/components/views/editor/EditorView.stories.tsx

@@ -41,6 +41,7 @@ export const MockBrowser = {
 export const MockPhone = {
   args: commonProps,
   decorators: [MockPhoneDecorator],
+  parameters: { viewport: { defaultViewport: "iphonex" } },
 } satisfies Story;
 
 export const MockWindow = {

src/components/views/EditorView.tsx → src/components/views/editor/EditorView.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactElement } from "react";
-import { ImageEditor } from "../library/image-editor/Editor";
+import { ImageEditor } from "../../library/image-editor/Editor";
 import { BasicLayout } from "~/components/layout/BasicLayout";
 
 export interface EditorViewProps extends ComponentProps<typeof ImageEditor> {}

src/components/views/ErrorView.stories.tsx → src/components/views/error/ErrorView.stories.tsx

@@ -31,6 +31,7 @@ export const MockBrowser = {
 export const MockPhone = {
   args: commonProps,
   decorators: [MockPhoneDecorator],
+  parameters: { viewport: { defaultViewport: "iphonex" } },
 } satisfies Story;
 
 export const MockWindow = {

src/components/views/ErrorView.tsx → src/components/views/error/ErrorView.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { BasicLayout } from "../layout/BasicLayout";
+import { BasicLayout } from "../../layout/BasicLayout";
 
 export interface ErrorViewProps {
   message?: string;

src/components/views/HomeView.stories.tsx → src/components/views/home/HomeView.stories.tsx

@@ -15,6 +15,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const commonProps = {
+  socialLinkProps: {
+    onGithubClick: () => console.log("Github"),
+    onLinkedInClick: () => console.log("Linkedin"),
+  },
   themeSwitchProps: {
     mode: "light",
     onSwitch: () => console.log("Switched"),
@@ -35,6 +39,7 @@ export const MockBrowser = {
 export const MockPhone = {
   args: commonProps,
   decorators: [MockPhoneDecorator],
+  parameters: { viewport: { defaultViewport: "iphonex" } },
 } satisfies Story;
 
 export const MockWindow = {

src/components/views/HomeView.tsx → src/components/views/home/HomeView.tsx

@@ -1,11 +1,12 @@
 import type { ReactElement } from "react";
-import { GithubIcon } from "../icons/GithubIcon";
-import { LinkedInIcon } from "../icons/LinkedInIcon";
-import { Dropzone } from "../library/dropzone/Dropzone";
-import { ThemeSwitch, type ThemeSwitchProps } from "../library/theme-controller/ThemeSwitch";
 import LogoImageSrc from "~/assets/images/logo/Logo180.png";
+import { GithubIcon } from "~/components/icons/GithubIcon";
+import { LinkedInIcon } from "~/components/icons/LinkedInIcon";
 import type { SocialLinkProps } from "~/components/layout/BasicLayout";
 import { BasicLayout } from "~/components/layout/BasicLayout";
+import { Dropzone } from "~/components/library/dropzone/Dropzone";
+import type { ThemeSwitchProps } from "~/components/library/theme-controller/ThemeSwitch";
+import { ThemeSwitch } from "~/components/library/theme-controller/ThemeSwitch";
 
 export interface HomeViewProps {
   themeSwitchProps: ThemeSwitchProps;

src/components/views/LoadingView.stories.tsx → src/components/views/loading/LoadingView.stories.tsx

@@ -31,6 +31,7 @@ export const MockBrowser = {
 export const MockPhone = {
   args: commonProps,
   decorators: [MockPhoneDecorator],
+  parameters: { viewport: { defaultViewport: "iphonex" } },
 } satisfies Story;
 
 export const MockWindow = {

src/components/views/NotFoundView.stories.tsx → src/components/views/not-found/NotFoundView.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { NotFoundView as Component } from "./NotFoundView";
+import { NotFoundView as Component } from "../not-found/NotFoundView";
 import { FullSizeDecorator } from "~/stories/decorators/FullSizeDecorator";
 import { MockBrowserDecorator } from "~/stories/decorators/MockBrowserDecorator";
 import { MockPhoneDecorator } from "~/stories/decorators/MockPhoneDecorator";
@@ -23,6 +23,7 @@ export const MockBrowser = {
 
 export const MockPhone = {
   decorators: [MockPhoneDecorator],
+  parameters: { viewport: { defaultViewport: "iphonex" } },
 } satisfies Story;
 
 export const MockWindow = {

src/components/views/NotFoundView.tsx → src/components/views/not-found/NotFoundView.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { BasicLayout } from "../layout/BasicLayout";
+import { BasicLayout } from "../../layout/BasicLayout";
 
 export function NotFoundView(): ReactElement {
   return (

src/core/routes/GlobalRoutes.tsx

@@ -9,7 +9,7 @@ export function GlobalRoutes(): RouteProps[] {
     },
     {
       path: "/editor",
-      lazy: () => import("~/pages/image-editor/ImageEditorRoute"),
+      lazy: () => import("~/pages/editor/ImageEditorRoute"),
     },
   ];
 }

src/pages/image-editor/ImageEditorPage.tsx → src/pages/editor/ImageEditorPage.tsx

@@ -2,8 +2,8 @@ import type { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import { ImageEditor } from "~/components/library/image-editor/Editor";
 import { useThemeSwitcher } from "~/components/library/theme-controller/UseThemeSwitcher";
-import { ErrorView } from "~/components/views/ErrorView";
-import { LoadingView } from "~/components/views/LoadingView";
+import { ErrorView } from "~/components/views/error/ErrorView";
+import { LoadingView } from "~/components/views/loading/LoadingView";
 
 export interface ImageEditorPageProps {
   url: string;

src/pages/image-editor/ImageEditorRoute.tsx → src/pages/editor/ImageEditorRoute.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { useAtomValue } from "jotai";
 import { ImageEditorPage } from "./ImageEditorPage";
-import { ErrorView } from "~/components/views/ErrorView";
+import { ErrorView } from "~/components/views/error/ErrorView";
 import { downloadUrlAtom } from "~/core/routes/atoms/DroppedFileAtoms";
 
 export function Component(): ReactElement {

src/pages/home/HomePage.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { useHomePage } from "./UseHomePage";
-import { HomeView } from "~/components/views/HomeView";
+import { HomeView } from "~/components/views/home/HomeView";
 
 export function HomePage(): ReactElement {
   const homeViewProps = useHomePage();

src/pages/home/HomeRoute.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { HomePage } from "./HomePage";
-import { ErrorView } from "~/components/views/ErrorView";
+import { ErrorView } from "~/components/views/error/ErrorView";
 
 export function Component(): ReactElement {
   return <HomePage />;

src/pages/home/UseHomePage.ts

@@ -1,7 +1,7 @@
 import { useSetAtom } from "jotai";
 import { useNavigate } from "react-router-dom";
 import { useThemeSwitcher } from "~/components/library/theme-controller/UseThemeSwitcher";
-import type { HomeViewProps } from "~/components/views/HomeView";
+import type { HomeViewProps } from "~/components/views/home/HomeView";
 import { droppedFileAtom } from "~/core/routes/atoms/DroppedFileAtoms";
 
 export function useHomePage(): HomeViewProps {

src/pages/not-found/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { NotFoundView } from "~/components/views/NotFoundView";
+import { NotFoundView } from "~/components/views/not-found/NotFoundView";
 
 export function NotFoundPage(): ReactElement {
   return <NotFoundView />;

src/pages/not-found/NotFoundRoute.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
 import { redirect } from "react-router-dom";
 import { NotFoundPage } from "./NotFoundPage";
-import { ErrorView } from "~/components/views/ErrorView";
+import { ErrorView } from "~/components/views/error/ErrorView";
 
 export function loader(): Response {
   // For now redirect to root

src/stories/decorators/MockPhoneDecorator.tsx

@@ -4,7 +4,7 @@ import type { StoryFn } from "@storybook/react";
 export function MockPhoneDecorator(Story: StoryFn): ReactElement {
   return (
     <div className="flex flex-1 justify-center">
-      <div className="m-8">
+      <div className="m-8 item">
         <div className="mockup-phone">
           <div className="camera"></div>
           <div className="display">