@enact/limestone 1.3.0

package/internal/validators/tests/validators-specs.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _validators = require("../validators");
+describe('validators', function () {
+  describe('warn', function () {
+    test('should throw a console warning', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      (0, _validators.warn)('Warning!');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+  });
+  describe('validateRange', function () {
+    test('should throw a console warning when \'value\' is less than \'min\'', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      (0, _validators.validateRange)(10, 11, 20, 'component', 'value', 'min', 'max');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+    test('should throw a console warning when \'value\' is greater than \'max\'', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      (0, _validators.validateRange)(21, 1, 20, 'component', 'value', 'min', 'max');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+    test('should throw a console warning when \'min\' is greater than \'max\'', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      (0, _validators.validateRange)(10, 21, 20, 'component', 'value', 'min', 'max');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+  });
+  describe('validateStepped', function () {
+    test('should throw a console warning when \'value\' is not evenly divisible by \'step\'', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      (0, _validators.validateStepped)(11, 20, 2, 'component', 'value', 'step');
+      expect(consoleSpy).toHaveBeenCalled();
+    });
+  });
+  describe('validateRangeOnce', function () {
+    var thingSpy;
+    beforeEach(function () {
+      thingSpy = jest.fn().mockReturnValue('ANY_THING_SPY_VALUE');
+    });
+    test('should throw a console warning when \'value\' is lower than \'min\'', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      var validateFn = (0, _validators.validateRangeOnce)(thingSpy, {
+        component: 'ANY_COMPONENT'
+      });
+      var normalizedValues = validateFn({
+        value: 1,
+        min: 2,
+        max: 10
+      });
+      var expected = 'Warning: ANY_COMPONENT value (1) less than min (2)';
+      expect(consoleSpy).toHaveBeenCalled();
+      expect(thingSpy).toHaveBeenCalled();
+      expect(consoleSpy.mock.calls[0][0]).toBe(expected);
+      expect(normalizedValues).toBe('ANY_THING_SPY_VALUE');
+    });
+  });
+  describe('validateSteppedOnce', function () {
+    var thingSpy;
+    beforeEach(function () {
+      thingSpy = jest.fn().mockReturnValue('ANY_THING_SPY_VALUE');
+    });
+    test('should throw a console warning when \'value\' is not evenly divisible by \'step\'', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      var validateFn = (0, _validators.validateSteppedOnce)(thingSpy, {
+        component: 'ANY_COMPONENT'
+      });
+      var normalizedValues = validateFn({
+        value: 11,
+        min: 2,
+        step: 2
+      });
+      var expected = 'Warning: ANY_COMPONENT value (11) must be evenly divisible by step (2)';
+      expect(consoleSpy).toHaveBeenCalled();
+      expect(thingSpy).toHaveBeenCalled();
+      expect(consoleSpy.mock.calls[0][0]).toBe(expected);
+      expect(normalizedValues).toBe('ANY_THING_SPY_VALUE');
+    });
+  });
+});

package/internal/validators/validators.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warn = exports.validateSteppedOnce = exports.validateStepped = exports.validateRangeOnce = exports.validateRange = void 0;
+/**
+ * Exports various utilities for performing dev-time validations
+ *
+ * @module limestone/internal/validators
+ * @private
+ */
+
+/**
+ * Issues a warning to the console
+ *
+ * @function
+ * @param {String} msg				Event name
+ *
+ * @returns {undefined}
+ * @memberof limestone/internal/validators
+ * @private
+ */
+var warn = exports.warn = function warn(msg) {
+  if (typeof console !== 'undefined') {
+    console.warn(msg); // eslint-disable-line no-console
+  }
+};
+
+/**
+ * Issues a warning to the console if `value` is not within the range
+ * `min` to `max` or if `min` is less than `max`. In production mode,
+ * no action is taken.
+ *
+ * @function
+ * @param {Number} value The value to validate
+ * @param {Number} min   The minimum acceptable value to validate
+ * @param {Number} max   The maximum acceptable value to validate
+ * @param {String} component The name of the invoker, used to decorate warning message
+ * @param {String} [valueName='value'] The name of the value property
+ * @param {String} [minName='min'] The name of the min property
+ * @param {String} [maxName='max'] The name of the max property
+ *
+ * @returns {undefined}
+ * @memberof limestone/internal/validators
+ * @private
+ */
+var validateRange = exports.validateRange = function validateRange(value, min, max, component) {
+  var valueName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'value';
+  var minName = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'min';
+  var maxName = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'max';
+  if (process.env.NODE_ENV !== "production") {
+    var warned = false;
+    if (value < min) {
+      warn("Warning: ".concat(component, " ").concat(valueName, " (").concat(value, ") less than ").concat(minName, " (").concat(min, ")"));
+      warned = true;
+    } else if (value > max) {
+      warn("Warning: ".concat(component, " ").concat(valueName, " (").concat(value, ") greater than ").concat(maxName, " (").concat(max, ")"));
+      warned = true;
+    }
+    if (min > max) {
+      warn("Warning: ".concat(component, " ").concat(minName, " (").concat(min, ") greater than ").concat(maxName, " (").concat(max, ")"));
+      warned = true;
+    }
+    return warned;
+  }
+};
+var validateRangeOnce = exports.validateRangeOnce = function validateRangeOnce(thing, _ref) {
+  var component = _ref.component,
+    _ref$valueName = _ref.valueName,
+    valueName = _ref$valueName === void 0 ? 'value' : _ref$valueName,
+    _ref$minName = _ref.minName,
+    minName = _ref$minName === void 0 ? 'min' : _ref$minName,
+    _ref$maxName = _ref.maxName,
+    maxName = _ref$maxName === void 0 ? 'max' : _ref$maxName;
+  if (process.env.NODE_ENV !== "production") {
+    var displayed;
+    return function (props) {
+      if (!displayed) {
+        displayed = validateRange(props[valueName], props[minName], props[maxName], component, valueName, minName, maxName);
+      }
+      return thing(props);
+    };
+  } else {
+    return thing;
+  }
+};
+
+/**
+ * Issues a warning to the console if `value`, adjusted for `min` is not evenly
+ * divisible by `step`. In production mode, no action is taken.
+ *
+ * @function
+ * @param {Number} value The value to validate
+ * @param {Number} min   The minimum acceptable value to validate
+ * @param {Number} step  The step
+ * @param {String} component The name of the invoker, used to decorate warning message
+ * @param {String} [valueName='value'] The name of the value property
+ * @param {String} [stepName='step'] The name of the step property
+ *
+ * @returns {Boolean} `true` if warned
+ * @memberof limestone/internal/validators
+ * @private
+ */
+var validateStepped = exports.validateStepped = function validateStepped(value, min, step, component) {
+  var valueName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'value';
+  var stepName = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'step';
+  if (process.env.NODE_ENV !== "production") {
+    // Ignore fractional steps as floating point math can give inconsistent results (1 % 0.1 != 0)
+    if (step && step === Math.floor(step) && (value - min) % step !== 0) {
+      warn("Warning: ".concat(component, " ").concat(valueName, " (").concat(value, ") must be evenly divisible by ").concat(stepName, " (").concat(step, ")"));
+      return true;
+    }
+  }
+  return false;
+};
+var validateSteppedOnce = exports.validateSteppedOnce = function validateSteppedOnce(thing, _ref2) {
+  var component = _ref2.component,
+    _ref2$minName = _ref2.minName,
+    minName = _ref2$minName === void 0 ? 'min' : _ref2$minName,
+    _ref2$stepName = _ref2.stepName,
+    stepName = _ref2$stepName === void 0 ? 'step' : _ref2$stepName,
+    _ref2$valueName = _ref2.valueName,
+    valueName = _ref2$valueName === void 0 ? 'value' : _ref2$valueName;
+  if (process.env.NODE_ENV !== "production") {
+    var displayed;
+    return function (props) {
+      if (!displayed) {
+        displayed = validateStepped(props[valueName], props[minName], props[stepName], component, valueName, stepName);
+      }
+      return thing(props);
+    };
+  } else {
+    return thing;
+  }
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@enact/limestone",
+  "version": "1.3.0",
+  "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/enactjs/limestone.git"
+  },
+  "homepage": "https://enactjs.com",
+  "main": "index.js",
+  "scripts": {
+    "bootstrap": "enact bootstrap",
+    "clean": "enact clean",
+    "cleanall": "enact clean --all",
+    "lint": "enact lint --strict",
+    "sampler": "npm run --prefix samples/sampler serve",
+    "sampler-qa": "npm run --prefix samples/sampler serve-qa",
+    "test": "enact test",
+    "test-ui": "start-tests tests/ui/config/wdio.conf.js",
+    "test-ui-docker": "start-tests tests/ui/config/wdio.docker.conf.js",
+    "test-ui-tv": "start-tests tests/ui/config/wdio.tv.conf.js",
+    "test-ss": "start-tests tests/screenshot/config/wdio.conf.js",
+    "test-ss-docker": "start-tests tests/screenshot/config/wdio.docker.conf.js",
+    "test-ss-tv": "start-tests tests/screenshot/config/wdio.tv.conf.js",
+    "test-json": "enact test --json",
+    "test-watch": "enact test --watch",
+    "transpile": "enact transpile",
+    "validate-docs": "validate-docs --strict --standalone"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "framework",
+    "toolkit",
+    "components",
+    "mobile",
+    "webOS"
+  ],
+  "enact": {
+    "screenTypes": "ThemeDecorator/screenTypes.json"
+  },
+  "dependencies": {
+    "@enact/core": "^5.2.0",
+    "@enact/i18n": "^5.2.0",
+    "@enact/spotlight": "^5.2.0",
+    "@enact/ui": "^5.2.0",
+    "@enact/webos": "^5.2.0",
+    "@enovaui/core-tokens": "^0.8.0",
+    "@enovaui/webos-tokens": "^0.8.0",
+    "classnames": "^2.5.1",
+    "ilib": "^14.21.0 || ^14.21.0-webos1",
+    "invariant": "^2.2.4",
+    "prop-types": "^15.8.1",
+    "ramda": "^0.31.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "warning": "^4.0.3"
+  },
+  "peerDependencies": {
+    "ilib": "^14.21.0 || ^14.21.0-webos1"
+  },
+  "overrides": {
+    "autolinker": "^4.0.0",
+    "vue-template-compiler": "@vue/compiler-sfc@3.4.31"
+  },
+  "devDependencies": {
+    "@enact/docs-utils": "^0.4.13",
+    "@enact/ui-test-utils": "^3.0.0"
+  }
+}

