WRP-26847: Create theming "Hello" App

sandstone/custom-skin/package.json → sandstone/feature-custom-skin-generator/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "custom-skin",
+	"name": "custom-skin-generator",
 	"version": "1.0.0",
 	"description": "A general template for an Enact Sandstone application.",
 	"author": "",

sandstone/pattern-ls2request-custom-colors/.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/pattern-ls2request-custom-colors/README.md

@@ -0,0 +1,20 @@
+## Custom Colors Generator
+
+A sample Enact application that uses dynamic color change feature to style components and create a personalized theme.
+
+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 theme and/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 `Theme Preview` area. 
+Any value changes you make to the color pickers will be reflected in `Theme Preview`.
+
+#### Customize Themes
+
+The radio buttons on the first Panel allow you to choose a preset, including Sandstone default theme. 
+You can also choose to activate dynamic color mode which will modify the luminosity and saturation of your theme colors depending on the current time. 
+In addition to this, you can opt to adjust skin automatically, which means that the system will choose between Sandstone neutral and light modes according to the colors you have set.
+On the second Panel you can interact with colors by clicking the colored circle which will open the basic color picker.
+
+#### Reset Theme
+
+The `Reset` button will revert all the changes to the active selected preset.

sandstone/pattern-ls2request-custom-colors/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "pattern-ls2request-custom-colors",
+	"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",
+		"@enact/webos": "^4.7.2",
+		"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/pattern-ls2request-custom-colors/resources/ilibmanifest.json

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

sandstone/pattern-ls2request-custom-colors/screenTypes.json

@@ -0,0 +1,10 @@
+[
+	{"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": "wqhd",    "pxPerRem": 32, "width": 3440, "height": 1440, "aspectRatioName": "cinema"},
+	{"name": "uhd",     "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv", "base": true},
+	{"name": "uhd2",    "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"}
+]

sandstone/pattern-ls2request-custom-colors/src/App/App.js

@@ -0,0 +1,82 @@
+import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
+import LS2Request from '@enact/webos/LS2Request';
+import {useEffect, useState} from 'react';
+
+import {generateStylesheet} from '../hooks/generateStylesheet';
+import MainView from '../views/MainView';
+import screenTypes from '../../screenTypes.json';
+
+import {AppContext, customColorsContext} from '../constants';
+
+const request = new LS2Request();
+
+const defaultKeyThemeValue = JSON.stringify({
+	"version": "0.1",
+	"activeTheme": "defaultTheme",
+	"dynamicColor": "off",
+	"handleSkin": "off",
+	"backgroundColor": "#000000",
+	"componentBackgroundColor": "#7D848C",
+	"focusBackgroundColor": "#E6E6E6",
+	"popupBackgroundColor": "#575E66",
+	"subtitleTextColor": "#ABAEB3",
+	"textColor": "#E6E6E6",
+	colors: generateStylesheet(
+		"#000000",
+		"#7D848C",
+		"#E6E6E6",
+		"#575E66",
+		"#ABAEB3",
+		"#E6E6E6"
+	)
+});
+
+const App = (props) => {
+	const [context, setContext] = useState(customColorsContext);
+	const [responseStatus, setResponseStatus] = useState(false);
+
+	useEffect(() => {
+		// check if app is running on webOS system
+		if (typeof window === 'object' && window.webOSSystem && window.webOSSystem.launchParams) {
+			// make a GET call to service settings to check the value of `theme` key
+			request.send({
+				service: 'luna://com.webos.service.settings/',
+				method: 'getSystemSettings',
+				parameters: {
+					category: 'customUi',
+					keys: ['theme']
+				},
+				onSuccess: (res) => {
+					setResponseStatus(res.returnValue);
+					// if `theme` key is populated, update the context with key value
+					if (res.settings.theme !== '' && res) {
+						const parsedKeyData = JSON.parse(res.settings.theme);
+						setContext({...parsedKeyData});
+					// if `theme` key is an empty string, update the context with a default value, then make a SET call to service settings and set
+					// `theme` key  with a default value
+					} else if (res.settings.theme === '') {
+						setContext(JSON.parse(defaultKeyThemeValue));
+						request.send({
+							service: 'luna://com.webos.service.settings/',
+							method: 'setSystemSettings',
+							parameters: {
+								category: 'customUi',
+								settings: {
+									theme: defaultKeyThemeValue
+								}
+							}
+						});
+					}
+				}
+			});
+		}
+	}, []);
+
+	return (
+		<AppContext.Provider value={{context, setContext}}>
+			<MainView responseStatus={responseStatus} {...props} />
+		</AppContext.Provider>
+	);
+};
+
+export default ThemeDecorator({ri: {screenTypes}}, App);

sandstone/pattern-ls2request-custom-colors/src/App/App.module.less

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

sandstone/pattern-ls2request-custom-colors/src/App/package.json

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