chore: Cleanup storybook structure (#5457)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

.storybook/main.ts

@@ -20,10 +20,12 @@ const visualTestingStories: StorybookConfig["stories"] = [
   {
     directory: "../apps/builder",
     titlePrefix: "Builder",
+    files: "**/*.stories.tsx",
   },
   {
-    directory: "../packages/design-system",
+    directory: "../packages/design-system/src/components",
     titlePrefix: "Design System",
+    files: "**/*.stories.tsx",
   },
 ];
 
@@ -33,28 +35,34 @@ export default {
     : [
         ...visualTestingStories,
         {
-          directory: "../packages/css-engine",
+          directory: "../packages/css-engine/src",
           titlePrefix: "CSS Engine",
+          files: "**/*.stories.tsx",
         },
         {
-          directory: "../packages/image",
+          directory: "../packages/image/src",
           titlePrefix: "Image",
+          files: "**/*.stories.tsx",
         },
         {
           directory: "../packages/icons",
           titlePrefix: "Icons",
+          files: "**/*.stories.tsx",
         },
         {
           directory: "../packages/sdk-components-react",
           titlePrefix: "SDK Components React",
+          files: "**/*.stories.tsx",
         },
         {
           directory: "../packages/sdk-components-react-radix",
           titlePrefix: "SDK Components React Radix",
+          files: "**/*.stories.tsx",
         },
         {
           directory: "../packages/sdk-components-animation",
           titlePrefix: "SDK Components Animation",
+          files: "**/*.stories.tsx",
         },
       ],
   framework: {

apps/builder/app/auth/login.stories.tsx

@@ -4,6 +4,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Login } from "./login";
 
 export default {
+  title: "Auth/Login",
   component: Login,
 };
 

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -59,7 +59,7 @@ const HistoryInspect = () => {
 };
 
 export default {
-  title: "Builder/Address Bar",
+  title: "Address Bar",
   component: AddressBarPopover,
 } satisfies Meta;
 

apps/builder/app/builder/features/blocking-alerts/alert.stories.tsx

@@ -1,6 +1,6 @@
 import { Alert } from "./alert";
 
-export default { component: Alert };
+export default { title: "Blocking Alerts", component: Alert };
 
 export const Basic = () => (
   <Alert

apps/builder/app/builder/features/breakpoints/breakpoints-selector.stories.tsx

@@ -80,5 +80,6 @@ export const Story = () => {
 Story.storyName = "breakpoints-selector";
 
 export default {
+  title: "Breakpoints Selector",
   component: Story,
 };

apps/builder/app/builder/features/command-panel/command-panel.stories.tsx

@@ -16,7 +16,7 @@ import {
 } from "./command-panel";
 
 const meta: Meta = {
-  title: "CommandPanel",
+  title: "Command Panel",
 };
 export default meta;
 

apps/builder/app/builder/features/pages/custom-metadata.stories.tsx

@@ -2,7 +2,10 @@ import { Box } from "@webstudio-is/design-system";
 import { CustomMetadata } from "./custom-metadata";
 import { useState } from "react";
 
-export default { component: CustomMetadata, title: "Pages/CustomMetadata" };
+export default {
+  component: CustomMetadata,
+  title: "Pages/Custom Metadata",
+};
 
 export const Basic = () => {
   const [customMetas, setCustomMetas] = useState([

apps/builder/app/builder/features/pages/page-settings.stories.tsx

@@ -6,6 +6,7 @@ import { createDefaultPages } from "@webstudio-is/project-build";
 import { isRootFolder } from "@webstudio-is/sdk";
 
 export default {
+  title: "Pages/Page Settings",
   component: PageSettings,
   parameters: {
     lostpixel: {

apps/builder/app/builder/features/pages/search-preview.stories.tsx

@@ -1,7 +1,10 @@
 import { Box } from "@webstudio-is/design-system";
 import { SearchPreview } from "./search-preview";
 
-export default { component: SearchPreview };
+export default {
+  title: "Pages/Search Preview",
+  component: SearchPreview,
+};
 
 export const Basic = () => (
   <Box css={{ width: 600, margin: 20 }}>

apps/builder/app/builder/features/project-settings/project-settings.stories.tsx

@@ -5,6 +5,7 @@ import { $pages, $project } from "~/shared/nano-states";
 import type { Project } from "@webstudio-is/project";
 
 export default {
+  title: "Project Settings",
   component: ProjectSettingsView,
 };