package/resources/ilibmanifest.json

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

package/styles/color-mixins.less

@@ -0,0 +1,230 @@
+// color-mixins.less
+//
+// Mixins specifically dependent on theme colors.
+// Shortcuts for easily getting consistent colorization rules onto components.
+//
+
+@import "./mixins.less";
+
+// ---------------------------------------
+// Focus Shadow and background setup
+// ---------------------------------------
+.lime-bg-colors (@bg) {
+	//// Relocate the bg styling to a pseudo-element
+	// &::after {
+		@bg();
+	// }
+}
+// .lime-shadow-colors (@shadow) {
+// 	// &::before {
+// 		@shadow();
+// 	// }
+// }
+
+// Establish rules assignment for before focus has happened
+.lime-spotlight-resting-bg-colors (@opacity: 0, @bg: {}, @shadow: {}) {
+	// These lines are really long, and occasionally repeated. Defining here as shorthand.
+	// @transition-opacity: opacity @lime-spotlight-focus-animation-duration ease-out;
+	// @transition-transform: transform @lime-spotlight-focus-animation-duration ease-out;
+	// @transition-filter: filter @lime-spotlight-focus-animation-duration ease-out;
+
+	opacity: @opacity;
+	// transition+: @transition-opacity;
+	// will-change+: opacity;
+
+	// Prep common aspects
+	// @pseudo-element-setup: {
+	// 	content: "";
+	// 	position: absolute;
+	// 	.position(0);
+	// 	border-radius: inherit;
+	// };
+
+	// // Shadow
+	// .lime-shadow-colors({
+	// 	@pseudo-element-setup();
+	// 	background-color: @lime-spotlight-bg-color;
+	// 	opacity: 0;
+
+	// 	// filter+: drop-shadow(@lime-spotlight-focus-shadow);
+	// 	box-shadow: @lime-spotlight-focus-shadow;
+
+	// 	//// Include a transform on the shadow for a better effect
+	// 	// transform+_: scale(0.9, 0.5); // Hard-coded values, not part of the design. This transform is responsible for tucking the shadow up inside the background so it can transition out.
+	// 	// transition+: @transition-opacity, @transition-transform;
+	// 	// will-change+: opacity, transition;
+
+	// 	//// Simple opacity change to the shadow (fade-in)
+	// 	transition+: @transition-opacity;
+	// 	will-change+: opacity;
+	// 	will-change+: box-shadow;
+
+	// 	@shadow();
+	// });
+
+	// Background coloration
+	.lime-bg-colors({
+		// @pseudo-element-setup();
+
+		background-color: @lime-spotlight-bg-color;
+		// transition+: @transition-filter;
+		will-change+: box-shadow;
+
+		@bg();
+		@shadow();
+	});
+}
+
+// Establish rules assignment for after focus has happened
+.lime-spotlight-focus-bg-colors (@bg: {}, @shadow: {}) {
+	opacity: 1;
+	.lime-bg-colors({
+		background-color: @lime-spotlight-bg-color;
+		box-shadow: @lime-spotlight-focus-shadow;
+		@bg();
+		@shadow();
+	});
+}
+
+// // Just the spotlight shadow (merge-safe)
+// .lime-spotlight-focus-shadow-colors (@shadow: {}) {
+// 	.lime-shadow-colors({
+// 		transform: scale(1);
+// 		opacity: 1;
+// 		box-shadow: @lime-spotlight-focus-shadow;
+// 		@shadow();
+// 	});
+// }
+
+.lime-spotlight-focus-text-colors () {
+	// font-weight: @lime-spotlight-font-weight;
+	color: @lime-spotlight-text-color;
+}
+
+//
+// The following 3 mixins should be used inside the `.lime-disabled()` mixin's ruleset.
+//
+
+// Assign the standard disabled rules
+.lime-disabled-colors () {
+	opacity: @lime-disabled-opacity;
+}
+
+.lime-disabled-bg-colors () {
+	opacity: @lime-disabled-bg-opacity;
+}
+
+// Assign the standard disabled rules of content to content nodes.
+// This should be used on children of a root component node.
+.lime-disabled-focus-content-colors () {
+	opacity: @lime-disabled-focus-content-opacity;
+}
+
+// Assign the standard disabled rules of backgrounds to bg nodes.
+// This should be used on children of a root component node.
+.lime-disabled-focus-bg-colors (@bg: {}, @shadow: {}) {
+	opacity: @lime-disabled-focus-bg-opacity;
+
+	.lime-bg-colors({
+		@bg();
+		@shadow();
+	});
+}
+
+// The technique below is special handling for opaque buttons, which have an opaque
+// color defined for the initial background-color. This means we can't use the
+// traditional opacity change to animate the difference. Instead, this smoothly applies
+// (via transition) a series of filters that match the spotlight-focus bg color. The
+// values were manually calculated to perfectly match, taking the resting bg-color and
+// adjusting it to become the focus-bg-color. If either color value changes, these
+// adjustments must be recalculated. This is not automatic. It may be possible to
+// autonomously calculate this in the future...
+// Button single-color mixins
+.lime-button-resting-bg-color () {
+	background-color: @lime-button-fill-container-color;
+}
+
+.lime-button-selected-bg-color () {
+	background-color: @lime-button-fill-container-selected-color;
+	filter+_: @lime-button-filter-selected;
+}
+
+.lime-button-outline-selected-bg-color () {
+	background-color: @lime-button-outline-container-selected-color;
+	filter+_: @lime-button-filter-selected;
+}
+
+.lime-button-transparent-selected-bg-color () {
+	background-color: @lime-button-transparent-container-selected-color;
+	filter+_: @lime-button-filter-selected;
+}
+
+.lime-button-focus-bg-color () {
+	background-color: @lime-button-fill-container-focused-color;
+	filter+_: @lime-button-filter-focused;
+}
+
+.lime-button-outline-focus-bg-color () {
+	background-color: @lime-button-outline-container-focused-color;
+	filter+_: @lime-button-filter-focused;
+}
+
+.lime-button-transparent-focus-bg-color () {
+	background-color: @lime-button-transparent-container-focused-color;
+	filter+_: @lime-button-filter-focused;
+}
+
+// Button state mixins
+.lime-button-resting-bg-colors (@bg: {}, @shadow: {}) {
+	.lime-spotlight-resting-bg-colors(@opacity: 0, @bg: {
+		.lime-button-resting-bg-color();
+		will-change+: transform, filter;
+		transition+: transform @lime-button-focus-duration ease-out;
+		@bg();
+	}, @shadow);
+}
+
+.lime-button-selected-colors (@bg: {}, @shadow: {}) {
+	.lime-bg-colors({
+		.lime-button-selected-bg-color();
+		@bg();
+		@shadow();
+	});
+}
+
+.lime-button-outline-selected-colors (@bg: {}, @shadow: {}) {
+	.lime-bg-colors({
+		.lime-button-outline-selected-bg-color();
+		@bg();
+		@shadow();
+	});
+}
+
+.lime-button-transparent-selected-colors (@bg: {}, @shadow: {}) {
+	.lime-bg-colors({
+		.lime-button-transparent-selected-bg-color();
+		@bg();
+		@shadow();
+	});
+}
+
+.lime-button-focus-bg-colors (@bg: {}, @shadow: {}) {
+	.lime-spotlight-focus-bg-colors(@bg: {
+		.lime-button-focus-bg-color();
+		@bg();
+	}, @shadow);
+}
+
+.lime-button-outline-focus-bg-colors (@bg: {}, @shadow: {}) {
+	.lime-spotlight-focus-bg-colors(@bg: {
+		.lime-button-outline-focus-bg-color();
+		@bg();
+	}, @shadow);
+}
+
+.lime-button-transparent-focus-bg-colors (@bg: {}, @shadow: {}) {
+	.lime-spotlight-focus-bg-colors(@bg: {
+		.lime-button-transparent-focus-bg-color();
+		@bg();
+	}, @shadow);
+}

