@pyreweb/fabric 1.2.6

package/src/components/utils/FThemeProvider.stories.js

@@ -0,0 +1,236 @@
+import FThemeProvider from './FThemeProvider.vue';
+
+export default {
+	title: 'Utils/FThemeProvider',
+	component: FThemeProvider,
+	argTypes: {
+		defaultTheme: {
+			control: { type: 'select' },
+			options: ['light', 'dark', 'auto'],
+			description: 'Default theme to use when no preference is stored'
+		},
+		storageKey: {
+			control: { type: 'text' },
+			description: 'Key used for localStorage persistence'
+		},
+		enablePersistence: {
+			control: { type: 'boolean' },
+			description: 'Enable or disable localStorage persistence'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FThemeProvider },
+	props: Object.keys(argTypes),
+	template: `
+		<f-theme-provider v-bind="$props" v-slot="{ theme, toggleTheme, setTheme }">
+			<div class="min-h-screen p-8 transition-colors duration-300" 
+			     :style="{
+			       backgroundColor: 'var(--theme-background)',
+			       color: 'var(--theme-foreground)'
+			     }">
+				<div class="max-w-4xl mx-auto space-y-6">
+					<!-- Theme Controls -->
+					<div class="flex gap-4 mb-8">
+						<button 
+							@click="toggleTheme" 
+							class="px-4 py-2 rounded-lg font-medium transition-colors"
+							:style="{
+								backgroundColor: 'var(--theme-primary)',
+								color: 'var(--theme-primary-foreground)'
+							}">
+							Basculer le Thème
+						</button>
+						<button 
+							@click="setTheme('light')" 
+							class="px-4 py-2 rounded-lg border transition-colors"
+							:style="{
+								borderColor: 'var(--theme-border)',
+								backgroundColor: theme === 'light' ? 'var(--theme-primary)' : 'var(--theme-card)',
+								color: theme === 'light' ? 'var(--theme-primary-foreground)' : 'var(--theme-foreground)'
+							}">
+							Mode Clair
+						</button>
+						<button 
+							@click="setTheme('dark')" 
+							class="px-4 py-2 rounded-lg border transition-colors"
+							:style="{
+								borderColor: 'var(--theme-border)',
+								backgroundColor: theme === 'dark' ? 'var(--theme-primary)' : 'var(--theme-card)',
+								color: theme === 'dark' ? 'var(--theme-primary-foreground)' : 'var(--theme-foreground)'
+							}">
+							Mode Sombre
+						</button>
+					</div>
+
+					<!-- Current Theme Display -->
+					<div class="p-4 rounded-lg border"
+					     :style="{
+					       backgroundColor: 'var(--theme-card)',
+					       borderColor: 'var(--theme-border)'
+					     }">
+						<h3 class="text-lg font-semibold mb-2">
+							Thème actuel : <strong>{{ theme }}</strong>
+						</h3>
+						<p :style="{ color: 'var(--theme-muted-foreground)' }">
+							Le thème est automatiquement persisté dans localStorage et appliqué à tous les composants.
+						</p>
+					</div>
+
+					<!-- Color Palette Demo -->
+					<div class="space-y-4">
+						<h2 class="text-2xl font-bold">Palette de Couleurs</h2>
+
+						<!-- Primary Colors -->
+						<div>
+							<h3 class="text-lg font-semibold mb-2">Primaire</h3>
+							<div class="flex gap-2 flex-wrap">
+								<div v-for="shade in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]" 
+								     :key="shade"
+								     class="w-16 h-16 rounded flex items-center justify-center text-xs font-bold"
+								     :style="{
+								       backgroundColor: 'var(--color-primary-' + shade + ')',
+								       color: shade >= 500 ? 'white' : 'black'
+								     }">
+									{{ shade }}
+								</div>
+							</div>
+						</div>
+
+						<!-- Success Colors -->
+						<div>
+							<h3 class="text-lg font-semibold mb-2">Succès</h3>
+							<div class="flex gap-2 flex-wrap">
+								<div v-for="shade in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]" 
+								     :key="shade"
+								     class="w-16 h-16 rounded flex items-center justify-center text-xs font-bold"
+								     :style="{
+								       backgroundColor: 'var(--color-success-' + shade + ')',
+								       color: shade >= 500 ? 'white' : 'black'
+								     }">
+									{{ shade }}
+								</div>
+							</div>
+						</div>
+
+						<!-- Danger Colors -->
+						<div>
+							<h3 class="text-lg font-semibold mb-2">Danger</h3>
+							<div class="flex gap-2 flex-wrap">
+								<div v-for="shade in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]" 
+								     :key="shade"
+								     class="w-16 h-16 rounded flex items-center justify-center text-xs font-bold"
+								     :style="{
+								       backgroundColor: 'var(--color-danger-' + shade + ')',
+								       color: shade >= 500 ? 'white' : 'black'
+								     }">
+									{{ shade }}
+								</div>
+							</div>
+						</div>
+
+						<!-- Warning Colors -->
+						<div>
+							<h3 class="text-lg font-semibold mb-2">Avertissement</h3>
+							<div class="flex gap-2 flex-wrap">
+								<div v-for="shade in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]" 
+								     :key="shade"
+								     class="w-16 h-16 rounded flex items-center justify-center text-xs font-bold"
+								     :style="{
+								       backgroundColor: 'var(--color-warning-' + shade + ')',
+								       color: shade >= 500 ? 'white' : 'black'
+								     }">
+									{{ shade }}
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Semantic Theme Variables -->
+					<div class="space-y-4 mt-8">
+						<h2 class="text-2xl font-bold">Variables Thématiques Sémantiques</h2>
+						<div class="grid grid-cols-2 gap-4">
+							<div class="p-4 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<p class="font-mono text-sm mb-2">--theme-background</p>
+								<div class="w-full h-12 rounded" :style="{ backgroundColor: 'var(--theme-background)', border: '1px solid var(--theme-border)' }"></div>
+							</div>
+							<div class="p-4 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<p class="font-mono text-sm mb-2">--theme-foreground</p>
+								<div class="w-full h-12 rounded" :style="{ backgroundColor: 'var(--theme-foreground)' }"></div>
+							</div>
+							<div class="p-4 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<p class="font-mono text-sm mb-2">--theme-card</p>
+								<div class="w-full h-12 rounded" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }"></div>
+							</div>
+							<div class="p-4 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<p class="font-mono text-sm mb-2">--theme-muted</p>
+								<div class="w-full h-12 rounded" :style="{ backgroundColor: 'var(--theme-muted)' }"></div>
+							</div>
+							<div class="p-4 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<p class="font-mono text-sm mb-2">--theme-primary</p>
+								<div class="w-full h-12 rounded" :style="{ backgroundColor: 'var(--theme-primary)' }"></div>
+							</div>
+							<div class="p-4 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<p class="font-mono text-sm mb-2">--theme-border</p>
+								<div class="w-full h-12 rounded border-4" :style="{ borderColor: 'var(--theme-border)' }"></div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Example Cards -->
+					<div class="space-y-4 mt-8">
+						<h2 class="text-2xl font-bold">Exemples de Cartes</h2>
+						<div class="grid grid-cols-3 gap-4">
+							<div class="p-6 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<h3 class="text-lg font-semibold mb-2">Carte 1</h3>
+								<p :style="{ color: 'var(--theme-muted-foreground)' }">
+									Contenu de la première carte avec un style thématique.
+								</p>
+							</div>
+							<div class="p-6 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<h3 class="text-lg font-semibold mb-2">Carte 2</h3>
+								<p :style="{ color: 'var(--theme-muted-foreground)' }">
+									Contenu de la deuxième carte.
+								</p>
+							</div>
+							<div class="p-6 rounded-lg" :style="{ backgroundColor: 'var(--theme-card)', border: '1px solid var(--theme-border)' }">
+								<h3 class="text-lg font-semibold mb-2">Carte 3</h3>
+								<p :style="{ color: 'var(--theme-muted-foreground)' }">
+									Contenu de la troisième carte.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</f-theme-provider>
+	`
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	defaultTheme: 'light',
+	storageKey: 'fabric-theme',
+	enablePersistence: true
+};
+
+export const DarkMode = Template.bind({});
+DarkMode.args = {
+	defaultTheme: 'dark',
+	storageKey: 'fabric-theme',
+	enablePersistence: true
+};
+
+export const AutoMode = Template.bind({});
+AutoMode.args = {
+	defaultTheme: 'auto',
+	storageKey: 'fabric-theme',
+	enablePersistence: true
+};
+
+export const NoPersistence = Template.bind({});
+NoPersistence.args = {
+	defaultTheme: 'light',
+	enablePersistence: false
+};

package/src/components/utils/FThemeProvider.test.ts

@@ -0,0 +1,244 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import FThemeProvider from './FThemeProvider.vue';
+
+const localVue = createLocalVue();
+
+describe('FThemeProvider', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		// Clear localStorage before each test
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		if (wrapper) {
+			wrapper.destroy();
+		}
+	});
+
+	it('renders with default light theme', () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			slots: {
+				default: '<div>Content</div>'
+			}
+		});
+
+		expect(wrapper.attributes('data-theme')).toBe('light');
+	});
+
+	it('renders with dark theme when specified', () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			propsData: {
+				defaultTheme: 'dark'
+			},
+			slots: {
+				default: '<div>Content</div>'
+			}
+		});
+
+		expect(wrapper.attributes('data-theme')).toBe('dark');
+	});
+
+	it('exposes theme, toggleTheme, and setTheme via scoped slot', () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			scopedSlots: {
+				default: function (props) {
+					return this.$createElement('div', [
+						this.$createElement(
+							'span',
+							{ attrs: { id: 'theme' } },
+							props.theme
+						),
+						this.$createElement('button', {
+							attrs: { id: 'toggle' },
+							on: { click: props.toggleTheme }
+						}),
+						this.$createElement('button', {
+							attrs: { id: 'set-dark' },
+							on: {
+								click: () => {
+									props.setTheme('dark');
+								}
+							}
+						})
+					]);
+				}
+			}
+		});
+
+		expect(wrapper.find('#theme').text()).toBe('light');
+	});
+
+	it('toggles theme when toggleTheme is called', async () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			scopedSlots: {
+				default: function (props) {
+					return this.$createElement('div', [
+						this.$createElement('button', {
+							attrs: { id: 'toggle' },
+							on: { click: props.toggleTheme }
+						})
+					]);
+				}
+			}
+		});
+
+		expect(wrapper.attributes('data-theme')).toBe('light');
+
+		await wrapper.find('#toggle').trigger('click');
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.attributes('data-theme')).toBe('dark');
+
+		await wrapper.find('#toggle').trigger('click');
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.attributes('data-theme')).toBe('light');
+	});
+
+	it('sets specific theme when setTheme is called', async () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			scopedSlots: {
+				default: function (props) {
+					return this.$createElement('div', [
+						this.$createElement('button', {
+							attrs: { id: 'set-dark' },
+							on: {
+								click: () => {
+									props.setTheme('dark');
+								}
+							}
+						})
+					]);
+				}
+			}
+		});
+
+		expect(wrapper.attributes('data-theme')).toBe('light');
+
+		await wrapper.find('#set-dark').trigger('click');
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.attributes('data-theme')).toBe('dark');
+	});
+
+	it('persists theme to localStorage when enablePersistence is true', async () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			propsData: {
+				enablePersistence: true,
+				storageKey: 'test-theme'
+			},
+			scopedSlots: {
+				default: function (props) {
+					return this.$createElement('button', {
+						attrs: { id: 'toggle' },
+						on: { click: props.toggleTheme }
+					});
+				}
+			}
+		});
+
+		await wrapper.find('#toggle').trigger('click');
+		await wrapper.vm.$nextTick();
+
+		expect(localStorage.getItem('test-theme')).toBe('dark');
+	});
+
+	it('does not persist theme when enablePersistence is false', async () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			propsData: {
+				enablePersistence: false,
+				storageKey: 'test-theme'
+			},
+			scopedSlots: {
+				default: function (props) {
+					return this.$createElement('button', {
+						attrs: { id: 'toggle' },
+						on: { click: props.toggleTheme }
+					});
+				}
+			}
+		});
+
+		await wrapper.find('#toggle').trigger('click');
+		await wrapper.vm.$nextTick();
+
+		expect(localStorage.getItem('test-theme')).toBeNull();
+	});
+
+	it('loads theme from localStorage on mount', () => {
+		localStorage.setItem('fabric-theme', 'dark');
+
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			propsData: {
+				enablePersistence: true
+			},
+			slots: {
+				default: '<div>Content</div>'
+			}
+		});
+
+		expect(wrapper.attributes('data-theme')).toBe('dark');
+	});
+
+	it('emits theme-change event when theme changes', async () => {
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			scopedSlots: {
+				default: function (props) {
+					return this.$createElement('button', {
+						attrs: { id: 'toggle' },
+						on: { click: props.toggleTheme }
+					});
+				}
+			}
+		});
+
+		await wrapper.find('#toggle').trigger('click');
+		await wrapper.vm.$nextTick();
+
+		expect(wrapper.emitted('theme-change')).toBeTruthy();
+		const emitted = wrapper.emitted('theme-change');
+		if (emitted) {
+			// First emission is from initialization (light), second is from toggle (dark)
+			expect(emitted.length).toBeGreaterThanOrEqual(2);
+			expect(emitted[1][0]).toBe('dark');
+		}
+	});
+
+	it('handles auto theme based on system preference', () => {
+		// Mock matchMedia to return dark preference
+		window.matchMedia = (query: string) => ({
+			matches: query === '(prefers-color-scheme: dark)',
+			media: query,
+			onchange: null,
+			addListener: () => {},
+			removeListener: () => {},
+			addEventListener: () => {},
+			removeEventListener: () => {},
+			dispatchEvent: () => true
+		});
+
+		wrapper = mount(FThemeProvider, {
+			localVue,
+			propsData: {
+				defaultTheme: 'auto'
+			},
+			slots: {
+				default: '<div>Content</div>'
+			}
+		});
+
+		expect(wrapper.attributes('data-theme')).toBe('dark');
+	});
+});

