From 3e7bbab5b0270ccdb73d68878a4dc4bfeaef477c Mon Sep 17 00:00:00 2001 From: FoxxMD Date: Tue, 30 Jun 2026 21:03:14 +0000 Subject: [PATCH] refactor(storybook): organize storybook file and loglical --- src/stories/.Button.stories.ts.swo | Bin 12288 -> 0 bytes src/stories/Button.stories.ts | 58 -------------- src/stories/Button.tsx | 37 --------- src/stories/Header.stories.tsx | 31 -------- src/stories/Header.tsx | 56 -------------- src/stories/Page.stories.ts | 30 ------- src/stories/Page.tsx | 73 ------------------ .../{ => activities}/ActivityList.stories.tsx | 30 +++---- .../ActivityListSkeleton.stories.tsx | 2 +- .../{ => activities}/ListFilters.stories.tsx | 12 +-- .../listFilters}/PlayDateRange.stories.tsx | 8 +- .../listFilters}/PlayPhrase.stories.tsx | 8 +- src/stories/button.css | 30 ------- .../ComponentStatDead.stories.tsx | 14 ++-- .../ComponentStatLive.stories.tsx | 14 ++-- .../ComponentStatQueued.stories.tsx | 12 +-- .../ComponentSummary.stories.tsx | 24 ++---- src/stories/header.css | 32 -------- src/stories/page.css | 68 ---------------- .../{ => pages}/ComponentDetailed.stories.tsx | 16 ++-- .../{ => pages}/ComponentList.stories.tsx | 16 ++-- .../MobileNavbar.stories.tsx | 8 +- .../NavbarItems.stories.tsx | 10 +-- .../PlayInfo.stories.tsx | 14 ++-- .../ActivityTimeline.stories.tsx | 16 ++-- .../TransformSteps.stories.tsx | 14 ++-- 26 files changed, 105 insertions(+), 528 deletions(-) delete mode 100644 src/stories/.Button.stories.ts.swo delete mode 100644 src/stories/Button.stories.ts delete mode 100644 src/stories/Button.tsx delete mode 100644 src/stories/Header.stories.tsx delete mode 100644 src/stories/Header.tsx delete mode 100644 src/stories/Page.stories.ts delete mode 100644 src/stories/Page.tsx rename src/stories/{ => activities}/ActivityList.stories.tsx (93%) rename src/stories/{staticComponents => activities}/ActivityListSkeleton.stories.tsx (96%) rename src/stories/{ => activities}/ListFilters.stories.tsx (74%) rename src/stories/{ListFilters => activities/listFilters}/PlayDateRange.stories.tsx (79%) rename src/stories/{ListFilters => activities/listFilters}/PlayPhrase.stories.tsx (80%) delete mode 100644 src/stories/button.css rename src/stories/{ => component}/ComponentStatDead.stories.tsx (83%) rename src/stories/{ => component}/ComponentStatLive.stories.tsx (87%) rename src/stories/{ => component}/ComponentStatQueued.stories.tsx (85%) rename src/stories/{ => component}/ComponentSummary.stories.tsx (80%) delete mode 100644 src/stories/header.css delete mode 100644 src/stories/page.css rename src/stories/{ => pages}/ComponentDetailed.stories.tsx (88%) rename src/stories/{ => pages}/ComponentList.stories.tsx (83%) rename src/stories/{ => staticComponents}/MobileNavbar.stories.tsx (87%) rename src/stories/{ => staticComponents}/NavbarItems.stories.tsx (80%) rename src/stories/{ => staticComponents}/PlayInfo.stories.tsx (84%) rename src/stories/{ => timelines}/ActivityTimeline.stories.tsx (89%) rename src/stories/{ => timelines}/TransformSteps.stories.tsx (75%) diff --git a/src/stories/.Button.stories.ts.swo b/src/stories/.Button.stories.ts.swo deleted file mode 100644 index f3ebdee7ab04d3e8742da4ca559e74db56c93d07..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12288 zcmeI2zi%8x6vxL&koaXlaYOltB@Tq|Ho;M1&Itle6i65o9ETzb$=vSj?d0}$mYLbR zES8mm3M48j_zxlwG&EFD(9ox(MoPhdK*4u*_tplXODsfTX-@ijeY5l4zV~_WjbwR; zXRp1pMX&YFGJKw6?2qI}`C#?)rSIaCEK`wi%MbgU--s>@FP>Xp7aQw~_69Sh$0p~Y zFoDrwV64&-zrR&jtFm76wP(#DC;px%;0YX^Kw;zV#`5m^tLLgwUp?~zt(@LHx*u=h z33vjYfG6Mycmke)C*TQq0>_qs&6n6+M1P{m;9_%K`p32T>Mx#vC*TQq0-k^;;0bsF zo`5Id33vjYfG2Pa3Gj%qn@=#d^CW`D|NrNI|Nr?cV?RSbL0>~(K~t!JR-jYRgJ&4K z5B&lSpjV(5p?k}WeFcH`Ev?K()VwfDGij5?PhxFu`a$(-Z8=nG+`DahN{@m_g(heW zyNzMsp3RsobJ1e19=JWceaWq=m?pyV*EgA{Q;$TdJuP0zyZ&u-1O?cmRYPG798lua#Uzh z_jfntE*eDFKC&r6`=~zEz3BK^X;XJ(y?uvI@>Ddhog;zzym6ggoim5(m#A6Qn!-|% zxAVpU;L#{HgSOhtO}8E+#w03;gKn>hj`k_mYC@gfJSYrTyC=@t`&E~^u@0;-wu4=@ gqiTfrsu^6XM;RmBTD@^#rUe?lJC# void; -} - -/** Primary UI component for user interaction */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; diff --git a/src/stories/Header.stories.tsx b/src/stories/Header.stories.tsx deleted file mode 100644 index efba810d..00000000 --- a/src/stories/Header.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import preview from "../../.storybook/preview.js"; - -import { AppHeader } from "../client/components/AppHeader.js"; -import {Provider} from "../client/components/Provider"; - -const meta = preview.meta({ - title: 'Example/Header', - component: AppHeader, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'padded', - }, - render: function Render(args) { - return () - }, - decorators: [ - (Story) => (), - ] -}); - -export const LoggedIn = meta.story({ - args: { - user: { - name: 'Jane Doe', - }, - }, -}); - -export const LoggedOut = meta.story(); diff --git a/src/stories/Header.tsx b/src/stories/Header.tsx deleted file mode 100644 index 1bf981a4..00000000 --- a/src/stories/Header.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import { Button } from './Button'; -import './header.css'; - -type User = { - name: string; -}; - -export interface HeaderProps { - user?: User; - onLogin?: () => void; - onLogout?: () => void; - onCreateAccount?: () => void; -} - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - -
-
-
-); diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts deleted file mode 100644 index aae09358..00000000 --- a/src/stories/Page.stories.ts +++ /dev/null @@ -1,30 +0,0 @@ -import preview from "../../.storybook/preview.js"; - -import { expect, userEvent, within } from 'storybook/test'; - -import { Page } from './Page.js'; - -const meta = preview.meta({ - title: 'Example/Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, -}); - -export const LoggedOut = meta.story(); - -// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn = meta.story({ - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}); diff --git a/src/stories/Page.tsx b/src/stories/Page.tsx deleted file mode 100644 index e1174830..00000000 --- a/src/stories/Page.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -import { Header } from './Header'; -import './page.css'; - -type User = { - name: string; -}; - -export const Page: React.FC = () => { - const [user, setUser] = React.useState(); - - return ( -
-
setUser({ name: 'Jane Doe' })} - onLogout={() => setUser(undefined)} - onCreateAccount={() => setUser({ name: 'Jane Doe' })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/src/stories/ActivityList.stories.tsx b/src/stories/activities/ActivityList.stories.tsx similarity index 93% rename from src/stories/ActivityList.stories.tsx rename to src/stories/activities/ActivityList.stories.tsx index f59ee55a..9770a7e3 100644 --- a/src/stories/ActivityList.stories.tsx +++ b/src/stories/activities/ActivityList.stories.tsx @@ -1,30 +1,30 @@ -import '../client/wdyr.js'; -import preview from "../../.storybook/preview.js"; +import '../../client/wdyr.js'; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { http, HttpResponse, delay, sse } from 'msw'; import { fn } from 'storybook/test'; import { Container } from '@chakra-ui/react'; -import { ListContainerFetchable, ListContainerFilterable, ActivityList } from "../client/components/playActivity/ActivityList.js"; -import {Provider} from "../client/components/Provider.js"; -import { generateJsonPlays, generatePlay, normalizePlays } from "../core/PlayTestUtils.js"; -import { ErrorLike, JsonPlayObject, PlayState, qsOptions } from "../core/Atomic.js"; -import {playWithLifecycleScrobble, generatePlayWithLifecycle, randomPlayState} from '../core/tests/utils/fixtures.js' -import { generateArray } from "../core/DataUtils.js"; +import { ListContainerFetchable, ListContainerFilterable, ActivityList } from "../../client/components/playActivity/ActivityList.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateJsonPlays, generatePlay, normalizePlays } from "../../core/PlayTestUtils.js"; +import { ErrorLike, JsonPlayObject, PlayState, qsOptions } from "../../core/Atomic.js"; +import {playWithLifecycleScrobble, generatePlayWithLifecycle, randomPlayState} from '../../core/tests/utils/fixtures.js' +import { generateArray } from "../../core/DataUtils.js"; import dayjs from "dayjs"; import qs from 'qs'; -import { asJsonPlayObject } from "../core/PlayMarshalUtils.js"; -import { generatePlayApiCommon, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent, PlayApiCommonDetailed } from "../core/Api.js"; -import { CompareDateBetween, PaginatedResponse } from "../backend/common/database/drizzle/repositories/BaseRepository.js"; -import { QueryPlaysOptsJson } from '../backend/common/database/drizzle/repositories/PlayRepository.js'; +import { asJsonPlayObject } from "../../core/PlayMarshalUtils.js"; +import { generatePlayApiCommon, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList } from "../../core/tests/utils/apiFixtures.js"; +import { MsSseEvent, PlayApiCommonDetailed } from "../../core/Api.js"; +import { CompareDateBetween, PaginatedResponse } from "../../backend/common/database/drizzle/repositories/BaseRepository.js"; +import { QueryPlaysOptsJson } from '../../backend/common/database/drizzle/repositories/PlayRepository.js'; import { SSEProvider } from "@flamefrontend/sse-runtime-react"; -import { sseProviderOptions } from '../client/AppNext.js'; +import { sseProviderOptions } from '../../client/AppNext.js'; 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: 'Examples/Activity List', + title: 'Activities/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/staticComponents/ActivityListSkeleton.stories.tsx b/src/stories/activities/ActivityListSkeleton.stories.tsx similarity index 96% rename from src/stories/staticComponents/ActivityListSkeleton.stories.tsx rename to src/stories/activities/ActivityListSkeleton.stories.tsx index 0232144d..4fc3988c 100644 --- a/src/stories/staticComponents/ActivityListSkeleton.stories.tsx +++ b/src/stories/activities/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: 'Static Components/Activity List Skeleton', + title: 'Activities/List Skeleton', component: ActivitySummarySkeleton , parameters: { diff --git a/src/stories/ListFilters.stories.tsx b/src/stories/activities/ListFilters.stories.tsx similarity index 74% rename from src/stories/ListFilters.stories.tsx rename to src/stories/activities/ListFilters.stories.tsx index bc554ce5..25eee66d 100644 --- a/src/stories/ListFilters.stories.tsx +++ b/src/stories/activities/ListFilters.stories.tsx @@ -1,17 +1,17 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { Container } from '@chakra-ui/react'; import { fn } from 'storybook/test'; -import { ErrorAlert } from "../client/components/ErrorAlert.js"; -import {Provider} from "../client/components/Provider"; -import { ErrorLike } from "../core/Atomic.js"; -import { PlayStateFilter } from "../client/components/playActivity/ListFilters.js"; +import { ErrorAlert } from "../../client/components/ErrorAlert.js"; +import {Provider} from "../../client/components/Provider.js"; +import { ErrorLike } from "../../core/Atomic.js"; +import { PlayStateFilter } from "../../client/components/playActivity/ListFilters.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/List Filters/Play State', + title: 'Activities/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/ListFilters/PlayDateRange.stories.tsx b/src/stories/activities/listFilters/PlayDateRange.stories.tsx similarity index 79% rename from src/stories/ListFilters/PlayDateRange.stories.tsx rename to src/stories/activities/listFilters/PlayDateRange.stories.tsx index d0c71cf7..27e799aa 100644 --- a/src/stories/ListFilters/PlayDateRange.stories.tsx +++ b/src/stories/activities/listFilters/PlayDateRange.stories.tsx @@ -1,15 +1,15 @@ -import preview from "../../../.storybook/preview.js"; +import preview from "../../../../.storybook/preview.js"; import React from 'react'; import { Container } from '@chakra-ui/react'; import { fn } from 'storybook/test'; -import { PlayDateRangeFilter } from "../../client/components/playActivity/ListFilters.js"; -import { Provider } from "../../client/components/Provider.js"; +import { PlayDateRangeFilter } from "../../../client/components/playActivity/ListFilters.js"; +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: 'Examples/List Filters/Play Date Range', + title: 'Activities/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/ListFilters/PlayPhrase.stories.tsx b/src/stories/activities/listFilters/PlayPhrase.stories.tsx similarity index 80% rename from src/stories/ListFilters/PlayPhrase.stories.tsx rename to src/stories/activities/listFilters/PlayPhrase.stories.tsx index f5d858aa..3ec85cdd 100644 --- a/src/stories/ListFilters/PlayPhrase.stories.tsx +++ b/src/stories/activities/listFilters/PlayPhrase.stories.tsx @@ -1,15 +1,15 @@ -import preview from "../../../.storybook/preview.js"; +import preview from "../../../../.storybook/preview.js"; import React from 'react'; import { Container } from '@chakra-ui/react'; import { fn } from 'storybook/test'; -import { PhraseFilter } from "../../client/components/playActivity/ListFilters.js"; -import { Provider } from "../../client/components/Provider.js"; +import { PhraseFilter } from "../../../client/components/playActivity/ListFilters.js"; +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: 'Examples/List Filters/Phrase', + title: 'Activities/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/button.css b/src/stories/button.css deleted file mode 100644 index 4e3620b0..00000000 --- a/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - display: inline-block; - cursor: pointer; - border: 0; - border-radius: 3em; - font-weight: 700; - line-height: 1; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -.storybook-button--primary { - background-color: #555ab9; - color: white; -} -.storybook-button--secondary { - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; - background-color: transparent; - color: #333; -} -.storybook-button--small { - padding: 10px 16px; - font-size: 12px; -} -.storybook-button--medium { - padding: 11px 20px; - font-size: 14px; -} -.storybook-button--large { - padding: 12px 24px; - font-size: 16px; -} diff --git a/src/stories/ComponentStatDead.stories.tsx b/src/stories/component/ComponentStatDead.stories.tsx similarity index 83% rename from src/stories/ComponentStatDead.stories.tsx rename to src/stories/component/ComponentStatDead.stories.tsx index f90d7570..d2a0fcca 100644 --- a/src/stories/ComponentStatDead.stories.tsx +++ b/src/stories/component/ComponentStatDead.stories.tsx @@ -1,19 +1,19 @@ -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, Box } from '@chakra-ui/react'; -import { DeadLetterIndicator } from "../client/components/msComponent/Stats.js"; -import { sseProviderOptions } from "../client/AppNext.js"; -import {Provider} from "../client/components/Provider"; +import { DeadLetterIndicator } from "../../client/components/msComponent/Stats.js"; +import { sseProviderOptions } from "../../client/AppNext.js"; +import {Provider} from "../../client/components/Provider.js"; import { SSEProvider } from "@flamefrontend/sse-runtime-react"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent } from "../core/Api.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../../core/tests/utils/apiFixtures.js"; +import { MsSseEvent } from "../../core/Api.js"; 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: 'Examples/Component Details/Stat Dead', + title: 'Component/Details/Stat Dead', component: DeadLetterIndicator, 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/ComponentStatLive.stories.tsx b/src/stories/component/ComponentStatLive.stories.tsx similarity index 87% rename from src/stories/ComponentStatLive.stories.tsx rename to src/stories/component/ComponentStatLive.stories.tsx index b043999e..d36fa6a0 100644 --- a/src/stories/ComponentStatLive.stories.tsx +++ b/src/stories/component/ComponentStatLive.stories.tsx @@ -1,18 +1,18 @@ -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, Box } from '@chakra-ui/react'; -import { CountLiveIndicator } from "../client/components/msComponent/Stats.js"; -import { sseProviderOptions } from "../client/AppNext.js"; -import {Provider} from "../client/components/Provider"; +import { CountLiveIndicator } from "../../client/components/msComponent/Stats.js"; +import { sseProviderOptions } from "../../client/AppNext.js"; +import {Provider} from "../../client/components/Provider.js"; import { SSEProvider } from "@flamefrontend/sse-runtime-react"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent } from "../core/Api.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../../core/tests/utils/apiFixtures.js"; +import { MsSseEvent } from "../../core/Api.js"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/Component Details/Stats Count', + title: 'Component/Details/Stats Count', component: CountLiveIndicator, 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/ComponentStatQueued.stories.tsx b/src/stories/component/ComponentStatQueued.stories.tsx similarity index 85% rename from src/stories/ComponentStatQueued.stories.tsx rename to src/stories/component/ComponentStatQueued.stories.tsx index 59236a3e..108f663d 100644 --- a/src/stories/ComponentStatQueued.stories.tsx +++ b/src/stories/component/ComponentStatQueued.stories.tsx @@ -1,19 +1,19 @@ -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, Box } from '@chakra-ui/react'; -import { QueuedIndicator } from "../client/components/msComponent/Stats.js"; -import { sseProviderOptions } from "../client/AppNext.js"; -import {Provider} from "../client/components/Provider"; +import { QueuedIndicator } from "../../client/components/msComponent/Stats.js"; +import { sseProviderOptions } from "../../client/AppNext.js"; +import {Provider} from "../../client/components/Provider.js"; import { SSEProvider } from "@flamefrontend/sse-runtime-react"; import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent } from "../core/Api.js"; +import { MsSseEvent } from "../../core/Api.js"; 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: 'Examples/Component Details/Stat Queued', + title: 'Component/Details/Stat Queued', component: QueuedIndicator, 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/ComponentSummary.stories.tsx b/src/stories/component/ComponentSummary.stories.tsx similarity index 80% rename from src/stories/ComponentSummary.stories.tsx rename to src/stories/component/ComponentSummary.stories.tsx index 0c21a551..9230e4cf 100644 --- a/src/stories/ComponentSummary.stories.tsx +++ b/src/stories/component/ComponentSummary.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 { MSComponentSummary } from "../client/components/msComponent/MSComponentSummary.js"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent } from "../core/Api.js"; +import { MSComponentSummary } from "../../client/components/msComponent/MSComponentSummary.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 { faker } from "@faker-js/faker"; import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router'; import dayjs from "dayjs"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/ComponentSummary', + title: 'Component/Summary', component: MSComponentSummary, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout @@ -43,7 +43,7 @@ const meta = preview.meta({ return () }, decorators: [ - (Story) => (), + (Story) => ( options={sseProviderOptions}>), withRouter ] // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args @@ -62,10 +62,6 @@ export const SourceSummaryFetchable = meta.story({ fetchable: true, componentId: 1, }, - decorators: [ - (Story) => - ( options={sseProviderOptions}>), - ], parameters: { msw: { handlers: [ @@ -106,10 +102,6 @@ export const ClientSummaryFetchable = meta.story({ fetchable: true, componentId: 1, }, - decorators: [ - (Story) => - ( options={sseProviderOptions}>), - ], parameters: { msw: { handlers: [ diff --git a/src/stories/header.css b/src/stories/header.css deleted file mode 100644 index 5efd46c2..00000000 --- a/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - display: inline-block; - vertical-align: top; - margin: 6px 0 6px 10px; - font-weight: 700; - font-size: 20px; - line-height: 1; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - margin-right: 10px; - color: #333; - font-size: 14px; -} diff --git a/src/stories/page.css b/src/stories/page.css deleted file mode 100644 index 77c81d2d..00000000 --- a/src/stories/page.css +++ /dev/null @@ -1,68 +0,0 @@ -.storybook-page { - margin: 0 auto; - padding: 48px 20px; - max-width: 600px; - color: #333; - font-size: 14px; - line-height: 24px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-page h2 { - display: inline-block; - vertical-align: top; - margin: 0 0 4px; - font-weight: 700; - font-size: 32px; - line-height: 1; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - color: inherit; -} - -.storybook-page ul { - margin: 1em 0; - padding-left: 30px; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - vertical-align: top; - margin-right: 10px; - border-radius: 1em; - background: #e7fdd8; - padding: 4px 12px; - color: #357a14; - font-weight: 700; - font-size: 11px; - line-height: 12px; -} - -.storybook-page .tip-wrapper { - margin-top: 40px; - margin-bottom: 40px; - font-size: 13px; - line-height: 20px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - vertical-align: top; - margin-top: 3px; - margin-right: 4px; - width: 12px; - height: 12px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/src/stories/ComponentDetailed.stories.tsx b/src/stories/pages/ComponentDetailed.stories.tsx similarity index 88% rename from src/stories/ComponentDetailed.stories.tsx rename to src/stories/pages/ComponentDetailed.stories.tsx index d37703c6..4311c357 100644 --- a/src/stories/ComponentDetailed.stories.tsx +++ b/src/stories/pages/ComponentDetailed.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, sse } from 'msw'; import { Container } from '@chakra-ui/react'; -import { ComponentDetailedDesktop } from "../client/components/msComponent/MSComponentDetailed.js"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateFakeError, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js"; -import { MsSseEvent, PlayApiCommonDetailed } from "../core/Api.js"; +import { ComponentDetailedDesktop } from "../../client/components/msComponent/MSComponentDetailed.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateClientApiJson, generateFakeError, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js"; +import { MsSseEvent, PlayApiCommonDetailed } from "../../core/Api.js"; import { SSEProvider } from "@flamefrontend/sse-runtime-react"; -import { sseProviderOptions } from "../client/AppNext.js"; +import { sseProviderOptions } from "../../client/AppNext.js"; import { faker } from "@faker-js/faker"; -import { PaginatedResponse } from "../backend/common/database/drizzle/repositories/BaseRepository.js"; +import { PaginatedResponse } from "../../backend/common/database/drizzle/repositories/BaseRepository.js"; import dayjs from "dayjs"; import { serializeError } from "serialize-error"; @@ -18,7 +18,7 @@ let livePlayData: PlayApiCommonDetailed[] = []; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/Component Detailed', + title: 'Pages/Component Detailed', component: ComponentDetailedDesktop, 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/ComponentList.stories.tsx b/src/stories/pages/ComponentList.stories.tsx similarity index 83% rename from src/stories/ComponentList.stories.tsx rename to src/stories/pages/ComponentList.stories.tsx index 4aa39828..344bf288 100644 --- a/src/stories/ComponentList.stories.tsx +++ b/src/stories/pages/ComponentList.stories.tsx @@ -1,20 +1,20 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { Container } from '@chakra-ui/react'; -import { MSComponentList } from "../client/components/msComponent/MSComponentList.js"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js"; -import { generateArray } from "../core/DataUtils.js"; +import { MSComponentList } from "../../client/components/msComponent/MSComponentList.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js"; +import { generateArray } from "../../core/DataUtils.js"; import { faker } from "@faker-js/faker"; -import { MsSseEvent } from "../core/Api.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 { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/ComponentList', + title: 'Pages/Components List', component: MSComponentList, 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/MobileNavbar.stories.tsx b/src/stories/staticComponents/MobileNavbar.stories.tsx similarity index 87% rename from src/stories/MobileNavbar.stories.tsx rename to src/stories/staticComponents/MobileNavbar.stories.tsx index ba267e66..12bf7fce 100644 --- a/src/stories/MobileNavbar.stories.tsx +++ b/src/stories/staticComponents/MobileNavbar.stories.tsx @@ -1,14 +1,14 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { Container, Box } from '@chakra-ui/react'; -import { MobileSidebarNav } from "../client/components/MobileMenu"; -import {Provider} from "../client/components/Provider"; +import { MobileSidebarNav } from "../../client/components/MobileMenu.js"; +import {Provider} from "../../client/components/Provider.js"; import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/MobileSidebar', + title: 'Static 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/NavbarItems.stories.tsx b/src/stories/staticComponents/NavbarItems.stories.tsx similarity index 80% rename from src/stories/NavbarItems.stories.tsx rename to src/stories/staticComponents/NavbarItems.stories.tsx index 81680ece..32c411d6 100644 --- a/src/stories/NavbarItems.stories.tsx +++ b/src/stories/staticComponents/NavbarItems.stories.tsx @@ -1,15 +1,15 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { Container, Box } from '@chakra-ui/react'; -import { SideNavItems, NAV_LINKS } from "../client/components/SideNav"; -import {Provider} from "../client/components/Provider"; -import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js"; +import { SideNavItems, NAV_LINKS } from "../../client/components/SideNav.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js"; import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/NavbarItems', + title: 'Static 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/PlayInfo.stories.tsx b/src/stories/staticComponents/PlayInfo.stories.tsx similarity index 84% rename from src/stories/PlayInfo.stories.tsx rename to src/stories/staticComponents/PlayInfo.stories.tsx index b5196a0f..c77013c3 100644 --- a/src/stories/PlayInfo.stories.tsx +++ b/src/stories/staticComponents/PlayInfo.stories.tsx @@ -1,14 +1,14 @@ -import preview from "../../.storybook/preview.js"; +import preview from "../../../.storybook/preview.js"; import React from 'react'; import { fn } from 'storybook/test'; -import { PlayData } from "../client/components/PlayData.js"; -import {Provider} from "../client/components/Provider"; +import { PlayData } from "../../client/components/PlayData.js"; +import {Provider} from "../../client/components/Provider.js"; import { Container } from '@chakra-ui/react'; -import { generateArtistCredits, generateArtists, generateJsonPlay, generatePlay, withBrainz } from "../core/PlayTestUtils.js" +import { generateArtistCredits, generateArtists, generateJsonPlay, generatePlay, withBrainz } from "../../core/PlayTestUtils.js" import clone from "clone"; -import { asJsonPlayObject } from '../core/PlayMarshalUtils.js'; -import { JsonPlayObject } from "../core/Atomic.js"; +import { asJsonPlayObject } from '../../core/PlayMarshalUtils.js'; +import { JsonPlayObject } from "../../core/Atomic.js"; type PropsAndCustomArgs = React.ComponentProps & { includeAlbumArtists?: boolean; @@ -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: 'Examples/PlayInfo', + title: 'Static Components/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/ActivityTimeline.stories.tsx b/src/stories/timelines/ActivityTimeline.stories.tsx similarity index 89% rename from src/stories/ActivityTimeline.stories.tsx rename to src/stories/timelines/ActivityTimeline.stories.tsx index 756f6dc6..0cbeda8a 100644 --- a/src/stories/ActivityTimeline.stories.tsx +++ b/src/stories/timelines/ActivityTimeline.stories.tsx @@ -1,18 +1,18 @@ -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 { 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'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = preview.meta({ - title: 'Examples/ActivityTimline', + title: 'Timelines/Play', 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/TransformSteps.stories.tsx b/src/stories/timelines/TransformSteps.stories.tsx similarity index 75% rename from src/stories/TransformSteps.stories.tsx rename to src/stories/timelines/TransformSteps.stories.tsx index c18173e7..79b4e7dc 100644 --- a/src/stories/TransformSteps.stories.tsx +++ b/src/stories/timelines/TransformSteps.stories.tsx @@ -1,17 +1,17 @@ -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 { TransformSteps } from "../client/components/TransformSteps.js"; -import {Provider} from "../client/components/Provider"; -import { generateJsonPlays, generatePlay } from "../core/PlayTestUtils.js"; -import {generatePlayWithLifecycle} from '../core/tests/utils/fixtures' -import { asJsonPlayObject } from "../core/PlayMarshalUtils.js"; +import { TransformSteps } from "../../client/components/TransformSteps.js"; +import {Provider} from "../../client/components/Provider.js"; +import { generateJsonPlays, generatePlay } from "../../core/PlayTestUtils.js"; +import {generatePlayWithLifecycle} from '../../core/tests/utils/fixtures.js' +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: 'Examples/TransformSteps', + title: 'Timelines/Play Transform Steps', component: TransformSteps, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout