@kadconsulting/dry
Version:
KAD Reusable Component Library
100 lines • 5.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ThemeProvider, ThemeTypes } from '~components/ThemeProvider';
import darkTheme from '../../themes/default/palette/dark';
import lightTheme from '../../themes/default/palette/light';
import customTheme from '../../themes/default/palette/customTheme'; // Assume you have a custom theme
import { inferThemeType, ThemeAwareStory } from '~internal/index';
import { Button } from '~components/Button';
// Define custom theme (for demonstration purposes)
const demoCustomTheme = {
palette: {
'primary-600': 'green',
'primary-700': 'red',
secondary: 'red',
error: '#FF0000',
warning: '#FFCC00',
success: '#00FF00',
info: '#0000FF',
background: '#F0F0F0',
surface: '#FFFFFF',
onPrimary: '#FFFFFF',
onSecondary: '#000000',
onError: '#FFFFFF',
onWarning: '#000000',
onSuccess: '#FFFFFF',
onInfo: '#FFFFFF',
onBackground: '#000000',
onSurface: '#000000',
},
typography: {
fontFamily: 'Comic Sans MS',
fontDisplay: 'Arial',
fontText: 'Verdana',
fontCode: 'Courier New',
fontSize: '16px',
lineHeight: '1.5',
fontWeightNormal: 400,
fontWeightBold: 700,
},
// breakpoints: {
// },
};
export default {
title: 'Providers/ThemeProvider',
tags: ['autodocs'],
component: ThemeProvider,
argTypes: {},
};
const ThemeToggleDemo = ({ initialTheme }) => {
const [themeType, setThemeType] = useState(initialTheme);
const toggleTheme = () => {
setThemeType(themeType === ThemeTypes.DARK ? ThemeTypes.LIGHT : ThemeTypes.DARK);
};
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(Button, { onClick: toggleTheme, children: "Toggle Theme" }) }));
};
const ThemeProviderDemo = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx("h1", { children: "ThemeProvider Demo" }), _jsx("p", { children: "This is some content inside ThemeProvider." }), _jsx(ThemeToggleDemo, { initialTheme: themeType })] }) }) }));
},
};
export const Default = ThemeProviderDemo;
export const WithSystemPreference = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx("h1", { children: "ThemeProvider With System Preference" }), _jsx("p", { children: "This theme is determined by your system's theme preference." })] }) }) }));
},
};
export const WithSelectorOverride = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { selector: '#custom-root', overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { id: 'custom-root', children: [_jsx("h1", { children: "ThemeProvider With Selector Override" }), _jsx("p", { children: "The theme class is added to a custom root element." })] }) }) }));
},
};
export const WithCustomTheme = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: customTheme, dark: customTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx("h1", { children: "ThemeProvider With Custom Theme" }), _jsx("p", { children: "This theme is custom and overrides the default themes." })] }) }) }));
},
};
export const WithDemoCustomTheme = {
render: (args, context) => {
const themeType = inferThemeType(context);
document.documentElement.style.setProperty('--primary-600', 'green');
return (_jsx(ThemeProvider
// overrides={{ themeType }}
// TODO-p4: Fix this type any
, {
// overrides={{ themeType }}
// TODO-p4: Fix this type any
themes: { light: demoCustomTheme, dark: demoCustomTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx("h1", { children: "ThemeProvider With Demo Custom Theme" }), _jsx(Button, { children: "Custom Theme" }), _jsx("p", { children: "This theme is a demonstration of a completely custom theme." })] }) }) }));
},
};
export const WithThemeToggle = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx("h1", { children: "ThemeProvider With Theme Toggle" }), _jsx("p", { children: "This story allows toggling between dark and light themes." }), _jsx(ThemeToggleDemo, { initialTheme: themeType })] }) }) }));
},
};
//# sourceMappingURL=ThemeProvider.stories.js.map