package/src/components/utils/FThemeProvider.vue

@@ -0,0 +1,191 @@
+<template>
+	<div :data-theme="currentTheme">
+		<slot
+			:theme="currentTheme"
+			:toggle-theme="toggleTheme"
+			:set-theme="setTheme"
+		/>
+	</div>
+</template>
+
+<script>
+/**
+ * FThemeProvider - Theme management component for Fabric Design System
+ *
+ * This component provides theme switching functionality (light/dark mode)
+ * and manages theme persistence using localStorage.
+ *
+ * See the Storybook stories for usage examples.
+ */
+export default {
+	name: 'FThemeProvider',
+	provide() {
+		return {
+			theme: () => this.currentTheme,
+			toggleTheme: this.toggleTheme,
+			setTheme: this.setTheme
+		};
+	},
+	props: {
+		/**
+		 * Default theme to use when no preference is stored
+		 * @type {'light' | 'dark' | 'auto'}
+		 * @default 'light'
+		 */
+		defaultTheme: {
+			type: String,
+			default: 'light',
+			validator: (value) => ['light', 'dark', 'auto'].includes(value)
+		},
+		/**
+		 * Key used for localStorage persistence
+		 * @type {string}
+		 * @default 'fabric-theme'
+		 */
+		storageKey: {
+			type: String,
+			default: 'fabric-theme'
+		},
+		/**
+		 * Enable or disable localStorage persistence
+		 * @type {boolean}
+		 * @default true
+		 */
+		enablePersistence: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			currentTheme: this.defaultTheme === 'light' ? 'light' : 'dark',
+			storedTheme: null,
+			mediaQuery: null
+		};
+	},
+	created() {
+		this.initializeTheme();
+	},
+	mounted() {
+		this.setupMediaQuery();
+	},
+	beforeDestroy() {
+		if (this.mediaQuery) {
+			this.mediaQuery.removeEventListener(
+				'change',
+				this.handleMediaQueryChange
+			);
+		}
+	},
+	methods: {
+		/**
+		 * Initialize theme from localStorage or system preference
+		 */
+		initializeTheme() {
+			let theme = this.defaultTheme;
+
+			// Try to get theme from localStorage if persistence is enabled
+			if (this.enablePersistence && typeof window !== 'undefined') {
+				try {
+					const stored = localStorage.getItem(this.storageKey);
+					if (stored && ['light', 'dark', 'auto'].includes(stored)) {
+						theme = stored;
+						this.storedTheme = stored;
+					}
+				} catch (error) {
+					console.warn('Failed to read theme from localStorage:', error);
+				}
+			}
+
+			this.applyTheme(theme);
+		},
+
+		/**
+		 * Setup media query listener for auto theme
+		 */
+		setupMediaQuery() {
+			if (typeof window === 'undefined') return;
+
+			try {
+				this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+				this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
+			} catch (error) {
+				console.warn('Failed to setup media query listener:', error);
+			}
+		},
+
+		/**
+		 * Handle media query changes (for auto theme)
+		 */
+		handleMediaQueryChange() {
+			// Only re-apply if stored theme is 'auto'
+			if (this.storedTheme === 'auto') {
+				this.applyTheme('auto');
+			}
+		},
+
+		/**
+		 * Resolve 'auto' theme to actual theme based on system preference
+		 */
+		resolveTheme(theme) {
+			if (theme === 'auto') {
+				if (
+					typeof window !== 'undefined' &&
+					window.matchMedia &&
+					window.matchMedia('(prefers-color-scheme: dark)').matches
+				) {
+					return 'dark';
+				}
+				return 'light';
+			}
+			return theme;
+		},
+
+		/**
+		 * Apply the given theme
+		 * @param {'light' | 'dark' | 'auto'} theme
+		 */
+		applyTheme(theme) {
+			const resolvedTheme = this.resolveTheme(theme);
+			this.currentTheme = resolvedTheme;
+			this.storedTheme = theme; // Remember the original preference
+
+			// Emit theme change event
+			this.$emit('theme-change', resolvedTheme);
+		},
+
+		/**
+		 * Toggle between light and dark themes
+		 */
+		toggleTheme() {
+			const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+			this.setTheme(newTheme);
+		},
+
+		/**
+		 * Set a specific theme
+		 * @param {'light' | 'dark' | 'auto'} theme
+		 */
+		setTheme(theme) {
+			if (!['light', 'dark', 'auto'].includes(theme)) {
+				console.warn(
+					`Invalid theme: ${theme}. Must be 'light', 'dark', or 'auto'.`
+				);
+				return;
+			}
+
+			this.storedTheme = theme;
+			this.applyTheme(theme);
+
+			// Persist to localStorage if enabled
+			if (this.enablePersistence && typeof window !== 'undefined') {
+				try {
+					localStorage.setItem(this.storageKey, theme);
+				} catch (error) {
+					console.warn('Failed to save theme to localStorage:', error);
+				}
+			}
+		}
+	}
+};
+</script>

package/src/components/utils/index.ts

@@ -0,0 +1,3 @@
+import FThemeProvider from './FThemeProvider.vue';
+
+export { FThemeProvider };