chore(app): update config, dependencies, storybook, and app shell
This commit is contained in:
Ilia Mashkov
@@ -2,9 +2,15 @@
|
||||
Component: ThemeDecorator
|
||||
Storybook decorator that initializes ThemeManager for theme-related stories.
|
||||
Ensures theme management works correctly in Storybook's iframe environment.
|
||||
Includes a floating theme toggle for universal theme switching across all stories.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { themeManager } from '$features/ChangeAppTheme';
|
||||
import type { ResponsiveManager } from '$shared/lib';
|
||||
import { IconButton } from '$shared/ui';
|
||||
import MoonIcon from '@lucide/svelte/icons/moon';
|
||||
import SunIcon from '@lucide/svelte/icons/sun';
|
||||
import { getContext } from 'svelte';
|
||||
import {
|
||||
onDestroy,
|
||||
onMount,
|
||||
@@ -16,15 +22,58 @@ interface Props {
|
||||
|
||||
let { children }: Props = $props();
|
||||
|
||||
// Get responsive context (set by Decorator)
|
||||
const responsive = getContext<ResponsiveManager>('responsive');
|
||||
|
||||
// Initialize themeManager on mount
|
||||
onMount(() => {
|
||||
themeManager.init();
|
||||
|
||||
// Add keyboard shortcut for theme toggle (Cmd/Ctrl+Shift+D)
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'D') {
|
||||
e.preventDefault();
|
||||
themeManager.toggle();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
});
|
||||
|
||||
// Clean up themeManager when story unmounts
|
||||
onDestroy(() => {
|
||||
themeManager.destroy();
|
||||
});
|
||||
|
||||
const theme = $derived(themeManager.value);
|
||||
const themeLabel = $derived(theme === 'light' ? 'Light' : 'Dark');
|
||||
</script>
|
||||
|
||||
<!-- Floating Theme Toggle -->
|
||||
<div
|
||||
class="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-card border border-border shadow-lg rounded-lg"
|
||||
title="Toggle theme (Cmd/Ctrl+Shift+D)"
|
||||
>
|
||||
<span class="text-xs font-medium text-muted-foreground">Theme: {themeLabel}</span>
|
||||
<IconButton
|
||||
onclick={() => themeManager.toggle()}
|
||||
size={responsive?.isMobile ? 'sm' : 'md'}
|
||||
variant="ghost"
|
||||
title="Toggle theme"
|
||||
>
|
||||
{#snippet icon()}
|
||||
{#if theme === 'light'}
|
||||
<MoonIcon class="size-4" />
|
||||
{:else}
|
||||
<SunIcon class="size-4" />
|
||||
{/if}
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<!-- Story Content -->
|
||||
{@render children()}
|
||||
|
||||
@@ -1,11 +1,74 @@
|
||||
import type { Preview } from '@storybook/svelte-vite';
|
||||
import Decorator from './Decorator.svelte';
|
||||
import StoryStage from './StoryStage.svelte';
|
||||
import ThemeDecorator from './ThemeDecorator.svelte';
|
||||
import '../src/app/styles/app.css';
|
||||
|
||||
const preview: Preview = {
|
||||
globalTypes: {
|
||||
viewport: {
|
||||
description: 'Viewport size for responsive design',
|
||||
defaultValue: 'widgetWide',
|
||||
toolbar: {
|
||||
icon: 'view',
|
||||
items: [
|
||||
{
|
||||
value: 'reset',
|
||||
icon: 'refresh',
|
||||
title: 'Reset viewport',
|
||||
},
|
||||
{
|
||||
value: 'mobile1',
|
||||
icon: 'mobile',
|
||||
title: 'iPhone 5/SE',
|
||||
},
|
||||
{
|
||||
value: 'mobile2',
|
||||
icon: 'mobile',
|
||||
title: 'iPhone 14 Pro Max',
|
||||
},
|
||||
{
|
||||
value: 'tablet',
|
||||
icon: 'tablet',
|
||||
title: 'iPad (Portrait)',
|
||||
},
|
||||
{
|
||||
value: 'desktop',
|
||||
icon: 'desktop',
|
||||
title: 'Desktop (Small)',
|
||||
},
|
||||
{
|
||||
value: 'widgetMedium',
|
||||
icon: 'view',
|
||||
title: 'Widget Medium',
|
||||
},
|
||||
{
|
||||
value: 'widgetWide',
|
||||
icon: 'view',
|
||||
title: 'Widget Wide',
|
||||
},
|
||||
{
|
||||
value: 'widgetExtraWide',
|
||||
icon: 'view',
|
||||
title: 'Widget Extra Wide',
|
||||
},
|
||||
{
|
||||
value: 'fullWidth',
|
||||
icon: 'view',
|
||||
title: 'Full Width',
|
||||
},
|
||||
{
|
||||
value: 'fullScreen',
|
||||
icon: 'expand',
|
||||
title: 'Full Screen',
|
||||
},
|
||||
],
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
layout: 'padded',
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
@@ -23,7 +86,79 @@ const preview: Preview = {
|
||||
docs: {
|
||||
story: {
|
||||
// This sets the default height for the iframe in Autodocs
|
||||
iframeHeight: '400px',
|
||||
iframeHeight: '600px',
|
||||
},
|
||||
},
|
||||
|
||||
viewport: {
|
||||
viewports: {
|
||||
// Mobile devices
|
||||
mobile1: {
|
||||
name: 'iPhone 5/SE',
|
||||
styles: {
|
||||
width: '320px',
|
||||
height: '568px',
|
||||
},
|
||||
},
|
||||
mobile2: {
|
||||
name: 'iPhone 14 Pro Max',
|
||||
styles: {
|
||||
width: '414px',
|
||||
height: '896px',
|
||||
},
|
||||
},
|
||||
// Tablet
|
||||
tablet: {
|
||||
name: 'iPad (Portrait)',
|
||||
styles: {
|
||||
width: '834px',
|
||||
height: '1112px',
|
||||
},
|
||||
},
|
||||
desktop: {
|
||||
name: 'Desktop (Small)',
|
||||
styles: {
|
||||
width: '1024px',
|
||||
height: '1280px',
|
||||
},
|
||||
},
|
||||
// Widget-specific viewports
|
||||
widgetMedium: {
|
||||
name: 'Widget Medium',
|
||||
styles: {
|
||||
width: '768px',
|
||||
height: '800px',
|
||||
},
|
||||
},
|
||||
widgetWide: {
|
||||
name: 'Widget Wide',
|
||||
styles: {
|
||||
width: '1024px',
|
||||
height: '800px',
|
||||
},
|
||||
},
|
||||
widgetExtraWide: {
|
||||
name: 'Widget Extra Wide',
|
||||
styles: {
|
||||
width: '1280px',
|
||||
height: '800px',
|
||||
},
|
||||
},
|
||||
// Full-width viewports
|
||||
fullWidth: {
|
||||
name: 'Full Width',
|
||||
styles: {
|
||||
width: '100%',
|
||||
height: '800px',
|
||||
},
|
||||
},
|
||||
fullScreen: {
|
||||
name: 'Full Screen',
|
||||
styles: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -45,6 +180,13 @@ const preview: Preview = {
|
||||
},
|
||||
|
||||
decorators: [
|
||||
// Outermost: initialize ThemeManager for all stories
|
||||
story => ({
|
||||
Component: ThemeDecorator,
|
||||
props: {
|
||||
children: story(),
|
||||
},
|
||||
}),
|
||||
// Wrap with providers (TooltipProvider, ResponsiveManager)
|
||||
story => ({
|
||||
Component: Decorator,
|
||||
|
||||
Reference in New Issue
Block a user