├── .github ├── ISSUE_TEMPLATE │ ├── BUG_REPORT.md │ ├── FEATURE.md │ └── SUPPORT.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── codeql-analysis.yml │ └── update-copyright-years.yml ├── .gitignore ├── .travis.yml ├── Arc ├── Arc.js ├── package.json ├── tests │ └── Arc-specs.js └── utils.js ├── ArcPicker ├── ArcPicker.js ├── ArcPicker.module.less ├── ArcPickerBehaviorDecorator.js ├── package.json └── tests │ └── ArcPicker-specs.js ├── ArcSlider ├── ArcSlider.js ├── ArcSlider.module.less ├── ArcSliderBehaviorDecorator.js ├── package.json ├── tests │ └── ArcSlider-specs.js └── utils.js ├── BodyText ├── BodyText.js ├── BodyText.module.less ├── package.json └── tests │ └── BodyText-specs.js ├── Button ├── Button.js ├── Button.module.less ├── package.json └── tests │ └── Button-specs.js ├── CHANGELOG.md ├── Checkbox ├── Checkbox.js ├── Checkbox.module.less ├── package.json └── tests │ └── Checkbox-specs.js ├── CheckboxItem ├── CheckboxItem.js ├── CheckboxItem.module.less ├── package.json └── tests │ └── CheckboxItem-specs.js ├── ColorPicker ├── ColorPicker.js ├── ColorPicker.module.less ├── SwatchButton.js ├── SwatchButton.module.less ├── package.json └── tests │ └── ColorPicker-specs.js ├── ContextualPopupDecorator ├── ContextualPopup.js ├── ContextualPopup.module.less ├── ContextualPopupDecorator.js ├── ContextualPopupDecorator.module.less ├── package.json └── tests │ └── ContextualPopupDecorator-specs.js ├── DatePicker ├── DatePicker.js ├── DatePicker.module.less ├── DatePickerBase.js ├── package.json └── tests │ └── DatePicker-specs.js ├── DateTimePicker ├── DateTimePicker.js ├── DateTimePicker.module.less ├── package.json └── tests │ └── DateTimePicker-specs.js ├── Drawer ├── Drawer.js ├── Drawer.module.less ├── package.json └── tests │ └── Drawer-specs.js ├── DropManager ├── DropManager.js ├── DropManager.module.less ├── package.json └── tests │ └── DropManager-specs.js ├── Dropdown ├── Dropdown.js ├── Dropdown.module.less ├── DropdownList.js ├── package.json └── tests │ └── Dropdown-specs.js ├── FanSpeedControl ├── FanSpeedControl.js ├── FanSpeedControl.module.less ├── package.json └── tests │ └── FanSpeedControl-specs.js ├── Header ├── Header.js ├── Header.module.less ├── package.json └── tests │ └── Header-specs.js ├── Heading ├── Heading.js ├── Heading.module.less ├── package.json └── tests │ └── Heading-specs.js ├── Icon ├── Icon.js ├── Icon.module.less ├── IconList.js ├── package.json └── tests │ └── Icon-specs.js ├── Image ├── Image.js ├── Image.module.less ├── package.json └── tests │ └── Image-specs.js ├── ImageItem ├── ImageItem.js ├── ImageItem.module.less ├── package.json └── tests │ └── ImageItem-specs.js ├── IncrementSlider ├── IncrementSlider.js ├── IncrementSlider.module.less ├── IncrementSliderButton.js ├── IncrementSliderButton.module.less ├── package.json ├── tests │ └── IncrementSlider-specs.js └── utils.js ├── Input ├── Input.js ├── Input.module.less ├── InputDecoratorIcon.js ├── InputSpotlightDecorator.js ├── package.json ├── pointer.js ├── tests │ └── Input-specs.js └── util.js ├── Item ├── Item.js ├── Item.module.less ├── package.json └── tests │ └── Item-specs.js ├── Keypad ├── Keypad.js ├── Keypad.module.less ├── package.json └── tests │ └── Keypad-specs.js ├── LICENSE ├── LabeledIcon ├── LabeledIcon.js ├── LabeledIcon.module.less ├── package.json └── tests │ └── LabeledIcon-specs.js ├── LabeledIconButton ├── LabeledIconButton.js ├── LabeledIconButton.module.less ├── package.json └── tests │ └── LabeledIconButton-specs.js ├── Marquee ├── Marquee.js └── package.json ├── MediaPlayer ├── MediaControls.js ├── MediaControls.module.less ├── MediaPlayer.js ├── MediaPlayer.module.less ├── MediaSlider.js ├── MediaSlider.module.less ├── Times.js ├── Times.module.less ├── package.json ├── tests │ ├── MediaPlayer-specs.js │ └── util-specs.js └── util.js ├── Panels ├── ApplicationCloseButton.js ├── Arrangers.js ├── Breadcrumb.js ├── BreadcrumbDecorator.js ├── BreadcrumbPanels.js ├── Breadcrumbs.js ├── CancelDecorator.js ├── Controls.js ├── IdProvider.js ├── Panel.js ├── Panel.module.less ├── Panels.js ├── Panels.module.less ├── SharedStateDecorator.js ├── TabbedPanels.js ├── TabbedPanels.module.less ├── Viewport.js ├── index.js ├── package.json └── tests │ ├── Breadcrumb-specs.js │ ├── BreadcrumbDecorator-specs.js │ ├── BreadcrumbPanels-specs.js │ ├── Panels-specs.js │ └── TabbedPanels-specs.js ├── Picker ├── Picker.js ├── package.json └── tests │ └── Picker-specs.js ├── Popup ├── Popup.js ├── Popup.module.less ├── PopupState.js ├── package.json └── tests │ └── Popup-specs.js ├── PopupMenu ├── PopupMenu.js ├── PopupMenu.module.less ├── package.json └── tests │ └── PopupMenu-specs.js ├── ProgressBar ├── ProgressBar.js ├── ProgressBar.module.less ├── ProgressBarTooltip.js ├── ProgressBarTooltip.module.less ├── package.json └── tests │ └── ProgressBar-specs.js ├── README.md ├── RadioItem ├── RadioItem.js ├── RadioItem.module.less ├── package.json └── tests │ └── RadioItem-specs.js ├── RangePicker ├── RangePicker.js ├── package.json └── tests │ └── RangePicker-specs.js ├── Rearrangeable ├── Rearrangeable.js └── package.json ├── Scroller ├── Scroller.js ├── package.json ├── tests │ └── Scroller-specs.js ├── useEvent.js ├── useSpotlight.js └── useThemeScroller.js ├── Skinnable ├── Skinnable.js └── package.json ├── Slider ├── Slider.js ├── Slider.module.less ├── SliderBehaviorDecorator.js ├── package.json ├── tests │ └── Slider-specs.js └── utils.js ├── SliderButton ├── SliderButton.js ├── SliderButton.module.less ├── SliderButtonBehaviorDecorator.js ├── package.json └── tests │ └── SliderButton-specs.js ├── Spinner ├── Spinner.js ├── Spinner.module.less ├── package.json └── tests │ └── Spinner-specs.js ├── Switch ├── Switch.js ├── Switch.module.less ├── package.json └── tests │ └── Switch-specs.js ├── SwitchItem ├── SwitchItem.js ├── SwitchItem.module.less ├── package.json └── tests │ └── SwitchItem-specs.js ├── TabGroup ├── TabGroup.js ├── TabGroup.module.less ├── package.json └── tests │ └── TabGroup-specs.js ├── TemperatureControl ├── TemperatureControl.js ├── TemperatureControl.module.less ├── package.json └── tests │ └── TemperatureControl-specs.js ├── ThemeDecorator ├── ThemeDecorator.js ├── ThemeDecorator.module.less ├── package.json ├── screenTypes.json └── tests │ └── ThemeDecorator-specs.js ├── ThumbnailItem ├── ThumbnailItem.js ├── ThumbnailItem.module.less ├── package.json └── tests │ └── ThumbnailItem-specs.js ├── TimePicker ├── TimePicker.js ├── TimePicker.module.less ├── TimePickerBase.js ├── package.json └── tests │ └── TimePicker-specs.js ├── ToggleButton ├── ToggleButton.js ├── ToggleButton.module.less ├── package.json └── tests │ └── ToggleButton-specs.js ├── TooltipDecorator ├── Tooltip.js ├── Tooltip.module.less ├── TooltipDecorator.js ├── TooltipLabel.js ├── package.json ├── tests │ └── TooltipDecorator-specs.js └── util.js ├── VirtualList ├── VirtualList.js ├── package.json ├── tests │ ├── VirtualGridList-native-specs.js │ ├── VirtualGridList-translate-specs.js │ ├── VirtualList-native-specs.js │ ├── VirtualList-translate-specs.js │ ├── useEvent-native-specs.js │ └── useEvent-translate-specs.js ├── useEvent.js ├── usePreventScroll.js ├── useSpotlight.js └── useThemeVirtualList.js ├── WindDirectionControl ├── WindDirectionControl.js ├── WindDirectionControl.module.less ├── package.json └── tests │ └── WindDirectionControl-specs.js ├── assets ├── noise-black.png └── noise-white.png ├── docs ├── agate.svg ├── config.json └── images │ └── agate-themes.jpg ├── fonts ├── Agate-icons.ttf ├── Moonstone-Agate.ttf ├── Moonstone.ttf ├── MuseoSans │ ├── LICENSE.txt │ ├── MuseoSans-Black.ttf │ ├── MuseoSans-BlackItalic.ttf │ ├── MuseoSans-Bold.ttf │ ├── MuseoSans-BoldItalic.ttf │ ├── MuseoSans-Light.ttf │ ├── MuseoSans-Medium.ttf │ ├── MuseoSans-MediumItalic.ttf │ └── MuseoSans-Thin.ttf └── Silicon-Icons.ttf ├── html-template.ejs ├── internal ├── $L │ ├── $L.js │ └── package.json ├── DateComponentPicker │ ├── DateComponentPicker.js │ ├── DateComponentPicker.module.less │ ├── DateComponentRangePicker.js │ ├── index.js │ └── package.json ├── DateTime │ ├── DateTime.js │ ├── DateTime.module.less │ ├── DateTimeDecorator.js │ ├── index.js │ ├── package.json │ └── tests │ │ └── DateTimeDecorator-specs.js ├── Picker │ ├── Picker.js │ ├── Picker.module.less │ ├── PickerItem.js │ ├── package.json │ └── tests │ │ └── Picker-specs.js ├── ToggleIcon │ ├── ToggleIcon.js │ └── package.json └── util │ ├── package.json │ └── util.js ├── package.json ├── resources └── ilibmanifest.json ├── samples ├── event-logger │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ └── src │ │ ├── App │ │ ├── App.js │ │ └── package.json │ │ ├── components │ │ ├── InputBoard │ │ │ ├── Event │ │ │ │ └── EventRegistrationData.js │ │ │ ├── Filter │ │ │ │ ├── Filter.js │ │ │ │ ├── Filter.module.less │ │ │ │ └── package.json │ │ │ ├── InputBoard.js │ │ │ └── package.json │ │ └── Log │ │ │ ├── Log.js │ │ │ ├── Log.module.less │ │ │ ├── Logs.js │ │ │ └── package.json │ │ ├── constants │ │ ├── actionTypes.js │ │ └── eventCategory.js │ │ ├── index.js │ │ ├── store │ │ ├── package.json │ │ ├── slices │ │ │ ├── activeEventsSlice.js │ │ │ ├── eventCapturingOnSlice.js │ │ │ ├── eventLogsSlice.js │ │ │ ├── syntheticEventOnSlice.js │ │ │ └── timerIndexSlice.js │ │ └── store.js │ │ └── views │ │ ├── MainView.js │ │ └── MainView.module.less ├── perf-scroller-native │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ ├── App.module.less │ │ └── index.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── perf-scroller-translate │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ ├── App.module.less │ │ └── index.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── perf-virtualgridlist-native │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ └── index.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── perf-virtualgridlist-translate │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ └── index.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── perf-virtuallist-native-with-different-item-size │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ ├── index.js │ │ └── views │ │ │ ├── HorizontalDifferentWidthItemList.js │ │ │ ├── VerticalDifferentHeightItemList.js │ │ │ └── VerticalExpandableDifferentHeightItemList.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── perf-virtuallist-native │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ └── index.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── perf-virtuallist-translate │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App.js │ │ └── index.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-a11y │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ ├── App.module.less │ │ │ ├── Home.js │ │ │ ├── View.js │ │ │ └── package.json │ │ ├── components │ │ │ ├── AriaValueTextDecorator.js │ │ │ ├── Section.js │ │ │ ├── Section.module.less │ │ │ └── useBoolArray.js │ │ ├── index.js │ │ └── views │ │ │ ├── ArcPicker.js │ │ │ ├── ArcSlider.js │ │ │ ├── BodyText.js │ │ │ ├── Button.js │ │ │ ├── CheckboxItem.js │ │ │ ├── ColorPicker.js │ │ │ ├── ContextualPopupDecorator.js │ │ │ ├── DatePicker.js │ │ │ ├── DateTimePicker.js │ │ │ ├── Drawer.js │ │ │ ├── Dropdown.js │ │ │ ├── FanSpeedControl.js │ │ │ ├── Header.js │ │ │ ├── Heading.js │ │ │ ├── ImageItem.js │ │ │ ├── IncrementSlider.js │ │ │ ├── Input.js │ │ │ ├── Item.js │ │ │ ├── Keypad.js │ │ │ ├── LabeledIconButton.js │ │ │ ├── MediaPlayer.js │ │ │ ├── Option.js │ │ │ ├── Panels.js │ │ │ ├── Picker.js │ │ │ ├── Popup.js │ │ │ ├── PopupMenu.js │ │ │ ├── ProgressBar.js │ │ │ ├── RadioItem.js │ │ │ ├── RangePicker.js │ │ │ ├── ReadAlert.js │ │ │ ├── Scroller.js │ │ │ ├── Slider.js │ │ │ ├── SliderButton.js │ │ │ ├── Spinner.js │ │ │ ├── SwitchItem.js │ │ │ ├── TabGroup.js │ │ │ ├── TabbedPanels.js │ │ │ ├── TemperatureControl.js │ │ │ ├── ThumbnailItem.js │ │ │ ├── TimePicker.js │ │ │ ├── ToggleButton.js │ │ │ ├── TooltipDecorator.js │ │ │ ├── VirtualGridList.js │ │ │ ├── VirtualList.js │ │ │ └── WindDirectionControl.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-drag-and-drop │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ └── src │ │ ├── App │ │ ├── App.js │ │ ├── App.module.less │ │ └── package.json │ │ ├── components │ │ └── CustomLayout │ │ │ ├── CustomLayout.js │ │ │ ├── CustomLayout.module.less │ │ │ └── package.json │ │ ├── index.js │ │ └── views │ │ ├── MainPanel.js │ │ ├── MainPanel.module.less │ │ └── README.md ├── qa-dropdown │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ └── src │ │ ├── App │ │ ├── App.js │ │ ├── App.module.less │ │ └── package.json │ │ ├── components │ │ └── README.md │ │ ├── index.js │ │ └── views │ │ ├── MainPanel.js │ │ └── README.md ├── qa-fonts │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ ├── App.module.less │ │ │ └── package.json │ │ ├── components │ │ │ ├── FontList │ │ │ │ ├── FontList.js │ │ │ │ ├── FontList.module.less │ │ │ │ └── package.json │ │ │ ├── README.md │ │ │ └── Status │ │ │ │ ├── Status.js │ │ │ │ ├── Status.module.less │ │ │ │ └── package.json │ │ ├── index.js │ │ └── views │ │ │ ├── MainPanel.js │ │ │ └── README.md │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-i18n-async │ ├── README.md │ ├── package.json │ ├── resources │ │ ├── en │ │ │ └── US │ │ │ │ └── strings.json │ │ ├── ilibmanifest.json │ │ └── ko │ │ │ └── KR │ │ │ └── strings.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ ├── App.module.less │ │ │ └── package.json │ │ ├── components │ │ │ └── README.md │ │ ├── index.js │ │ └── views │ │ │ └── README.md │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-i18n │ ├── README.md │ ├── package.json │ ├── resources │ │ ├── en │ │ │ ├── US │ │ │ │ └── strings.json │ │ │ └── strings.json │ │ ├── es │ │ │ ├── ES │ │ │ │ └── strings.json │ │ │ ├── MX │ │ │ │ └── strings.json │ │ │ └── strings.json │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ ├── App.less │ │ │ ├── attachErrorHandler.js │ │ │ └── package.json │ │ ├── components │ │ │ └── README.md │ │ ├── index.js │ │ └── views │ │ │ ├── MainPanel.js │ │ │ └── README.md │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-scroller │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ └── package.json │ │ ├── components │ │ │ ├── Controls │ │ │ │ ├── Controls.js │ │ │ │ └── package.json │ │ │ ├── LocaleSwitch │ │ │ │ ├── LocaleSwitch.js │ │ │ │ └── package.json │ │ │ └── ScrollModeSwitch │ │ │ │ ├── ScrollModeSwitch.js │ │ │ │ └── package.json │ │ ├── index.js │ │ └── views │ │ │ └── MainView.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-virtualgridlist │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ └── package.json │ │ ├── components │ │ │ ├── ImageItem │ │ │ │ ├── ImageItem.js │ │ │ │ └── package.json │ │ │ ├── ImageList │ │ │ │ ├── ImageList.js │ │ │ │ ├── ImageList.module.less │ │ │ │ └── package.json │ │ │ ├── LocaleSwitch │ │ │ │ ├── LocaleSwitch.js │ │ │ │ └── package.json │ │ │ ├── PanelHeader │ │ │ │ ├── PanelHeader.js │ │ │ │ └── package.json │ │ │ └── ScrollModeSwitch │ │ │ │ ├── ScrollModeSwitch.js │ │ │ │ └── package.json │ │ ├── defaultConfiguration.js │ │ ├── index.js │ │ ├── store │ │ │ └── index.js │ │ ├── utils │ │ │ └── index.js │ │ └── views │ │ │ └── MainView.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-virtualgridlistnative-preserve-focus │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ └── package.json │ │ ├── components │ │ │ ├── SampleVirtualGridList.js │ │ │ └── SampleVirtualGridList.module.less │ │ ├── index.js │ │ ├── store │ │ │ ├── package.json │ │ │ └── store.js │ │ └── views │ │ │ └── MainPanel.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png ├── qa-virtuallist │ ├── README.md │ ├── package.json │ ├── resources │ │ └── ilibmanifest.json │ ├── src │ │ ├── App │ │ │ ├── App.js │ │ │ └── package.json │ │ ├── components │ │ │ ├── ListItem │ │ │ │ ├── ListItem.js │ │ │ │ └── package.json │ │ │ ├── LocaleSwitch │ │ │ │ ├── LocaleSwitch.js │ │ │ │ └── package.json │ │ │ ├── README.md │ │ │ └── ScrollModeSwitch │ │ │ │ ├── ScrollModeSwitch.js │ │ │ │ └── package.json │ │ ├── index.js │ │ ├── store │ │ │ └── index.js │ │ └── views │ │ │ ├── MainPanel.js │ │ │ ├── MainPanel.module.less │ │ │ └── README.md │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png └── sampler │ ├── .qa-storybook │ ├── babel.config.js │ ├── main.js │ ├── manager.js │ ├── preview.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png │ ├── .storybook │ ├── babel.config.js │ ├── main.js │ ├── manager.js │ ├── preview.js │ └── webos-meta │ │ ├── appinfo.json │ │ ├── icon-large.png │ │ ├── icon-mini.png │ │ └── icon.png │ ├── custom-addon │ ├── ColorPicker.js │ ├── DefaultSkinToolbarTab.js │ ├── Toolbar.js │ ├── ToolbarTab.js │ ├── constants.js │ └── manager.js │ ├── images │ ├── icon-enact-docs.png │ ├── icon-enact-factory.svg │ └── icon-enact-logo.svg │ ├── npm-shrinkwrap.json │ ├── package.json │ ├── public │ └── favicon.ico │ ├── resources │ └── ilibmanifest.json │ ├── src │ └── ThemeEnvironment │ │ ├── ThemeEnvironment.js │ │ ├── ThemeEnvironment.module.less │ │ └── package.json │ └── stories │ ├── default │ ├── About.js │ ├── About.module.less │ ├── ArcPicker.js │ ├── ArcSlider.js │ ├── BodyText.js │ ├── Button.js │ ├── Checkbox.js │ ├── CheckboxItem.js │ ├── ColorPicker.js │ ├── ContextualPopupDecorator.js │ ├── DatePicker.js │ ├── DateTimePicker.js │ ├── Drawer.js │ ├── Drawer.module.less │ ├── Dropdown.js │ ├── FanSpeedControl.js │ ├── Header.js │ ├── Heading.js │ ├── Heading.module.less │ ├── Icon.js │ ├── Image.js │ ├── Image.module.less │ ├── ImageItem.js │ ├── IncrementSlider.js │ ├── Input.js │ ├── Item.js │ ├── Keypad.js │ ├── LabeledIcon.js │ ├── LabeledIconButton.js │ ├── Marquee.js │ ├── MediaPlayer.js │ ├── Panel.js │ ├── Panels.js │ ├── Picker.js │ ├── Popup.js │ ├── PopupMenu.js │ ├── PopupMenu.module.less │ ├── ProgressBar.js │ ├── RadioItem.js │ ├── RangePicker.js │ ├── Scroller.js │ ├── Slider.js │ ├── SliderButton.js │ ├── Spinner.js │ ├── SwitchItem.js │ ├── TabGroup.js │ ├── TabbedPanels.js │ ├── TemperatureControl.js │ ├── ThumbnailItem.js │ ├── TimePicker.js │ ├── ToggleButton.js │ ├── TooltipDecorator.js │ ├── VirtualGridList.js │ ├── VirtualList.js │ ├── VirtualList.module.less │ ├── WindDirectionControl.js │ └── util │ │ └── icons.js │ ├── helper │ └── svg.js │ └── qa │ ├── Arc.js │ ├── BodyText.js │ ├── ContextualPopupDecorator.js │ ├── Dropdown.js │ ├── Header.js │ ├── ImageItem.js │ ├── Item.js │ ├── Panels.js │ └── Spinner.js ├── styles ├── colors-base.less ├── colors-carbon.less ├── colors-cobalt-day.less ├── colors-cobalt.less ├── colors-copper-day.less ├── colors-copper.less ├── colors-electro.less ├── colors-gallium-day.less ├── colors-gallium-night.less ├── colors-silicon-day.less ├── colors-silicon-night.less ├── colors-titanium.less ├── internal │ ├── font-agateicons.less │ ├── font-siliconicons.less │ ├── font-sourcesanspro.less │ ├── font-worksans.less │ └── fonts.less ├── mixins.less ├── skin.less ├── variables-base.less ├── variables-carbon.less ├── variables-cobalt.less ├── variables-copper.less ├── variables-electro.less ├── variables-gallium.less ├── variables-silicon.less ├── variables-titanium.less └── variables.less ├── tests ├── screenshot │ ├── apps │ │ ├── Agate-View.js │ │ ├── Agate-View.less │ │ ├── AgateComponents.js │ │ ├── components │ │ │ ├── ArcPicker.js │ │ │ ├── ArcSlider.js │ │ │ ├── BodyText.js │ │ │ ├── Button.js │ │ │ ├── Checkbox.js │ │ │ ├── CheckboxItem.js │ │ │ ├── ColorPicker.js │ │ │ ├── ContextualPopupDecorator.js │ │ │ ├── DatePicker.js │ │ │ ├── DateTimePicker.js │ │ │ ├── Drawer.js │ │ │ ├── Dropdown.js │ │ │ ├── FanSpeedControl.js │ │ │ ├── Header.js │ │ │ ├── Heading.js │ │ │ ├── Icon.js │ │ │ ├── Image.js │ │ │ ├── ImageItem.js │ │ │ ├── IncrementSlider.js │ │ │ ├── Input.js │ │ │ ├── Item.js │ │ │ ├── Keypad.js │ │ │ ├── LabeledIcon.js │ │ │ ├── LabeledIconButton.js │ │ │ ├── Marquee.js │ │ │ ├── MediaPlayer.js │ │ │ ├── Panels.js │ │ │ ├── Picker.js │ │ │ ├── Popup.js │ │ │ ├── PopupMenu.js │ │ │ ├── ProgressBar.js │ │ │ ├── RadioItem.js │ │ │ ├── RangePicker.js │ │ │ ├── Scroller.js │ │ │ ├── Slider.js │ │ │ ├── SliderButton.js │ │ │ ├── Spinner.js │ │ │ ├── SwitchItem.js │ │ │ ├── TabGroup.js │ │ │ ├── TabbedPanels.js │ │ │ ├── TemperatureControl.js │ │ │ ├── ThumbnailItem.js │ │ │ ├── TimePicker.js │ │ │ ├── ToggleButton.js │ │ │ ├── TooltipDecorator.js │ │ │ ├── VirtualGridList.js │ │ │ ├── VirtualList.js │ │ │ ├── WindDirectionControl.js │ │ │ └── utils.js │ │ └── importer.js │ ├── images │ │ ├── 200x200.png │ │ ├── 300x300.png │ │ ├── 600x600.png │ │ └── icon-enact-logo.svg │ ├── specs │ │ ├── AgateCarbon-specs.js │ │ ├── AgateCobalt-specs.js │ │ ├── AgateCobaltNight-specs.js │ │ ├── AgateCopper-specs.js │ │ ├── AgateCopperNight-specs.js │ │ ├── AgateElectro-specs.js │ │ ├── AgateGallium-specs.js │ │ ├── AgateGalliumNight-specs.js │ │ ├── AgatePage.js │ │ ├── AgateSilicon-specs.js │ │ ├── AgateSiliconNight-specs.js │ │ └── AgateTitanium-specs.js │ ├── wdio.conf.js │ ├── wdio.docker.conf.js │ └── wdio.tv.conf.js └── ui │ ├── apps │ ├── ArcPicker │ │ └── ArcPicker-View.js │ ├── ArcSlider │ │ └── ArcSlider-View.js │ ├── Button │ │ └── Button-View.js │ ├── Checkbox │ │ └── Checkbox-View.js │ ├── CheckboxItem │ │ └── CheckboxItem-View.js │ ├── ColorPicker │ │ └── ColorPicker-View.js │ ├── ContextualPopupDecorator │ │ └── ContextualPopupDecorator-View.js │ ├── DatePicker │ │ └── DatePicker-View.js │ ├── DateTimePicker │ │ └── DateTimePicker-View.js │ ├── Drawer │ │ └── Drawer-View.js │ ├── Dropdown │ │ ├── Dropdown-View.js │ │ └── InScroller │ │ │ └── DropdownInScroller-View.js │ ├── FanSpeedControl │ │ └── FanSpeedControl-View.js │ ├── ImageItem │ │ └── ImageItem-View.js │ ├── IncrementSlider │ │ └── IncrementSlider-View.js │ ├── Input │ │ └── Input-View.js │ ├── Item │ │ └── Item-View.js │ ├── Keypad │ │ └── Keypad-View.js │ ├── LabeledIconButton │ │ └── LabeledIconButton-View.js │ ├── MediaPlayer │ │ └── MediaPlayer-View.js │ ├── Panel │ │ └── Panel-View.js │ ├── Picker │ │ └── Picker-View.js │ ├── Popup │ │ └── Popup-View.js │ ├── PopupMenu │ │ └── PopupMenu-View.js │ ├── RadioItem │ │ └── RadioItem-View.js │ ├── RangePicker │ │ └── RangePicker-View.js │ ├── Scroller │ │ ├── Scroller-View.js │ │ └── WithSpottable │ │ │ └── ScrollerWithSpottable-View.js │ ├── Slider │ │ └── Slider-View.js │ ├── SliderButton │ │ └── SliderButton-View.js │ ├── SwitchItem │ │ └── SwitchItem-View.js │ ├── TabGroup │ │ └── TabGroup-View.js │ ├── TabbedPanels │ │ └── TabbedPanels-View.js │ ├── TemperatureControl │ │ └── TemperatureControl-View.js │ ├── ThumbnailItem │ │ └── ThumbnailItem-View.js │ ├── TimePicker │ │ └── TimePicker-View.js │ ├── ToggleButton │ │ └── ToggleButton-View.js │ ├── TooltipDecorator │ │ └── TooltipDecorator-View.js │ ├── VirtualList │ │ ├── VirtualGridList │ │ │ ├── VirtualGridList-View.js │ │ │ └── VirtualGridListScrollTo-View.js │ │ └── VirtualList │ │ │ ├── VirtualList-View.js │ │ │ └── VirtualListInPanels-View.js │ └── WindDirectionControl │ │ └── WindDirectionControl-View.js │ ├── components │ ├── Section.js │ └── UrlPropsDecorator.js │ ├── specs │ ├── ArcPicker │ │ ├── ArcPicker-specs.js │ │ └── ArcPickerPage.js │ ├── ArcSlider │ │ ├── ArcSlider-specs.js │ │ └── ArcSliderPage.js │ ├── Button │ │ ├── Button-specs.js │ │ └── ButtonPage.js │ ├── Checkbox │ │ ├── Checkbox-specs.js │ │ └── CheckboxPage.js │ ├── CheckboxItem │ │ ├── CheckboxItem-specs.js │ │ ├── CheckboxItem-utils.js │ │ └── CheckboxItemPage.js │ ├── ColorPicker │ │ ├── ColorPicker-specs.js │ │ └── ColorPickerPage.js │ ├── ContextualPopupDecorator │ │ ├── ContextualPopupDecorator-specs.js │ │ └── ContextualPopupDecoratorPage.js │ ├── DatePicker │ │ ├── DatePicker-specs.js │ │ ├── DatePicker-utils.js │ │ └── DatePickerPage.js │ ├── DateTimePicker │ │ ├── DateTimePicker-specs.js │ │ ├── DateTimePicker-utils.js │ │ └── DateTimePickerPage.js │ ├── Drawer │ │ ├── Drawer-specs.js │ │ ├── Drawer-utils.js │ │ └── DrawerPage.js │ ├── Dropdown │ │ ├── Dropdown-specs.js │ │ ├── DropdownPage.js │ │ └── InScroller │ │ │ ├── DropdownInScroller-specs.js │ │ │ └── DropdownInScrollerPage.js │ ├── FanSpeedControl │ │ ├── FanSpeedControl-specs.js │ │ └── FanSpeedControlPage.js │ ├── ImageItem │ │ ├── ImageItem-specs.js │ │ └── ImageItemPage.js │ ├── IncrementSlider │ │ ├── IncrementSlider-specs.js │ │ └── IncrementSliderPage.js │ ├── Input │ │ ├── Input-specs.js │ │ └── InputPage.js │ ├── Item │ │ ├── Item-specs.js │ │ └── ItemPage.js │ ├── Keypad │ │ ├── Keypad-specs.js │ │ └── KeypadPage.js │ ├── LabeledIconButton │ │ ├── LabeledIconButton-specs.js │ │ └── LabeledIconButtonPage.js │ ├── MediaPlayer │ │ ├── MediaPlayer-specs.js │ │ └── MediaPlayerPage.js │ ├── Panel │ │ ├── Panel-specs.js │ │ └── PanelPage.js │ ├── Picker │ │ ├── Picker-specs.js │ │ ├── Picker-utils.js │ │ └── PickerPage.js │ ├── Popup │ │ ├── Popup-specs.js │ │ ├── Popup-utils.js │ │ └── PopupPage.js │ ├── PopupMenu │ │ ├── PopupMenu-specs.js │ │ ├── PopupMenu-utils.js │ │ └── PopupMenuPage.js │ ├── RadioItem │ │ ├── RadioItem-specs.js │ │ └── RadioItemPage.js │ ├── RangePicker │ │ ├── RangePicker-specs.js │ │ ├── RangePicker-utils.js │ │ └── RangePickerPage.js │ ├── Scroller │ │ ├── Scroller-nativeScroll-specs.js │ │ ├── Scroller-translateScroll-specs.js │ │ ├── ScrollerPage.js │ │ └── WithSpottable │ │ │ └── ScrollerWithSpottable-specs.js │ ├── Slider │ │ ├── SliderPage.js │ │ └── Sliders-specs.js │ ├── SliderButton │ │ ├── SliderButton-specs.js │ │ └── SliderButtonPage.js │ ├── SwitchItem │ │ ├── SwitchItem-specs.js │ │ └── SwitchItemPage.js │ ├── TabGroup │ │ ├── TabGroup-specs.js │ │ └── TabGroupPage.js │ ├── TabbedPanels │ │ ├── TabbedPanels-specs.js │ │ └── TabbedPanelsPage.js │ ├── TemperatureControl │ │ ├── TemperatureControl-specs.js │ │ └── TemperatureControlPage.js │ ├── ThumbnailItem │ │ ├── ThumbnailItem-specs.js │ │ └── ThumbnailItemPage.js │ ├── TimePicker │ │ ├── TimePicker-specs.js │ │ ├── TimePicker-utils.js │ │ └── TimePickerPage.js │ ├── ToggleButton │ │ ├── ToggleButton-Page.js │ │ └── ToggleButton-specs.js │ ├── TooltipDecorator │ │ ├── TooltipDecorator-specs.js │ │ └── TooltipDecoratorPage.js │ ├── VirtualList │ │ ├── VirtualGridList │ │ │ ├── VirtualGridList-specs.js │ │ │ └── VirtualGridListPage.js │ │ ├── VirtualList-utils.js │ │ └── VirtualList │ │ │ ├── DisabledItem │ │ │ └── VirtualListDisabledItem-specs.js │ │ │ ├── InPanels │ │ │ └── VirtualListInPanels-specs.js │ │ │ ├── RTL │ │ │ └── VirtualListRTL-specs.js │ │ │ ├── VirtualList-specs.js │ │ │ ├── VirtualListPage.js │ │ │ ├── Wrap │ │ │ └── VirtualListWrap-specs.js │ │ │ └── onScroll │ │ │ └── VirtualListOnScroll-specs.js │ └── WindDirectionControl │ │ ├── WindDirectionControl-specs.js │ │ └── WindDirectionControlPage.js │ ├── wdio.conf.js │ ├── wdio.docker.conf.js │ └── wdio.tv.conf.js └── useScroll ├── ScrollButton.js ├── ScrollButtons.js ├── Scrollbar.js ├── Scrollbar.module.less ├── ScrollbarTrack.js ├── package.json ├── tests └── ScrollButtons-specs.js ├── useEvent.js ├── useScroll.js ├── useScrollbar.js ├── useSpotlight.js └── useThemeScrollContentHandle.js /.github/ISSUE_TEMPLATE/BUG_REPORT.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Bug report 3 | about: File a bug report 4 | 5 | --- 6 | 7 | ### Category 8 | 9 | * [ ] Rendering issue 10 | * [ ] Crash/Exception 11 | * [ ] Console error or warning 12 | * [ ] CLI issue 13 | * [ ] Other 14 | 15 | ### Description 16 | [//]: # (Describe the bug. Explain what happened and what you expected to happen.) 17 | 18 | ### Environment 19 | [//]: # (Describe the relevant environment, e.g. node/npm version, browser version.) 20 | 21 | **Enact version:** 22 | 23 | ### Reproduction Code 24 | [//]: # (Provide source code that demonstrates the bug.) 25 | 26 | ### Comments and Screen Shots 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FEATURE.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 💭 Feature Request 3 | about: Request a new feature or modification of an existing one 4 | 5 | --- 6 | 7 | ### Category 8 | 9 | * [ ] New component 10 | * [ ] New feature for existing component 11 | * [ ] Modification of existing component or feature 12 | * [ ] Other 13 | 14 | ### Description 15 | [//]: # (Describe the feature and how you expect it to work) 16 | 17 | ### Alternative Approaches 18 | [//]: # (Are there any other solutions you considered? Why were those not acceptable?) 19 | 20 | ### Comments 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/SUPPORT.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 😵 Support 3 | about: Please use our Gitter 4 | 5 | --- 6 | 7 | Got a question? Not sure if you've found a bug? Try using our 8 | [Gitter](https://gitter.im/EnactJS/Lobby). 9 | 10 | If you found a :bug:, open a [bug ticket](https://github.com/enactjs/agate/issues/new?template=BUG_REPORT.md), instead. 11 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Checklist 2 | 3 | * [ ] I have read and understand the [contribution guide](http://enactjs.com/docs/developer-guide/contributing/) 4 | * [ ] A [CHANGELOG entry](http://enactjs.com/docs/developer-guide/contributing/changelogs/) is included 5 | * [ ] At least one test case is included for this feature or bug fix 6 | * [ ] Documentation was added or is not needed 7 | * [ ] This is an API breaking change 8 | 9 | ### Issue Resolved / Feature Added 10 | [//]: # (Describe the issue resolved or feature added by this pull request) 11 | 12 | 13 | ### Resolution 14 | [//]: # (Does the code work as intended?) 15 | [//]: # (What is the impact of this change and *why* was it made?) 16 | 17 | 18 | ### Additional Considerations 19 | [//]: # (How should the change be tested?) 20 | [//]: # (Are there any outstanding questions?) 21 | [//]: # (Were any side-effects caused by the change?) 22 | 23 | 24 | ### Links 25 | [//]: # (Related issues, references) 26 | 27 | 28 | ### Comments 29 | -------------------------------------------------------------------------------- /.github/workflows/update-copyright-years.yml: -------------------------------------------------------------------------------- 1 | name: Update copyright year(s) in license file 2 | 3 | on: 4 | schedule: 5 | - cron: "0 0 4 1 *" 6 | 7 | jobs: 8 | run: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | with: 13 | ref: develop 14 | fetch-depth: 0 15 | - uses: FantasticFiasco/action-update-license-year@v2 16 | with: 17 | token: ${{ secrets.GITHUB_TOKEN }} 18 | path: README.md 19 | branchName: license/{{currentYear}} 20 | commitTitle: update license 21 | commitBody: Let's keep legal happy. 22 | prTitle: Update copyright years in README.md file 23 | prBody: It's that time of the year, let's update the license. 24 | -------------------------------------------------------------------------------- /Arc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Arc.js" 3 | } 4 | -------------------------------------------------------------------------------- /ArcPicker/ArcPicker.module.less: -------------------------------------------------------------------------------- 1 | // ArcPicker.module.less 2 | // 3 | @import '../styles/mixins.less'; 4 | @import '../styles/skin.less'; 5 | @import '../styles/variables.less'; 6 | 7 | .arcPicker { 8 | position: relative; 9 | 10 | .valueDisplay { 11 | align-items: center; 12 | display: flex; 13 | left: 50%; 14 | position: absolute; 15 | top: 50%; 16 | transform: translate(-50%, -50%); 17 | } 18 | 19 | .arc { 20 | position: absolute; 21 | } 22 | 23 | .applySkins({ 24 | .valueDisplay { 25 | height: @agate-arcpicker-value-display-height; 26 | max-width: @agate-arcpicker-value-display-max-width; 27 | font-size: @agate-arcpicker-font-size; 28 | font-weight: @agate-arcpicker-font-weight; 29 | } 30 | 31 | .focus({ 32 | // Remove default Spottable visual effect 33 | background-color: transparent; 34 | background-image: none; 35 | color: @agate-arcpicker-value-display-color; 36 | }); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /ArcPicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ArcPicker.js" 3 | } 4 | -------------------------------------------------------------------------------- /ArcSlider/ArcSlider.module.less: -------------------------------------------------------------------------------- 1 | // ArcSlider.module.less 2 | // 3 | @import "../styles/mixins.less"; 4 | @import "../styles/variables.less"; 5 | @import "../styles/skin.less"; 6 | 7 | .arcSlider { 8 | position: relative; 9 | 10 | .arc { 11 | position: absolute; 12 | overflow: visible; 13 | } 14 | 15 | .valueDisplay { 16 | position: absolute; 17 | left: 50%; 18 | top: 50%; 19 | transform: translate(-50%, -50%); 20 | width: fit-content; 21 | } 22 | 23 | .applySkins({ 24 | .valueDisplay { 25 | max-width: @agate-arcslider-value-display-max-width; 26 | font-size: @agate-arcslider-font-size; 27 | font-weight: @agate-arcslider-font-weight; 28 | } 29 | 30 | .focus({ 31 | // Remove default Spottable visual effect 32 | background-color: transparent; 33 | background-image: none; 34 | color: @agate-text-color; 35 | }); 36 | 37 | .disabled({ 38 | opacity: @agate-arcslider-disabled-opacity; 39 | }) 40 | }); 41 | } 42 | -------------------------------------------------------------------------------- /ArcSlider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ArcSlider.js" 3 | } 4 | -------------------------------------------------------------------------------- /ArcSlider/utils.js: -------------------------------------------------------------------------------- 1 | const valueToAngle = (value, min, max, startAngle, endAngle) => { 2 | if (min === max) { 3 | max++; 4 | } 5 | const ratio = (value - min) / (max - min); 6 | const angle = ratio * (endAngle - startAngle) + startAngle; 7 | return angle; 8 | }; 9 | 10 | const angleToValue = (angle, min, max, startAngle, endAngle) => { 11 | if (angle < startAngle) { 12 | return min; 13 | } else if (angle > endAngle) { 14 | return max; 15 | } else { 16 | const ratio = (angle - startAngle) / (endAngle - startAngle); 17 | const value = ratio * (max - min) + min; 18 | // round to the nearest int value 19 | return Math.round(value); 20 | } 21 | }; 22 | 23 | export { 24 | valueToAngle, 25 | angleToValue 26 | }; 27 | -------------------------------------------------------------------------------- /BodyText/BodyText.module.less: -------------------------------------------------------------------------------- 1 | // BodyText.module.less 2 | // 3 | @import "../styles/mixins.less"; 4 | @import "../styles/variables.less"; 5 | @import "../styles/skin.less"; 6 | 7 | .bodyText { 8 | .agate-body-text(); 9 | 10 | :global(.enact-locale-right-to-left) & { 11 | text-align: right; 12 | 13 | &.centered { 14 | text-align: center; 15 | } 16 | } 17 | 18 | .locale-japanese-line-break(); 19 | 20 | .applySkins({ 21 | font-weight: @agate-body-font-weight; 22 | font-size: @agate-body-font-size; 23 | line-height: @agate-body-line-height; 24 | margin-left: @agate-spotlight-outset; 25 | margin-right: @agate-spotlight-outset; 26 | 27 | &.small { 28 | font-size: @agate-body-small-font-size; 29 | } 30 | }); 31 | } 32 | -------------------------------------------------------------------------------- /BodyText/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "BodyText.js" 3 | } -------------------------------------------------------------------------------- /Button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Button.js" 3 | } -------------------------------------------------------------------------------- /Checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Checkbox.js" 3 | } 4 | -------------------------------------------------------------------------------- /CheckboxItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "CheckboxItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /ColorPicker/SwatchButton.module.less: -------------------------------------------------------------------------------- 1 | // SwatchButton.module.less 2 | //; 3 | @import "../styles/mixins.less"; 4 | @import "../styles/skin.less"; 5 | 6 | .swatchButton { 7 | .applySkins({ 8 | vertical-align: inherit; 9 | 10 | &, 11 | &.small { 12 | padding: 0; 13 | } 14 | 15 | // ColorPicker's Button bg style reset 16 | .bg { 17 | border-radius: @agate-colorpicker-border-radius; 18 | transform: @agate-colorpicker-bg-transform; 19 | } 20 | 21 | &.iconOnly { 22 | .bg { 23 | background-color: @agate-button-bg-color; 24 | } 25 | } 26 | 27 | .colorSwatch { 28 | position: absolute; 29 | .position(0); 30 | transform: @agate-colorpicker-bg-transform; 31 | border-radius: @agate-colorpicker-swatch-border-radius; 32 | margin: @agate-colorpicker-swatch-margin; 33 | } 34 | }); 35 | } 36 | -------------------------------------------------------------------------------- /ColorPicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ColorPicker.js" 3 | } -------------------------------------------------------------------------------- /ContextualPopupDecorator/ContextualPopupDecorator.module.less: -------------------------------------------------------------------------------- 1 | // ContextualPopupDecorator 2 | // 3 | 4 | .contextualPopupDecorator { 5 | display: inline-block; 6 | } 7 | -------------------------------------------------------------------------------- /ContextualPopupDecorator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ContextualPopupDecorator.js" 3 | } 4 | -------------------------------------------------------------------------------- /DatePicker/DatePicker.module.less: -------------------------------------------------------------------------------- 1 | // DatePicker.module.less 2 | // 3 | .datePicker { 4 | .day, 5 | .month, 6 | .year { 7 | /* These should be available to the JS but have no associated rules at this time. */ 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /DatePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "DatePicker.js" 3 | } 4 | -------------------------------------------------------------------------------- /DateTimePicker/DateTimePicker.module.less: -------------------------------------------------------------------------------- 1 | // DateTimePicker.module.less 2 | // 3 | @import "../styles/mixins.less"; 4 | @import "../styles/skin.less"; 5 | @import "../styles/variables.less"; 6 | 7 | .dateTimePicker { 8 | position: relative; 9 | width: fit-content; 10 | 11 | &::before { 12 | content: ""; 13 | position: absolute; 14 | width: 100%; 15 | left: 50%; 16 | transform: translateX(-50%); 17 | } 18 | } 19 | 20 | .datePicker { 21 | .applySkins({ 22 | &::before { 23 | content: none; 24 | } 25 | }) 26 | } 27 | 28 | .timePicker { 29 | .applySkins({ 30 | &::before { 31 | content: none; 32 | } 33 | }) 34 | } 35 | 36 | .applySkins({ 37 | .dateTimePicker { 38 | font-size: @agate-picker-font-size; 39 | 40 | &::before { 41 | height: @agate-picker-item-height; 42 | background-color: @agate-datetimepicker-active-container-bg-color; 43 | } 44 | 45 | .disabled({ 46 | &::before { 47 | opacity: @agate-picker-disabled-opacity; 48 | } 49 | }) 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /DateTimePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "DateTimePicker.js" 3 | } 4 | -------------------------------------------------------------------------------- /Drawer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Drawer.js" 3 | } 4 | -------------------------------------------------------------------------------- /DropManager/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "DropManager.js" 3 | } 4 | -------------------------------------------------------------------------------- /Dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Dropdown.js" 3 | } -------------------------------------------------------------------------------- /FanSpeedControl/FanSpeedControl.module.less: -------------------------------------------------------------------------------- 1 | // FanSpeedControl.module.less 2 | // 3 | 4 | @import '../styles/mixins.less'; 5 | @import '../styles/skin.less'; 6 | @import '../styles/variables.less'; 7 | 8 | .fanSpeedControl { 9 | .fanValue { 10 | text-align: center; 11 | } 12 | 13 | &.noIcon { 14 | .fanIcon { 15 | display: none; 16 | } 17 | } 18 | 19 | .applySkins({ 20 | .fanIcon { 21 | font-size: @agate-fanspeedcontrol-icon-font-size; 22 | height: @agate-fanspeedcontrol-icon-height; 23 | line-height: @agate-fanspeedcontrol-icon-height; 24 | margin: 0; 25 | .padding-start-end(@agate-fanspeedcontrol-icon-padding-left, 0); 26 | width: @agate-fanspeedcontrol-icon-height; 27 | } 28 | 29 | .fanValue { 30 | width: @agate-fanspeedcontrol-value-width; 31 | .padding-start-end(@agate-fanspeedcontrol-value-padding-left, 0); 32 | text-align: @agate-fanspeedcontrol-value-text-align; 33 | 34 | .enact-locale-rtl({ 35 | text-align: right; 36 | }); 37 | } 38 | }); 39 | } 40 | -------------------------------------------------------------------------------- /FanSpeedControl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "FanSpeedControl.js" 3 | } 4 | -------------------------------------------------------------------------------- /Header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Header.js" 3 | } 4 | -------------------------------------------------------------------------------- /Heading/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Heading.js" 3 | } 4 | -------------------------------------------------------------------------------- /Icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Icon.js" 3 | } -------------------------------------------------------------------------------- /Image/Image.module.less: -------------------------------------------------------------------------------- 1 | // Image.module.less 2 | // 3 | 4 | .image { 5 | width: 360px; 6 | height: 240px; 7 | } 8 | -------------------------------------------------------------------------------- /Image/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Image.js" 3 | } -------------------------------------------------------------------------------- /ImageItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ImageItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /IncrementSlider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "IncrementSlider.js" 3 | } 4 | -------------------------------------------------------------------------------- /IncrementSlider/utils.js: -------------------------------------------------------------------------------- 1 | import clamp from 'ramda/src/clamp'; 2 | import {adaptEvent, forward} from '@enact/core/handle'; 3 | import {calcProportion} from '@enact/ui/Slider/utils'; 4 | 5 | const calcStep = (knobStep, step) => { 6 | let s; 7 | 8 | if (knobStep != null) { 9 | s = knobStep; 10 | } else if (step != null) { 11 | s = step; 12 | } 13 | 14 | // default to a step of 1 if neither are set or are set to 0 15 | // otherwise, increment/decrement would be no-ops 16 | return s || 1; 17 | }; 18 | 19 | export const emitChange = (direction) => adaptEvent( 20 | (ev, {knobStep, max, min, step, value = min}) => { 21 | const newValue = clamp(min, max, value + (calcStep(knobStep, step) * direction)); 22 | 23 | return { 24 | value: newValue, 25 | proportion: calcProportion(min, max, newValue), 26 | type: 'onChange' 27 | }; 28 | }, 29 | forward('onChange') 30 | ); 31 | -------------------------------------------------------------------------------- /Input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Input.js" 3 | } 4 | -------------------------------------------------------------------------------- /Item/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Item.js" 3 | } 4 | -------------------------------------------------------------------------------- /Keypad/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Keypad.js" 3 | } 4 | -------------------------------------------------------------------------------- /LabeledIcon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "LabeledIcon.js" 3 | } -------------------------------------------------------------------------------- /LabeledIconButton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "LabeledIconButton.js" 3 | } 4 | -------------------------------------------------------------------------------- /Marquee/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Marquee.js" 3 | } 4 | -------------------------------------------------------------------------------- /MediaPlayer/MediaPlayer.module.less: -------------------------------------------------------------------------------- 1 | @import "../styles/skin.less"; 2 | 3 | .mediaPlayer { 4 | .applySkins({ 5 | height: @agate-mediaplayer-height; 6 | min-width: @agate-mediaplayer-min-width; 7 | 8 | &.tiny { 9 | height: @agate-mediaplayer-tiny-height; 10 | } 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /MediaPlayer/Times.module.less: -------------------------------------------------------------------------------- 1 | @import "../styles/skin.less"; 2 | 3 | .times { 4 | display: flex; 5 | justify-content: space-between; 6 | position: relative; 7 | bottom: 15px; 8 | }; 9 | 10 | .applySkins({ 11 | .times { 12 | margin: @agate-mediaplayer-times-margin; 13 | line-height: @agate-mediaplayer-times-line-height; 14 | font-size: @agate-mediaplayer-times-font-size; 15 | padding-top: @agate-mediaplayer-times-padding-top; 16 | 17 | :global(.enact-locale-right-to-left) & { 18 | direction: ltr; 19 | } 20 | 21 | &.tiny { 22 | font-size: @agate-mediaplayer-tiny-times-font-size; 23 | padding: @agate-mediaplayer-tiny-times-padding; 24 | } 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /MediaPlayer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "MediaPlayer.js" 3 | } 4 | -------------------------------------------------------------------------------- /Panels/CancelDecorator.js: -------------------------------------------------------------------------------- 1 | import hoc from '@enact/core/hoc'; 2 | import Spotlight from '@enact/spotlight'; 3 | import Cancelable from '@enact/ui/Cancelable'; 4 | 5 | import css from './Panels.module.less'; 6 | 7 | const defaultConfig = { 8 | cancel: null 9 | }; 10 | 11 | const CancelDecorator = hoc(defaultConfig, (config, Wrapped) => { 12 | const {cancel} = config; 13 | 14 | function handleCancel (ev, props) { 15 | const {index, [cancel]: handler} = props; 16 | 17 | if (index > 0 && handler && !document.querySelector(`.${css.transitioning}`)) { 18 | // clear Spotlight focus 19 | const current = Spotlight.getCurrent(); 20 | if (current) { 21 | current.blur(); 22 | } 23 | 24 | handler({ 25 | index: index - 1 26 | }); 27 | 28 | ev.stopPropagation(); 29 | } 30 | } 31 | 32 | return Cancelable( 33 | {modal: true, onCancel: handleCancel}, 34 | Wrapped 35 | ); 36 | }); 37 | 38 | export default CancelDecorator; 39 | export { 40 | CancelDecorator 41 | }; 42 | -------------------------------------------------------------------------------- /Panels/Panel.module.less: -------------------------------------------------------------------------------- 1 | // Panel.module.less 2 | // 3 | @import "../styles/variables.less"; 4 | @import "../styles/mixins.less"; 5 | @import "../styles/skin.less"; 6 | 7 | .panel { 8 | position: absolute; 9 | height: 100%; 10 | width: 100%; 11 | overflow: hidden; 12 | box-sizing: border-box; 13 | display: flex; 14 | flex-direction: column; 15 | 16 | &:global(.enact-fit) { 17 | height: auto; 18 | } 19 | 20 | :global(.enact-locale-right-to-left) & { 21 | direction: rtl; 22 | } 23 | 24 | .body { 25 | position: relative; 26 | flex: 1; 27 | min-height: 0; 28 | opacity: 0; 29 | transition: opacity 200ms ease-out; 30 | will-change: opacity; 31 | 32 | &.noHeader { 33 | padding-top: 0; 34 | } 35 | 36 | &.visible { 37 | opacity: 1; 38 | } 39 | } 40 | 41 | .applySkins({ 42 | .padding-start-end(@agate-panels-panel-padding); 43 | 44 | .header { 45 | padding: @agate-panels-panel-header-padding; 46 | } 47 | .body { 48 | padding: @agate-panels-panel-body-padding; 49 | } 50 | }); 51 | } 52 | -------------------------------------------------------------------------------- /Panels/TabbedPanels.module.less: -------------------------------------------------------------------------------- 1 | // Styles for agate/TabbedPanels.module.less 2 | // @import "../styles/skin.less"; 3 | 4 | .tabbedPanels { 5 | /* I got cat class and I got cat style */ 6 | 7 | .panels { 8 | /* overrides for the base Panels */ 9 | } 10 | 11 | &.reverse { 12 | flex-direction: row-reverse; 13 | 14 | &.column { 15 | flex-direction: column-reverse; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Panels/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Panels provides a way to manage different screens of an app. 3 | * 4 | * @module agate/Panels 5 | * @exports BreadcrumbPanels 6 | * @exports Breadcrumb 7 | * @exports Panel 8 | * @exports Panels 9 | * @exports PanelsBase 10 | * @exports PanelsDecorator 11 | * @exports TabbedPanels 12 | */ 13 | 14 | import Breadcrumb from './Breadcrumb'; 15 | import BreadcrumbPanels from './BreadcrumbPanels'; 16 | import Panel from './Panel'; 17 | import {Panels, PanelsBase, PanelsDecorator} from './Panels'; 18 | import TabbedPanels from './TabbedPanels'; 19 | 20 | export default Panels; 21 | export { 22 | BreadcrumbPanels, 23 | Breadcrumb, 24 | Panel, 25 | Panels, 26 | PanelsBase, 27 | PanelsDecorator, 28 | TabbedPanels 29 | }; 30 | -------------------------------------------------------------------------------- /Panels/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js" 3 | } 4 | -------------------------------------------------------------------------------- /Picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Picker.js" 3 | } 4 | -------------------------------------------------------------------------------- /Popup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Popup.js" 3 | } 4 | -------------------------------------------------------------------------------- /PopupMenu/PopupMenu.module.less: -------------------------------------------------------------------------------- 1 | // PopupMenu.module.less 2 | // 3 | @import "../styles/mixins.less"; 4 | @import "../styles/skin.less"; 5 | 6 | .popupMenu { 7 | .applySkins({ 8 | position: fixed; 9 | .position(0); 10 | background-color: @agate-popupmenu-bg-color; 11 | background-image: @agate-popupmenu-bg-image; 12 | 13 | .popupMenuTitle { 14 | margin: @agate-popupmenu-title-margin; 15 | max-width: @agate-popupmenu-title-width; 16 | 17 | .heading { 18 | color: @agate-popupmenu-title-color; 19 | } 20 | } 21 | 22 | &.horizontal .body { 23 | white-space: nowrap; 24 | text-align: center; 25 | margin-bottom: @agate-popupmenu-body-margin-bottom; 26 | } 27 | }); 28 | } 29 | 30 | .popupTransitionContainer { 31 | position: absolute; 32 | bottom: 0; 33 | height: 100%; 34 | width: 100%; 35 | pointer-events: none; 36 | 37 | .inner { 38 | height: 100%; 39 | 40 | > * { 41 | pointer-events: auto; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /PopupMenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "PopupMenu.js" 3 | } 4 | -------------------------------------------------------------------------------- /ProgressBar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ProgressBar.js" 3 | } 4 | -------------------------------------------------------------------------------- /RadioItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "RadioItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /RangePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "RangePicker.js" 3 | } 4 | -------------------------------------------------------------------------------- /Rearrangeable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Rearrangeable.js" 3 | } 4 | -------------------------------------------------------------------------------- /Scroller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Scroller.js" 3 | } 4 | -------------------------------------------------------------------------------- /Scroller/useEvent.js: -------------------------------------------------------------------------------- 1 | import utilEvent from '@enact/ui/useScroll/utilEvent'; 2 | import {useRef} from 'react'; 3 | 4 | const useEventKey = () => { 5 | // Mutable value 6 | 7 | const mutableRef = useRef({ 8 | fn: null 9 | }); 10 | 11 | // Functions 12 | 13 | function addGlobalKeyDownEventListener (fn) { 14 | mutableRef.current.fn = fn; 15 | utilEvent('keydown').addEventListener(document, mutableRef.current.fn, {capture: true}); 16 | } 17 | 18 | function removeGlobalKeyDownEventListener () { 19 | utilEvent('keydown').removeEventListener(document, mutableRef.current.fn, {capture: true}); 20 | mutableRef.current.fn = null; 21 | } 22 | 23 | // Return 24 | 25 | return { 26 | addGlobalKeyDownEventListener, 27 | removeGlobalKeyDownEventListener 28 | }; 29 | }; 30 | 31 | export default useEventKey; 32 | export { 33 | useEventKey 34 | }; 35 | -------------------------------------------------------------------------------- /Skinnable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Skinnable.js" 3 | } 4 | -------------------------------------------------------------------------------- /Slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Slider.js" 3 | } 4 | -------------------------------------------------------------------------------- /SliderButton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "SliderButton.js" 3 | } -------------------------------------------------------------------------------- /Spinner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Spinner.js" 3 | } 4 | -------------------------------------------------------------------------------- /Switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Switch.js" 3 | } 4 | -------------------------------------------------------------------------------- /SwitchItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "SwitchItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /TabGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "TabGroup.js" 3 | } 4 | -------------------------------------------------------------------------------- /TemperatureControl/TemperatureControl.module.less: -------------------------------------------------------------------------------- 1 | // TemperatureControl.module.less 2 | // 3 | @import "../styles/mixins.less"; 4 | @import "../styles/skin.less"; 5 | 6 | .temperatureControl { 7 | position: relative; 8 | white-space: nowrap; 9 | 10 | .slider { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100%; 15 | width: 100%; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /TemperatureControl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "TemperatureControl.js" 3 | } 4 | -------------------------------------------------------------------------------- /ThemeDecorator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ThemeDecorator.js" 3 | } 4 | -------------------------------------------------------------------------------- /ThemeDecorator/screenTypes.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"name": "iphone", "pxPerRem": 8, "width": 812, "height": 375, "aspectRatioName": "iphone"}, 3 | {"name": "qtrfhd", "pxPerRem": 12, "width": 960, "height": 540, "aspectRatioName": "hdtv"}, 4 | {"name": "hd", "pxPerRem": 16, "width": 1280, "height": 720, "aspectRatioName": "hdtv"}, 5 | {"name": "fhd", "pxPerRem": 24, "width": 1920, "height": 1080, "aspectRatioName": "hdtv", "base": true}, 6 | {"name": "uhd", "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv"}, 7 | {"name": "uhd2", "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"} 8 | ] 9 | -------------------------------------------------------------------------------- /ThumbnailItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ThumbnailItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /TimePicker/TimePicker.module.less: -------------------------------------------------------------------------------- 1 | // TimePicker.module.less 2 | // 3 | 4 | .timePicker { 5 | // hour and minute should always be left-to-right 6 | .pickers { 7 | direction: ltr; 8 | 9 | :global(.enact-locale-right-to-left) & { 10 | display: flex; 11 | align-items: center; 12 | 13 | .hourPicker { 14 | order: 2; 15 | } 16 | .divider { 17 | order: 2; 18 | } 19 | .minutePicker { 20 | order: 3; 21 | } 22 | .meridiemPicker{ 23 | order: 1; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /TimePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "TimePicker.js" 3 | } 4 | -------------------------------------------------------------------------------- /ToggleButton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ToggleButton.js" 3 | } 4 | -------------------------------------------------------------------------------- /TooltipDecorator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "TooltipDecorator.js" 3 | } 4 | -------------------------------------------------------------------------------- /VirtualList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "VirtualList.js" 3 | } 4 | -------------------------------------------------------------------------------- /VirtualList/usePreventScroll.js: -------------------------------------------------------------------------------- 1 | import utilEvent from '@enact/ui/useScroll/utilEvent'; 2 | import {useEffect} from 'react'; 3 | 4 | const usePreventScroll = (props, instances) => { 5 | // Hooks 6 | 7 | useEffect(() => { 8 | const {rtl, scrollMode} = props; 9 | const {scrollContentRef} = instances; 10 | const scrollContentNode = scrollContentRef.current; 11 | 12 | if (scrollMode === 'translate' && scrollContentNode) { 13 | const preventScroll = () => { 14 | scrollContentNode.scrollTop = 0; 15 | scrollContentNode.scrollLeft = rtl ? scrollContentNode.scrollWidth : 0; 16 | }; 17 | 18 | utilEvent('scroll').addEventListener(scrollContentNode, preventScroll); 19 | 20 | return () => { 21 | // remove a function for preventing native scrolling by Spotlight 22 | utilEvent('scroll').removeEventListener(scrollContentNode, preventScroll); 23 | }; 24 | } 25 | }, [props, instances]); 26 | }; 27 | 28 | export default usePreventScroll; 29 | export { 30 | usePreventScroll 31 | }; 32 | -------------------------------------------------------------------------------- /WindDirectionControl/WindDirectionControl.module.less: -------------------------------------------------------------------------------- 1 | // WindDirectionControl.module.less 2 | // 3 | @import '../styles/mixins.less'; 4 | @import '../styles/skin.less'; 5 | @import '../styles/variables.less'; 6 | 7 | .windDirectionControl { 8 | .airDirectionIcon { 9 | .applySkins({ 10 | font-size: @agate-winddirectioncontrol-icon-font-size; 11 | height: @agate-winddirectioncontrol-icon-height; 12 | line-height: @agate-winddirectioncontrol-icon-line-height; 13 | width: @agate-winddirectioncontrol-icon-width; 14 | margin: 0; 15 | }) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /WindDirectionControl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "WindDirectionControl.js" 3 | } 4 | -------------------------------------------------------------------------------- /assets/noise-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/assets/noise-black.png -------------------------------------------------------------------------------- /assets/noise-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/assets/noise-white.png -------------------------------------------------------------------------------- /docs/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "icon": "agate.svg" 3 | } 4 | -------------------------------------------------------------------------------- /docs/images/agate-themes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/docs/images/agate-themes.jpg -------------------------------------------------------------------------------- /fonts/Agate-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/Agate-icons.ttf -------------------------------------------------------------------------------- /fonts/Moonstone-Agate.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/Moonstone-Agate.ttf -------------------------------------------------------------------------------- /fonts/Moonstone.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/Moonstone.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-Black.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-BlackItalic.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-Bold.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-BoldItalic.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-Light.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-Medium.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-MediumItalic.ttf -------------------------------------------------------------------------------- /fonts/MuseoSans/MuseoSans-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/MuseoSans/MuseoSans-Thin.ttf -------------------------------------------------------------------------------- /fonts/Silicon-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/fonts/Silicon-Icons.ttf -------------------------------------------------------------------------------- /html-template.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /internal/$L/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "$L.js" 3 | } -------------------------------------------------------------------------------- /internal/DateComponentPicker/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Exports the {@link agate/internal/DateComponentPicker.DateComponentPicker} and 3 | * {@link agate/internal/DateComponentPicker.DateComponentPickerBase} 4 | * components. 5 | * 6 | * @module agate/internal/DateComponentPicker 7 | * @private 8 | */ 9 | 10 | import {DateComponentPicker, DateComponentPickerBase} from './DateComponentPicker'; 11 | import {DateComponentRangePicker, DateComponentRangePickerBase} from './DateComponentRangePicker'; 12 | 13 | export { 14 | DateComponentPicker, 15 | DateComponentPickerBase, 16 | DateComponentRangePicker, 17 | DateComponentRangePickerBase 18 | }; 19 | -------------------------------------------------------------------------------- /internal/DateComponentPicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js" 3 | } 4 | -------------------------------------------------------------------------------- /internal/DateTime/DateTime.module.less: -------------------------------------------------------------------------------- 1 | // DateTime.module.less 2 | // 3 | @import "../../styles/mixins.less"; 4 | @import "../../styles/skin.less"; 5 | @import "../../styles/variables.less"; 6 | 7 | .dateTime { 8 | position: relative; 9 | display: inline-flex; 10 | align-items: center; 11 | width: fit-content; 12 | 13 | &::before { 14 | content: ""; 15 | position: absolute; 16 | width: 95%; 17 | left: 50%; 18 | transform: translateX(-50%); 19 | } 20 | 21 | .applySkins({ 22 | &::before { 23 | height: @agate-button-height; 24 | background-color: @agate-datetimepicker-active-container-bg-color; 25 | } 26 | 27 | .disabled({ 28 | opacity: @agate-picker-disabled-opacity; 29 | }); 30 | }); 31 | 32 | .pickers { 33 | vertical-align: middle; 34 | 35 | > *:first-child { 36 | margin-inline-start: 0 37 | } 38 | 39 | > *:last-child { 40 | margin-inline-end: 0 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /internal/DateTime/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Exports the {@link agate/internal/DateTime.DateTime}, 3 | * {@link agate/internal/DateTime.DateTimeBase} 4 | * {@link agate/internal/DateTime.DatetimeDecorator} 5 | * components. 6 | * 7 | * @module agate/internal/DateTime 8 | * @private 9 | */ 10 | 11 | import DateTime, {DateTimeBase} from './DateTime'; 12 | import {DateTimeDecorator} from './DateTimeDecorator'; 13 | 14 | export default DateTime; 15 | export { 16 | DateTime, 17 | DateTimeBase, 18 | DateTimeDecorator 19 | }; 20 | -------------------------------------------------------------------------------- /internal/DateTime/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js" 3 | } 4 | -------------------------------------------------------------------------------- /internal/DateTime/tests/DateTimeDecorator-specs.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | import {render, screen} from '@testing-library/react'; 3 | 4 | import {DateTimeDecorator} from '../'; 5 | 6 | describe('DateTimeDecorator', () => { 7 | test('should accept an updated JavaScript Date for its value prop', () => { 8 | const Picker = DateTimeDecorator({}, function PickerBase ({title, value}) { 9 | const minuteValue = value.getMinutes(); 10 | return
{minuteValue}
; 11 | }); 12 | 13 | const {rerender} = render( 14 | 19 | ); 20 | 21 | rerender( 22 | 27 | ); 28 | 29 | const expected = '45'; 30 | const actual = screen.getByTitle('Date').textContent; 31 | 32 | expect(actual).toBe(expected); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /internal/Picker/PickerItem.js: -------------------------------------------------------------------------------- 1 | import kind from '@enact/core/kind'; 2 | import Marquee from '@enact/ui/Marquee'; 3 | 4 | import css from './Picker.module.less'; 5 | 6 | /** 7 | * Renders an Agate-styled Picker Item without any behavior. 8 | * 9 | * @class PickerItemBase 10 | * @memberof agate/PickerItem 11 | * @extends ui/Marquee.Marquee 12 | * @ui 13 | * @private 14 | */ 15 | const PickerItemBase = kind({ 16 | name: 'PickerItem', 17 | 18 | styles: { 19 | css, 20 | className: 'item', 21 | publicClassNames: true 22 | }, 23 | 24 | render: (props) => ( 25 | 26 | ) 27 | }); 28 | 29 | /** 30 | * An Agate styled PickerItem with built-in support for marquee text. 31 | * 32 | * @class PickerItem 33 | * @memberof agate/PickerItem 34 | * @extends agate/PickerItem.PickerItemBase 35 | * @ui 36 | * @private 37 | */ 38 | export default PickerItemBase; 39 | export { 40 | PickerItemBase as PickerItem, 41 | PickerItemBase 42 | }; 43 | -------------------------------------------------------------------------------- /internal/Picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Picker.js" 3 | } -------------------------------------------------------------------------------- /internal/ToggleIcon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ToggleIcon.js" 3 | } 4 | -------------------------------------------------------------------------------- /internal/util/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "util.js" 3 | } 4 | -------------------------------------------------------------------------------- /resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } -------------------------------------------------------------------------------- /samples/event-logger/README.md: -------------------------------------------------------------------------------- 1 | ## An Enact application for event tracking 2 | 3 | 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. 4 | 5 | This application shows the event logs in order of event occurrences when user triggers some events by clicking, pressing the key or touching the pad. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/event-logger/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/event-logger/src/App/App.js: -------------------------------------------------------------------------------- 1 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 2 | import kind from '@enact/core/kind'; 3 | 4 | import MainView from '../views/MainView'; 5 | 6 | const App = kind({ 7 | name: 'App', 8 | 9 | render: (props) => ( 10 |
11 | 12 |
13 | ) 14 | }); 15 | 16 | export default ThemeDecorator(App); 17 | -------------------------------------------------------------------------------- /samples/event-logger/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/InputBoard/Filter/Filter.module.less: -------------------------------------------------------------------------------- 1 | .eventGroup { 2 | display: flex; 3 | flex-wrap: wrap; 4 | 5 | .pickerItem { 6 | display: inline-flex; 7 | margin-bottom: 15px; 8 | align-items: center; 9 | } 10 | 11 | .switchItem { 12 | font-size: 24px; 13 | max-width: 420px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/InputBoard/Filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Filter.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/InputBoard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "InputBoard.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/Log/Log.js: -------------------------------------------------------------------------------- 1 | import kind from '@enact/core/kind'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import css from './Log.module.less'; 5 | 6 | const Log = kind({ 7 | name: 'Log', 8 | 9 | propTypes: { 10 | log: PropTypes.object 11 | }, 12 | 13 | render: ({log, ...rest}) => { 14 | const {eventName, isDOMElement, isCapturing, eventObject} = log; 15 | return ( 16 |
19 |
{eventName}
20 |
{isDOMElement ? 'DOM' : 'React'}
21 |
{isCapturing ? 'Capturing' : 'Bubbling'}
22 |
{JSON.stringify(eventObject)}
23 |
24 | ); 25 | } 26 | }); 27 | 28 | export default Log; 29 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/Log/Log.module.less: -------------------------------------------------------------------------------- 1 | .log { 2 | line-height: 18px; 3 | 4 | & > div { 5 | display: inline-block; 6 | padding:0 6px; 7 | margin: 0 6px; 8 | line-height: initial; 9 | font-size: 18px; 10 | } 11 | 12 | div.name { 13 | width: 105px; 14 | } 15 | 16 | div.elementKind { 17 | width: 36px; 18 | } 19 | 20 | div.eventCapturing { 21 | width: 75px; 22 | } 23 | 24 | div.eventInfo { 25 | padding-left: 6px; 26 | } 27 | } 28 | 29 | .content { 30 | width: 100%; 31 | margin-top: 6px; 32 | overflow: hidden; 33 | } 34 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/Log/Logs.js: -------------------------------------------------------------------------------- 1 | import Scroller from '@enact/agate/Scroller'; 2 | import kind from '@enact/core/kind'; 3 | import PropTypes from 'prop-types'; 4 | import {useSelector} from 'react-redux'; 5 | 6 | import Log from './Log'; 7 | 8 | import css from './Log.module.less'; 9 | 10 | const Logs = kind({ 11 | name: 'LogBase', 12 | 13 | functional: true, 14 | 15 | propTypes: { 16 | eventLogs: PropTypes.array 17 | }, 18 | 19 | render: () => { 20 | // eslint-disable-next-line react-hooks/rules-of-hooks 21 | const eventLogs = useSelector((state) => state.eventLogs); 22 | const logs = eventLogs.map(log => ); 23 | return ( 24 | 25 | {logs} 26 | 27 | ); 28 | } 29 | }); 30 | 31 | export default Logs; 32 | -------------------------------------------------------------------------------- /samples/event-logger/src/components/Log/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Logs.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/event-logger/src/constants/actionTypes.js: -------------------------------------------------------------------------------- 1 | const types = { 2 | // ACTIVE EVENTS 3 | ACTIVATE_EVENT: 'ACTIVATE_EVENT', 4 | 5 | // EVENT CAPTURING 6 | SET_EVENT_CAPTURING: 'SET_EVENT_CAPTURING', 7 | 8 | // LOG 9 | ADD_EVENT_LOG: 'ADD_EVENT_LOG', 10 | REMOVE_EVENT_LOG: 'REMOVE_EVENT_LOG', 11 | UPDATE_EVENT_LOG: 'UPDATE_EVENT_LOG', 12 | 13 | // SYNTHETIC EVENT 14 | IS_SYNTHETIC_EVENT_ON: 'IS_SYNTHETIC_EVENT_ON', 15 | 16 | // TIME 17 | SET_TIMER_INDEX: 'SET_TIMER_INDEX' 18 | }; 19 | 20 | export default types; 21 | -------------------------------------------------------------------------------- /samples/event-logger/src/constants/eventCategory.js: -------------------------------------------------------------------------------- 1 | const eventCategory = [ 2 | 'focus', 3 | 'keyboard', 4 | 'mouse', 5 | 'pointer', 6 | 'touch' 7 | ]; 8 | 9 | export default eventCategory; 10 | -------------------------------------------------------------------------------- /samples/event-logger/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | import {Provider} from 'react-redux'; 4 | 5 | import App from './App'; 6 | import configureAppStore from './store'; 7 | 8 | const store = configureAppStore(); 9 | const appElement = ( 10 | 11 | 12 | 13 | ); 14 | 15 | if (typeof window !== 'undefined') { 16 | if (ENACT_PACK_ISOMORPHIC) { 17 | hydrateRoot(document.getElementById('root'), appElement); 18 | } else { 19 | createRoot(document.getElementById('root')).render(appElement); 20 | } 21 | } 22 | 23 | export default appElement; 24 | -------------------------------------------------------------------------------- /samples/event-logger/src/store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "store.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/event-logger/src/store/slices/activeEventsSlice.js: -------------------------------------------------------------------------------- 1 | import {createSlice} from '@reduxjs/toolkit'; 2 | 3 | import eventCategory from '../../constants/eventCategory'; 4 | 5 | export const activeEventsSlice = createSlice({ 6 | name: 'activeEventsReducer', 7 | initialState: new Array(eventCategory.length).fill(false), 8 | reducers: { 9 | activateEvent: { 10 | reducer: (state, action) => { 11 | const retval = state.slice(); 12 | retval.splice(action.payload.index, 1, action.payload.selected); 13 | return retval; 14 | }, 15 | prepare:(index, selected) => { 16 | return {payload: {index, selected}}; 17 | } 18 | } 19 | } 20 | }); 21 | 22 | export const {activateEvent} = activeEventsSlice.actions; 23 | export default activeEventsSlice; 24 | -------------------------------------------------------------------------------- /samples/event-logger/src/store/slices/eventCapturingOnSlice.js: -------------------------------------------------------------------------------- 1 | import {createSlice} from '@reduxjs/toolkit'; 2 | 3 | export const eventCapturingOnSlice = createSlice({ 4 | name: 'eventCapturingOnReducer', 5 | initialState: false, 6 | reducers: { 7 | setEventCapturing: (state, action) => { 8 | return (state = action.payload); 9 | } 10 | } 11 | }); 12 | 13 | export const {setEventCapturing} = eventCapturingOnSlice.actions; 14 | export default eventCapturingOnSlice; 15 | -------------------------------------------------------------------------------- /samples/event-logger/src/store/slices/syntheticEventOnSlice.js: -------------------------------------------------------------------------------- 1 | import {createSlice} from '@reduxjs/toolkit'; 2 | 3 | export const syntheticEventOnSlice = createSlice({ 4 | name: 'syntheticEventOnReducer', 5 | initialState: false, 6 | reducers: { 7 | isSyntheticEventOn: (state, action) => { 8 | return (state = action.payload); 9 | } 10 | } 11 | }); 12 | 13 | export const {isSyntheticEventOn} = syntheticEventOnSlice.actions; 14 | export default syntheticEventOnSlice; 15 | -------------------------------------------------------------------------------- /samples/event-logger/src/store/slices/timerIndexSlice.js: -------------------------------------------------------------------------------- 1 | import {createSlice} from '@reduxjs/toolkit'; 2 | 3 | export const timerIndexSlice = createSlice({ 4 | name: 'timerIndexReducer', 5 | initialState: 0, 6 | reducers: { 7 | setTimerIndex: (state, action) => { 8 | return (state = action.payload); 9 | } 10 | } 11 | }); 12 | 13 | export const {setTimerIndex} = timerIndexSlice.actions; 14 | export default timerIndexSlice; 15 | -------------------------------------------------------------------------------- /samples/event-logger/src/store/store.js: -------------------------------------------------------------------------------- 1 | import {combineReducers, configureStore} from '@reduxjs/toolkit'; 2 | 3 | import activeEventsSlice from './slices/activeEventsSlice'; 4 | import eventLogsSlice from './slices/eventLogsSlice'; 5 | import eventCapturingOnSlice from './slices/eventCapturingOnSlice'; 6 | import syntheticEventOnSlice from './slices/syntheticEventOnSlice'; 7 | import timerIndexSlice from './slices/timerIndexSlice'; 8 | 9 | const rootReducer = combineReducers({ 10 | activeEvents: activeEventsSlice.reducer, 11 | eventCapturingOn: eventCapturingOnSlice.reducer, 12 | eventLogs: eventLogsSlice.reducer, 13 | syntheticEventOn: syntheticEventOnSlice.reducer, 14 | timerIndex: timerIndexSlice.reducer 15 | }); 16 | 17 | export default function configureAppStore (initialState) { 18 | const store = configureStore({ 19 | reducer: rootReducer, 20 | initialState 21 | }); 22 | 23 | return store; 24 | } 25 | -------------------------------------------------------------------------------- /samples/event-logger/src/views/MainView.js: -------------------------------------------------------------------------------- 1 | import kind from '@enact/core/kind'; 2 | 3 | import InputBoard from '../components/InputBoard'; 4 | import Logs from '../components/Log'; 5 | 6 | import css from './MainView.module.less'; 7 | 8 | const MainView = kind({ 9 | name: 'MainView', 10 | 11 | styles: { 12 | css, 13 | className: 'mainView' 14 | }, 15 | 16 | render: (props) => ( 17 |
18 | 19 | 20 |
21 | ) 22 | }); 23 | 24 | export default MainView; 25 | -------------------------------------------------------------------------------- /samples/event-logger/src/views/MainView.module.less: -------------------------------------------------------------------------------- 1 | @background-color: #e6e6e6; 2 | @hover-background-color: #abaeb3; 3 | @font-color: #4c5059; 4 | 5 | .mainView { 6 | display: flex; 7 | width: 100%; 8 | height: 100%; 9 | flex-direction: column; 10 | } 11 | 12 | .inputBoard { 13 | background-color: @background-color; 14 | height: 72px; 15 | padding: 3px; 16 | border-radius: 3px; 17 | color: @font-color; 18 | line-height: 18px; 19 | font-size: 18px; 20 | 21 | &:hover { 22 | background-color: @hover-background-color; 23 | color: @font-color; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/README.md: -------------------------------------------------------------------------------- 1 | ## perf-enact sample 2 | 3 | This application is for performance measurement. 4 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "perf-scroller-native", 3 | "version": "0.1.0", 4 | "description": "Perf Scroller Native", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "Perf Scroller Native", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "classnames": "^2.5.1", 31 | "ilib": "^14.21.0", 32 | "react": "^19.1.0", 33 | "react-dom": "^19.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } -------------------------------------------------------------------------------- /samples/perf-scroller-native/src/App.js: -------------------------------------------------------------------------------- 1 | import Item from '@enact/agate/Item'; 2 | import Scroller from '@enact/agate/Scroller'; 3 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 4 | 5 | import css from './App.module.less'; 6 | 7 | const 8 | items = [], 9 | languages = [ 10 | '한국어 - 한국', 11 | 'English - United States', 12 | 'Português - Brasil', 13 | 'Português - Portugal', 14 | 'Čeština - Česká republika', 15 | 'Dansk - Danmark', 16 | 'Deutsch - Deutschland', 17 | 'Ελληνική γλώσσα - Ελλάδα', 18 | 'Español - España', 19 | 'Suomi - Suomi' 20 | ]; 21 | 22 | for (let i = 0; i < 100; i++) { 23 | items.push( 24 | 25 | {(('00' + i).slice(-3) + ' - ' + languages[i % 10])} 26 | 27 | ); 28 | } 29 | 30 | const ScrollerSample = (props) => { 31 | return ( 32 | 33 | {items} 34 | 35 | ); 36 | }; 37 | 38 | export default ThemeDecorator(ScrollerSample); 39 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/src/App.module.less: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: hidden; 3 | } 4 | 5 | .item { 6 | margin-bottom: 0; 7 | } 8 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import appPkg from '../package.json'; 6 | 7 | import App from './App'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.scroller.native", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf Scroller Native", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 1, 12 | "useNativeScroll": true 13 | } 14 | -------------------------------------------------------------------------------- /samples/perf-scroller-native/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-scroller-native/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-scroller-native/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-scroller-native/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-scroller-native/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-scroller-native/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/perf-scroller-translate/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/perf-scroller-translate/src/App.js: -------------------------------------------------------------------------------- 1 | import Item from '@enact/agate/Item'; 2 | import Scroller from '@enact/agate/Scroller'; 3 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 4 | 5 | import css from './App.module.less'; 6 | 7 | const 8 | items = [], 9 | languages = [ 10 | '한국어 - 한국', 11 | 'English - United States', 12 | 'Português - Brasil', 13 | 'Português - Portugal', 14 | 'Čeština - Česká republika', 15 | 'Dansk - Danmark', 16 | 'Deutsch - Deutschland', 17 | 'Ελληνική γλώσσα - Ελλάδα', 18 | 'Español - España', 19 | 'Suomi - Suomi' 20 | ]; 21 | 22 | for (let i = 0; i < 100; i++) { 23 | items.push( 24 | 25 | {(('00' + i).slice(-3) + ' - ' + languages[i % 10])} 26 | 27 | ); 28 | } 29 | 30 | const ScrollerSample = (props) => { 31 | return ( 32 | 36 | {items} 37 | 38 | ); 39 | }; 40 | 41 | export default ThemeDecorator(ScrollerSample); 42 | -------------------------------------------------------------------------------- /samples/perf-scroller-translate/src/App.module.less: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: hidden; 3 | } 4 | 5 | .item { 6 | margin-bottom: 0; 7 | } 8 | -------------------------------------------------------------------------------- /samples/perf-scroller-translate/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import App from './App'; 6 | 7 | import appPkg from '../package.json'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-scroller-translate/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.scroller.translate", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf Scroller Translate", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/perf-scroller-translate/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-scroller-translate/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-scroller-translate/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-scroller-translate/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-scroller-translate/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-scroller-translate/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/README.md: -------------------------------------------------------------------------------- 1 | ## perf-enact sample 2 | 3 | This application is for performance measurement. 4 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "perf-virtualgridlist-native", 3 | "version": "0.1.0", 4 | "description": "Perf VirtualGridList Native", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "Perf VirtualGridList Native", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "react": "^19.1.0", 32 | "react-dom": "^19.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import appPkg from '../package.json'; 6 | 7 | import App from './App'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.virtualgridlist.native", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf VirtualGridList Native", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2, 12 | "useNativeScroll": true 13 | } 14 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtualgridlist-native/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtualgridlist-native/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-native/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtualgridlist-native/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/README.md: -------------------------------------------------------------------------------- 1 | ## perf-enact sample 2 | 3 | This application is for performance measurement. 4 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "perf-virtualgridlist-translate", 3 | "version": "0.1.0", 4 | "description": "Perf VirtualGridList Translate", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "Perf VirtualGridList Translate", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "react": "^19.1.0", 32 | "react-dom": "^19.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import appPkg from '../package.json'; 6 | 7 | import App from './App'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.virtualgridlist.translate", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf VirtualGridList Translate", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtualgridlist-translate/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtualgridlist-translate/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-virtualgridlist-translate/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtualgridlist-translate/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/README.md: -------------------------------------------------------------------------------- 1 | ## perf-enact sample 2 | 3 | This application is for performance measurement. 4 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import appPkg from '../package.json'; 6 | 7 | import App from './App'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.virtuallist.native", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf VirtualList Native", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2, 12 | "useNativeScroll": true 13 | } 14 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-native-with-different-item-size/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-native-with-different-item-size/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-native-with-different-item-size/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-native-with-different-item-size/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/README.md: -------------------------------------------------------------------------------- 1 | ## perf-enact sample 2 | 3 | This application is for performance measurement. 4 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "perf-virtuallist-native", 3 | "version": "0.1.0", 4 | "description": "Perf VirtualList Native", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "Perf VirtualList Native", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "react": "^19.1.0", 32 | "react-dom": "^19.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import appPkg from '../package.json'; 6 | 7 | import App from './App'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.virtuallist.native", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf VirtualList Native", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2, 12 | "useNativeScroll": true 13 | } 14 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-native/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-native/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-native/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-native/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/README.md: -------------------------------------------------------------------------------- 1 | ## perf-enact sample 2 | 3 | This application is for performance measurement. 4 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "perf-virtuallist-translate", 3 | "version": "0.1.0", 4 | "description": "Perf VirtualList Translate", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "Perf VirtualList Translate", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "react": "^19.1.0", 32 | "react-dom": "^19.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import enactPkg from '@enact/core/package.json'; 3 | import {createRoot, hydrateRoot} from 'react-dom/client'; 4 | 5 | import appPkg from '../package.json'; 6 | 7 | import App from './App'; 8 | 9 | const appElement = (); 10 | 11 | if (typeof window !== 'undefined') { 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(document.getElementById('root'), appElement); 14 | } else { 15 | createRoot(document.getElementById('root')).render(appElement); 16 | } 17 | 18 | let versionDiv = document.createElement('div'); 19 | versionDiv.id = 'version_info'; 20 | versionDiv.style = 'display: none;'; 21 | document.getElementById('root').appendChild(versionDiv); 22 | document.getElementById('version_info').innerHTML = 'enact ' + enactPkg.version + ' / app ' + appPkg.version; 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enact.perf.virtuallist.translate", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Perf VirtualList Translate", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-translate/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-translate/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/perf-virtuallist-translate/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/perf-virtuallist-translate/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-a11y/README.md: -------------------------------------------------------------------------------- 1 | ## Enact Component patterns for accessibility features 2 | 3 | A sample Enact application that provides Enact Component patterns to test their accessibility features. 4 | 5 | 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. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-a11y/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qa-a11y", 3 | "version": "0.1.0", 4 | "description": "Enact A11y Test application.", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "QA A11y", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "@enact/webos": "^5.0.0-rc.1", 31 | "ilib": "^14.21.0", 32 | "prop-types": "^15.8.1", 33 | "react": "^19.1.0", 34 | "react-dom": "^19.1.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /samples/qa-a11y/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/App/Home.js: -------------------------------------------------------------------------------- 1 | const Home = () => ( 2 |
3 |

