From 9d105173da47bf7d2167eee4d1d47f496d9a8ed4 Mon Sep 17 00:00:00 2001 From: FoxxMD Date: Tue, 30 Jun 2026 22:47:47 +0000 Subject: [PATCH] refactor(storybook): More re-organizing --- src/stories/{ => component}/Player.stories.tsx | 18 +++++++++--------- src/stories/{ => logs}/Logs.stories.tsx | 10 +++++----- .../{ => logs}/LogsFetchable.stories.tsx | 12 ++++++------ .../ErrorAlert.stories.tsx | 2 +- .../MobileNavbar.stories.tsx | 2 +- .../NavbarItems.stories.tsx | 2 +- .../{ => plays}/ActivityDetails.stories.tsx | 18 +++++++++--------- .../ActivityList.stories.tsx | 2 +- .../ActivityListSkeleton.stories.tsx | 2 +- .../ActivityTimeline.stories.tsx | 2 +- .../ListFilters.stories.tsx | 2 +- .../PlayInfo.stories.tsx | 2 +- .../TransformSteps.stories.tsx | 2 +- .../listFilters/PlayDateRange.stories.tsx | 2 +- .../listFilters/PlayPhrase.stories.tsx | 2 +- src/stories/tsconfig.json | 7 ++++--- 16 files changed, 44 insertions(+), 43 deletions(-) rename src/stories/{ => component}/Player.stories.tsx (87%) rename src/stories/{ => logs}/Logs.stories.tsx (91%) rename src/stories/{ => logs}/LogsFetchable.stories.tsx (80%) rename src/stories/{staticComponents => miscComponents}/ErrorAlert.stories.tsx (98%) rename src/stories/{staticComponents => miscComponents}/MobileNavbar.stories.tsx (97%) rename src/stories/{staticComponents => miscComponents}/NavbarItems.stories.tsx (97%) rename src/stories/{ => plays}/ActivityDetails.stories.tsx (76%) rename src/stories/{activities => plays}/ActivityList.stories.tsx (99%) rename src/stories/{activities => plays}/ActivityListSkeleton.stories.tsx (97%) rename src/stories/{timelines => plays}/ActivityTimeline.stories.tsx (99%) rename src/stories/{activities => plays}/ListFilters.stories.tsx (96%) rename src/stories/{staticComponents => plays}/PlayInfo.stories.tsx (98%) rename src/stories/{timelines => plays}/TransformSteps.stories.tsx (97%) rename src/stories/{activities => plays}/listFilters/PlayDateRange.stories.tsx (95%) rename src/stories/{activities => plays}/listFilters/PlayPhrase.stories.tsx (96%) diff --git a/src/stories/Player.stories.tsx b/src/stories/component/Player.stories.tsx similarity index 87% rename from src/stories/Player.stories.tsx rename to src/stories/component/Player.stories.tsx index 27ddc0f2..1bafbda1 100644 --- a/src/stories/Player.stories.tsx +++ b/src/stories/component/Player.stories.tsx @@ -1,21 +1,21 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { http, HttpResponse, delay, sse } from 'msw'; import { Container } from '@chakra-ui/react'; -import { ChakraPlayer, ChakraPlayerFetchable } from "../client/components/chakraPlayer/Player"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent } from "../core/Api.js"; +import { ChakraPlayer, ChakraPlayerFetchable } from "../../client/components/chakraPlayer/Player.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js"; +import { MsSseEvent } from "../../core/Api.js"; import { SSEProvider } from "@flamefrontend/sse-runtime-react"; -import { sseProviderOptions } from "../client/AppNext.js"; +import { sseProviderOptions } from "../../client/AppNext.js"; import dayjs from "dayjs"; -import { asJsonPlayObject } from "../core/PlayMarshalUtils.js"; -import { generatePlay } from "../core/PlayTestUtils.js"; +import { asJsonPlayObject } from "../../core/PlayMarshalUtils.js"; +import { generatePlay } from "../../core/PlayTestUtils.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/Player', + title: 'Component/Player', component: ChakraPlayer, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/Logs.stories.tsx b/src/stories/logs/Logs.stories.tsx similarity index 91% rename from src/stories/Logs.stories.tsx rename to src/stories/logs/Logs.stories.tsx index 4e3b4557..e8786a92 100644 --- a/src/stories/Logs.stories.tsx +++ b/src/stories/logs/Logs.stories.tsx @@ -1,10 +1,10 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { Container, Box } from '@chakra-ui/react'; -import { Logs } from "../client/components/LogsNext"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js"; +import { Logs } from "../../client/components/LogsNext.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js"; const traceMessage = "[2026-06-16 13:02:42.674 -0400] \u001b[90mTRACE\u001b[39m : \u001b[36m\u001b[90m[App]\u001b[36m \u001b[90m[Scrobblers]\u001b[36m \u001b[90m[Koito - koito]\u001b[36m \u001b[90m[Now Playing]\u001b[36m Not updating, previous matches current update --BUT-- time since last update (194s) is less than max threshold 238.121s\u001b[39m"; const debugMessage = "[2026-06-16 13:03:20.150 -0400] \u001b[34mDEBUG\u001b[39m : \u001b[36m\u001b[90m[App]\u001b[36m \u001b[90m[Sources]\u001b[36m \u001b[90m[Spotify - default]\u001b[36m Temporarily decreasing polling interval to 1.00s due to Player c98a8fb80e-foxx-arch-SingleUser reporting track duration remaining (2.01s) less than normal interval (10.00s)\u001b[39m"; @@ -16,7 +16,7 @@ const messages = [traceMessage, debugMessage, verboseMessage, infoMessage, error // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/Logs', + title: 'Logs/Log Lines', component: Logs, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/LogsFetchable.stories.tsx b/src/stories/logs/LogsFetchable.stories.tsx similarity index 80% rename from src/stories/LogsFetchable.stories.tsx rename to src/stories/logs/LogsFetchable.stories.tsx index 1a21d038..f8ae384c 100644 --- a/src/stories/LogsFetchable.stories.tsx +++ b/src/stories/logs/LogsFetchable.stories.tsx @@ -1,16 +1,16 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { http, HttpResponse, delay } from 'msw'; import { Container, Box } from '@chakra-ui/react'; -import { Logs, LogsFetchable } from "../client/components/LogsNext"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js"; -import { RightHeaderFloatingLogs } from "../client/components/AppHeader.js"; +import { Logs, LogsFetchable } from "../../client/components/LogsNext.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../../core/tests/utils/apiFixtures.js"; +import { RightHeaderFloatingLogs } from "../../client/components/AppHeader.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/Logs Window', + title: 'Logs/Floating Panel', component: RightHeaderFloatingLogs, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/staticComponents/ErrorAlert.stories.tsx b/src/stories/miscComponents/ErrorAlert.stories.tsx similarity index 98% rename from src/stories/staticComponents/ErrorAlert.stories.tsx rename to src/stories/miscComponents/ErrorAlert.stories.tsx index 6420a90d..61b86f83 100644 --- a/src/stories/staticComponents/ErrorAlert.stories.tsx +++ b/src/stories/miscComponents/ErrorAlert.stories.tsx @@ -32,7 +32,7 @@ type PropsAndCustomArgs = React.ComponentProps & { }; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.type<{args: PropsAndCustomArgs}>().meta({ - title: 'Static Components/Error Alert', + title: 'Misc Components/Error Alert', component: ErrorAlert, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/staticComponents/MobileNavbar.stories.tsx b/src/stories/miscComponents/MobileNavbar.stories.tsx similarity index 97% rename from src/stories/staticComponents/MobileNavbar.stories.tsx rename to src/stories/miscComponents/MobileNavbar.stories.tsx index 12bf7fce..5075fe94 100644 --- a/src/stories/staticComponents/MobileNavbar.stories.tsx +++ b/src/stories/miscComponents/MobileNavbar.stories.tsx @@ -8,7 +8,7 @@ import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-r // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Static Components/Mobile Sidebar', + title: 'Misc Components/Mobile Sidebar', component: MobileSidebarNav, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/staticComponents/NavbarItems.stories.tsx b/src/stories/miscComponents/NavbarItems.stories.tsx similarity index 97% rename from src/stories/staticComponents/NavbarItems.stories.tsx rename to src/stories/miscComponents/NavbarItems.stories.tsx index 32c411d6..94cb2b1f 100644 --- a/src/stories/staticComponents/NavbarItems.stories.tsx +++ b/src/stories/miscComponents/NavbarItems.stories.tsx @@ -9,7 +9,7 @@ import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-r // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Static Components/Navbar Items', + title: 'Misc Components/Navbar Items', component: SideNavItems, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/ActivityDetails.stories.tsx b/src/stories/plays/ActivityDetails.stories.tsx similarity index 76% rename from src/stories/ActivityDetails.stories.tsx rename to src/stories/plays/ActivityDetails.stories.tsx index f3ca263a..194cd26d 100644 --- a/src/stories/ActivityDetails.stories.tsx +++ b/src/stories/plays/ActivityDetails.stories.tsx @@ -1,19 +1,19 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { fn } from 'storybook/test'; import { Container } from '@chakra-ui/react'; -import { ActivityTimeline } from "../client/components/ActivityTimeline"; -import {Provider} from "../client/components/Provider"; -import { generateJsonPlays } from "../core/PlayTestUtils.js"; -import { generatePlayApiCommonDetailed } from "../core/tests/utils/apiFixtures.js"; -import { generatePlayWithLifecycle, playWithLifecycleScrobble } from "../core/tests/utils/fixtures.js"; -import { asJsonPlayObject } from '../core/PlayMarshalUtils.js'; -import { ActivityDetails } from "../client/components/ActivityDetail.js"; +import { ActivityTimeline } from "../../client/components/ActivityTimeline.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateJsonPlays } from "../../core/PlayTestUtils.js"; +import { generatePlayApiCommonDetailed } from "../../core/tests/utils/apiFixtures.js"; +import { generatePlayWithLifecycle, playWithLifecycleScrobble } from "../../core/tests/utils/fixtures.js"; +import { asJsonPlayObject } from '../../core/PlayMarshalUtils.js'; +import { ActivityDetails } from "../../client/components/ActivityDetail.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/ActivityDetails', + title: 'Plays/Details', component: ActivityDetails, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/activities/ActivityList.stories.tsx b/src/stories/plays/ActivityList.stories.tsx similarity index 99% rename from src/stories/activities/ActivityList.stories.tsx rename to src/stories/plays/ActivityList.stories.tsx index 9770a7e3..ccc8023b 100644 --- a/src/stories/activities/ActivityList.stories.tsx +++ b/src/stories/plays/ActivityList.stories.tsx @@ -24,7 +24,7 @@ import { faker } from '@faker-js/faker'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Activities/List', + title: 'Plays/List', component: ActivityList, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/activities/ActivityListSkeleton.stories.tsx b/src/stories/plays/ActivityListSkeleton.stories.tsx similarity index 97% rename from src/stories/activities/ActivityListSkeleton.stories.tsx rename to src/stories/plays/ActivityListSkeleton.stories.tsx index 4fc3988c..dbb730f7 100644 --- a/src/stories/activities/ActivityListSkeleton.stories.tsx +++ b/src/stories/plays/ActivityListSkeleton.stories.tsx @@ -10,7 +10,7 @@ import { ActivitySummarySkeleton } from "../../client/components/ActivityDetail. // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Activities/List Skeleton', + title: 'Plays/List Skeleton', component: ActivitySummarySkeleton , parameters: { diff --git a/src/stories/timelines/ActivityTimeline.stories.tsx b/src/stories/plays/ActivityTimeline.stories.tsx similarity index 99% rename from src/stories/timelines/ActivityTimeline.stories.tsx rename to src/stories/plays/ActivityTimeline.stories.tsx index 0cbeda8a..e0423782 100644 --- a/src/stories/timelines/ActivityTimeline.stories.tsx +++ b/src/stories/plays/ActivityTimeline.stories.tsx @@ -12,7 +12,7 @@ import { asJsonPlayObject } from '../../core/PlayMarshalUtils.js'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Timelines/Play', + title: 'Plays/Timeline', component: ActivityTimeline, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/activities/ListFilters.stories.tsx b/src/stories/plays/ListFilters.stories.tsx similarity index 96% rename from src/stories/activities/ListFilters.stories.tsx rename to src/stories/plays/ListFilters.stories.tsx index 25eee66d..8820dfa1 100644 --- a/src/stories/activities/ListFilters.stories.tsx +++ b/src/stories/plays/ListFilters.stories.tsx @@ -11,7 +11,7 @@ import { PlayStateFilter } from "../../client/components/playActivity/ListFilter // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Activities/List Filters/Play State', + title: 'Plays/List Filters/Play State', component: PlayStateFilter, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/staticComponents/PlayInfo.stories.tsx b/src/stories/plays/PlayInfo.stories.tsx similarity index 98% rename from src/stories/staticComponents/PlayInfo.stories.tsx rename to src/stories/plays/PlayInfo.stories.tsx index c77013c3..8a6ab9c7 100644 --- a/src/stories/staticComponents/PlayInfo.stories.tsx +++ b/src/stories/plays/PlayInfo.stories.tsx @@ -18,7 +18,7 @@ type PropsAndCustomArgs = React.ComponentProps & { }; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.type<{args: PropsAndCustomArgs}>().meta({ - title: 'Static Components/Play Info', + title: 'Plays/Play Info', component: PlayData, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/timelines/TransformSteps.stories.tsx b/src/stories/plays/TransformSteps.stories.tsx similarity index 97% rename from src/stories/timelines/TransformSteps.stories.tsx rename to src/stories/plays/TransformSteps.stories.tsx index 79b4e7dc..36d5033c 100644 --- a/src/stories/timelines/TransformSteps.stories.tsx +++ b/src/stories/plays/TransformSteps.stories.tsx @@ -11,7 +11,7 @@ import { asJsonPlayObject } from "../../core/PlayMarshalUtils.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Timelines/Play Transform Steps', + title: 'Plays/Transform Timeline', component: TransformSteps, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/activities/listFilters/PlayDateRange.stories.tsx b/src/stories/plays/listFilters/PlayDateRange.stories.tsx similarity index 95% rename from src/stories/activities/listFilters/PlayDateRange.stories.tsx rename to src/stories/plays/listFilters/PlayDateRange.stories.tsx index 27e799aa..1d9a3c78 100644 --- a/src/stories/activities/listFilters/PlayDateRange.stories.tsx +++ b/src/stories/plays/listFilters/PlayDateRange.stories.tsx @@ -9,7 +9,7 @@ import { Provider } from "../../../client/components/Provider.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Activities/List Filters/Play Date Range', + title: 'Plays/List Filters/Play Date Range', component: PlayDateRangeFilter, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/activities/listFilters/PlayPhrase.stories.tsx b/src/stories/plays/listFilters/PlayPhrase.stories.tsx similarity index 96% rename from src/stories/activities/listFilters/PlayPhrase.stories.tsx rename to src/stories/plays/listFilters/PlayPhrase.stories.tsx index 3ec85cdd..8fcfd6c3 100644 --- a/src/stories/activities/listFilters/PlayPhrase.stories.tsx +++ b/src/stories/plays/listFilters/PlayPhrase.stories.tsx @@ -9,7 +9,7 @@ import { Provider } from "../../../client/components/Provider.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Activities/List Filters/Phrase', + title: 'Plays/List Filters/Phrase', component: PhraseFilter, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/src/stories/tsconfig.json b/src/stories/tsconfig.json index c68a02f0..2bd2fe3e 100644 --- a/src/stories/tsconfig.json +++ b/src/stories/tsconfig.json @@ -17,10 +17,11 @@ ], }, "include": [ - "*.stories.ts", + "*.stories.tsx", + "**/*.stories.tsx", "*.tsx", - "..src/client/**/*.tsx", - "..src/backend/tests/**/*.ts" + "../src/client/**/*.tsx", + "../src/backend/tests/**/*.ts" ], "exclude": [ "node_modules"