{getValue()}
10 | 14 | {error} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/player/src/stores/advancedThemeStore.ts: -------------------------------------------------------------------------------- 1 | import { create } from 'zustand'; 2 | 3 | export type AdvancedThemeFile = { 4 | path: string; 5 | name: string; 6 | }; 7 | 8 | export type AdvancedThemeState = { 9 | themes: AdvancedThemeFile[]; 10 | setThemes: (themes: AdvancedThemeFile[]) => void; 11 | }; 12 | 13 | export const useAdvancedThemeStore = create
13 | {children}
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/ui/src/components/PlayerWorkspace/PlayerWorkspaceLeftSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 |
3 | import {
4 | PlayerWorkspaceSidebar,
5 | PlayerWorkspaceSidebarPropsBase,
6 | } from './PlayerWorkspaceSidebar';
7 |
8 | export const PlayerWorkspaceLeftSidebar: FC<
9 | PlayerWorkspaceSidebarPropsBase
10 | > = ({ children, ...props }) => {
11 | return (
12 |
11 | ?.url})
12 |
13 |
21 | {children}
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Select/SelectDescription.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 |
3 | import { useSelectContext } from './context';
4 |
5 | export const SelectDescription: FC<{ description?: string }> = ({
6 | description,
7 | }) => {
8 | const {
9 | ids: { descriptionId },
10 | } = useSelectContext();
11 | if (!description) {
12 | return null;
13 | }
14 | return (
15 | 19 | {description} 20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /packages/ui/src/components/CardGrid/CardGrid.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from '@testing-library/react'; 2 | 3 | import { CardGrid } from '.'; 4 | import { Card } from '..'; 5 | 6 | describe('Card grid', () => { 7 | it('(Snapshot) Renders correctly', () => { 8 | const { container } = render( 9 |
25 | {children}
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/packages/player/src/components/DevTools.tsx:
--------------------------------------------------------------------------------
1 | import { TanStackDevtools } from '@tanstack/react-devtools';
2 | import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
3 | import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
4 | import { FC } from 'react';
5 |
6 | export const DevTools: FC = () => {
7 | return (
8 |
18 | {children}
19 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/packages/storybook/src/Welcome.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react-vite';
2 |
3 | const Welcome = () => (
4 |
5 |
13 | );
14 |
15 | const meta = {
16 | title: 'Welcome',
17 | component: Welcome,
18 | parameters: {
19 | layout: 'fullscreen',
20 | },
21 | } satisfies Meta6 | Welcome to Nuclear Storybook! 🎵 7 |
8 |9 | This is the component development environment for the Nuclear music 10 | player. Here you can develop and test UI components in isolation. 11 |
12 |26 | {title} 27 |
28 |{children}
29 |
20 |
22 |
20 | {left &&
24 | {left}
}
21 | {center && {center}
}
22 | {right && {right}
}
23 |
19 |
29 | );
30 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Slider/context.tsx:
--------------------------------------------------------------------------------
1 | import type { KeyboardEvent } from 'react';
2 | import { createContext, useContext } from 'react';
3 |
4 | export type SliderContextValue = {
5 | inputId: string;
6 | labelId: string;
7 | min: number;
8 | max: number;
9 | step: number;
10 | value: number;
11 | unit?: string;
12 | disabled?: boolean;
13 | percentage: number;
14 | emit: (v: number) => void;
15 | onKeyDown: (e: KeyboardEvent
20 |
23 | {description && (
24 | 25 | {description} 26 |
27 | )} 28 |
20 |
32 | );
33 |
--------------------------------------------------------------------------------
/packages/ui/src/components/TrackTable/FilterBar.tsx:
--------------------------------------------------------------------------------
1 | import { FilterIcon } from 'lucide-react';
2 |
3 | import { Input } from '../Input';
4 |
5 | type Props = {
6 | value: string;
7 | onChange: (value: string) => void;
8 | placeholder?: string;
9 | className?: string;
10 | };
11 |
12 | export function FilterBar({ value, onChange, placeholder, className }: Props) {
13 | return (
14 | 21 | {title} 22 |
23 | {subtitle && ( 24 |25 | {subtitle} 26 |
27 | )} 28 |
29 | {children}
30 |
31 |
15 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/packages/player/src/views/Settings/useSettingsGroups.ts:
--------------------------------------------------------------------------------
1 | import groupBy from 'lodash-es/groupBy';
2 | import { useMemo } from 'react';
3 |
4 | import type { SettingDefinition } from '@nuclearplayer/plugin-sdk';
5 |
6 | import { useSettingsStore } from '../../stores/settingsStore';
7 |
8 | export type CategoryGroup = {
9 | name: string;
10 | settings: SettingDefinition[];
11 | };
12 |
13 | export const useSettingsGroups = (): CategoryGroup[] => {
14 | const { definitions } = useSettingsStore();
15 |
16 | return useMemo(() => {
17 | const visibleSettings = Object.values(definitions).filter((d) => !d.hidden);
18 |
19 | const grouped = groupBy(visibleSettings, (d) => d.category);
20 |
21 | return Object.entries(grouped)
22 | .sort(([a], [b]) => a.localeCompare(b))
23 | .map(([name, settings]) => ({ name, settings }));
24 | }, [definitions]);
25 | };
26 |
27 | export const capitalize = (s: string): string =>
28 | s.charAt(0).toUpperCase() + s.slice(1);
29 |
--------------------------------------------------------------------------------
/packages/ui/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './BottomBar';
2 | export * from './Box';
3 | export * from './Button';
4 | export * from './Card';
5 | export * from './CardGrid';
6 | export * from './Input';
7 | export * from './Loader';
8 | export * from './PlayerBar';
9 | export * from './PlayerShell';
10 | export * from './PlayerWorkspace';
11 | export * from './PluginItem';
12 | export * from './Popover';
13 | export * from './QueueItem';
14 | export * from './QueuePanel';
15 | export * from './RouteTransition';
16 | export * from './ImageReveal';
17 | export * from './ScrollableArea';
18 | export * from './SectionShell';
19 | export * from './Select';
20 | export * from './SidebarNavigation';
21 | export * from './Slider';
22 | export * from './Tabs';
23 | export * from './ThemeController';
24 | export * from './Toaster';
25 | export * from './Toggle';
26 | export * from './TopBar';
27 | export * from './ViewShell';
28 | export * from '../utils/time';
29 | export * from './TrackTable';
30 |
--------------------------------------------------------------------------------
/packages/player/src/stores/startupStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 |
3 | type StartupState = {
4 | isStartingUp: boolean;
5 | startupFinishedAt?: string;
6 | totalStartupTimeMs?: number;
7 | pluginDurations: Record
16 | onChange(e.target.value)}
19 | placeholder={placeholder ?? 'Filter tracks'}
20 | endAddon={
21 |
26 | }
27 | />
28 |
29 |
20 | {settings.map((definition) => {
21 | const [value, setValue] = useSetting(coreSettingsHost, definition.id);
22 | return (
23 |
32 |
14 |
15 |
25 |
26 |
16 | {groups.map((group) => (
17 |
24 |
8 |
36 |
11 |
14 | 1:37
15 |
16 |
19 | -21:37
20 |
21 |
22 |
26 |
35 |
29 |
33 |
34 | e.preventDefault()}
28 | >
29 |
30 | {children ?? label}
31 | {selected && ✓}
32 |
33 |
34 | )}
35 |
24 |
27 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/packages/player/src/test/utils/seedPluginRegistry.ts:
--------------------------------------------------------------------------------
1 | import { upsertRegistryEntry } from '../../services/plugins/pluginRegistry';
2 |
3 | type SeedParams = {
4 | id: string;
5 | version?: string;
6 | enabled?: boolean;
7 | installedAt?: string;
8 | lastUpdatedAt?: string;
9 | path?: string;
10 | installationMethod?: 'dev' | 'store';
11 | originalPath?: string;
12 | warnings?: string[];
13 | };
14 |
15 | const managedPathFor = (id: string, version: string) =>
16 | `/home/user/.local/share/com.nuclearplayer/plugins/${id}/${version}`;
17 |
18 | export const seedRegistryEntry = async ({
19 | id,
20 | version = '1.0.0',
21 | enabled = false,
22 | installedAt = '2025-01-01T00:00:00.000Z',
23 | lastUpdatedAt = installedAt,
24 | path,
25 | installationMethod = 'store',
26 | originalPath,
27 | warnings = [],
28 | }: SeedParams) => {
29 | await upsertRegistryEntry({
30 | id,
31 | version,
32 | path: path ?? managedPathFor(id, version),
33 | installationMethod,
34 | originalPath,
35 | enabled,
36 | installedAt,
37 | lastUpdatedAt,
38 | warnings,
39 | });
40 | };
41 |
--------------------------------------------------------------------------------
/packages/plugin-sdk/src/api/settings.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | SettingDefinition,
3 | SettingsHost,
4 | SettingValue,
5 | } from '../types/settings';
6 |
7 | export class Settings {
8 | #host?: SettingsHost;
9 |
10 | constructor(host?: SettingsHost) {
11 | this.#host = host;
12 | }
13 |
14 | #withHost
28 |
37 |
40 | {children}
41 |
42 | );
43 |
--------------------------------------------------------------------------------
/packages/storybook/src/ThemeController.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react-vite';
2 | import { useState } from 'react';
3 |
4 | import { ThemeController } from '@nuclearplayer/ui';
5 |
6 | const meta = {
7 | title: 'Components/ThemeController',
8 | component: ThemeController,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | argTypes: {
14 | disabled: {
15 | control: { type: 'boolean' },
16 | },
17 | isDark: {
18 | control: { type: 'boolean' },
19 | },
20 | },
21 | } satisfies Meta
32 |
37 | );
38 | },
39 | };
40 |
--------------------------------------------------------------------------------
/packages/ui/src/components/QueueItem/variants.ts:
--------------------------------------------------------------------------------
1 | import { cva } from 'class-variance-authority';
2 |
3 | export const queueItemVariants = cva(
4 | 'group relative flex items-center gap-3 overflow-hidden transition-all',
5 | {
6 | variants: {
7 | status: {
8 | idle: '',
9 | loading: 'opacity-70',
10 | error: 'ring-accent-red ring-2 ring-inset',
11 | success: '',
12 | },
13 | isCurrent: {
14 | true: '',
15 | false: '',
16 | },
17 | isCollapsed: {
18 | true: 'h-16 w-16 justify-center p-0',
19 | false: 'w-full p-3',
20 | },
21 | },
22 | compoundVariants: [
23 | {
24 | isCurrent: true,
25 | isCollapsed: false,
26 | className: 'bg-primary ring-0',
27 | },
28 | {
29 | status: 'error',
30 | isCurrent: true,
31 | isCollapsed: false,
32 | className: 'bg-primary ring-accent-red ring-2 ring-inset',
33 | },
34 | ],
35 | defaultVariants: {
36 | status: 'idle',
37 | isCurrent: false,
38 | isCollapsed: false,
39 | },
40 | },
41 | );
42 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Popover/Popover.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import userEvent from '@testing-library/user-event';
3 |
4 | import { Button } from '..';
5 | import { Popover } from './Popover';
6 |
7 | describe('Popover', () => {
8 | it('(Snapshot) renders with all props', async () => {
9 | render(
10 | 34 | Current theme: {isDark ? 'Dark' : 'Light'} 35 |
36 |
20 |
38 | );
39 |
--------------------------------------------------------------------------------
/packages/storybook/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@nuclearplayer/storybook",
3 | "version": "0.0.9",
4 | "description": "Storybook for Nuclear UI components",
5 | "type": "module",
6 | "private": true,
7 | "scripts": {
8 | "dev": "storybook dev -p 6006",
9 | "build": "storybook build",
10 | "preview": "storybook preview",
11 | "clean": "rm -rf storybook-static .turbo node_modules/.cache"
12 | },
13 | "dependencies": {
14 | "@fontsource/bricolage-grotesque": "^5.2.8",
15 | "@fontsource/dm-sans": "^5.2.6",
16 | "@nuclearplayer/model": "workspace:*",
17 | "@nuclearplayer/tailwind-config": "workspace:*",
18 | "@nuclearplayer/ui": "workspace:*",
19 | "lucide-react": "^0.542.0",
20 | "react": "^18.3.1",
21 | "react-dom": "^18.3.1",
22 | "storybook": "^9.1.5"
23 | },
24 | "devDependencies": {
25 | "@storybook/addon-links": "^9.1.5",
26 | "@storybook/react-vite": "^9.1.5",
27 | "@tailwindcss/vite": "^4.1.11",
28 | "@types/react": "^18.3.23",
29 | "@vitejs/plugin-react": "^5.0.1",
30 | "sonner": "^2.0.7",
31 | "tailwindcss": "^4.1.11",
32 | "typescript": "^5.9.2",
33 | "vite": "^7.1.3",
34 | "vite-plugin-svgr": "^4.3.0",
35 | "eslint-plugin-storybook": "9.1.5",
36 | "@storybook/addon-docs": "^9.1.5"
37 | }
38 | }
--------------------------------------------------------------------------------
/packages/ui/src/components/PlayerBar/PlayerBarControls.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Pause,
3 | Play,
4 | Repeat,
5 | Shuffle,
6 | SkipBack,
7 | SkipForward,
8 | } from 'lucide-react';
9 | import { FC } from 'react';
10 |
11 | import { Button } from '..';
12 | import { cn } from '../../utils';
13 |
14 | type PlayerBarControlsProps = {
15 | isPlaying?: boolean;
16 | isShuffleActive?: boolean;
17 | isRepeatActive?: boolean;
18 | className?: string;
19 | };
20 |
21 | export const PlayerBarControls: FC
21 | {coverUrl ? (
22 | 
27 | ) : (
28 |
33 |
29 |
31 | )}
32 |
34 |
37 | {title}
35 | {artist}
36 |
28 |
31 |
34 |
37 |
40 |
43 |
44 | );
45 |
--------------------------------------------------------------------------------
/packages/ui/src/components/PlayerBar/useSeekBar.ts:
--------------------------------------------------------------------------------
1 | import { MouseEvent, useCallback, useMemo, useRef } from 'react';
2 |
3 | type UseSeekBarParams = {
4 | progress: number;
5 | isLoading?: boolean;
6 | onSeek?: (percent: number) => void;
7 | };
8 |
9 | export const useSeekBar = ({
10 | progress,
11 | isLoading = false,
12 | onSeek,
13 | }: UseSeekBarParams) => {
14 | const clamped = useMemo(
15 | () => Math.max(0, Math.min(100, progress)),
16 | [progress],
17 | );
18 | const containerRef = useRef