4 | Enact Component patterns for Accessibility Features. 5 |

6 |
7 | ); 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/components/Section.module.less: -------------------------------------------------------------------------------- 1 | .section { 2 | label { 3 | margin-inline-end: 1em; 4 | 5 | font-weight: 300; 6 | font-size: 80%; 7 | 8 | text-align: end; 9 | } 10 | 11 | .horizontal label { 12 | text-align: start; 13 | } 14 | 15 | .componentDemo { 16 | margin: 0.5em 1em; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/components/useBoolArray.js: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | 3 | const useBoolArray = (num) => { 4 | const [bools, setBool] = useState(() => (new Array(num)).fill(false)); 5 | 6 | const handler = (index, bool) => () => setBool([ 7 | ...bools.slice(0, index), 8 | bool, 9 | ...bools.slice(index + 1) 10 | ]); 11 | 12 | return [bools, handler]; 13 | }; 14 | 15 | export default useBoolArray; 16 | export { 17 | useBoolArray 18 | }; 19 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | 8 | // In a browser environment, render the app to the document. 9 | if (typeof window !== 'undefined') { 10 | const container = document.getElementById('root'); 11 | 12 | if (ENACT_PACK_ISOMORPHIC) { 13 | hydrateRoot(container, appElement); 14 | } else { 15 | createRoot(container).render(appElement); 16 | } 17 | } 18 | 19 | export default appElement; 20 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/ArcSlider.js: -------------------------------------------------------------------------------- 1 | import ArcSlider from '@enact/agate/ArcSlider'; 2 | import Button from '@enact/agate/Button'; 3 | 4 | import AriaValueTextDecorator from '../components/AriaValueTextDecorator'; 5 | import Section from '../components/Section'; 6 | 7 | const AriaValueTextSlider = AriaValueTextDecorator(ArcSlider); 8 | 9 | const ArcSliderView = () => ( 10 | <> 11 |
12 | 13 |
14 | 15 |
17 | 18 |
19 | 20 |
21 | 22 |
24 | 25 | ); 26 | 27 | export default ArcSliderView; 28 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/BodyText.js: -------------------------------------------------------------------------------- 1 | import BodyText from '@enact/agate/BodyText'; 2 | import Button from '@enact/agate/Button'; 3 | import Popup from '@enact/agate/Popup'; 4 | 5 | import Section from '../components/Section'; 6 | import useBoolArray from '../components/useBoolArray'; 7 | 8 | const PopupView = () => { 9 | const [open, handleOpen] = useBoolArray(1); 10 | 11 | return ( 12 | <> 13 |
14 | 15 |
16 | 17 | 21 | Text 22 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default PopupView; 29 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/CheckboxItem.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const CheckboxItemView = () => ( 8 | <> 9 |
10 | Text 0 11 | Text 1 12 |
13 | 14 |
15 | Text 0 16 | Text 1 17 |
18 | 19 | ); 20 | 21 | export default CheckboxItemView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/DatePicker.js: -------------------------------------------------------------------------------- 1 | import DatePicker from '@enact/agate/DatePicker'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const DatePickerView = () => ( 8 | <> 9 |
10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 | 18 | ); 19 | 20 | export default DatePickerView; 21 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/DateTimePicker.js: -------------------------------------------------------------------------------- 1 | import DateTimePicker from '@enact/agate/DateTimePicker'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | const DatePickerView = () => ( 6 | <> 7 |
8 | 9 | 10 |
11 | 12 | ); 13 | 14 | export default DatePickerView; 15 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/Header.js: -------------------------------------------------------------------------------- 1 | import Button from '@enact/agate/Button'; 2 | import Header from '@enact/agate/Header'; 3 | import {Panel} from '@enact/agate/Panels'; 4 | import {Cell} from '@enact/ui/Layout'; 5 | 6 | const style = { 7 | flex: '1 1 100%', 8 | display: 'flex', 9 | flexDirection: 'column', 10 | width: '100%', 11 | height: '100%' 12 | }; 13 | 14 | // FIXME: `
has been added between the `Header` and `Button`. But it would be better to add a margin in the Panel's body. 15 | const HeaderView = () => ( 16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 |
31 |
32 | 33 | 34 |
35 | 36 |
37 | ); 38 | 39 | export default HeaderView; 40 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/Keypad.js: -------------------------------------------------------------------------------- 1 | import Keypad from '@enact/agate/Keypad'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | const KeypadView = () => ( 6 | <> 7 |
8 | 9 | 10 |
11 | 12 | ); 13 | 14 | export default KeypadView; 15 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/LabeledIconButton.js: -------------------------------------------------------------------------------- 1 | import LabeledIconButton from '@enact/agate/LabeledIconButton'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const LabeledIconButtonView = () => ( 8 | <> 9 |
10 | Text 0 11 | Text 1 12 |
13 | 14 |
15 | Text 2 16 | Text 3 17 |
18 | 19 | ); 20 | 21 | export default LabeledIconButtonView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/MediaPlayer.js: -------------------------------------------------------------------------------- 1 | import Heading from '@enact/agate/Heading'; 2 | import MediaPlayer from '@enact/agate/MediaPlayer'; 3 | 4 | const audioFiles = [ 5 | 'https://sampleswap.org/mp3/artist/254731/BossPlayer_Your-Right-Here-160.mp3', 6 | 'https://sampleswap.org/mp3/artist/78152/HiatusManJBanner_Show-Stopper-160.mp3', 7 | 'https://sampleswap.org/mp3/artist/47067/DJ-Masque_Oceanic-Dawn-160.mp3', 8 | 'https://sampleswap.org/mp3/artist/26546/benzoul_lovevoodoo-160.mp3', 9 | 'https://sampleswap.org/mp3/artist/19139/MarkNine_In-my-Place-160.mp3', 10 | 'https://sampleswap.org/mp3/artist/47067/DJ-Masque_Dont-Forget-To-Be-Yourself-160.mp3' 11 | ]; 12 | 13 | const source = audioFiles.map((audioFile, index) => ()); 14 | 15 | const MediaPlayerView = () => ( 16 | <> 17 | Default 18 | 19 | {source} 20 | 21 | 22 | ); 23 | 24 | export default MediaPlayerView; 25 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/RadioItem.js: -------------------------------------------------------------------------------- 1 | import RadioItem from '@enact/agate/RadioItem'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const RadioItemView = () => ( 8 | <> 9 |
10 | Text 0 11 | Text 1 12 |
13 | 14 |
15 | Text 0 16 | Text 1 17 |
18 | 19 | ); 20 | 21 | export default RadioItemView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/SliderButton.js: -------------------------------------------------------------------------------- 1 | import SliderButton from '@enact/agate/SliderButton'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const SliderButtonView = () => ( 8 | <> 9 |
10 | {['A', 'B', 'C']} 11 | {['A', 'B', 'C']} 12 |
13 | 14 |
15 | {['A', 'B', 'C']} 16 | {['A', 'B', 'C']} 17 |
18 | 19 | ); 20 | 21 | export default SliderButtonView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/Spinner.js: -------------------------------------------------------------------------------- 1 | import Spinner from '@enact/agate/Spinner'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | const SpinnerView = () => ( 6 |
7 | 8 | 9 |
10 | ); 11 | 12 | export default SpinnerView; 13 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/SwitchItem.js: -------------------------------------------------------------------------------- 1 | import SwitchItem from '@enact/agate/SwitchItem'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const SwitchItemView = () => ( 8 | <> 9 |
10 | Text 0 11 | Text 1 12 |
13 | 14 |
15 | Text 0 16 | Text 1 17 |
18 | 19 | ); 20 | 21 | export default SwitchItemView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/TemperatureControl.js: -------------------------------------------------------------------------------- 1 | import TemperatureControl from '@enact/agate/TemperatureControl'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | const TemperatureControlView = () => ( 6 | <> 7 |
8 | 9 | 10 |
11 | 12 | ); 13 | 14 | export default TemperatureControlView; 15 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/ThumbnailItem.js: -------------------------------------------------------------------------------- 1 | import ThumbnailItem from '@enact/agate/ThumbnailItem'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const ThumbnailItemView = () => ( 8 | <> 9 |
10 | Text 0 11 | Text 1 12 |
13 | 14 |
15 | Text 2 16 | Text 3 17 |
18 | 19 | ); 20 | 21 | export default ThumbnailItemView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/TimePicker.js: -------------------------------------------------------------------------------- 1 | import TimePicker from '@enact/agate/TimePicker'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const TimePickerView = () => ( 8 | <> 9 |
10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 | 18 | ); 19 | 20 | export default TimePickerView; 21 | -------------------------------------------------------------------------------- /samples/qa-a11y/src/views/ToggleButton.js: -------------------------------------------------------------------------------- 1 | import ToggleButton from '@enact/agate/ToggleButton'; 2 | 3 | import Section from '../components/Section'; 4 | 5 | import appCss from '../App/App.module.less'; 6 | 7 | const ToggleButtonView = () => ( 8 | <> 9 |
10 | Text 0 11 | Text 1 12 |
13 | 14 |
15 | Text 2 16 | Text 3 17 |
18 | 19 | ); 20 | 21 | export default ToggleButtonView; 22 | -------------------------------------------------------------------------------- /samples/qa-a11y/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-a11y", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "QA A11y", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-a11y/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-a11y/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-a11y/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-a11y/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-a11y/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-a11y/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/README.md: -------------------------------------------------------------------------------- 1 | ## QA sample for testing drag and drop with DropManager 2 | 3 | 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. 4 | 5 | To test drag and drop with DropManager, you may use this sample. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/App/App.js: -------------------------------------------------------------------------------- 1 | import AgateDecorator from '@enact/agate/ThemeDecorator'; 2 | import Panels from '@enact/agate/Panels'; 3 | import kind from '@enact/core/kind'; 4 | 5 | import MainPanel from '../views/MainPanel'; 6 | 7 | import css from './App.module.less'; 8 | 9 | const App = kind({ 10 | name: 'App', 11 | 12 | styles: { 13 | css, 14 | className: 'app' 15 | }, 16 | 17 | render: (props) => ( 18 | 19 | 20 | 21 | ) 22 | }); 23 | 24 | export default AgateDecorator(App); 25 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/App/App.module.less: -------------------------------------------------------------------------------- 1 | .app { 2 | // styles can be put here 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/components/CustomLayout/CustomLayout.module.less: -------------------------------------------------------------------------------- 1 | // CustomLayout.module.less 2 | // 3 | 4 | .customLayout { 5 | justify-content: space-evenly; 6 | } 7 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/components/CustomLayout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "CustomLayout.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | // In a browser environment, render the app to the document. 8 | if (typeof window !== 'undefined') { 9 | const container = document.getElementById('root'); 10 | 11 | if (ENACT_PACK_ISOMORPHIC) { 12 | hydrateRoot(container, appElement); 13 | } else { 14 | createRoot(container).render(appElement); 15 | } 16 | } 17 | 18 | export default appElement; 19 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/views/MainPanel.module.less: -------------------------------------------------------------------------------- 1 | // MainPanel.module.less 2 | // 3 | @import '~@enact/agate/styles/mixins.less'; 4 | @import '~@enact/agate/styles/skin.less'; 5 | 6 | .mainPanel { 7 | .firstItem, .secondItem { 8 | color: white; 9 | } 10 | 11 | .firstItem { 12 | background-color: #d95000; 13 | } 14 | 15 | .secondItem { 16 | background-color: #aba534; 17 | } 18 | } 19 | .item { 20 | .applySkins({ 21 | &.firstItem { 22 | .focus({ 23 | border-color: #d95000; 24 | }) 25 | } 26 | 27 | &.secondItem { 28 | .focus({ 29 | border-color: #aba534; 30 | }) 31 | } 32 | }); 33 | } 34 | -------------------------------------------------------------------------------- /samples/qa-drag-and-drop/src/views/README.md: -------------------------------------------------------------------------------- 1 | Composite components that make up a distinct view go here -------------------------------------------------------------------------------- /samples/qa-dropdown/README.md: -------------------------------------------------------------------------------- 1 | ## QA sample for testing dropdown spotlight 2 | 3 | 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. 4 | 5 | To test spotlight in dropdown, you may use this sample. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qa-dropdown", 3 | "version": "0.1.0", 4 | "description": "A qa sample for testing Dropdown", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "QA Dropdown", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "prop-types": "^15.8.1", 32 | "react": "^19.1.0", 33 | "react-dom": "^19.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /samples/qa-dropdown/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-dropdown/src/App/App.js: -------------------------------------------------------------------------------- 1 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 2 | import kind from '@enact/core/kind'; 3 | 4 | import MainPanel from '../views/MainPanel'; 5 | 6 | const App = kind({ 7 | name: 'App', 8 | 9 | render: (props) => ( 10 |
11 | 12 |
13 | ) 14 | }); 15 | 16 | export default ThemeDecorator(App); 17 | -------------------------------------------------------------------------------- /samples/qa-dropdown/src/App/App.module.less: -------------------------------------------------------------------------------- 1 | .app { 2 | /* styles can be put here */ 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-dropdown/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-dropdown/src/components/README.md: -------------------------------------------------------------------------------- 1 | Reusable components for your application go here -------------------------------------------------------------------------------- /samples/qa-dropdown/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | 8 | // In a browser environment, render instead of exporting 9 | if (typeof window !== 'undefined') { 10 | if (ENACT_PACK_ISOMORPHIC) { 11 | hydrateRoot(document.getElementById('root'), appElement); 12 | } else { 13 | createRoot(document.getElementById('root')).render(appElement); 14 | } 15 | } 16 | 17 | export default appElement; 18 | -------------------------------------------------------------------------------- /samples/qa-dropdown/src/views/README.md: -------------------------------------------------------------------------------- 1 | Composite components that make up a distinct view go here -------------------------------------------------------------------------------- /samples/qa-fonts/README.md: -------------------------------------------------------------------------------- 1 | ## Font Validation 2 | 3 | This application shows, with examples, what fonts are loadable and loaded. 4 | -------------------------------------------------------------------------------- /samples/qa-fonts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qa-fonts", 3 | "version": "0.1.0", 4 | "description": "A way to verify and validate that fonts are loaded and defined.", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "Font Validation", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "prop-types": "^15.8.1", 32 | "react": "^19.1.0", 33 | "react-dom": "^19.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /samples/qa-fonts/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/App/App.js: -------------------------------------------------------------------------------- 1 | import {Panels} from '@enact/agate/Panels'; 2 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 3 | 4 | import MainPanel from '../views/MainPanel'; 5 | 6 | const App = (props) => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default ThemeDecorator(App); 15 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/App/App.module.less: -------------------------------------------------------------------------------- 1 | .app { 2 | // styles can be put here 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/components/FontList/FontList.module.less: -------------------------------------------------------------------------------- 1 | // Status.module.less 2 | // 3 | 4 | .list { 5 | + .list { 6 | margin-top: 1em; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/components/FontList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "FontList.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/components/README.md: -------------------------------------------------------------------------------- 1 | Reusable components for your application go here -------------------------------------------------------------------------------- /samples/qa-fonts/src/components/Status/Status.js: -------------------------------------------------------------------------------- 1 | import kind from '@enact/core/kind'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import css from './Status.module.less'; 5 | 6 | const Status = kind({ 7 | name: 'Status', 8 | 9 | propTypes: { 10 | loaded: PropTypes.bool 11 | }, 12 | 13 | defaultProps: { 14 | loaded: false 15 | }, 16 | 17 | styles: { 18 | css, 19 | className: 'status' 20 | }, 21 | 22 | computed: { 23 | className: ({loaded, styler}) => styler.append({loaded}) 24 | }, 25 | 26 | render: ({children, ...rest}) => { 27 | delete rest.loaded; 28 | 29 | return ( 30 | {children} 31 | ); 32 | } 33 | }); 34 | 35 | export default Status; 36 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/components/Status/Status.module.less: -------------------------------------------------------------------------------- 1 | // Status.module.less 2 | // 3 | 4 | .status { 5 | width: 7em; 6 | display: inline-block; 7 | text-align: right; 8 | margin-right: 1em; 9 | color: red; 10 | 11 | &.loaded { 12 | color: limegreen; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/components/Status/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Status.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | 8 | // In a browser environment, render the app to the document. 9 | if (typeof window !== 'undefined') { 10 | if (ENACT_PACK_ISOMORPHIC) { 11 | hydrateRoot(document.getElementById('root'), appElement); 12 | } else { 13 | createRoot(document.getElementById('root')).render(appElement); 14 | } 15 | } 16 | 17 | export default appElement; 18 | -------------------------------------------------------------------------------- /samples/qa-fonts/src/views/README.md: -------------------------------------------------------------------------------- 1 | Composite components that make up a distinct view go here -------------------------------------------------------------------------------- /samples/qa-fonts/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-fonts", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SVL", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Font Validation", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-fonts/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-fonts/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-fonts/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-fonts/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-fonts/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-fonts/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-i18n-async/README.md: -------------------------------------------------------------------------------- 1 | ## async i18n 2 | 3 | This sample app is prepared to test 'initial support for async i18n resource retrieval'. 4 | 5 | `{i18n: {sync: false}` is configured to retrieve i18n resource files asynchronously. 6 | `/resources/en` and `/resouces/ko` are added to provide i18n resources. 7 | -------------------------------------------------------------------------------- /samples/qa-i18n-async/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qa-i18n-async", 3 | "version": "0.1.0", 4 | "description": "A sample to test asynchronous i18n resource retrieval", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint .", 14 | "license": "enact license", 15 | "test": "enact test", 16 | "test-watch": "enact test --watch" 17 | }, 18 | "license": "Apache-2.0", 19 | "private": true, 20 | "repository": "", 21 | "enact": { 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "prop-types": "^15.8.1", 32 | "react": "^19.1.0", 33 | "react-dom": "^19.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /samples/qa-i18n-async/resources/en/US/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "hi": "hello", 3 | "locales": "Locales" 4 | } -------------------------------------------------------------------------------- /samples/qa-i18n-async/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "en/US/strings.json", 4 | "ko/KR/strings.json" 5 | ] 6 | } -------------------------------------------------------------------------------- /samples/qa-i18n-async/resources/ko/KR/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "hi": "안녕", 3 | "locales": "로케일" 4 | } -------------------------------------------------------------------------------- /samples/qa-i18n-async/src/App/App.module.less: -------------------------------------------------------------------------------- 1 | .app { 2 | // styles can be put here 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-i18n-async/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n-async/src/components/README.md: -------------------------------------------------------------------------------- 1 | Reusable components for your application go here -------------------------------------------------------------------------------- /samples/qa-i18n-async/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | 8 | // In a browser environment, render instead of exporting 9 | if (typeof window !== 'undefined') { 10 | if (ENACT_PACK_ISOMORPHIC) { 11 | hydrateRoot(document.getElementById('root'), appElement); 12 | } else { 13 | createRoot(document.getElementById('root')).render(appElement); 14 | } 15 | } 16 | 17 | export default appElement; 18 | -------------------------------------------------------------------------------- /samples/qa-i18n-async/src/views/README.md: -------------------------------------------------------------------------------- 1 | Composite components that make up a distinct view go here -------------------------------------------------------------------------------- /samples/qa-i18n-async/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-i18n-async", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SVL", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "QA i18n Async ", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-i18n-async/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-i18n-async/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-i18n-async/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-i18n-async/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-i18n-async/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-i18n-async/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-i18n/README.md: -------------------------------------------------------------------------------- 1 | ## I18N Validation 2 | 3 | This application supports testing of i18n features including: 4 | 5 | * Locale changes 6 | * String resolution 7 | * Component behavior 8 | -------------------------------------------------------------------------------- /samples/qa-i18n/resources/en/US/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "String": "en-US String" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n/resources/en/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "String": "en String" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n/resources/es/ES/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "String": "es-ES String" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n/resources/es/MX/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "String": "ES-MX String" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n/resources/es/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "String": "es String" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "en/strings.json", 4 | "en/US/strings.json", 5 | "es/ES/strings.json", 6 | "es/MX/strings.json", 7 | "es/strings.json" 8 | ] 9 | } -------------------------------------------------------------------------------- /samples/qa-i18n/src/App/App.js: -------------------------------------------------------------------------------- 1 | import Panels from '@enact/agate/Panels'; 2 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 3 | import kind from '@enact/core/kind'; 4 | 5 | import MainPanel from '../views/MainPanel'; 6 | 7 | import './attachErrorHandler'; 8 | 9 | import css from './App.less'; 10 | 11 | const App = kind({ 12 | name: 'App', 13 | 14 | styles: { 15 | css, 16 | className: 'app' 17 | }, 18 | 19 | render: (props) => ( 20 | 21 | 22 | 23 | ) 24 | }); 25 | 26 | export default ThemeDecorator(App); 27 | -------------------------------------------------------------------------------- /samples/qa-i18n/src/App/App.less: -------------------------------------------------------------------------------- 1 | .app { 2 | // styles can be put here 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-i18n/src/App/attachErrorHandler.js: -------------------------------------------------------------------------------- 1 | import {onWindowReady} from '@enact/core/snapshot'; 2 | import {error} from '@enact/webos/pmloglib'; 3 | 4 | // Logs any uncaught exceptions to the system logs for future troubleshooting. Payload can be 5 | // customized by the application for its particular requirements. 6 | const handleError = (ev) => { 7 | let stack = ev.error && ev.error.stack || null; 8 | 9 | if (stack && stack.length > 512) { 10 | // JSON must be limited to 1024 characters, so we truncate the stack to 512 for safety 11 | stack = ev.error.stack.substring(0, 512); 12 | } 13 | 14 | error('app.onerror', { 15 | message: ev.message, 16 | url: ev.filename, 17 | line: ev.lineno, 18 | column: ev.colno, 19 | stack 20 | }, ''); 21 | 22 | // Calling preventDefault() will avoid logging the error to the console 23 | // ev.preventDefault(); 24 | }; 25 | 26 | onWindowReady(() => { 27 | window.addEventListener('error', handleError); 28 | }); 29 | 30 | -------------------------------------------------------------------------------- /samples/qa-i18n/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } -------------------------------------------------------------------------------- /samples/qa-i18n/src/components/README.md: -------------------------------------------------------------------------------- 1 | Reusable components for your application go here -------------------------------------------------------------------------------- /samples/qa-i18n/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | 8 | // In a browser environment, render instead of exporting 9 | if (typeof window !== 'undefined') { 10 | if (ENACT_PACK_ISOMORPHIC) { 11 | hydrateRoot(document.getElementById('root'), appElement); 12 | } else { 13 | createRoot(document.getElementById('root')).render(appElement); 14 | } 15 | } 16 | 17 | export default appElement; 18 | -------------------------------------------------------------------------------- /samples/qa-i18n/src/views/MainPanel.js: -------------------------------------------------------------------------------- 1 | import BodyText from '@enact/agate/BodyText'; 2 | import Header from '@enact/agate/Header'; 3 | import Heading from '@enact/agate/Heading'; 4 | import {Panel} from '@enact/agate/Panels'; 5 | import Scroller from '@enact/agate/Scroller'; 6 | import kind from '@enact/core/kind'; 7 | import $L from '@enact/i18n/$L'; 8 | import Text from '@enact/i18n/Text'; 9 | 10 | const MainPanel = kind({ 11 | name: 'MainPanel', 12 | 13 | render: (props) => ( 14 | 15 |
16 | 17 | Strings 18 | String - $L: {$L('String')} 19 | String - Text: String 20 | 21 | Components 22 | 23 | 24 | ) 25 | }); 26 | 27 | export default MainPanel; 28 | -------------------------------------------------------------------------------- /samples/qa-i18n/src/views/README.md: -------------------------------------------------------------------------------- 1 | Composite components that make up a distinct view go here -------------------------------------------------------------------------------- /samples/qa-i18n/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-i18n", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SVL", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Enact App Template", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-i18n/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-i18n/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-i18n/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-i18n/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-i18n/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-i18n/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-scroller/README.md: -------------------------------------------------------------------------------- 1 | ## QA sample for testing Scroller 2 | 3 | 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. 4 | 5 | To test functionality and usability of Scroller, you may use this sample. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-scroller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qa-scroller", 3 | "version": "0.1.0", 4 | "description": "QA Scroller", 5 | "author": "", 6 | "main": "src/index.js", 7 | "scripts": { 8 | "serve": "enact serve", 9 | "pack": "enact pack", 10 | "pack-p": "enact pack -p", 11 | "watch": "enact pack --watch", 12 | "clean": "enact clean", 13 | "lint": "enact lint --strict .", 14 | "test": "enact test", 15 | "test-watch": "enact test --watch" 16 | }, 17 | "license": "Apache-2.0", 18 | "private": true, 19 | "repository": "", 20 | "enact": { 21 | "title": "QA Scroller", 22 | "theme": "agate" 23 | }, 24 | "dependencies": { 25 | "@enact/agate": "../../", 26 | "@enact/core": "^5.0.0-rc.1", 27 | "@enact/i18n": "^5.0.0-rc.1", 28 | "@enact/spotlight": "^5.0.0-rc.1", 29 | "@enact/ui": "^5.0.0-rc.1", 30 | "ilib": "^14.21.0", 31 | "prop-types": "^15.8.1", 32 | "react": "^19.1.0", 33 | "react-dom": "^19.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /samples/qa-scroller/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/App/App.js: -------------------------------------------------------------------------------- 1 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 2 | import kind from '@enact/core/kind'; 3 | 4 | import MainView from '../views/MainView'; 5 | 6 | const App = kind({ 7 | name: 'App', 8 | 9 | render: (props) => ( 10 |
11 | 12 |
13 | ) 14 | }); 15 | 16 | export default ThemeDecorator(App); 17 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/components/Controls/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "Controls.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/components/LocaleSwitch/LocaleSwitch.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | import {useI18nContext} from '@enact/i18n/I18nDecorator'; 3 | import {useCallback} from 'react'; 4 | 5 | const LocaleSwitch = (props) => { 6 | const {rtl, updateLocale} = useI18nContext(); 7 | const onClick = useCallback(() => { 8 | updateLocale(!rtl ? 'ar-SA' : 'en-US'); 9 | }, [rtl, updateLocale]); 10 | 11 | return ( 12 | RTL 13 | ); 14 | }; 15 | 16 | export default LocaleSwitch; 17 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/components/LocaleSwitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "LocaleSwitch.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/components/ScrollModeSwitch/ScrollModeSwitch.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | 3 | const ScrollModeSwitch = (props) => { 4 | return ( 5 | 6 | Native Scrolling 7 | 8 | ); 9 | }; 10 | 11 | export default ScrollModeSwitch; 12 | export {ScrollModeSwitch}; 13 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/components/ScrollModeSwitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ScrollModeSwitch.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-scroller/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const appElement = (); 7 | 8 | // In a browser environment, render the app to the document. 9 | if (typeof window !== 'undefined') { 10 | if (ENACT_PACK_ISOMORPHIC) { 11 | hydrateRoot(document.getElementById('root'), appElement); 12 | } else { 13 | createRoot(document.getElementById('root')).render(appElement); 14 | } 15 | } 16 | 17 | export default appElement; 18 | -------------------------------------------------------------------------------- /samples/qa-scroller/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-scroller", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "QA Scroller", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-scroller/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-scroller/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-scroller/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-scroller/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-scroller/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-scroller/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/README.md: -------------------------------------------------------------------------------- 1 | ## QA sample for testing VirtualGridList 2 | 3 | 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. 4 | 5 | To test functionality and usability of VirtualGridList, you may use this sample. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/App/App.js: -------------------------------------------------------------------------------- 1 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 2 | import kind from '@enact/core/kind'; 3 | 4 | import MainView from '../views/MainView'; 5 | 6 | const App = kind({ 7 | name: 'App', 8 | 9 | render: (props) => ( 10 |
11 | 12 |
13 | ) 14 | }); 15 | 16 | export default ThemeDecorator(App); 17 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/ImageItem/ImageItem.js: -------------------------------------------------------------------------------- 1 | import ImageItem from '@enact/agate/ImageItem'; 2 | import {connect} from 'react-redux'; 3 | 4 | import {selectItem} from '../../store'; 5 | 6 | const mapStateToProps = ({data: {data: allItems, selectedItems}}, {['data-index']: dataIndex}) => { 7 | const { 8 | caption: children, 9 | subCaption: label, 10 | src 11 | } = allItems[dataIndex]; 12 | 13 | return { 14 | children, 15 | label, 16 | selected: selectedItems.includes(dataIndex), 17 | src 18 | }; 19 | }; 20 | 21 | const mapDispatchToProps = (dispatch, {['data-index']: dataIndex}) => { 22 | return { 23 | onClick: () => dispatch(selectItem(dataIndex)) 24 | }; 25 | }; 26 | 27 | export default connect(mapStateToProps, mapDispatchToProps)(ImageItem); 28 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/ImageItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ImageItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/ImageList/ImageList.module.less: -------------------------------------------------------------------------------- 1 | // ImageList.module.less 2 | // 3 | @import '~@enact/agate/styles/mixins.less'; 4 | 5 | .verticalPadding { 6 | .padding-start-end(0, 18px); 7 | } 8 | 9 | .horizontalPadding { 10 | padding-bottom: 18px; 11 | } 12 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/ImageList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ImageList.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/LocaleSwitch/LocaleSwitch.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | import {useI18nContext} from '@enact/i18n/I18nDecorator'; 3 | import {useCallback} from 'react'; 4 | 5 | const LocaleSwitch = (props) => { 6 | const {rtl, updateLocale} = useI18nContext(); 7 | const onClick = useCallback(() => { 8 | updateLocale(!rtl ? 'ar-SA' : 'en-US'); 9 | }, [rtl, updateLocale]); 10 | 11 | return ( 12 | RTL 13 | ); 14 | }; 15 | 16 | export default LocaleSwitch; 17 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/LocaleSwitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "LocaleSwitch.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/PanelHeader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "PanelHeader.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/ScrollModeSwitch/ScrollModeSwitch.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | 3 | const ScrollModeSwitch = (props) => { 4 | return ( 5 | 6 | Native Scrolling 7 | 8 | ); 9 | }; 10 | 11 | export default ScrollModeSwitch; 12 | export {ScrollModeSwitch}; 13 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/components/ScrollModeSwitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ScrollModeSwitch.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/defaultConfiguration.js: -------------------------------------------------------------------------------- 1 | // these values are used for app initialization 2 | 3 | /** 4 | * the spacing between items 5 | */ 6 | export const ITEM_SPACING = 0; 7 | 8 | /** 9 | * default number of records to initialize 10 | */ 11 | export const RECORD_COUNT = 100; 12 | 13 | /** 14 | * minimum height for items when list is in vertical orientation 15 | */ 16 | export const MIN_HEIGHT = 285; 17 | 18 | /** 19 | * minimum width for items when list is in horizontal orientation 20 | */ 21 | export const MIN_WIDTH = 344; 22 | 23 | /** 24 | * every nth item will change its caption/subCaption 25 | */ 26 | export const MODIFIER_FREQUENCY = 8; 27 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | import {Provider} from 'react-redux'; 4 | 5 | import App from './App'; 6 | import configureAppStore from './store'; 7 | 8 | const store = configureAppStore(); 9 | 10 | const appElement = ( 11 | 12 | 13 | 14 | ); 15 | 16 | // In a browser environment, render the app to the document. 17 | if (typeof window !== 'undefined') { 18 | if (ENACT_PACK_ISOMORPHIC) { 19 | hydrateRoot(document.getElementById('root'), appElement); 20 | } else { 21 | createRoot(document.getElementById('root')).render(appElement); 22 | } 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-virtualgridlist", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "QA VirtualGridList", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtualgridlist/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtualgridlist/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-virtualgridlist/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtualgridlist/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/README.md: -------------------------------------------------------------------------------- 1 | ## QA sample for testing focus preserve in VirtualGridListNative 2 | 3 | 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. 4 | 5 | To test focus preserver in VirtualGridListNative, you may use this sample. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/src/components/SampleVirtualGridList.module.less: -------------------------------------------------------------------------------- 1 | // SampleVirtualGridList.module.less 2 | // 3 | @import '~@enact/agate/styles/mixins.less'; 4 | 5 | .verticalPadding { 6 | .padding-start-end(0, 18px); 7 | } 8 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | import {Provider} from 'react-redux'; 4 | 5 | import App from './App'; 6 | import configureStore from './store'; 7 | 8 | const store = configureStore(); 9 | const appElement = ( 10 | 11 | 12 | 13 | ); 14 | 15 | // In a browser environment, render the app to the document. 16 | if (typeof window !== 'undefined') { 17 | if (ENACT_PACK_ISOMORPHIC) { 18 | hydrateRoot(document.getElementById('root'), appElement); 19 | } else { 20 | createRoot(document.getElementById('root')).render(appElement); 21 | } 22 | } 23 | 24 | export default appElement; 25 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/src/store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "store.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/src/store/store.js: -------------------------------------------------------------------------------- 1 | import {configureStore, createSlice} from '@reduxjs/toolkit'; 2 | 3 | const indexSlice = createSlice({ 4 | name: 'indexReducer', 5 | initialState: { 6 | index : 0 7 | }, 8 | reducers: { 9 | increaseIndex: (state) => { 10 | state.index += 1; 11 | }, 12 | decreaseIndex: (state) => { 13 | state.index = state.index > 0 ? state.index - 1 : 0; 14 | } 15 | } 16 | }); 17 | 18 | export const {increaseIndex, decreaseIndex} = indexSlice.actions; 19 | 20 | export default function configureAppStore (initialState) { 21 | const store = configureStore({ 22 | reducer: indexSlice.reducer, 23 | initialState 24 | }); 25 | return store; 26 | } 27 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-virtualgridlistnative-preserving-focus", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "QA VirtualGridList Preserving Focus", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtualgridlistnative-preserve-focus/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtualgridlistnative-preserve-focus/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-virtualgridlistnative-preserve-focus/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtualgridlistnative-preserve-focus/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/qa-virtuallist/README.md: -------------------------------------------------------------------------------- 1 | ## QA sample for testing VirtualList 2 | 3 | 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. 4 | 5 | To test functionality and usability of VirtualList, you may use this sample. 6 | 7 | --- 8 | 9 | This project was bootstrapped with [enact-cli](https://github.com/enactjs/cli). 10 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/App/App.js: -------------------------------------------------------------------------------- 1 | import Panels from '@enact/agate/Panels'; 2 | import ThemeDecorator from '@enact/agate/ThemeDecorator'; 3 | import kind from '@enact/core/kind'; 4 | 5 | import MainPanel from '../views/MainPanel'; 6 | 7 | const App = kind({ 8 | name: 'App', 9 | 10 | render: (props) => ( 11 | 12 | 13 | 14 | ) 15 | }); 16 | 17 | export default ThemeDecorator(App); 18 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "App.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/ListItem/ListItem.js: -------------------------------------------------------------------------------- 1 | import Item from '@enact/agate/Item'; 2 | import kind from '@enact/core/kind'; 3 | import PropTypes from 'prop-types'; 4 | import {useSelector} from 'react-redux'; 5 | 6 | const ListItem = kind({ 7 | name: 'ListItem', 8 | functional: true, 9 | propTypes: { 10 | children: PropTypes.any, 11 | dispatch: PropTypes.func, 12 | index: PropTypes.number 13 | }, 14 | render: ({children, ...rest}) => { 15 | // eslint-disable-next-line react-hooks/rules-of-hooks 16 | const disabled = useSelector(({listItems}) => listItems[rest.index].disabled); 17 | delete rest.index; 18 | delete rest.dispatch; 19 | 20 | return ( 21 | 22 | {children} 23 | 24 | ); 25 | } 26 | }); 27 | 28 | export default ListItem; 29 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/ListItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ListItem.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/LocaleSwitch/LocaleSwitch.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | import {useI18nContext} from '@enact/i18n/I18nDecorator'; 3 | import {useCallback} from 'react'; 4 | 5 | const LocaleSwitch = (props) => { 6 | const {rtl, updateLocale} = useI18nContext(); 7 | const onClick = useCallback(() => { 8 | updateLocale(!rtl ? 'ar-SA' : 'en-US'); 9 | }, [rtl, updateLocale]); 10 | 11 | return ( 12 | RTL 13 | ); 14 | }; 15 | 16 | export default LocaleSwitch; 17 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/LocaleSwitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "LocaleSwitch.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/README.md: -------------------------------------------------------------------------------- 1 | Reusable components for your application go here -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/ScrollModeSwitch/ScrollModeSwitch.js: -------------------------------------------------------------------------------- 1 | import CheckboxItem from '@enact/agate/CheckboxItem'; 2 | 3 | const ScrollModeSwitch = (props) => { 4 | return ( 5 | 6 | Native Scrolling 7 | 8 | ); 9 | }; 10 | 11 | export default ScrollModeSwitch; 12 | export {ScrollModeSwitch}; 13 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/components/ScrollModeSwitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ScrollModeSwitch.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/index.js: -------------------------------------------------------------------------------- 1 | /* global ENACT_PACK_ISOMORPHIC */ 2 | import {createRoot, hydrateRoot} from 'react-dom/client'; 3 | import {Provider} from 'react-redux'; 4 | 5 | import App from './App'; 6 | import configureAppStore from './store'; 7 | 8 | const store = configureAppStore(); 9 | 10 | const appElement = ( 11 | 12 | 13 | 14 | ); 15 | 16 | // In a browser environment, render the app to the document. 17 | if (typeof window !== 'undefined') { 18 | if (ENACT_PACK_ISOMORPHIC) { 19 | hydrateRoot(document.getElementById('root'), appElement); 20 | } else { 21 | createRoot(document.getElementById('root')).render(appElement); 22 | } 23 | } 24 | 25 | export default appElement; 26 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/views/MainPanel.module.less: -------------------------------------------------------------------------------- 1 | // MainPanel.module.less 2 | // 3 | @import '~@enact/agate/styles/mixins.less'; 4 | 5 | .verticalPadding { 6 | .padding-start-end(0, 18px); 7 | } 8 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/src/views/README.md: -------------------------------------------------------------------------------- 1 | Composite components that make up a distinct view go here -------------------------------------------------------------------------------- /samples/qa-virtuallist/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "qa-virtuallist", 3 | "version": "0.1.0", 4 | "vendor": "LGE-SWP", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "QA VirtualList", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "uiRevision": 2 12 | } 13 | -------------------------------------------------------------------------------- /samples/qa-virtuallist/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtuallist/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/qa-virtuallist/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtuallist/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/qa-virtuallist/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/qa-virtuallist/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/sampler/.qa-storybook/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/storybook-utils/configs/babel'); 2 | -------------------------------------------------------------------------------- /samples/sampler/.qa-storybook/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.webos.app.enactagateqasampler", 3 | "version": "1.0.0-alpha.16", 4 | "vendor": "LGE-SVL", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Enact Agate QA Sampler", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "iconColor": "#305b6e", 12 | "transparent": false, 13 | "visible": true, 14 | "uiRevision": 2, 15 | "class": { 16 | "hidden": false 17 | }, 18 | "accessibility": { 19 | "supportsAudioGuidance": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /samples/sampler/.qa-storybook/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/.qa-storybook/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/sampler/.qa-storybook/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/.qa-storybook/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/sampler/.qa-storybook/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/.qa-storybook/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/sampler/.storybook/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/storybook-utils/configs/babel'); 2 | -------------------------------------------------------------------------------- /samples/sampler/.storybook/webos-meta/appinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.webos.app.enactagatesampler", 3 | "version": "1.0.0-alpha.16", 4 | "vendor": "LGE-SVL", 5 | "type": "web", 6 | "main": "index.html", 7 | "title": "Enact Agate Sampler", 8 | "icon": "icon.png", 9 | "miniicon": "icon-mini.png", 10 | "largeIcon": "icon-large.png", 11 | "iconColor": "#305b6e", 12 | "transparent": false, 13 | "visible": true, 14 | "uiRevision": 2, 15 | "useNativeScroll": true, 16 | "disableBackHistoryAPI": true, 17 | "class": { 18 | "hidden": false 19 | }, 20 | "accessibility": { 21 | "supportsAudioGuidance": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /samples/sampler/.storybook/webos-meta/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/.storybook/webos-meta/icon-large.png -------------------------------------------------------------------------------- /samples/sampler/.storybook/webos-meta/icon-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/.storybook/webos-meta/icon-mini.png -------------------------------------------------------------------------------- /samples/sampler/.storybook/webos-meta/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/.storybook/webos-meta/icon.png -------------------------------------------------------------------------------- /samples/sampler/custom-addon/DefaultSkinToolbarTab.js: -------------------------------------------------------------------------------- 1 | import {useGlobals} from '@storybook/manager-api'; 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; // eslint-disable-line 4 | 5 | import ToolbarTab from './ToolbarTab'; 6 | 7 | const DefaultSkinToolbarTab = ({toolbarParamKey}) => { 8 | const [globals, updateGlobals] = useGlobals(); 9 | const isActive = globals[toolbarParamKey] || false; 10 | 11 | const toggleState = () => { 12 | updateGlobals({ 13 | [toolbarParamKey]: !isActive 14 | }); 15 | }; 16 | 17 | return ( 18 | 23 | ); 24 | }; 25 | 26 | DefaultSkinToolbarTab.propTypes = { 27 | toolbarParamKey: PropTypes.string 28 | }; 29 | 30 | export default DefaultSkinToolbarTab; 31 | -------------------------------------------------------------------------------- /samples/sampler/custom-addon/ToolbarTab.js: -------------------------------------------------------------------------------- 1 | import {IconButton} from '@storybook/components'; 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; // eslint-disable-line 4 | 5 | const ToolbarTab = ({isActive, toggleState, toolbarParamKey}) => { 6 | return ( 7 | 13 | {toolbarParamKey} 14 | 15 | ); 16 | }; 17 | 18 | ToolbarTab.propTypes = { 19 | isActive: PropTypes.bool, 20 | toggleState: PropTypes.func, 21 | toolbarParamKey: PropTypes.string 22 | }; 23 | 24 | export default ToolbarTab; 25 | -------------------------------------------------------------------------------- /samples/sampler/custom-addon/constants.js: -------------------------------------------------------------------------------- 1 | export const ACCENT_ADDON_ID = 'accent-toolbar'; 2 | export const ACCENT_DEFAULT_VALUE = '#8B7EFE'; 3 | export const ACCENT_PARAM_KEY = 'accent'; 4 | 5 | export const DEFAULTSKINS_ADDON_ID = 'defaultSkins-toolbar'; 6 | export const DEFAULTSKINS_PARAM_KEY = 'default skin styles'; 7 | 8 | export const HIGHLIGHT_ADDON_ID = 'highlight-toolbar'; 9 | export const HIGHLIGHT_DEFAULT_VALUE = '#E16253'; 10 | export const HIGHLIGHT_PARAM_KEY = 'highlight'; 11 | 12 | 13 | -------------------------------------------------------------------------------- /samples/sampler/images/icon-enact-docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/images/icon-enact-docs.png -------------------------------------------------------------------------------- /samples/sampler/images/icon-enact-logo.svg: -------------------------------------------------------------------------------- 1 | icon-enact- -------------------------------------------------------------------------------- /samples/sampler/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/samples/sampler/public/favicon.ico -------------------------------------------------------------------------------- /samples/sampler/resources/ilibmanifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [] 3 | } -------------------------------------------------------------------------------- /samples/sampler/src/ThemeEnvironment/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "ThemeEnvironment.js" 3 | } 4 | -------------------------------------------------------------------------------- /samples/sampler/stories/default/Drawer.module.less: -------------------------------------------------------------------------------- 1 | .galliumNote { 2 | display: none; 3 | } 4 | 5 | :global(.gallium) { 6 | .galliumNote { 7 | display: block; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /samples/sampler/stories/default/Heading.module.less: -------------------------------------------------------------------------------- 1 | @import '~@enact/agate/styles/mixins.less'; 2 | @import '~@enact/agate/styles/skin.less'; 3 | 4 | .applySkins({ 5 | .spacingIndicator { 6 | border: 9px solid @agate-highlight; 7 | margin-top: 0; 8 | 9 | code { 10 | color: @agate-accent; 11 | } 12 | } 13 | }); 14 | 15 | .spacingNote { 16 | display: none; 17 | } 18 | 19 | :global(.gallium) { 20 | .spacingNote { 21 | display: block; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /samples/sampler/stories/default/Image.module.less: -------------------------------------------------------------------------------- 1 | .image { 2 | width: 400px; 3 | height: 300px; 4 | } 5 | -------------------------------------------------------------------------------- /samples/sampler/stories/default/Keypad.js: -------------------------------------------------------------------------------- 1 | import {mergeComponentMetadata} from '@enact/storybook-utils'; 2 | import {action} from '@enact/storybook-utils/addons/actions'; 3 | import {boolean} from '@enact/storybook-utils/addons/controls'; 4 | import Keypad from '@enact/agate/Keypad'; 5 | 6 | Keypad.displayName = 'Keypad'; 7 | const Config = mergeComponentMetadata('Keypad', Keypad); 8 | 9 | export default { 10 | title: 'Agate/Keypad', 11 | component: 'Keypad' 12 | }; 13 | 14 | export const _Keypad = (args) => ( 15 | 21 | ); 22 | 23 | boolean('disabled', _Keypad, Config); 24 | boolean('activeCall', _Keypad, Config); 25 | boolean('spotlightDisabled', _Keypad, Config); 26 | 27 | _Keypad.storyName = 'Keypad'; 28 | _Keypad.parameters = { 29 | info: { 30 | text: 'Basic usage of Keypad' 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /samples/sampler/stories/default/PopupMenu.module.less: -------------------------------------------------------------------------------- 1 | @import '~@enact/agate/styles/mixins.less'; 2 | @import '~@enact/agate/styles/skin.less'; 3 | 4 | .applySkins({ 5 | .cannotClose { 6 | color: @agate-highlight; 7 | 8 | code { 9 | color: @agate-accent; 10 | } 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /samples/sampler/stories/default/VirtualList.module.less: -------------------------------------------------------------------------------- 1 | @import '~@enact/agate/styles/mixins.less'; 2 | @import '~@enact/agate/styles/skin.less'; 3 | 4 | .virtualList { 5 | .item { 6 | &::before { 7 | content: ""; 8 | background-color: #363b44; 9 | height: 3px; 10 | width: 100%; 11 | position: absolute; 12 | top: 100%; 13 | left: 0; 14 | } 15 | 16 | .applySkins({ 17 | .focus({ 18 | &::before { 19 | background-color: @agate-item-focus-border-color; 20 | } 21 | }); 22 | 23 | .lastItem { 24 | border-bottom-color: transparent; 25 | } 26 | }); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /samples/sampler/stories/helper/svg.js: -------------------------------------------------------------------------------- 1 | // SVG image For Samples 2 | // 3 | 4 | export const svgGenerator = (width, height, bgColor, textColor, customText) => ( 5 | `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${width} ${height}' width='${width}' height='${height}'%3E` + 6 | `%3Crect width='${width}' height='${height}' fill='%23${bgColor}'%3E%3C/rect%3E` + 7 | `%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='36px' fill='%23${textColor}'%3E${customText}%3C/text%3E%3C/svg%3E` 8 | ); 9 | -------------------------------------------------------------------------------- /samples/sampler/stories/qa/ImageItem.js: -------------------------------------------------------------------------------- 1 | import ri from '@enact/ui/resolution'; 2 | import ImageItem from '@enact/agate/ImageItem'; 3 | 4 | import {svgGenerator} from '../helper/svg'; 5 | 6 | ImageItem.displayName = 'ImageItem'; 7 | 8 | export default { 9 | title: 'Agate/ImageItem', 10 | component: 'ImageItem' 11 | }; 12 | 13 | export const withoutChildren = () => ( 14 |
15 | 18 |
19 | ); 20 | 21 | withoutChildren.storyName = 'without children'; 22 | -------------------------------------------------------------------------------- /styles/internal/font-agateicons.less: -------------------------------------------------------------------------------- 1 | // Font Definition File 2 | // -- Agate Icons 3 | // 4 | 5 | // Define local LESS variable for font paths 6 | @font-system-src-agate-icons: local("Agate-icons"), url(../../fonts/Agate-icons.ttf) format("truetype"); 7 | 8 | // Generate @font-face Rules 9 | .buildFontFace("Agate Icons"; @font-system-src-agate-icons); 10 | -------------------------------------------------------------------------------- /styles/internal/font-siliconicons.less: -------------------------------------------------------------------------------- 1 | // Font Definition File 2 | // -- Silicon Icons 3 | // 4 | 5 | @import "./font-agateicons.less"; 6 | 7 | // Define local LESS variable for font paths 8 | @font-system-src-silicon-icons: local("Silicon-Icons"), url(../../fonts/Silicon-Icons.ttf) format("truetype"); 9 | 10 | // Generate @font-face Rules 11 | .buildFontFace("Silicon Icons"; @font-system-src-agate-icons); // Start with a base of the Agate icons 12 | .buildFontFace("Silicon Icons"; @font-system-src-silicon-icons); // Layer the silicons onto that base 13 | -------------------------------------------------------------------------------- /styles/internal/font-sourcesanspro.less: -------------------------------------------------------------------------------- 1 | // Font Definition File 2 | // -- Source Sans Pro 3 | // 4 | 5 | // 6 | // ----- DISABLED - PLAT-92904 ----- 7 | // Until such time that a solution for can be found for pre-downloading or pre-fetching external 8 | // font resources, all external fonts must be disabled. Current webOS policy states that system 9 | // apps, specifically, may not use external fonts that delay or impede the initial render. 10 | // 11 | // @import (css) url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900); 12 | -------------------------------------------------------------------------------- /styles/internal/font-worksans.less: -------------------------------------------------------------------------------- 1 | // Font Definition File 2 | // -- Work Sans 3 | // 4 | 5 | // 6 | // ----- DISABLED - PLAT-92904 ----- 7 | // Until such time that a solution for can be found for pre-downloading or pre-fetching external 8 | // font resources, all external fonts must be disabled. Current webOS policy states that system 9 | // apps, specifically, may not use external fonts that delay or impede the initial render. 10 | // 11 | // @import (css) url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,700); 12 | -------------------------------------------------------------------------------- /styles/variables.less: -------------------------------------------------------------------------------- 1 | // Variables for any components 2 | // 3 | 4 | // App 5 | // --------------------------------------- 6 | @agate-app-keepout: 18px; 7 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/ArcPicker.js: -------------------------------------------------------------------------------- 1 | import ArcPicker from '../../../../ArcPicker'; 2 | 3 | import {withConfig} from './utils'; 4 | 5 | const ArcPickerTests = [ 6 | {[1, 2, 3, 4]}, 7 | {[1, 2, 3, 4]}, 8 | {[1, 2, 3, 4]}, 9 | {[1, 2, 3, 4]}, 10 | {[1, 2, 3, 4]}, 11 | 12 | // Focus 13 | ...withConfig({focus: true}, [ 14 | {[1, 2, 3, 4, 5]}, 15 | {[1, 2, 3, 4, 5]}, 16 | {[1, 2, 3, 4, 5]} 17 | ]) 18 | ]; 19 | 20 | export default ArcPickerTests; 21 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/ArcSlider.js: -------------------------------------------------------------------------------- 1 | import ArcSlider from '../../../../ArcSlider'; 2 | 3 | const ArcSliderTests = [ 4 | , 5 | , 6 | , 7 | , 8 | { 9 | component: , 10 | focus: true 11 | }, 12 | { 13 | component: , 14 | focus: true 15 | } 16 | ]; 17 | 18 | export default ArcSliderTests; 19 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/BodyText.js: -------------------------------------------------------------------------------- 1 | import BodyText from '../../../../BodyText'; 2 | 3 | const BodyTextTests = [ 4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit., 5 | Lorem ipsum dolor sit amet, consectetur adipiscing elit., 6 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 7 | ]; 8 | 9 | export default BodyTextTests; 10 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Checkbox.js: -------------------------------------------------------------------------------- 1 | import Checkbox from '../../../../Checkbox'; 2 | 3 | import {withConfig} from './utils'; 4 | 5 | const CheckboxTests = [ 6 | , 7 | , 8 | , 9 | star, 10 | star, 11 | star, 12 | star, 13 | 14 | ...withConfig({focus: true}, [ 15 |
, 16 |
, 17 |
, 18 |
star
, 19 |
star
, 20 |
star
, 21 |
star
22 | ]) 23 | ]; 24 | export default CheckboxTests; 25 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/ColorPicker.js: -------------------------------------------------------------------------------- 1 | import ColorPicker from '../../../../ColorPicker'; 2 | 3 | const ColorPickerTests = [ 4 | {[]}, 5 | {[]}, 6 | {[]}, 7 | {[]} 8 | ]; 9 | 10 | export default ColorPickerTests; 11 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/DatePicker.js: -------------------------------------------------------------------------------- 1 | import DatePicker from '../../../../DatePicker'; 2 | 3 | const DatePickerTests = [ 4 | , 5 | , 6 | // RTL 7 | { 8 | locale: 'ar-SA', 9 | component: 10 | }, 11 | { 12 | locale: 'ar-SA', 13 | component: 14 | } 15 | ]; 16 | 17 | export default DatePickerTests; 18 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/DateTimePicker.js: -------------------------------------------------------------------------------- 1 | import DateTimePicker from '../../../../DateTimePicker'; 2 | 3 | const DateTimePickerTests = [ 4 | , 5 | , 6 | // RTL 7 | { 8 | locale: 'ar-SA', 9 | component: 10 | }, 11 | { 12 | locale: 'ar-SA', 13 | component: 14 | }, 15 | // long meridiem characters 16 | { 17 | locale: 'ta-IN', 18 | component: 19 | } 20 | ]; 21 | 22 | export default DateTimePickerTests; 23 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Drawer.js: -------------------------------------------------------------------------------- 1 | import Drawer from '../../../../Drawer'; 2 | 3 | const DrawerTests = [ 4 | {[]}, 5 | {[]}, 6 | {[]} 7 | ]; 8 | 9 | export default DrawerTests; 10 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/FanSpeedControl.js: -------------------------------------------------------------------------------- 1 | import FanSpeedControl from '../../../../FanSpeedControl'; 2 | 3 | const FanSpeedControlTests = [ 4 | , 5 | , 6 | , 7 | , 8 | , 9 | , 10 | { 11 | component: , 12 | focus: true 13 | }, 14 | 15 | ]; 16 | 17 | export default FanSpeedControlTests; 18 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Icon.js: -------------------------------------------------------------------------------- 1 | import Icon from '../../../../Icon'; 2 | 3 | import logo from '../../images/icon-enact-logo.svg'; 4 | 5 | const IconTests = [ 6 | minus, 7 | plus, 8 | 9 | ]; 10 | 11 | export default IconTests; 12 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Image.js: -------------------------------------------------------------------------------- 1 | import Image from '../../../../Image'; 2 | 3 | import hd from '../../images/200x200.png'; 4 | 5 | const ImageTests = [ 6 | , 7 | , 8 | 9 | ]; 10 | 11 | export default ImageTests; 12 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Keypad.js: -------------------------------------------------------------------------------- 1 | import Keypad from '../../../../Keypad'; 2 | 3 | const KeypadTests = [ 4 | , 5 | , 6 | , 7 | 8 | ]; 9 | 10 | export default KeypadTests; 11 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/LabeledIcon.js: -------------------------------------------------------------------------------- 1 | import LabeledIcon from '../../../../LabeledIcon'; 2 | 3 | const LabeledIconTests = [ 4 | , 5 | Hello LabeledIcon, 6 | Hello LabeledIcon, 7 | Hello LabeledIcon, 8 | Hello LabeledIcon, 9 | Hello LabeledIcon, 10 | Hello LabeledIcon, 11 | Hello LabeledIcon, 12 | Hello LabeledIcon 13 | ]; 14 | 15 | export default LabeledIconTests; 16 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/LabeledIconButton.js: -------------------------------------------------------------------------------- 1 | import LabeledIconButton from '../../../../LabeledIconButton'; 2 | 3 | const LabeledIconButtonTests = [ 4 | , 5 | Hello!, 6 | , 7 | Hello Home!, 8 | Hello LabeledIconButton, 9 | , 10 | Hello huge button!, 11 | I am disabled 12 | ]; 13 | 14 | export default LabeledIconButtonTests; 15 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Marquee.js: -------------------------------------------------------------------------------- 1 | import Marquee from '../../../../Marquee'; 2 | 3 | const MarqueeTests = [ 4 | 5 | The quick brown fox jumped over the lazy dog. The bean bird flies at sundown. 6 | The quick brown fox jumped over the lazy dog. The bean bird flies at sundown. 7 | The quick brown fox jumped over the lazy dog. The bean bird flies at sundown. 8 | , 9 | 10 | The quick brown fox jumped over the lazy dog. The bean bird flies at sundown. 11 | The quick brown fox jumped over the lazy dog. The bean bird flies at sundown. 12 | The quick brown fox jumped over the lazy dog. The bean bird flies at sundown. 13 | 14 | ]; 15 | export default MarqueeTests; 16 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/Panels.js: -------------------------------------------------------------------------------- 1 | import Panels, {Panel, Header} from '../../../../Panels'; 2 | 3 | // Panel components to show in the Panels 4 | const PanelComponents = [ 5 | Hello, 6 |
The body, 7 | Panel 3 8 | ]; 9 | 10 | const PanelsTests = [ 11 | { 12 | title: 'standard panels', 13 | component: {PanelComponents}, 14 | wrapper: {full: true} 15 | }, 16 | { 17 | title: 'no close button', 18 | component: {PanelComponents}, 19 | wrapper: {full: true} 20 | }, 21 | { 22 | title: 'cover partial', 23 | component: {PanelComponents}, 24 | wrapper: {full: true} 25 | } 26 | ]; 27 | 28 | export default PanelsTests; 29 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/PopupMenu.js: -------------------------------------------------------------------------------- 1 | import PopupMenu from '../../../../PopupMenu'; 2 | 3 | const PopupMenuTests = [ 4 | PopupMenu!, 5 | PopupMenu!, 6 | PopupMenu!, 7 | PopupMenu!, 8 | Very long title to test marquee! Very long title to test marquee! Very long title to test marquee!, 9 | Very long title to test marquee! Very long title to test marquee! Very long title to test marquee! 10 | ]; 11 | 12 | export default PopupMenuTests; 13 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/RangePicker.js: -------------------------------------------------------------------------------- 1 | import RangePicker from '../../../../RangePicker'; 2 | 3 | const RangePickerTests = [ 4 | , 5 | , 6 | , 7 | // RTL 8 | { 9 | locale: 'ar-SA', 10 | component: 11 | }, 12 | { 13 | locale: 'ar-SA', 14 | component: 15 | }, 16 | 17 | // Wrap 18 | , 19 | , 20 | , 21 | 22 | ]; 23 | 24 | export default RangePickerTests; 25 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/SliderButton.js: -------------------------------------------------------------------------------- 1 | import SliderButton from '../../../../SliderButton'; 2 | 3 | const SliderButtonTests = [ 4 | {['First', 'Second', 'Third']}, 5 | {['First', 'Second', 'Third']}, 6 | {['First', 'Second', 'Third', 'Bananas Speed', 'OK Enough Speed']}, 7 | {['First', 'Second', 'Third', 'Bananas Speed', 'OK Enough Speed']} 8 | ]; 9 | 10 | export default SliderButtonTests; 11 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/TabGroup.js: -------------------------------------------------------------------------------- 1 | import TabGroup from '../../../../TabGroup'; 2 | 3 | const TabGroupTests = [ 4 | , 12 | 20 | ]; 21 | 22 | export default TabGroupTests; 23 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/TemperatureControl.js: -------------------------------------------------------------------------------- 1 | import TemperatureControl from '../../../../TemperatureControl'; 2 | 3 | const TemperatureControlTests = [ 4 | , 5 | , 9 | , 14 | // Min value equals max value - [PLAT-123306] 15 | , 19 | // Min value > max value - [PLAT-123306] 20 | 24 | ]; 25 | 26 | export default TemperatureControlTests; 27 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/ThumbnailItem.js: -------------------------------------------------------------------------------- 1 | import ThumbnailItem from '../../../../ThumbnailItem'; 2 | 3 | import img from '../../images/600x600.png'; 4 | 5 | const ThumbnailItemTests = [ 6 | Main Content, 7 | Main Content, 8 | Main Content, 9 | Main Content, 10 | Main Content, 11 | Main Content, 12 | { 13 | component: Focused Thumbnail Item, 14 | focus: true 15 | }, 16 | { 17 | component: Focused Thumbnail Item, 18 | focus: true 19 | } 20 | ]; 21 | 22 | export default ThumbnailItemTests; 23 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/TimePicker.js: -------------------------------------------------------------------------------- 1 | import TimePicker from '../../../../TimePicker'; 2 | 3 | const TimePickerTests = [ 4 | , 5 | , 6 | // RTL 7 | { 8 | locale: 'ar-SA', 9 | component: 10 | }, 11 | { 12 | locale: 'ar-SA', 13 | component: 14 | }, 15 | // long meridiem characters 16 | { 17 | locale: 'ta-IN', 18 | component: 19 | } 20 | ]; 21 | 22 | export default TimePickerTests; 23 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/WindDirectionControl.js: -------------------------------------------------------------------------------- 1 | import WindDirectionControl from '../../../../WindDirectionControl'; 2 | 3 | const WindDirectionControlTests = [ 4 | , 5 | 6 | ]; 7 | 8 | export default WindDirectionControlTests; 9 | -------------------------------------------------------------------------------- /tests/screenshot/apps/components/utils.js: -------------------------------------------------------------------------------- 1 | import {isValidElement} from 'react'; 2 | 3 | const withConfig = (config, tests) => { 4 | return tests.map(t => { 5 | if (isValidElement(t)) { 6 | return { 7 | ...config, 8 | component: t 9 | }; 10 | } 11 | 12 | return { 13 | ...t, 14 | ...config 15 | }; 16 | }); 17 | }; 18 | 19 | export { 20 | withConfig 21 | }; 22 | -------------------------------------------------------------------------------- /tests/screenshot/images/200x200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/tests/screenshot/images/200x200.png -------------------------------------------------------------------------------- /tests/screenshot/images/300x300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/tests/screenshot/images/300x300.png -------------------------------------------------------------------------------- /tests/screenshot/images/600x600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enactjs/agate/bc9080eacf199de16ce1ff689e1e62dcbaeac1ba/tests/screenshot/images/600x600.png -------------------------------------------------------------------------------- /tests/screenshot/images/icon-enact-logo.svg: -------------------------------------------------------------------------------- 1 | icon-enact- -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateCarbon-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Carbon', 6 | Page: Page, 7 | skin: 'carbon' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateCobalt-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Cobalt', 6 | Page: Page, 7 | skin: 'cobalt' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateCobaltNight-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Cobalt Night', 6 | Page: Page, 7 | skin: 'cobalt', 8 | skinVariants: '"night"' 9 | }); 10 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateCopper-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Copper', 6 | Page: Page, 7 | skin: 'copper' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateCopperNight-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Copper Night', 6 | Page: Page, 7 | skin: 'copper', 8 | skinVariants: '"night"' 9 | }); 10 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateElectro-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Electro', 6 | Page: Page, 7 | skin: 'electro' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateGallium-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Gallium', 6 | Page: Page, 7 | skin: 'gallium' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateGalliumNight-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Gallium Night', 6 | Page: Page, 7 | skin: 'gallium', 8 | skinVariants: '"night"' 9 | }); 10 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgatePage.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const {Page} = require('@enact/ui-test-utils/utils'); 3 | 4 | class AgatePage extends Page { 5 | constructor () { 6 | super(); 7 | this.title = 'Agate Test'; 8 | } 9 | 10 | async open (urlExtra) { 11 | await super.open('Agate-View', urlExtra); 12 | } 13 | 14 | get component () { 15 | return browser.element('[data-ui-test-id="test"]'); 16 | } 17 | } 18 | 19 | module.exports = new AgatePage(); 20 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateSilicon-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Silicon', 6 | Page: Page, 7 | skin: 'silicon' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateSiliconNight-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Silicon Night', 6 | Page: Page, 7 | skin: 'silicon', 8 | skinVariants: '"night"' 9 | }); 10 | -------------------------------------------------------------------------------- /tests/screenshot/specs/AgateTitanium-specs.js: -------------------------------------------------------------------------------- 1 | const {runTest} = require('@enact/ui-test-utils/utils'); 2 | const Page = require('./AgatePage'); 3 | 4 | runTest({ 5 | testName: 'Agate Titanium', 6 | Page: Page, 7 | skin: 'titanium' 8 | }); 9 | -------------------------------------------------------------------------------- /tests/screenshot/wdio.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/ui-test-utils/screenshot/wdio.conf.js'); 2 | -------------------------------------------------------------------------------- /tests/screenshot/wdio.docker.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/ui-test-utils/screenshot/wdio.docker.conf.js'); 2 | -------------------------------------------------------------------------------- /tests/screenshot/wdio.tv.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/ui-test-utils/screenshot/wdio.tv.conf.js'); 2 | -------------------------------------------------------------------------------- /tests/ui/apps/Checkbox/Checkbox-View.js: -------------------------------------------------------------------------------- 1 | import Checkbox from '../../../../Checkbox'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | import spotlight from '@enact/spotlight'; 4 | 5 | // NOTE: Forcing pointer mode off, so we can be sure that regardless of webOS pointer mode the app 6 | // runs the same way 7 | spotlight.setPointerMode(false); 8 | 9 | const app = (props) =>
10 |
11 | 14 |
15 |
16 | 20 |
21 |
22 | 26 |
27 |
28 | 32 |
33 |
; 34 | 35 | export default ThemeDecorator(app); 36 | -------------------------------------------------------------------------------- /tests/ui/apps/DatePicker/DatePicker-View.js: -------------------------------------------------------------------------------- 1 | import DatePicker from '../../../../DatePicker'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | import spotlight from '@enact/spotlight'; 4 | 5 | // NOTE: Forcing pointer mode off, so we can be sure that regardless of webOS pointer mode the app 6 | // runs the same way 7 | spotlight.setPointerMode(false); 8 | 9 | const app = (props) =>
10 |
11 | 14 | 18 | 22 | 27 |
28 |
; 29 | 30 | export default ThemeDecorator(app); 31 | -------------------------------------------------------------------------------- /tests/ui/apps/DateTimePicker/DateTimePicker-View.js: -------------------------------------------------------------------------------- 1 | import DateTimePicker from '../../../../DateTimePicker'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | import spotlight from '@enact/spotlight'; 4 | 5 | // NOTE: Forcing pointer mode off, so we can be sure that regardless of webOS pointer mode the app 6 | // runs the same way 7 | spotlight.setPointerMode(false); 8 | 9 | const app = (props) =>
10 |
11 | 14 | 18 | 22 | 27 |
28 |
; 29 | 30 | export default ThemeDecorator(app); 31 | -------------------------------------------------------------------------------- /tests/ui/apps/Item/Item-View.js: -------------------------------------------------------------------------------- 1 | import Item from '../../../../Item'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | import spotlight from '@enact/spotlight'; 4 | 5 | // NOTE: Forcing pointer mode off, so we can be sure that regardless of webOS pointer mode the app 6 | // runs the same way 7 | spotlight.setPointerMode(false); 8 | 9 | const app = (props) =>
10 |
11 | Item 1 12 | Item 2 disabled 13 | Item 3 with a label 14 | Item 4 inline Item 15 | Item 5 inline disabled 16 | item6 inline Item 17 | item7 inline Item 18 | item8 inline Item 19 |
20 |
; 21 | 22 | export default ThemeDecorator(app); 23 | -------------------------------------------------------------------------------- /tests/ui/apps/Picker/Picker-View.js: -------------------------------------------------------------------------------- 1 | import Picker from '../../../../Picker'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | 4 | const pickerList = [ 5 | 'Apple', 6 | 'Banana', 7 | 'Clementine', 8 | 'Durian' 9 | ]; 10 | 11 | const app = (props) =>
12 |
13 | {pickerList} 14 | {pickerList} 15 | {pickerList} 16 |
17 |
18 | {pickerList} 19 | {pickerList} 20 | {pickerList} 21 |
22 |
; 23 | 24 | export default ThemeDecorator(app); 25 | -------------------------------------------------------------------------------- /tests/ui/apps/SliderButton/SliderButton-View.js: -------------------------------------------------------------------------------- 1 | import SliderButton from '../../../../SliderButton'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | import spotlight from '@enact/spotlight'; 4 | 5 | // NOTE: Forcing pointer mode off, so we can be sure that regardless of webOS pointer mode the app 6 | // runs the same way 7 | spotlight.setPointerMode(false); 8 | 9 | const threeItems = ['Light Speed', 'Ridiculous Speed', 'Ludicrous Speed']; 10 | const fiveItems = ['Light Speed', 'Ridiculous Speed', 'Ludicrous Speed', 'Bananas Speed', 'OK Enough Speed']; 11 | 12 | const app = (props) =>
13 |
14 | 17 | {threeItems} 18 | 19 | 22 | {fiveItems} 23 | 24 | 28 | {threeItems} 29 | 30 |
31 |
; 32 | 33 | export default ThemeDecorator(app); 34 | -------------------------------------------------------------------------------- /tests/ui/apps/TimePicker/TimePicker-View.js: -------------------------------------------------------------------------------- 1 | import TimePicker from '../../../../TimePicker'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | import spotlight from '@enact/spotlight'; 4 | 5 | // NOTE: Forcing pointer mode off, so we can be sure that regardless of webOS pointer mode the app 6 | // runs the same way 7 | spotlight.setPointerMode(false); 8 | 9 | const app = (props) =>
10 |
11 | 14 | 18 | 22 | 27 |
28 |
; 29 | 30 | export default ThemeDecorator(app); 31 | -------------------------------------------------------------------------------- /tests/ui/apps/ToggleButton/ToggleButton-View.js: -------------------------------------------------------------------------------- 1 | import ToggleButton from '../../../../ToggleButton'; 2 | import ThemeDecorator from '../../../../ThemeDecorator'; 3 | 4 | const app = (props) =>
5 |
6 |
7 | 10 | Missing Toggle Label 11 | 12 |
13 |
14 | 18 | Small Button 19 | 20 |
21 |
22 | 27 |
28 |
29 |
; 30 | 31 | export default ThemeDecorator(app); 32 | -------------------------------------------------------------------------------- /tests/ui/components/Section.js: -------------------------------------------------------------------------------- 1 | const Section = (props) => { 2 | return ( 3 |
4 | ); 5 | }; 6 | 7 | export default Section; 8 | -------------------------------------------------------------------------------- /tests/ui/components/UrlPropsDecorator.js: -------------------------------------------------------------------------------- 1 | function UrlPropsDecorator (Wrapped) { 2 | const UrlDecorator = (props) => { 3 | const updated = {...props}; 4 | const url = new URL(window.location.href); 5 | 6 | url.searchParams.forEach((value, key) => { 7 | if (!value) { 8 | value = true; 9 | } else if (/^(true|false)$/i.test(value)) { 10 | value = Boolean(value); 11 | } else if (/^\d+$/.test(value)) { 12 | value = Number.parseInt(value); 13 | } else { 14 | try { 15 | value = JSON.parse(value); 16 | } catch (e) { 17 | // eslint-disable-next-line no-console 18 | console.error(`Failed to handle URL parameter "${key}" with value "${value}"`); 19 | return; 20 | } 21 | } 22 | 23 | updated[key] = value; 24 | }); 25 | 26 | return ; 27 | }; 28 | UrlDecorator.displayName = 'UrlDecorator'; 29 | return UrlDecorator; 30 | } 31 | 32 | export default UrlPropsDecorator; 33 | export { 34 | UrlPropsDecorator 35 | }; 36 | -------------------------------------------------------------------------------- /tests/ui/specs/CheckboxItem/CheckboxItem-utils.js: -------------------------------------------------------------------------------- 1 | // A set of utility methods for testing 2 | module.exports = { 3 | expectChecked, 4 | expectInline, 5 | expectUnchecked 6 | }; 7 | 8 | async function expectChecked (checkboxItem) { 9 | expect(await checkboxItem.isChecked).toBe(true); 10 | } 11 | 12 | async function expectUnchecked (checkboxItem) { 13 | expect(await checkboxItem.isChecked).toBe(false); 14 | } 15 | 16 | async function expectInline (checkboxItem1, checkboxItem2) { 17 | expect((await checkboxItem1.getLocation().x) === (await checkboxItem2.getLocation().x)).toBe(false); 18 | } 19 | -------------------------------------------------------------------------------- /tests/ui/specs/DatePicker/DatePicker-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | // adapted from https://stackoverflow.com/questions/1184334/get-number-days-in-a-specified-month-using-javascript 4 | const daysInMonth = ({month, year}) => new Date(year, month, 0).getDate(); 5 | 6 | const extractValues = async (picker) => { 7 | const day = parseInt(await picker.active('day').getText()); 8 | const month = parseInt(await picker.active('month').getText()); 9 | const year = parseInt(await picker.active('year').getText()); 10 | 11 | return {day, month, year}; 12 | }; 13 | 14 | module.exports = { 15 | daysInMonth, 16 | extractValues 17 | }; 18 | -------------------------------------------------------------------------------- /tests/ui/specs/DateTimePicker/DateTimePicker-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | // adapted from https://stackoverflow.com/questions/1184334/get-number-days-in-a-specified-month-using-javascript 4 | const daysInMonth = ({month, year}) => new Date(year, month, 0).getDate(); 5 | 6 | const extractValues = async (picker) => { 7 | const day = parseInt(await picker.dateActive('day').getText()); 8 | const month = parseInt(await picker.dateActive('month').getText()); 9 | const year = parseInt(await picker.dateActive('year').getText()); 10 | const hour = parseInt(await picker.timeActive('hour').getText()); 11 | const minute = parseInt(await picker.timeActive('minute').getText()); 12 | const meridiem = await picker.meridiem.isExisting() ? await picker.timeActive('meridiem').getText() : null; 13 | 14 | return {day, month, year, hour, minute, meridiem}; 15 | }; 16 | 17 | module.exports = { 18 | daysInMonth, 19 | extractValues 20 | }; 21 | -------------------------------------------------------------------------------- /tests/ui/specs/Drawer/Drawer-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | async function validateTitle (drawer, title) { 4 | expect(await drawer.title).toBe(title); 5 | } 6 | 7 | async function expectClosed (drawer) { 8 | expect(await drawer.isDrawerExist).toBe(false); 9 | expect(await drawer.isScrimExist).toBe(false); 10 | } 11 | 12 | async function expectOpen (drawer) { 13 | expect(await drawer.isDrawerExist).toBe(true); 14 | expect(await drawer.isScrimExist).toBe(true); 15 | } 16 | 17 | async function expectNoneScrimOpen (drawer) { 18 | expect(await drawer.isDrawerExist).toBe(true); 19 | expect(await drawer.isScrimExist).toBe(false); 20 | } 21 | 22 | module.exports = { 23 | validateTitle, 24 | expectClosed, 25 | expectOpen, 26 | expectNoneScrimOpen 27 | }; 28 | -------------------------------------------------------------------------------- /tests/ui/specs/Picker/Picker-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | const extractValue = async (picker) => { 4 | return (await picker.active()).getText(); 5 | }; 6 | 7 | module.exports = { 8 | extractValue 9 | }; 10 | -------------------------------------------------------------------------------- /tests/ui/specs/Popup/Popup-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | async function validateTitle (popup, title) { 4 | expect(await popup.title).toBe(title); 5 | } 6 | 7 | async function expectClosed (popup) { 8 | expect(await popup.isPopupExist).toBe(false); 9 | expect(await popup.isScrimExist).toBe(false); 10 | } 11 | 12 | async function expectOpen (popup) { 13 | expect(await popup.isPopupExist).toBe(true); 14 | expect(await popup.isScrimExist).toBe(true); 15 | } 16 | 17 | async function expectNoneScrimOpen (popup) { 18 | expect(await popup.isPopupExist).toBe(true); 19 | expect(await popup.isScrimExist).toBe(false); 20 | } 21 | 22 | module.exports = { 23 | validateTitle, 24 | expectClosed, 25 | expectOpen, 26 | expectNoneScrimOpen 27 | }; 28 | -------------------------------------------------------------------------------- /tests/ui/specs/PopupMenu/PopupMenu-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | async function validateTitle (popupMenu, title) { 4 | expect(await popupMenu.title).toBe(title); 5 | } 6 | 7 | async function expectClosed (popupMenu) { 8 | expect(await popupMenu.isPopupMenuExist).toBe(false); 9 | expect(await popupMenu.isScrimExist).toBe(false); 10 | } 11 | 12 | async function expectOpen (popupMenu) { 13 | expect(await popupMenu.isPopupMenuExist).toBe(true); 14 | expect(await popupMenu.isScrimExist).toBe(true); 15 | } 16 | 17 | module.exports = { 18 | validateTitle, 19 | expectClosed, 20 | expectOpen 21 | }; 22 | -------------------------------------------------------------------------------- /tests/ui/specs/RangePicker/RangePicker-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | 3 | const extractValue = async (rangePicker) => { 4 | return parseInt(await rangePicker.active().getText()); 5 | }; 6 | 7 | module.exports = { 8 | extractValue 9 | }; 10 | -------------------------------------------------------------------------------- /tests/ui/specs/TimePicker/TimePicker-utils.js: -------------------------------------------------------------------------------- 1 | // Utility methods for testing 2 | const extractValues = async (picker) => { 3 | const hour = parseInt(await picker.active('hour').getText()); 4 | const minute = parseInt(await picker.active('minute').getText()); 5 | const meridiem = await picker.meridiem.isExisting() ? await picker.active('meridiem').getText() : null; 6 | 7 | return {hour, minute, meridiem}; 8 | }; 9 | 10 | module.exports = { 11 | extractValues 12 | }; 13 | -------------------------------------------------------------------------------- /tests/ui/specs/VirtualList/VirtualList/RTL/VirtualListRTL-specs.js: -------------------------------------------------------------------------------- 1 | const Page = require('../VirtualListPage'); 2 | 3 | describe('RTL locale', function () { 4 | beforeEach(async function () { 5 | await Page.open('', '?locale=ar-SA'); 6 | }); 7 | 8 | it('should position Scrollbar Track on left side in RTL', async function () { 9 | expect((await Page.getListRect()).left > (await Page.getVerticalScrollbarRect()).left).toBe(true); 10 | }); 11 | 12 | it('should Verify RTL functionality', async function () { 13 | // Check that the button's position is Right-> Left.(in case RTL, button position is 'Right' - 'Left') 14 | await (Page.buttonLeft).moveTo(); 15 | expect(await Page.buttonLeft.isFocused()).toBe(true); 16 | await Page.spotlightLeft(); 17 | await Page.spotlightLeft(); 18 | expect(await Page.buttonRight.isFocused()).toBe(true); 19 | // Verify Vertical Scrollbar displays on the left side. 20 | expect((await Page.getListRect()).left > (await Page.getVerticalScrollbarRect()).left).toBe(true); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /tests/ui/specs/VirtualList/VirtualList/onScroll/VirtualListOnScroll-specs.js: -------------------------------------------------------------------------------- 1 | const Page = require('../VirtualListPage'); 2 | const {expectFocusedItem} = require('../../VirtualList-utils'); 3 | 4 | describe('Item Animates', function () { 5 | beforeEach(async function () { 6 | await Page.open(); 7 | }); 8 | 9 | it('should animate Items via Page Down', async function () { 10 | // Position the focus on the first item('Item 00') 11 | await (await Page.item(0)).moveTo(); 12 | await expectFocusedItem(0); 13 | // Press Page Down 2 times. 14 | // Verify: The list Scrolls Up page by page. 15 | await Page.checkScrollbyPagekey('down'); 16 | await Page.checkScrollbyPagekey('down'); 17 | // Press Page Up 2 times 18 | // Verify: The list Scrolls Up page by page. 19 | await Page.checkScrollbyPagekey('up'); 20 | await Page.checkScrollbyPagekey('up'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /tests/ui/wdio.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/ui-test-utils/ui/wdio.conf.js'); 2 | -------------------------------------------------------------------------------- /tests/ui/wdio.docker.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/ui-test-utils/ui/wdio.docker.conf.js'); 2 | -------------------------------------------------------------------------------- /tests/ui/wdio.tv.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@enact/ui-test-utils/ui/wdio.tv.conf.js'); 2 | -------------------------------------------------------------------------------- /useScroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "useScroll.js" 3 | } 4 | -------------------------------------------------------------------------------- /useScroll/useThemeScrollContentHandle.js: -------------------------------------------------------------------------------- 1 | import {useRef} from 'react'; 2 | 3 | const useThemeScrollContentHandle = () => { 4 | // Mutable value 5 | 6 | const themeScrollContentHandle = useRef({ 7 | calculatePositionOnFocus: null, 8 | focusByIndex: null, 9 | focusOnNode: null, 10 | getScrollBounds: null, 11 | pauseSpotlight: null, 12 | setContainerDisabled: null, 13 | setLastFocusedNode: null, 14 | shouldPreventScrollByFocus: null 15 | }); 16 | 17 | // Functions 18 | 19 | const setThemeScrollContentHandle = (handle) => { 20 | themeScrollContentHandle.current = handle; 21 | }; 22 | 23 | // Return 24 | 25 | return [themeScrollContentHandle, setThemeScrollContentHandle]; 26 | }; 27 | 28 | export { 29 | useThemeScrollContentHandle 30 | }; 31 | --------------------------------------------------------------------------------