@kadconsulting/dry
Version:
KAD Reusable Component Library
198 lines • 9.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { LayoutProvider, useLayout } from '~components/LayoutProvider';
import { ThemeProvider } from '~components/ThemeProvider';
import { ThemeTypes } from '~components/ThemeProvider/types';
import { Layouts } from '../../types';
export default {
title: 'Providers/LayoutProvider',
component: LayoutProvider,
argTypes: {},
};
const mockTheme = {
palette: {
primary: '#6200ea',
primaryContrast: '#ffffff',
primaryContrast_hue: '#ffffff',
primaryDull: '#3700b3',
primaryDullContrast: '#ffffff',
primaryDullContrast_hue: '#ffffff',
primaryDistinct: '#bb86fc',
primaryDistinctContrast: '#000000',
primaryDistinctContrast_hue: '#000000',
error: '#b00020',
errorContrast: '#ffffff',
errorContrast_hue: '#ffffff',
warning: '#fdd835',
warningContrast: '#000000',
warningContrast_hue: '#000000',
success: '#00c853',
successContrast: '#000000',
successContrast_hue: '#000000',
background: '#ffffff',
backgroundContrast: '#000000',
backgroundContrast_hue: '#000000',
surfaceBackground: '#ffffff',
surfaceBackgroundContrast: '#000000',
surfaceBackgroundContrast_hue: '#000000',
surfaceOnPrimaryBackground: '#ffffff',
surfaceOnPrimaryBackgroundContrast: '#000000',
surfaceOnPrimaryBackgroundContrast_hue: '#000000',
surfaceOnPrimaryDistinctBackground: '#ffffff',
surfaceOnPrimaryDistinctBackgroundContrast: '#000000',
surfaceOnPrimaryDistinctBackgroundContrast_hue: '#000000',
surfaceOnPrimaryDullBackground: '#ffffff',
surfaceOnPrimaryDullBackgroundContrast: '#000000',
surfaceOnPrimaryDullBackgroundContrast_hue: '#000000',
},
typography: {
fontDisplay2xl: 'Arial',
fontStyleDisplay2xl: 'normal',
fontSizeDisplay2xl: '2rem',
lineHeightDisplay2xl: '2.5rem',
letterSpacingDisplay2xl: '0.05em',
fontColorDisplay2xl: '#000000',
fontDisplayXl: 'Arial',
fontStyleDisplayXl: 'normal',
fontSizeDisplayXl: '1.8rem',
lineHeightDisplayXl: '2.3rem',
letterSpacingDisplayXl: '0.04em',
fontColorDisplayXl: '#000000',
fontDisplayLg: 'Arial',
fontStyleDisplayLg: 'normal',
fontSizeDisplayLg: '1.6rem',
lineHeightDisplayLg: '2.1rem',
letterSpacingDisplayLg: '0.03em',
fontColorDisplayLg: '#000000',
fontDisplayMd: 'Arial',
fontStyleDisplayMd: 'normal',
fontSizeDisplayMd: '1.4rem',
lineHeightDisplayMd: '1.9rem',
letterSpacingDisplayMd: '0.02em',
fontColorDisplayMd: '#000000',
fontDisplaySm: 'Arial',
fontStyleDisplaySm: 'normal',
fontSizeDisplaySm: '1.2rem',
lineHeightDisplaySm: '1.7rem',
letterSpacingDisplaySm: '0.01em',
fontColorDisplaySm: '#000000',
fontDisplayXs: 'Arial',
fontStyleDisplayXs: 'normal',
fontSizeDisplayXs: '1rem',
lineHeightDisplayXs: '1.5rem',
letterSpacingDisplayXs: '0em',
fontColorDisplayXs: '#000000',
fontTextXl: 'Arial',
fontStyleTextXl: 'normal',
fontSizeTextXl: '1.8rem',
lineHeightTextXl: '2.3rem',
letterSpacingTextXl: '0.04em',
fontColorTextXl: '#000000',
fontTextLg: 'Arial',
fontStyleTextLg: 'normal',
fontSizeTextLg: '1.6rem',
lineHeightTextLg: '2.1rem',
letterSpacingTextLg: '0.03em',
fontColorTextLg: '#000000',
fontTextMd: 'Arial',
fontStyleTextMd: 'normal',
fontSizeTextMd: '1.4rem',
lineHeightTextMd: '1.9rem',
letterSpacingTextMd: '0.02em',
fontColorTextMd: '#000000',
fontTextSm: 'Arial',
fontStyleTextSm: 'normal',
fontSizeTextSm: '1.2rem',
lineHeightTextSm: '1.7rem',
letterSpacingTextSm: '0.01em',
fontColorTextSm: '#000000',
fontTextXs: 'Arial',
fontStyleTextXs: 'normal',
fontSizeTextXs: '1rem',
lineHeightTextXs: '1.5rem',
letterSpacingTextXs: '0em',
fontColorTextXs: '#000000',
},
breakpoints: {
desktopMin: '900px',
tabletMax: '899px',
tabletMin: '600px',
mobileMax: '599px',
mobileMin: '0px',
},
};
const ThemedContent = ({ theme }) => {
const typographyStyles = theme?.typography || {};
return (_jsxs("div", { children: [_jsx("h1", { style: { fontFamily: typographyStyles.fontDisplay2xl }, children: "H1: Display 2XL" }), _jsx("h2", { style: { fontFamily: typographyStyles.fontDisplayXl }, children: "H2: Display XL" }), _jsx("h3", { style: { fontFamily: typographyStyles.fontDisplayLg }, children: "H3: Display Large" }), _jsx("p", { style: { fontFamily: typographyStyles.fontTextMd }, children: "Paragraph: Text Medium" }), _jsx("input", { type: 'text', placeholder: 'Input field' }), _jsx("button", { children: "Button" })] }));
};
const LayoutDisplay = ({ title }) => {
const { layout, windowInnerWidth, windowInnerHeight } = useLayout();
return (_jsxs("div", { style: { margin: '1rem', padding: '1rem', border: '1px solid #ccc' }, children: [_jsx("h2", { children: title }), _jsxs("h3", { children: ["Current Layout: ", layout] }), _jsxs("p", { children: ["Window Inner Width: ", windowInnerWidth, "px"] }), _jsxs("p", { children: ["Window Inner Height: ", windowInnerHeight, "px"] }), _jsx(ThemedContent, {})] }));
};
export const Default = {
render: () => {
return (_jsx(LayoutProvider, { theme: null, children: _jsx(LayoutDisplay, { title: 'Default LayoutProvider' }) }));
},
};
export const WithCustomTheme = {
render: () => {
return (_jsxs(LayoutProvider, { theme: mockTheme, children: [_jsx(LayoutDisplay, { title: 'LayoutProvider With Custom Theme' }), _jsx(ThemedContent, { theme: mockTheme })] }));
},
};
export const WithDifferentInitialLayouts = {
render: () => {
// Simulate setting initial layout based on some logic
const initialLayouts = [
Layouts.Desktop,
Layouts.Tablet,
Layouts.Mobile,
];
return (_jsx("div", { children: initialLayouts.map((layout) => (_jsx(LayoutProvider, { theme: null, children: _jsx(LayoutDisplay, { title: `Initial Layout set to ${layout}` }) }, layout))) }));
},
};
export const WithControlledLayout = {
render: () => {
// Simulate controlling the layout externally
const controlledLayout = 'Mobile'; // could be controlled by state
return (_jsx(LayoutProvider, { theme: null, children: _jsx(LayoutDisplay, { title: `Controlled Layout set to ${controlledLayout}` }) }));
},
};
export const WithDifferentWindowSizes = {
render: () => {
const windowSizes = ['800x600', '1024x768', '1366x768'];
return (_jsx("div", { children: windowSizes.map((size) => {
const [width, height] = size.split('x').map(Number);
return (_jsx("div", { style: {
width: `${width}px`,
height: `${height}px`,
overflow: 'auto',
}, children: _jsx(LayoutProvider, { theme: null, children: _jsx(LayoutDisplay, { title: `Window Size: ${size}` }) }) }, size));
}) }));
},
};
export const DynamicLayoutChange = {
render: () => {
const [layout, setLayout] = useState(Layouts.Desktop);
return (_jsxs(LayoutProvider, { theme: mockTheme, children: [_jsx("button", { onClick: () => setLayout(Layouts.Mobile), children: "Set to Mobile" }), _jsx("button", { onClick: () => setLayout(Layouts.Desktop), children: "Set to Desktop" }), _jsx(LayoutDisplay, { title: `Dynamic Layout: ${layout}` })] }));
},
};
export const CustomLayouts = {
render: () => {
// Simulate custom layouts
const customLayouts = [
Layouts.Desktop,
Layouts.Tablet,
Layouts.Mobile,
];
return (_jsx("div", { children: customLayouts.map((layout) => (_jsx(LayoutProvider, { theme: mockTheme, children: _jsx(LayoutDisplay, { title: `Custom Layout: ${layout}` }) }, layout))) }));
},
};
export const ComplexComponents = {
render: () => {
const themeType = ThemeTypes.DARK;
const lightTheme = ThemeTypes.LIGHT;
const darkTheme = ThemeTypes.DARK;
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: mockTheme, children: _jsxs("div", { children: [_jsx("h1", { children: "Complex Components" }), _jsx("p", { children: "This shows ThemeProvider and LayoutProvider working together." }), _jsx(LayoutDisplay, { title: 'Inside Complex Components' })] }) }) }));
},
};
//# sourceMappingURL=LayoutProvider.stories.js.map