package/styles/colors-game-green.less

@@ -0,0 +1,25 @@
+// colors-game-green.less (game skin)
+// (green)
+
+// ---------------------------------------
+// Universal Color Definitions
+// ---------------------------------------
+
+// colors
+@lime-game-skin-color-01: #00ffc2;
+@lime-game-skin-color-02: #45c194;
+
+@lime-game-skin-heading-border-color: #3e6354;
+@lime-game-skin-item-focus-bg-gradient-1: fade(#00ffbc, 0%);
+@lime-game-skin-item-focus-bg-gradient-2: fade(#00ffc2, 47%);
+
+
+// UI Conceptual Colors
+// ---------------------------------------
+
+// common colors
+
+& {
+	--semantic-color-surface-default: #1F2C24;
+	--semantic-color-surface-default-focused: #3ea07d;
+}

package/styles/colors-game-orange.less

@@ -0,0 +1,25 @@
+// colors-game-orange.less (game skin)
+// (orange)
+
+// ---------------------------------------
+// Universal Color Definitions
+// ---------------------------------------
+
+// colors
+@lime-game-skin-color-01: #eb5e00;
+@lime-game-skin-color-02: #d75431;
+
+@lime-game-skin-heading-border-color: #ea5e00;
+@lime-game-skin-item-focus-bg-gradient-1: fade(#562907, 0%);
+@lime-game-skin-item-focus-bg-gradient-2: #a85c37;
+
+
+// UI Conceptual Colors
+// ---------------------------------------
+
+// common colors
+
+& {
+	--semantic-color-surface-default: #422923;
+	--semantic-color-surface-default-focused: #b85f23;
+}

package/styles/colors-game.less

@@ -0,0 +1,56 @@
+// colors-game.less (game skin)
+// (violet)
+
+// ---------------------------------------
+// Universal Color Definitions
+// ---------------------------------------
+
+// colors
+@lime-game-skin-color-01: #a273c8;
+@lime-game-skin-color-02: #8b31d7;
+
+@lime-game-skin-heading-border-color: #8151ff;
+@lime-game-skin-item-focus-bg-gradient-1: fade(#603091, 0%);
+@lime-game-skin-item-focus-bg-gradient-2: #6d2fa1;
+
+
+// UI Conceptual Colors
+// ---------------------------------------
+
+// common colors
+
+& {
+	--semantic-color-surface-default: #2d224c;
+	--semantic-color-surface-default-focused: #6d2fa1;
+	--semantic-color-on-surface-main-focused: #e6e6e6;
+}
+
+// ---------------------------------------
+// Component Colors
+// ---------------------------------------
+
+// Alert
+// ---------------------------------------
+@lime-alert-overlay-bg-color: #000000;
+@lime-alert-overlay-bg-color-opacity: 0.75;
+@lime-alert-overlay-label-color: #ffffff;
+@lime-alert-overlay-shadow: 0 36px 24px fade(#000, 30%), inset 0 0 0 3px fade(@lime-game-skin-color-01, 75%);
+
+// Button
+// --------------------------------------
+@lime-button-outline-border: fade(@lime-game-skin-color-01, 50%);
+@lime-button-icononly-bg-focused: fade(@lime-game-skin-color-02, 50%);
+
+// Heading
+// ---------------------------------------
+@lime-heading-border-color: @lime-game-skin-heading-border-color;
+
+// Item
+// ---------------------------------------
+@lime-item-focus-background: linear-gradient(270deg, @lime-game-skin-item-focus-bg-gradient-1, @lime-game-skin-item-focus-bg-gradient-2);
+@lime-item-focus-label-color: #abaeb3;
+
+// RadioItem
+// ---------------------------------------
+@lime-radioitem-icon-bg-selected: @lime-game-skin-color-02;
+@lime-radioitem-icon-border-selected: @lime-game-skin-color-02;

package/styles/colors-highcontrast.less

@@ -0,0 +1,21 @@
+// colors-highcontast.less (neutral skin + high-contrast variant)
+//
+
+// ---------------------------------------
+// Universal Color Definitions
+// ---------------------------------------
+
+// UI Conceptual Colors
+// ---------------------------------------
+
+@lime-overlay-outline-color: #7c848b;
+@lime-overlay-outline-style: solid;
+
+// ---------------------------------------
+// Component Colors
+// ---------------------------------------
+
+// Popup
+// ---------------------------------------
+@lime-popup-bg-color: var(--semantic-color-background-overlay-default); // opaque
+@lime-popup-scrimtransparent-bg-color: var(--semantic-color-background-overlay-default); // opaque