WRP-26847: Create theming "Hello" App

sandstone/theming-app/.gitignore

@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+dist
+
+# misc
+.DS_Store
+npm-debug.log

sandstone/theming-app/README.md

@@ -0,0 +1,17 @@
+## Theming App
+
+A sample Enact application that uses dynamic color change feature to style the components.
+
+Run `npm install` then `npm run serve` to have the app running on [http://localhost:8080](http://localhost:8080), where you can view it in your browser.
+
+This app will help you choose a preset or customize the Sandstone UI components for your application. On the left side of the app, you can see all the presets and/or customizable color fields, while on the right side is the `Live Preview` area. Any value changes you make inside the color fields will be reflected in `Live Preview`.
+
+#### Customize Themes
+
+The radio buttons on the first Panel allow you to choose a preset including Sandstone default skin.
+
+On the second Panel you can interact with color fields by changing their value inside the input field, or by clicking the colored square which will open the basic color picker.
+
+#### Reset Theme
+
+The `Reset` button will revert all the changes to the active selected preset.

sandstone/theming-app/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "theming-app",
+	"version": "1.0.0",
+	"description": "A general template for an Enact Sandstone application.",
+	"author": "",
+	"main": "src/index.js",
+	"scripts": {
+		"serve": "enact serve",
+		"pack": "enact pack",
+		"pack-p": "enact pack -p",
+		"watch": "enact pack --watch",
+		"clean": "enact clean",
+		"lint": "enact lint --strict .",
+		"license": "enact license",
+		"test": "enact test",
+		"test-watch": "enact test --watch"
+	},
+	"license": "UNLICENSED",
+	"private": true,
+	"repository": "",
+	"enact": {
+		"theme": "sandstone"
+	},
+	"eslintConfig": {
+		"extends": "enact-proxy/strict"
+	},
+	"eslintIgnore": [
+		"node_modules/*",
+		"build/*",
+		"dist/*"
+	],
+	"dependencies": {
+		"@enact/core": "^4.7.5",
+		"@enact/i18n": "^4.7.5",
+		"@enact/sandstone": "^2.7.9",
+		"@enact/spotlight": "^4.7.5",
+		"@enact/ui": "^4.7.5",
+		"classnames": "^2.3.2",
+		"ilib": "^14.18.0",
+		"prop-types": "^15.8.1",
+		"ramda": "^0.29.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"eslint-config-enact-proxy": "^1.0.6"
+	}
+}

sandstone/theming-app/resources/ilibmanifest.json

@@ -0,0 +1,3 @@
+{
+	"files": []
+}

sandstone/theming-app/screenTypes.json

@@ -0,0 +1,9 @@
+[
+	{"name": "pal",    "pxPerRem": 12, "width": 1024, "height": 576,  "aspectRatioName": "hdtv"},
+	{"name": "hd",      "pxPerRem": 16, "width": 1280, "height": 720,  "aspectRatioName": "hdtv"},
+	{"name": "fhd",     "pxPerRem": 24, "width": 1920, "height": 1080, "aspectRatioName": "hdtv"},
+	{"name": "uw-uxga", "pxPerRem": 24, "width": 2560, "height": 1080, "aspectRatioName": "cinema"},
+	{"name": "qhd",     "pxPerRem": 36, "width": 2560, "height": 1440, "aspectRatioName": "hdtv"},
+	{"name": "uhd",     "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv", "base": true},
+	{"name": "uhd2",    "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"}
+]

sandstone/theming-app/src/App/App.js

@@ -0,0 +1,19 @@
+import {useState} from 'react';
+import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
+
+import MainView from '../views/MainView';
+import screenTypes from '../../screenTypes.json';
+
+import {AppContext, dynamicColorsContext} from '../constants';
+
+const App = (props) => {
+	const [context, setContext] = useState(dynamicColorsContext);
+
+	return (
+		<AppContext.Provider value={{context, setContext}}>
+			<MainView {...props} />
+		</AppContext.Provider>
+	);
+};
+
+export default ThemeDecorator({ri: {screenTypes}}, App);

sandstone/theming-app/src/App/App.module.less

@@ -0,0 +1,3 @@
+.app {
+	// general app styles
+}

sandstone/theming-app/src/App/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "App.js"
+}

