[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients
docs.multi-scrobbler.app
deezer
docker
jellyfin
koito
lastfm
listenbrainz
maloja
mopidy
mpris
music
music-assistant
plex
scrobble
self-hosted
spotify
subsonic
tautulli
youtube-music
refactor(storybook): organize storybook file and loglical
+105
-528
src/stories/.Button.stories.ts.swo
src/stories/.Button.stories.ts.swo
This is a binary file and will not be displayed.
+15
-15
src/stories/ActivityList.stories.tsx
src/stories/activities/ActivityList.stories.tsx
+15
-15
src/stories/ActivityList.stories.tsx
src/stories/activities/ActivityList.stories.tsx
···
1
-
import '../client/wdyr.js';
2
-
import preview from "../../.storybook/preview.js";
1
+
import '../../client/wdyr.js';
2
+
import preview from "../../../.storybook/preview.js";
3
3
import React from 'react';
4
4
import { http, HttpResponse, delay, sse } from 'msw';
5
5
6
6
import { fn } from 'storybook/test';
7
7
import { Container } from '@chakra-ui/react';
8
-
import { ListContainerFetchable, ListContainerFilterable, ActivityList } from "../client/components/playActivity/ActivityList.js";
9
-
import {Provider} from "../client/components/Provider.js";
10
-
import { generateJsonPlays, generatePlay, normalizePlays } from "../core/PlayTestUtils.js";
11
-
import { ErrorLike, JsonPlayObject, PlayState, qsOptions } from "../core/Atomic.js";
12
-
import {playWithLifecycleScrobble, generatePlayWithLifecycle, randomPlayState} from '../core/tests/utils/fixtures.js'
13
-
import { generateArray } from "../core/DataUtils.js";
8
+
import { ListContainerFetchable, ListContainerFilterable, ActivityList } from "../../client/components/playActivity/ActivityList.js";
9
+
import {Provider} from "../../client/components/Provider.js";
10
+
import { generateJsonPlays, generatePlay, normalizePlays } from "../../core/PlayTestUtils.js";
11
+
import { ErrorLike, JsonPlayObject, PlayState, qsOptions } from "../../core/Atomic.js";
12
+
import {playWithLifecycleScrobble, generatePlayWithLifecycle, randomPlayState} from '../../core/tests/utils/fixtures.js'
13
+
import { generateArray } from "../../core/DataUtils.js";
14
14
import dayjs from "dayjs";
15
15
import qs from 'qs';
16
-
import { asJsonPlayObject } from "../core/PlayMarshalUtils.js";
17
-
import { generatePlayApiCommon, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList } from "../core/tests/utils/apiFixtures.js";
18
-
import { MsSseEvent, PlayApiCommonDetailed } from "../core/Api.js";
19
-
import { CompareDateBetween, PaginatedResponse } from "../backend/common/database/drizzle/repositories/BaseRepository.js";
20
-
import { QueryPlaysOptsJson } from '../backend/common/database/drizzle/repositories/PlayRepository.js';
16
+
import { asJsonPlayObject } from "../../core/PlayMarshalUtils.js";
17
+
import { generatePlayApiCommon, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList } from "../../core/tests/utils/apiFixtures.js";
18
+
import { MsSseEvent, PlayApiCommonDetailed } from "../../core/Api.js";
19
+
import { CompareDateBetween, PaginatedResponse } from "../../backend/common/database/drizzle/repositories/BaseRepository.js";
20
+
import { QueryPlaysOptsJson } from '../../backend/common/database/drizzle/repositories/PlayRepository.js';
21
21
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
22
-
import { sseProviderOptions } from '../client/AppNext.js';
22
+
import { sseProviderOptions } from '../../client/AppNext.js';
23
23
import { faker } from '@faker-js/faker';
24
24
25
25
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
26
26
const meta = preview.meta({
27
-
title: 'Examples/Activity List',
27
+
title: 'Activities/List',
28
28
component: ActivityList,
29
29
parameters: {
30
30
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+8
-8
src/stories/ActivityTimeline.stories.tsx
src/stories/timelines/ActivityTimeline.stories.tsx
+8
-8
src/stories/ActivityTimeline.stories.tsx
src/stories/timelines/ActivityTimeline.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
4
4
import { fn } from 'storybook/test';
5
5
import { Container } from '@chakra-ui/react';
6
-
import { ActivityTimeline } from "../client/components/ActivityTimeline";
7
-
import {Provider} from "../client/components/Provider";
8
-
import { generateJsonPlays } from "../core/PlayTestUtils.js";
9
-
import { generatePlayApiCommonDetailed } from "../core/tests/utils/apiFixtures.js";
10
-
import { generatePlayWithLifecycle, playWithLifecycleScrobble } from "../core/tests/utils/fixtures.js";
11
-
import { asJsonPlayObject } from '../core/PlayMarshalUtils.js';
6
+
import { ActivityTimeline } from "../../client/components/ActivityTimeline.js";
7
+
import {Provider} from "../../client/components/Provider.js";
8
+
import { generateJsonPlays } from "../../core/PlayTestUtils.js";
9
+
import { generatePlayApiCommonDetailed } from "../../core/tests/utils/apiFixtures.js";
10
+
import { generatePlayWithLifecycle, playWithLifecycleScrobble } from "../../core/tests/utils/fixtures.js";
11
+
import { asJsonPlayObject } from '../../core/PlayMarshalUtils.js';
12
12
13
13
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
14
14
const meta = preview.meta({
15
-
title: 'Examples/ActivityTimline',
15
+
title: 'Timelines/Play',
16
16
component: ActivityTimeline,
17
17
parameters: {
18
18
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-58
src/stories/Button.stories.ts
-58
src/stories/Button.stories.ts
···
1
-
import preview from "../../.storybook/preview.js";
2
-
3
-
import { fn } from 'storybook/test';
4
-
5
-
import { Button } from './Button.js';
6
-
7
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
8
-
const meta = preview.meta({
9
-
title: 'Example/Button',
10
-
component: Button,
11
-
parameters: {
12
-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
13
-
layout: 'centered',
14
-
},
15
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
16
-
tags: ['autodocs'],
17
-
// More on argTypes: https://storybook.js.org/docs/api/argtypes
18
-
argTypes: {
19
-
backgroundColor: { control: 'color' },
20
-
},
21
-
// 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
22
-
args: { onClick: fn() },
23
-
});
24
-
25
-
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
26
-
export const Primary = meta.story({
27
-
args: {
28
-
primary: true,
29
-
label: 'Button',
30
-
},
31
-
});
32
-
33
-
export const Secondary = meta.story({
34
-
args: {
35
-
label: 'Button',
36
-
},
37
-
});
38
-
39
-
export const Large = meta.story({
40
-
args: {
41
-
size: 'large',
42
-
label: 'Button',
43
-
},
44
-
});
45
-
46
-
export const Small = meta.story({
47
-
args: {
48
-
size: 'small',
49
-
label: 'Button',
50
-
},
51
-
});
52
-
53
-
export const Mine = meta.story({
54
-
args: {
55
-
primary: false,
56
-
label: "Button"
57
-
}
58
-
});
-37
src/stories/Button.tsx
-37
src/stories/Button.tsx
···
1
-
import React from 'react';
2
-
3
-
import './button.css';
4
-
5
-
export interface ButtonProps {
6
-
/** Is this the principal call to action on the page? */
7
-
primary?: boolean;
8
-
/** What background color to use */
9
-
backgroundColor?: string;
10
-
/** How large should the button be? */
11
-
size?: 'small' | 'medium' | 'large';
12
-
/** Button contents */
13
-
label: string;
14
-
/** Optional click handler */
15
-
onClick?: () => void;
16
-
}
17
-
18
-
/** Primary UI component for user interaction */
19
-
export const Button = ({
20
-
primary = false,
21
-
size = 'medium',
22
-
backgroundColor,
23
-
label,
24
-
...props
25
-
}: ButtonProps) => {
26
-
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
27
-
return (
28
-
<button
29
-
type="button"
30
-
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
31
-
style={{ backgroundColor }}
32
-
{...props}
33
-
>
34
-
{label}
35
-
</button>
36
-
);
37
-
};
+8
-8
src/stories/ComponentDetailed.stories.tsx
src/stories/pages/ComponentDetailed.stories.tsx
+8
-8
src/stories/ComponentDetailed.stories.tsx
src/stories/pages/ComponentDetailed.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { http, HttpResponse, delay, sse } from 'msw';
4
4
5
5
import { Container } from '@chakra-ui/react';
6
-
import { ComponentDetailedDesktop } from "../client/components/msComponent/MSComponentDetailed.js";
7
-
import {Provider} from "../client/components/Provider";
8
-
import { generateClientApiJson, generateFakeError, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js";
9
-
import { MsSseEvent, PlayApiCommonDetailed } from "../core/Api.js";
6
+
import { ComponentDetailedDesktop } from "../../client/components/msComponent/MSComponentDetailed.js";
7
+
import {Provider} from "../../client/components/Provider.js";
8
+
import { generateClientApiJson, generateFakeError, generatePlayApiCommonDetailed, generatePlayApiCommonDetailedList, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js";
9
+
import { MsSseEvent, PlayApiCommonDetailed } from "../../core/Api.js";
10
10
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
11
-
import { sseProviderOptions } from "../client/AppNext.js";
11
+
import { sseProviderOptions } from "../../client/AppNext.js";
12
12
import { faker } from "@faker-js/faker";
13
-
import { PaginatedResponse } from "../backend/common/database/drizzle/repositories/BaseRepository.js";
13
+
import { PaginatedResponse } from "../../backend/common/database/drizzle/repositories/BaseRepository.js";
14
14
import dayjs from "dayjs";
15
15
import { serializeError } from "serialize-error";
16
16
···
18
18
19
19
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
20
20
const meta = preview.meta({
21
-
title: 'Examples/Component Detailed',
21
+
title: 'Pages/Component Detailed',
22
22
component: ComponentDetailedDesktop,
23
23
parameters: {
24
24
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+8
-8
src/stories/ComponentList.stories.tsx
src/stories/pages/ComponentList.stories.tsx
+8
-8
src/stories/ComponentList.stories.tsx
src/stories/pages/ComponentList.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
4
4
import { Container } from '@chakra-ui/react';
5
-
import { MSComponentList } from "../client/components/msComponent/MSComponentList.js";
6
-
import {Provider} from "../client/components/Provider";
7
-
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js";
8
-
import { generateArray } from "../core/DataUtils.js";
5
+
import { MSComponentList } from "../../client/components/msComponent/MSComponentList.js";
6
+
import {Provider} from "../../client/components/Provider.js";
7
+
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js";
8
+
import { generateArray } from "../../core/DataUtils.js";
9
9
import { faker } from "@faker-js/faker";
10
-
import { MsSseEvent } from "../core/Api.js";
10
+
import { MsSseEvent } from "../../core/Api.js";
11
11
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
12
-
import { sseProviderOptions } from "../client/AppNext.js";
12
+
import { sseProviderOptions } from "../../client/AppNext.js";
13
13
import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';
14
14
15
15
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
16
16
const meta = preview.meta({
17
-
title: 'Examples/ComponentList',
17
+
title: 'Pages/Components List',
18
18
component: MSComponentList,
19
19
parameters: {
20
20
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+7
-7
src/stories/ComponentStatDead.stories.tsx
src/stories/component/ComponentStatDead.stories.tsx
+7
-7
src/stories/ComponentStatDead.stories.tsx
src/stories/component/ComponentStatDead.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { http, HttpResponse, delay, sse } from 'msw';
4
4
5
5
import { Container, Box } from '@chakra-ui/react';
6
-
import { DeadLetterIndicator } from "../client/components/msComponent/Stats.js";
7
-
import { sseProviderOptions } from "../client/AppNext.js";
8
-
import {Provider} from "../client/components/Provider";
6
+
import { DeadLetterIndicator } from "../../client/components/msComponent/Stats.js";
7
+
import { sseProviderOptions } from "../../client/AppNext.js";
8
+
import {Provider} from "../../client/components/Provider.js";
9
9
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
10
-
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js";
11
-
import { MsSseEvent } from "../core/Api.js";
10
+
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../../core/tests/utils/apiFixtures.js";
11
+
import { MsSseEvent } from "../../core/Api.js";
12
12
import { faker } from "@faker-js/faker";
13
13
14
14
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
15
15
const meta = preview.meta({
16
-
title: 'Examples/Component Details/Stat Dead',
16
+
title: 'Component/Details/Stat Dead',
17
17
component: DeadLetterIndicator,
18
18
parameters: {
19
19
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+7
-7
src/stories/ComponentStatLive.stories.tsx
src/stories/component/ComponentStatLive.stories.tsx
+7
-7
src/stories/ComponentStatLive.stories.tsx
src/stories/component/ComponentStatLive.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { http, HttpResponse, delay, sse } from 'msw';
4
4
5
5
import { Container, Box } from '@chakra-ui/react';
6
-
import { CountLiveIndicator } from "../client/components/msComponent/Stats.js";
7
-
import { sseProviderOptions } from "../client/AppNext.js";
8
-
import {Provider} from "../client/components/Provider";
6
+
import { CountLiveIndicator } from "../../client/components/msComponent/Stats.js";
7
+
import { sseProviderOptions } from "../../client/AppNext.js";
8
+
import {Provider} from "../../client/components/Provider.js";
9
9
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
10
-
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js";
11
-
import { MsSseEvent } from "../core/Api.js";
10
+
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../../core/tests/utils/apiFixtures.js";
11
+
import { MsSseEvent } from "../../core/Api.js";
12
12
13
13
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
14
14
const meta = preview.meta({
15
-
title: 'Examples/Component Details/Stats Count',
15
+
title: 'Component/Details/Stats Count',
16
16
component: CountLiveIndicator,
17
17
parameters: {
18
18
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+6
-6
src/stories/ComponentStatQueued.stories.tsx
src/stories/component/ComponentStatQueued.stories.tsx
+6
-6
src/stories/ComponentStatQueued.stories.tsx
src/stories/component/ComponentStatQueued.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { http, HttpResponse, delay, sse } from 'msw';
4
4
5
5
import { Container, Box } from '@chakra-ui/react';
6
-
import { QueuedIndicator } from "../client/components/msComponent/Stats.js";
7
-
import { sseProviderOptions } from "../client/AppNext.js";
8
-
import {Provider} from "../client/components/Provider";
6
+
import { QueuedIndicator } from "../../client/components/msComponent/Stats.js";
7
+
import { sseProviderOptions } from "../../client/AppNext.js";
8
+
import {Provider} from "../../client/components/Provider.js";
9
9
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
10
10
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson, LOG_MESSAGE_FIXTURE, logsApiResponse } from "../core/tests/utils/apiFixtures.js";
11
-
import { MsSseEvent } from "../core/Api.js";
11
+
import { MsSseEvent } from "../../core/Api.js";
12
12
import { faker } from "@faker-js/faker";
13
13
14
14
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
15
15
const meta = preview.meta({
16
-
title: 'Examples/Component Details/Stat Queued',
16
+
title: 'Component/Details/Stat Queued',
17
17
component: QueuedIndicator,
18
18
parameters: {
19
19
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+8
-16
src/stories/ComponentSummary.stories.tsx
src/stories/component/ComponentSummary.stories.tsx
+8
-16
src/stories/ComponentSummary.stories.tsx
src/stories/component/ComponentSummary.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { http, HttpResponse, delay, sse } from 'msw';
4
4
5
5
import { Container } from '@chakra-ui/react';
6
-
import { MSComponentSummary } from "../client/components/msComponent/MSComponentSummary.js";
7
-
import {Provider} from "../client/components/Provider";
8
-
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js";
9
-
import { MsSseEvent } from "../core/Api.js";
6
+
import { MSComponentSummary } from "../../client/components/msComponent/MSComponentSummary.js";
7
+
import {Provider} from "../../client/components/Provider.js";
8
+
import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../../core/tests/utils/apiFixtures.js";
9
+
import { MsSseEvent } from "../../core/Api.js";
10
10
import { SSEProvider } from "@flamefrontend/sse-runtime-react";
11
-
import { sseProviderOptions } from "../client/AppNext.js";
11
+
import { sseProviderOptions } from "../../client/AppNext.js";
12
12
import { faker } from "@faker-js/faker";
13
13
import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';
14
14
import dayjs from "dayjs";
15
15
16
16
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
17
17
const meta = preview.meta({
18
-
title: 'Examples/ComponentSummary',
18
+
title: 'Component/Summary',
19
19
component: MSComponentSummary,
20
20
parameters: {
21
21
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
···
43
43
return (<MSComponentSummary {...args} />)
44
44
},
45
45
decorators: [
46
-
(Story) => (<Provider><Container maxWidth="4xl"><Story/></Container></Provider>),
46
+
(Story) => (<Provider><Container maxWidth="4xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
47
47
withRouter
48
48
]
49
49
// 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
62
fetchable: true,
63
63
componentId: 1,
64
64
},
65
-
decorators: [
66
-
(Story) =>
67
-
(<Provider><Container maxWidth="4xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
68
-
],
69
65
parameters: {
70
66
msw: {
71
67
handlers: [
···
106
102
fetchable: true,
107
103
componentId: 1,
108
104
},
109
-
decorators: [
110
-
(Story) =>
111
-
(<Provider><Container maxWidth="4xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
112
-
],
113
105
parameters: {
114
106
msw: {
115
107
handlers: [
-31
src/stories/Header.stories.tsx
-31
src/stories/Header.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
2
-
3
-
import { AppHeader } from "../client/components/AppHeader.js";
4
-
import {Provider} from "../client/components/Provider";
5
-
6
-
const meta = preview.meta({
7
-
title: 'Example/Header',
8
-
component: AppHeader,
9
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
10
-
tags: ['autodocs'],
11
-
parameters: {
12
-
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
13
-
layout: 'padded',
14
-
},
15
-
render: function Render(args) {
16
-
return (<AppHeader/>)
17
-
},
18
-
decorators: [
19
-
(Story) => (<Provider><Story/></Provider>),
20
-
]
21
-
});
22
-
23
-
export const LoggedIn = meta.story({
24
-
args: {
25
-
user: {
26
-
name: 'Jane Doe',
27
-
},
28
-
},
29
-
});
30
-
31
-
export const LoggedOut = meta.story();
-56
src/stories/Header.tsx
-56
src/stories/Header.tsx
···
1
-
import React from 'react';
2
-
3
-
import { Button } from './Button';
4
-
import './header.css';
5
-
6
-
type User = {
7
-
name: string;
8
-
};
9
-
10
-
export interface HeaderProps {
11
-
user?: User;
12
-
onLogin?: () => void;
13
-
onLogout?: () => void;
14
-
onCreateAccount?: () => void;
15
-
}
16
-
17
-
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
18
-
<header>
19
-
<div className="storybook-header">
20
-
<div>
21
-
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
22
-
<g fill="none" fillRule="evenodd">
23
-
<path
24
-
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
25
-
fill="#FFF"
26
-
/>
27
-
<path
28
-
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
29
-
fill="#555AB9"
30
-
/>
31
-
<path
32
-
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
33
-
fill="#91BAF8"
34
-
/>
35
-
</g>
36
-
</svg>
37
-
<h1>Acme</h1>
38
-
</div>
39
-
<div>
40
-
{user ? (
41
-
<>
42
-
<span className="welcome">
43
-
Welcome, <b>{user.name}</b>!
44
-
</span>
45
-
<Button size="small" onClick={onLogout} label="Log out" />
46
-
</>
47
-
) : (
48
-
<>
49
-
<Button size="small" onClick={onLogin} label="Log in" />
50
-
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
51
-
</>
52
-
)}
53
-
</div>
54
-
</div>
55
-
</header>
56
-
);
+6
-6
src/stories/ListFilters.stories.tsx
src/stories/activities/ListFilters.stories.tsx
+6
-6
src/stories/ListFilters.stories.tsx
src/stories/activities/ListFilters.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { Container } from '@chakra-ui/react';
4
4
5
5
import { fn } from 'storybook/test';
6
-
import { ErrorAlert } from "../client/components/ErrorAlert.js";
7
-
import {Provider} from "../client/components/Provider";
8
-
import { ErrorLike } from "../core/Atomic.js";
9
-
import { PlayStateFilter } from "../client/components/playActivity/ListFilters.js";
6
+
import { ErrorAlert } from "../../client/components/ErrorAlert.js";
7
+
import {Provider} from "../../client/components/Provider.js";
8
+
import { ErrorLike } from "../../core/Atomic.js";
9
+
import { PlayStateFilter } from "../../client/components/playActivity/ListFilters.js";
10
10
11
11
12
12
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
13
13
const meta = preview.meta({
14
-
title: 'Examples/List Filters/Play State',
14
+
title: 'Activities/List Filters/Play State',
15
15
component: PlayStateFilter,
16
16
parameters: {
17
17
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+4
-4
src/stories/ListFilters/PlayDateRange.stories.tsx
src/stories/activities/listFilters/PlayDateRange.stories.tsx
+4
-4
src/stories/ListFilters/PlayDateRange.stories.tsx
src/stories/activities/listFilters/PlayDateRange.stories.tsx
···
1
-
import preview from "../../../.storybook/preview.js";
1
+
import preview from "../../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { Container } from '@chakra-ui/react';
4
4
5
5
import { fn } from 'storybook/test';
6
-
import { PlayDateRangeFilter } from "../../client/components/playActivity/ListFilters.js";
7
-
import { Provider } from "../../client/components/Provider.js";
6
+
import { PlayDateRangeFilter } from "../../../client/components/playActivity/ListFilters.js";
7
+
import { Provider } from "../../../client/components/Provider.js";
8
8
9
9
10
10
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
11
11
const meta = preview.meta({
12
-
title: 'Examples/List Filters/Play Date Range',
12
+
title: 'Activities/List Filters/Play Date Range',
13
13
component: PlayDateRangeFilter,
14
14
parameters: {
15
15
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+4
-4
src/stories/ListFilters/PlayPhrase.stories.tsx
src/stories/activities/listFilters/PlayPhrase.stories.tsx
+4
-4
src/stories/ListFilters/PlayPhrase.stories.tsx
src/stories/activities/listFilters/PlayPhrase.stories.tsx
···
1
-
import preview from "../../../.storybook/preview.js";
1
+
import preview from "../../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
import { Container } from '@chakra-ui/react';
4
4
5
5
import { fn } from 'storybook/test';
6
-
import { PhraseFilter } from "../../client/components/playActivity/ListFilters.js";
7
-
import { Provider } from "../../client/components/Provider.js";
6
+
import { PhraseFilter } from "../../../client/components/playActivity/ListFilters.js";
7
+
import { Provider } from "../../../client/components/Provider.js";
8
8
9
9
10
10
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
11
11
const meta = preview.meta({
12
-
title: 'Examples/List Filters/Phrase',
12
+
title: 'Activities/List Filters/Phrase',
13
13
component: PhraseFilter,
14
14
parameters: {
15
15
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-30
src/stories/Page.stories.ts
-30
src/stories/Page.stories.ts
···
1
-
import preview from "../../.storybook/preview.js";
2
-
3
-
import { expect, userEvent, within } from 'storybook/test';
4
-
5
-
import { Page } from './Page.js';
6
-
7
-
const meta = preview.meta({
8
-
title: 'Example/Page',
9
-
component: Page,
10
-
parameters: {
11
-
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
12
-
layout: 'fullscreen',
13
-
},
14
-
});
15
-
16
-
export const LoggedOut = meta.story();
17
-
18
-
// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
19
-
export const LoggedIn = meta.story({
20
-
play: async ({ canvasElement }) => {
21
-
const canvas = within(canvasElement);
22
-
const loginButton = canvas.getByRole('button', { name: /Log in/i });
23
-
await expect(loginButton).toBeInTheDocument();
24
-
await userEvent.click(loginButton);
25
-
await expect(loginButton).not.toBeInTheDocument();
26
-
27
-
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
28
-
await expect(logoutButton).toBeInTheDocument();
29
-
},
30
-
});
-73
src/stories/Page.tsx
-73
src/stories/Page.tsx
···
1
-
import React from 'react';
2
-
3
-
import { Header } from './Header';
4
-
import './page.css';
5
-
6
-
type User = {
7
-
name: string;
8
-
};
9
-
10
-
export const Page: React.FC = () => {
11
-
const [user, setUser] = React.useState<User>();
12
-
13
-
return (
14
-
<article>
15
-
<Header
16
-
user={user}
17
-
onLogin={() => setUser({ name: 'Jane Doe' })}
18
-
onLogout={() => setUser(undefined)}
19
-
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
20
-
/>
21
-
22
-
<section className="storybook-page">
23
-
<h2>Pages in Storybook</h2>
24
-
<p>
25
-
We recommend building UIs with a{' '}
26
-
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
27
-
<strong>component-driven</strong>
28
-
</a>{' '}
29
-
process starting with atomic components and ending with pages.
30
-
</p>
31
-
<p>
32
-
Render pages with mock data. This makes it easy to build and review page states without
33
-
needing to navigate to them in your app. Here are some handy patterns for managing page
34
-
data in Storybook:
35
-
</p>
36
-
<ul>
37
-
<li>
38
-
Use a higher-level connected component. Storybook helps you compose such data from the
39
-
"args" of child component stories
40
-
</li>
41
-
<li>
42
-
Assemble data in the page component from your services. You can mock these services out
43
-
using Storybook.
44
-
</li>
45
-
</ul>
46
-
<p>
47
-
Get a guided tutorial on component-driven development at{' '}
48
-
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
49
-
Storybook tutorials
50
-
</a>
51
-
. Read more in the{' '}
52
-
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
53
-
docs
54
-
</a>
55
-
.
56
-
</p>
57
-
<div className="tip-wrapper">
58
-
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
59
-
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
60
-
<g fill="none" fillRule="evenodd">
61
-
<path
62
-
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
63
-
id="a"
64
-
fill="#999"
65
-
/>
66
-
</g>
67
-
</svg>
68
-
Viewports addon in the toolbar
69
-
</div>
70
-
</section>
71
-
</article>
72
-
);
73
-
};
+7
-7
src/stories/PlayInfo.stories.tsx
src/stories/staticComponents/PlayInfo.stories.tsx
+7
-7
src/stories/PlayInfo.stories.tsx
src/stories/staticComponents/PlayInfo.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
4
4
import { fn } from 'storybook/test';
5
-
import { PlayData } from "../client/components/PlayData.js";
6
-
import {Provider} from "../client/components/Provider";
5
+
import { PlayData } from "../../client/components/PlayData.js";
6
+
import {Provider} from "../../client/components/Provider.js";
7
7
import { Container } from '@chakra-ui/react';
8
-
import { generateArtistCredits, generateArtists, generateJsonPlay, generatePlay, withBrainz } from "../core/PlayTestUtils.js"
8
+
import { generateArtistCredits, generateArtists, generateJsonPlay, generatePlay, withBrainz } from "../../core/PlayTestUtils.js"
9
9
import clone from "clone";
10
-
import { asJsonPlayObject } from '../core/PlayMarshalUtils.js';
11
-
import { JsonPlayObject } from "../core/Atomic.js";
10
+
import { asJsonPlayObject } from '../../core/PlayMarshalUtils.js';
11
+
import { JsonPlayObject } from "../../core/Atomic.js";
12
12
13
13
type PropsAndCustomArgs = React.ComponentProps<typeof PlayData> & {
14
14
includeAlbumArtists?: boolean;
···
18
18
};
19
19
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
20
20
const meta = preview.type<{args: PropsAndCustomArgs}>().meta({
21
-
title: 'Examples/PlayInfo',
21
+
title: 'Static Components/Play Info',
22
22
component: PlayData,
23
23
parameters: {
24
24
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+7
-7
src/stories/TransformSteps.stories.tsx
src/stories/timelines/TransformSteps.stories.tsx
+7
-7
src/stories/TransformSteps.stories.tsx
src/stories/timelines/TransformSteps.stories.tsx
···
1
-
import preview from "../../.storybook/preview.js";
1
+
import preview from "../../../.storybook/preview.js";
2
2
import React from 'react';
3
3
4
4
import { fn } from 'storybook/test';
5
5
import { Container } from '@chakra-ui/react';
6
-
import { TransformSteps } from "../client/components/TransformSteps.js";
7
-
import {Provider} from "../client/components/Provider";
8
-
import { generateJsonPlays, generatePlay } from "../core/PlayTestUtils.js";
9
-
import {generatePlayWithLifecycle} from '../core/tests/utils/fixtures'
10
-
import { asJsonPlayObject } from "../core/PlayMarshalUtils.js";
6
+
import { TransformSteps } from "../../client/components/TransformSteps.js";
7
+
import {Provider} from "../../client/components/Provider.js";
8
+
import { generateJsonPlays, generatePlay } from "../../core/PlayTestUtils.js";
9
+
import {generatePlayWithLifecycle} from '../../core/tests/utils/fixtures.js'
10
+
import { asJsonPlayObject } from "../../core/PlayMarshalUtils.js";
11
11
12
12
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
13
13
const meta = preview.meta({
14
-
title: 'Examples/TransformSteps',
14
+
title: 'Timelines/Play Transform Steps',
15
15
component: TransformSteps,
16
16
parameters: {
17
17
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-32
src/stories/header.css
-32
src/stories/header.css
···
1
-
.storybook-header {
2
-
display: flex;
3
-
justify-content: space-between;
4
-
align-items: center;
5
-
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
6
-
padding: 15px 20px;
7
-
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
8
-
}
9
-
10
-
.storybook-header svg {
11
-
display: inline-block;
12
-
vertical-align: top;
13
-
}
14
-
15
-
.storybook-header h1 {
16
-
display: inline-block;
17
-
vertical-align: top;
18
-
margin: 6px 0 6px 10px;
19
-
font-weight: 700;
20
-
font-size: 20px;
21
-
line-height: 1;
22
-
}
23
-
24
-
.storybook-header button + button {
25
-
margin-left: 10px;
26
-
}
27
-
28
-
.storybook-header .welcome {
29
-
margin-right: 10px;
30
-
color: #333;
31
-
font-size: 14px;
32
-
}
-68
src/stories/page.css
-68
src/stories/page.css
···
1
-
.storybook-page {
2
-
margin: 0 auto;
3
-
padding: 48px 20px;
4
-
max-width: 600px;
5
-
color: #333;
6
-
font-size: 14px;
7
-
line-height: 24px;
8
-
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
9
-
}
10
-
11
-
.storybook-page h2 {
12
-
display: inline-block;
13
-
vertical-align: top;
14
-
margin: 0 0 4px;
15
-
font-weight: 700;
16
-
font-size: 32px;
17
-
line-height: 1;
18
-
}
19
-
20
-
.storybook-page p {
21
-
margin: 1em 0;
22
-
}
23
-
24
-
.storybook-page a {
25
-
color: inherit;
26
-
}
27
-
28
-
.storybook-page ul {
29
-
margin: 1em 0;
30
-
padding-left: 30px;
31
-
}
32
-
33
-
.storybook-page li {
34
-
margin-bottom: 8px;
35
-
}
36
-
37
-
.storybook-page .tip {
38
-
display: inline-block;
39
-
vertical-align: top;
40
-
margin-right: 10px;
41
-
border-radius: 1em;
42
-
background: #e7fdd8;
43
-
padding: 4px 12px;
44
-
color: #357a14;
45
-
font-weight: 700;
46
-
font-size: 11px;
47
-
line-height: 12px;
48
-
}
49
-
50
-
.storybook-page .tip-wrapper {
51
-
margin-top: 40px;
52
-
margin-bottom: 40px;
53
-
font-size: 13px;
54
-
line-height: 20px;
55
-
}
56
-
57
-
.storybook-page .tip-wrapper svg {
58
-
display: inline-block;
59
-
vertical-align: top;
60
-
margin-top: 3px;
61
-
margin-right: 4px;
62
-
width: 12px;
63
-
height: 12px;
64
-
}
65
-
66
-
.storybook-page .tip-wrapper svg path {
67
-
fill: #1ea7fd;
68
-
}
+1
-1
src/stories/staticComponents/ActivityListSkeleton.stories.tsx
src/stories/activities/ActivityListSkeleton.stories.tsx
+1
-1
src/stories/staticComponents/ActivityListSkeleton.stories.tsx
src/stories/activities/ActivityListSkeleton.stories.tsx
···
10
10
11
11
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
12
12
const meta = preview.meta({
13
-
title: 'Static Components/Activity List Skeleton',
13
+
title: 'Activities/List Skeleton',
14
14
component: ActivitySummarySkeleton
15
15
,
16
16
parameters: {