WRQ-1966: Storybook - Read custom colors from luna settings service

samples/sampler/.storybook/main.js

@@ -17,7 +17,8 @@ module.exports = {
 		'@enact/storybook-utils/addons/actions',
 		'@enact/storybook-utils/addons/controls',
 		'@enact/storybook-utils/addons/docs',
-		'@enact/storybook-utils/addons/toolbars'
+		'@enact/storybook-utils/addons/toolbars',
+		'../colors-toolbar/manager.js'
 	],
 	webpackFinal: async (config, {configType}) => {
 		return webpack(config, configType, __dirname);

samples/sampler/.storybook/preview.js

@@ -7,6 +7,28 @@ import {themes} from '@storybook/theming';
 
 import ThemeEnvironment from '../src/ThemeEnvironment';
 
+// custom decorator imports
+import {addDecorator} from '@storybook/react';
+import {platform} from '@enact/webos/platform';
+
+import {CustomStoryDecorator} from '../colors-toolbar/CustomStoryDecorator';
+
+// if running in webos environment, render a list of color pickers in every story
+export const GlobalDecorator = (Story) => {
+	if (platform.tv) {
+		return (
+			<div style={{padding: '21px'}}>
+				<CustomStoryDecorator />
+				<Story />
+			</div>
+		)
+	} else {
+		return <Story />;
+	}
+};
+
+addDecorator(GlobalDecorator);
+
 // NOTE: Locales taken from strawman. Might need to add more in the future.
 const locales = {
 	'local': '',
@@ -96,7 +118,13 @@ export const globalTypes = {
 	'debug aria': getBooleanType('debug aria'),
 	'debug layout': getBooleanType('debug layout'),
 	'debug spotlight': getBooleanType('debug spotlight'),
-	'debug sprites': getBooleanType('debug sprites')
+	'debug sprites': getBooleanType('debug sprites'),
+	// custom theme globalTypes
+	'componentBackgroundColor': 'string',
+	'focusBackgroundColor': 'string',
+	'popupBackgroundColor': 'string',
+	'subtitleTextColor': 'string',
+	'textColor': 'string'
 };
 
 export const decorators = [ThemeEnvironment];

samples/sampler/colors-toolbar/ColorPicker.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, {useCallback} from 'react'; // eslint-disable-line
+import {useGlobals} from '@storybook/api';
+
+import {
+	BACKGROUNDCOLOR_ADDON_ID,
+	BACKGROUNDCOLOR_DEFAULT_VALUE,
+	FOCUSBGCOLOR_ADDON_ID,
+	FOCUSBGCOLOR_DEFAULT_VALUE,
+	POPUPBGCOLOR_ADDON_ID,
+	POPUPBGCOLOR_DEFAULT_VALUE,
+	SUBTEXTCOLOR_DEFAULT_VALUE,
+	TEXT_ADDON_ID,
+	TEXT_DEFAULT_VALUE
+} from './constants';
+
+const ColorPicker = ({colorPickerType}) => {
+	const [globals, updateGlobals] = useGlobals();
+
+	const getDefaultColor = () => {
+		switch (colorPickerType) {
+			case BACKGROUNDCOLOR_ADDON_ID:
+				return BACKGROUNDCOLOR_DEFAULT_VALUE;
+			case FOCUSBGCOLOR_ADDON_ID:
+				return FOCUSBGCOLOR_DEFAULT_VALUE;
+			case POPUPBGCOLOR_ADDON_ID:
+				return POPUPBGCOLOR_DEFAULT_VALUE;
+			case TEXT_ADDON_ID:
+				return TEXT_DEFAULT_VALUE;
+			default:
+				return SUBTEXTCOLOR_DEFAULT_VALUE;
+		}
+	};
+
+	const handleColorChange = useCallback((ev) => {
+		updateGlobals({[colorPickerType]: ev.target.value});
+	}, [colorPickerType, updateGlobals]);
+
+	return (
+		<input
+			onChange={handleColorChange}
+			type="color"
+			value={globals[colorPickerType] || getDefaultColor()}
+		/>
+	);
+};
+
+ColorPicker.propTypes = {
+	colorPickerType: PropTypes.string
+};
+
+export default ColorPicker;

samples/sampler/colors-toolbar/CustomStoryDecorator.js

@@ -0,0 +1,137 @@
+// this component has been added as an alternative of built-in HTML color picker which does not work in webos environment
+import Button from '@enact/sandstone/Button';
+import {ColorPicker as SandstoneColorPicker} from '@enact/sandstone/ColorPicker';
+import Scroller from '@enact/sandstone/Scroller';
+import LS2Request from '@enact/webos/LS2Request';
+import {useCallback, useContext} from 'react';
+
+import {AppContext} from './constants';
+import {generateStylesheet} from '../utils/generateStylesheet';
+
+import css from './CustomStoryDecorator.module.less';
+
+const request = new LS2Request();
+
+export const CustomStoryDecorator = () => {
+	const {context, setContext} = useContext(AppContext);
+	const {componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = context;
+
+	const onColorChange = useCallback((color, newColor) => {
+		// a copy of the context object is created
+		const newContext = Object.assign({}, context);
+		// update the color value on the newly created object with what gets received from `event` (handleBackgroundColor, handleFocusBgColor...)
+		newContext[color] = newColor;
+		// generate the new stylesheet based on the updated color
+		newContext.colors = generateStylesheet(
+			newContext.componentBackgroundColor,
+			newContext.focusBackgroundColor,
+			newContext.popupBackgroundColor,
+			newContext.subtitleTextColor,
+			newContext.textColor
+		);
+		setContext(newContext);
+
+		request.send({
+			service: 'luna://com.webos.service.settings/',
+			method: 'setSystemSettings',
+			parameters: {
+				category: 'customUi',
+				settings: {
+					theme: JSON.stringify(newContext)
+				}
+			},
+			onSuccess: () => {
+				console.log('setSystemSettings onSuccess'); // eslint-disable-line no-console
+			}
+		});
+	}, [context, setContext]);
+
+	const handleComponentBgColor = useCallback((ev) => {
+		onColorChange('componentBackgroundColor', ev);
+	}, [onColorChange]);
+	const handleFocusBgColor = useCallback((ev) => {
+		onColorChange('focusBackgroundColor', ev);
+	}, [onColorChange]);
+	const handlePopupBgColor = useCallback((ev) => {
+		onColorChange('popupBackgroundColor', ev);
+	}, [onColorChange]);
+	const handleTextColor = useCallback((ev) => {
+		onColorChange('textColor', ev);
+	}, [onColorChange]);
+	const handleSubTextColor = useCallback((ev) => {
+		onColorChange('subtitleTextColor', ev);
+	}, [onColorChange]);
+
+	const handleResetButton = useCallback(() => {
+		// a copy of the context object is created
+		const newContext = Object.assign({}, context);
+		// generate the new stylesheet with default sandstone colors
+		newContext.colors = generateStylesheet(
+			newContext.componentBackgroundColor,
+			newContext.focusBackgroundColor,
+			newContext.popupBackgroundColor,
+			newContext.subtitleTextColor,
+			newContext.textColor
+		);
+		setContext(newContext);
+
+		request.send({
+			service: 'luna://com.webos.service.settings/',
+			method: 'setSystemSettings',
+			parameters: {
+				category: 'customUi',
+				settings: {
+					theme: JSON.stringify(newContext)
+				}
+			},
+			onSuccess: () => {
+				console.log('setSystemSettings onSuccess'); // eslint-disable-line no-console
+			}
+		});
+	}, []); // eslint-disable-line
+
+	return (
+		<div className={css.colorPickersBlock}>
+			<Scroller className={css.scrollerColors}>
+				<SandstoneColorPicker
+					className={css.colorPicker}
+					css={css}
+					color={componentBackgroundColor}
+					colorHandler={handleComponentBgColor}
+					text="Component Background Color"
+				/>
+				<SandstoneColorPicker
+					className={css.colorPicker}
+					css={css}
+					color={focusBackgroundColor}
+					colorHandler={handleFocusBgColor}
+					text="Focus Background Color"
+				/>
+				<SandstoneColorPicker
+					className={css.colorPicker}
+					css={css}
+					color={popupBackgroundColor}
+					colorHandler={handlePopupBgColor}
+					text="Popup Background Color"
+				/>
+				<SandstoneColorPicker
+					className={css.colorPicker}
+					css={css}
+					color={textColor}
+					colorHandler={handleTextColor}
+					text="Text Color"
+				/>
+				<SandstoneColorPicker
+					className={css.colorPicker}
+					css={css}
+					color={subtitleTextColor}
+					colorHandler={handleSubTextColor}
+					text="Subtitle Text Color"
+				/>
+				<div className={css.resetButtonBlock}>
+					<Button className={css.resetButton} css={css} onClick={handleResetButton}>Reset default colors</Button>
+				</div>
+			</Scroller>
+		</div>
+	);
+};

samples/sampler/colors-toolbar/CustomStoryDecorator.module.less

@@ -0,0 +1,61 @@
+// CustomStoryDecorator styles
+
+@import '~@enact/sandstone/styles/mixins.less';
+
+// CSS variables needed to override generated custom colors
+// Note: These variables need to be updated when corresponding value from sandstone/styles/colors.less is changed
+@sand-text-color: #e6e6e6;
+@sand-focus-bg-color-rgb: 230, 230, 230;
+@sand-overlay-bg-color-rgb: 87, 94, 102;
+@sand-text-color-rgb: 230, 230, 230;
+@sand-progress-color-rgb: 230, 230, 230;
+@sand-component-bg-color: #7d848c;
+@sand-component-text-color-rgb: 230, 230, 230;
+
+.colorPickersBlock {
+	width: 30%;
+	height: 65%;
+	position: absolute;
+	right: 51px;
+	bottom: 51px;
+	background: #2e3239;
+	border-radius: 30px;
+	padding: 12px;
+}
+
+.colorPicker {
+	color: @sand-text-color;
+
+	.focus({
+		--sand-focus-bg-color-rgb: @sand-focus-bg-color-rgb;
+	})
+}
+
+.colorPopup {
+	--sand-overlay-bg-color-rgb: @sand-overlay-bg-color-rgb;
+	--sand-text-color-rgb: @sand-text-color-rgb;
+}
+
+.colorPickerSliders {
+	.colorSlider {
+		--sand-focus-bg-color-rgb: @sand-focus-bg-color-rgb;
+	}
+}
+
+.scrollerColors {
+	--sand-progress-color-rgb: @sand-progress-color-rgb;
+}
+
+.resetButtonBlock {
+	border-top: 3px solid #e6e6e6;
+	padding-top: 9px;
+}
+
+.resetButton {
+	--sand-component-bg-color: @sand-component-bg-color;
+	--sand-component-text-color-rgb: @sand-component-text-color-rgb;
+
+	.focus({
+		--sand-focus-bg-color-rgb: @sand-focus-bg-color-rgb;
+	})
+}

samples/sampler/colors-toolbar/ToolbarButton.js

@@ -0,0 +1,38 @@
+import {IconButton, Icons, TooltipLinkList, WithTooltip} from '@storybook/components';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ColorPicker from './ColorPicker';
+
+const ToolbarButton = React.memo(({active = true, buttonName, colorPickerType, tooltipName}) => {
+	const tooltipLink = {
+		center: <ColorPicker colorPickerType={colorPickerType} />,
+		id: colorPickerType,
+		key: colorPickerType,
+		left: <span style={{color: 'white'}}>{tooltipName || colorPickerType}</span>,
+		title: true
+	};
+
+	const tooltip = <TooltipLinkList links={[tooltipLink]} />;
+
+	return (
+		<WithTooltip closeOnClick tooltip={tooltip} placement="bottom" trigger="click">
+			<IconButton
+				active={active}
+				key={colorPickerType}
+				style={{display:'flex', flexDirection:'column'}}
+			>
+				<Icons /> {buttonName || colorPickerType}
+			</IconButton>
+		</WithTooltip>
+	);
+});
+
+ToolbarButton.prototypes = {
+	active: PropTypes.boolean,
+	buttonName: PropTypes.string,
+	colorPickerType: PropTypes.string.isRequired,
+	tooltipName: PropTypes.string
+};
+
+export default ToolbarButton;

samples/sampler/colors-toolbar/constants.js

@@ -0,0 +1,39 @@
+import {createContext} from 'react';
+
+// Object containing the default CSS values of Sandstone used for generating custom theme
+// NOTE: These values need to be updated when corresponding value from sandstone/styles/colors.less is changed
+export const defaultSandstoneColors = {
+	componentBackgroundColor: '#7d848c', // equivalent of @sand-component-bg-color - styles/colors.less
+	focusBackgroundColor: '#e6e6e6', // equivalent of @sand-focus-bg-color-rgb - styles/colors.less
+	popupBackgroundColor: '#575e66', // equivalent of @sand-overlay-bg-color-rgb - styles/colors.less
+	subtitleTextColor: '#abaeb3', // equivalent of @sand-text-sub-color - styles/colors.less
+	textColor: '#e6e6e6' // equivalent of @sand-text-color-rgb - styles/colors.less
+};
+
+export const customColorsContext = {
+	activeTheme: 'defaultTheme',
+	componentBackgroundColor: defaultSandstoneColors.componentBackgroundColor,
+	focusBackgroundColor: defaultSandstoneColors.focusBackgroundColor,
+	popupBackgroundColor: defaultSandstoneColors.popupBackgroundColor,
+	subtitleTextColor: defaultSandstoneColors.subtitleTextColor,
+	textColor: defaultSandstoneColors.textColor
+};
+
+export const AppContext = createContext(null);
+
+export const BACKGROUNDCOLOR_ADDON_ID = "componentBackgroundColor";
+export const BACKGROUNDCOLOR_DEFAULT_VALUE = defaultSandstoneColors.componentBackgroundColor;
+
+export const FOCUSBGCOLOR_ADDON_ID = "focusBackgroundColor";
+export const FOCUSBGCOLOR_DEFAULT_VALUE = defaultSandstoneColors.focusBackgroundColor;
+
+export const POPUPBGCOLOR_ADDON_ID = "popupBackgroundColor";
+export const POPUPBGCOLOR_DEFAULT_VALUE = defaultSandstoneColors.popupBackgroundColor;
+
+export const SUBTEXTCOLOR_ADDON_ID = "subtitleTextColor";
+export const SUBTEXTCOLOR_DEFAULT_VALUE = defaultSandstoneColors.subtitleTextColor;
+
+export const TEXT_ADDON_ID = "textColor";
+export const TEXT_DEFAULT_VALUE = defaultSandstoneColors.textColor;
+
+export const TOOLBAR_ADDON_ID = "toolbar-colors";