sandstone/theming-app/src/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,185 @@
+import kind from '@enact/core/kind';
+import BodyText from '@enact/sandstone/BodyText';
+import Button, {ButtonBase} from '@enact/sandstone/Button';
+import Icon from '@enact/sandstone/Icon';
+import Item from '@enact/sandstone/Item';
+import Popup from '@enact/sandstone/Popup';
+import Skinnable from '@enact/sandstone/Skinnable';
+import Slider from '@enact/sandstone/Slider';
+import Spottable from '@enact/spotlight/Spottable';
+import {Cell, Column, Row} from '@enact/ui/Layout';
+import Toggleable from '@enact/ui/Toggleable';
+import PropTypes from 'prop-types';
+import compose from 'ramda/src/compose';
+import {useCallback, useEffect, useState} from 'react';
+
+import {hexToHSL, HSLToHex} from '../../hooks/utils';
+
+import componentCss from './ColorPicker.module.less';
+
+const SpottableButton = Spottable(ButtonBase);
+
+const PopupContent = ({color, colorHandler, css}) => {
+	const [hue, setHue] = useState(0);
+	const [saturation, setSaturation] = useState(0);
+	const [lightness, setLightness] = useState(0);
+
+	useEffect(() => {
+		let {h, s, l} = hexToHSL(color);
+
+		setHue(h);
+		setSaturation(s);
+		setLightness(l);
+	}, [color]);
+
+	const changeHue = useCallback((ev) => {
+		setHue(ev.value);
+	}, []);
+
+	const changeLightness = useCallback((ev) => {
+		setLightness(ev.value);
+	}, []);
+
+	const changeSaturation = useCallback((ev) => {
+		setSaturation(ev.value);
+	}, []);
+
+	const onSliderValueChange = useCallback(() => {
+		colorHandler(HSLToHex({h: hue, s: saturation, l: lightness}));
+	}, [colorHandler, hue, lightness, saturation]);
+
+	return (
+		<Cell className={css.colorPicker}>
+			<div className={css.colorsRow}>
+				<Column className={css.colorPickerSliders}>
+					<BodyText className={css.colorSliderText} css={css}>Hue {hue}</BodyText>
+					<Slider
+						className={css.colorSlider}
+						max={356}
+						min={0}
+						onBlur={onSliderValueChange}
+						onClick={onSliderValueChange}
+						onChange={changeHue}
+						value={hue}
+					/>
+					<BodyText className={css.colorSliderText} css={css}>Saturation {saturation}%</BodyText>
+					<Slider
+						className={css.colorSlider}
+						max={100}
+						min={0}
+						onBlur={onSliderValueChange}
+						onClick={onSliderValueChange}
+						onChange={changeSaturation}
+						value={saturation}
+					/>
+					<BodyText className={css.colorSliderText} css={css}>Lightness {lightness}%</BodyText>
+					<Slider
+						className={css.colorSlider}
+						max={100}
+						min={0}
+						onBlur={onSliderValueChange}
+						onClick={onSliderValueChange}
+						onChange={changeLightness}
+						value={lightness}
+					/>
+				</Column>
+				<div className={css.coloredDiv} style={{backgroundColor: `hsl(${hue} ,${saturation}%, ${lightness}%)`}} />
+			</div>
+		</Cell>
+	);
+};
+
+PopupContent.propTypes = {
+	color: PropTypes.string,
+	colorHandler: PropTypes.func,
+	css: PropTypes.object,
+	presetColors: PropTypes.array
+};
+
+const ColorPickerBase = kind({
+	name: 'ColorPicker',
+
+	functional: true,
+
+	propTypes: {
+		color: PropTypes.string,
+		colorHandler: PropTypes.func,
+		css: PropTypes.object,
+		disabled: PropTypes.bool,
+		onTogglePopup: PropTypes.func,
+		popupOpen: PropTypes.bool,
+		text: PropTypes.string
+	},
+
+	defaultProps: {
+		disabled: false,
+		popupOpen: false
+	},
+
+	handlers: {
+		handleClosePopup: (ev, {onTogglePopup}) => {
+			onTogglePopup();
+		},
+		handleOpenPopup: (ev, {disabled, onTogglePopup}) => {
+			if (!disabled) {
+				onTogglePopup();
+			}
+		}
+	},
+
+	styles: {
+		css: componentCss,
+		publicClassNames: true
+	},
+
+	render: ({color, colorHandler, css, disabled, handleClosePopup, handleOpenPopup, popupOpen, text, ...rest}) => {
+		delete rest.onTogglePopup;
+
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const CloseIcon = useCallback((props) => <Icon {...props} css={css} />, [css]);
+		const slotAfter = <SpottableButton
+			className={css.coloredButton}
+			disabled={disabled}
+			onClick={handleOpenPopup}
+			style={{backgroundColor: color}}
+			type="color"
+		/>;
+
+		return (
+			<Cell shrink className={css.colorPicker}>
+				<Item disabled={disabled} onClick={handleOpenPopup} slotAfter={slotAfter} {...rest}>
+					{text}
+				</Item>
+				<Popup
+					className={css.colorPopup}
+					css={css}
+					noAnimation
+					onClose={handleClosePopup}
+					open={disabled ? false : popupOpen}
+					position="left"
+					scrimType="transparent"
+					skin="neutral"
+				>
+					<Row>
+						<Cell align="center">
+							<BodyText className={css.colorPopupHeader} css={css} noWrap>{text}</BodyText>
+						</Cell>
+						<Cell align="right" shrink>
+							<Button className={css.closeButton} css={css} iconComponent={CloseIcon} icon="closex" onClick={handleClosePopup} size="small" />
+						</Cell>
+					</Row>
+					<PopupContent color={color} colorHandler={colorHandler} css={css} />
+				</Popup>
+			</Cell>
+		);
+	}
+});
+
+const ColorPickerDecorator = compose(
+	Skinnable,
+	Toggleable({prop: 'popupOpen', toggle: 'onTogglePopup'})
+);
+
+const ColorPicker = ColorPickerDecorator(ColorPickerBase);
+
+export default ColorPicker;