### Start Local Server for Test Results

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Start a local server to view the sample app with parameters that produced test outputs. This requires the 'serve' command to be installed globally.

```bash
serve tests/screenshot/dist
```

--------------------------------

### Serve Test Application

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Start a local server to inspect the built testing applications. Ensure 'serve' is installed globally.

```bash
serve tests/ui/dist
```

--------------------------------

### React-Redux Setup with Hooks

Source: https://github.com/enactjs/enact/blob/master/docs/redux/redux-intro.md

This example demonstrates a complete setup for a React application using Redux Toolkit and react-redux. It includes configuring the store, defining a reducer slice, and creating a component that uses useSelector to read state and useDispatch to dispatch actions. The Provider component makes the store available to the entire application.

```javascript
import {configureStore, createSlice} from '@reduxjs/toolkit';
import {useCallback} from 'react';
import {createRoot} from 'react-dom/client';
import {Provider, useDispatch, useSelector} from 'react-redux';

// reducer
const initialState = {counter: 0};
const counterReducer = createSlice({
	name: 'counterReducer',
	initialState,
	reducers: {
		increment: (state) => {
			return {counter: state.counter + 1};
		}
	}
});

// store
const store = configureStore({
	reducer: counterReducer.reducer,
	initialState
});

// counter component
const Counter = () => {
	const value = useSelector((state) => state.counter);
	const dispatch = useDispatch();
	const {increment} = counterReducer.actions;

	const incrementHandler = useCallback(() => {
		dispatch(increment());
	}, [dispatch, increment]);

	return (
		<p>
			Clicked: {value} times <button onClick={incrementHandler}>+</button>
		</p>
	);
};

const App = () => {
	return <Counter />;
};

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
	<Provider store={store}>
		<App />
	</Provider>
);

```

--------------------------------

### Clone and Bootstrap Enact

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/building-enact-locally.md

Clone the Enact repository, install dependencies, and bootstrap the project using Lerna. This is the initial setup for local development.

```shell
# clone the repo!
git clone git@github.com:enactjs/enact.git
# move in
cd enact
# we're using git flow so develop is our working branch
git checkout develop
# install lerna
npm install
# run the lerna bootstrap command (proxied by an npm script)
npm run bootstrap
# wait a while … installing :allthethings:
```

--------------------------------

### Clone Docs Repository and Install Dependencies

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/documentation.md

Clone the Enact documentation repository, navigate to the directory, and install the necessary npm packages.

```bash
git clone git@github.com:enactjs/docs.git
cd docs
npm install
```

--------------------------------

### Install @enact/core

Source: https://github.com/enactjs/enact/blob/master/packages/core/README.md

Install the @enact/core package using npm.

```bash
npm install --save @enact/core
```

--------------------------------

### Module Documentation with Exports and Example

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/documentation.md

Document a module using the @module tag, prefixing the name with the package. Use @exports for each exported item and @example for a usage demonstration.

```js
/**
 * A component for instantiating a section of content with a title.
 *
 * @example
 * <Heading spacing="none">
 *   A Content Section Heading
 * </Heading>
 *
 * @module ui/Heading
 * @exports Heading
 * @exports HeadingBase
 * @exports HeadingDecorator
 */
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Clone the Sandstone repository and install its dependencies to set up the testing environment.

```shell
git clone git@github.com:enactjs/sandstone.git
cd sandstone
git checkout develop
npm install
```

--------------------------------

### Basic Spotlight Component Setup

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Demonstrates how to create a basic spottable component and wrap it with SpotlightRootDecorator for app-wide focus management.

```javascript
import kind from '@enact/core/kind';
import SpotlightRootDecorator from '@enact/spotlight/SpotlightRootDecorator';
import Spottable from '@enact/spotlight/Spottable';

const SpottableComponent = Spottable(kind({
	name: 'SpottableComponent',
	render: (props) => {
		return (
			<div {...props} />
		);
	}
}));

const App = SpotlightRootDecorator(kind({
	name: 'SpotlightRootDecorator',
	render: (props) => {
		return (
			<SpottableComponent {...props} />
		);
	}
}));
```

--------------------------------

### Install Enact Theme Template

Source: https://github.com/enactjs/enact/blob/master/docs/theming.md

Install the Enact theme template using the Enact CLI. This command fetches the template from NPM or a git URI.

```bash
enact template install @enact/template-theme
```

--------------------------------

### Install @enact/ui Package

Source: https://github.com/enactjs/enact/blob/master/packages/ui/README.md

Install the @enact/ui package using npm.

```bash
npm install --save @enact/ui
```

--------------------------------

### Install App Dependencies and Link Enact

Source: https://github.com/enactjs/enact/wiki/Home

From your application's directory, install its dependencies and then link the locally developed Enact modules. This ensures your app uses the correct local Enact build.

```shell
npm install
enact link
```

--------------------------------

### Install @enact/webos

Source: https://github.com/enactjs/enact/blob/master/packages/webos/README.md

Use this command to install the @enact/webos package as a dependency for your project.

```bash
npm install --save @enact/webos
```

--------------------------------

### Bootstrap Enact Mono-repo

Source: https://github.com/enactjs/enact/blob/master/README.md

Use this command to set up the mono-repo for local framework development. It installs and links package dependencies.

```bash
npm run bootstrap
```

--------------------------------

### Customized Button Component Example

Source: https://github.com/enactjs/enact/blob/master/docs/theming.md

A complete example of a customized Button component, demonstrating CSS module import, `kind()` configuration with `publicClassNames`, and forwarding the `css` prop to a UI component.

```javascript
import kind from '@enact/core/kind';
import UiButton from '@enact/ui/Button';

import componentCss from './Button.module.less';

const Button = kind({
	name: 'CustomizedButton',

	styles: {
		css: componentCss,
		className: 'button',
		publicClassNames: ['button', 'bg', 'large', 'selected', 'small']
	},

	render: ({children, css, ...rest}) => (
		<UiButton {...rest} css={css}>{children}</UiButton>
	)
});

export default Button;
```

--------------------------------

### Install ilib for @enact/i18n

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enact/migrating-to-enact-3.md

Install the 'ilib' package as a dependency for applications using @enact/i18n. This is also required for themes or modules that depend on @enact/i18n.

```bash
npm install ilib@^14.4.0 --save
```

--------------------------------

### Enyo Fittables Example

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrate-fittables.md

Demonstrates a simple usage of Enyo's FittableColumnsLayout, where one child component is designated to 'fit' the available space.

```javascript
... 
components: [
	{name: 'fittableColumn', layoutKind: FittableColumnsLayout, components: [
		{style: 'width: 5em;'}, 
		{name: 'fitter', fit: true},
		{style: 'width: 5em;'}
	]}
]
...
```

--------------------------------

### Install iLib Dependency

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Install the iLib library as a dependency in your application using npm. This is required to use the i18n module.

```bash
npm install ilib@^14.2.0
```

--------------------------------

### Create a UI Test Spec

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Example of a test specification for the Button component using @enact/ui-test-utils. It includes setup and a test case for hover focus.

```javascript
const Page = require('@enact/ui-test-utils/utils');

describe('Button', function () {

	beforeEach(async function () {
		await Page.open();
	});
    
    const {buttonDefault} = Page.components;


describe('pointer', function () {
		it('should focus first when hovered', async function () {
			await buttonDefault.hover();
			expect(await buttonDefault.self.isFocused()).to.be.true();
		});
	});
});
```

--------------------------------

### Vanilla Redux Counter Example

Source: https://github.com/enactjs/enact/blob/master/docs/redux/redux-intro.md

Demonstrates a basic Redux counter using vanilla JavaScript. It sets up a store, a reducer, and subscribes to state changes to update the DOM. Actions are dispatched on click events.

```javascript
import {createStore} from 'redux';

// reducer
function counter (state = 0, action) {
	sswitch (action.type) {
		case 'INCREMENT':
			return state + 1;
		default:
			return state;
	}
}

const store = createStore(counter);
function render () {
	document.body.innerText = store.getState();
}

store.subscribe(render);
render();

document.addEventListener('click', () => {
	// dispatch 'INCREMENT` action on click
	store.dispatch({type: 'INCREMENT'});
});
```

--------------------------------

### Install webOS TV Alias for ilib

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enact/migrating-to-enact-3.md

Optionally install a webOS TV-specific alias for 'ilib' for local development. This provides webOS-specific locale data and is supported in npm version 6.9.0 or greater.

```bash
npm install ilib@ilib-webos-tv@^14.4.0-webostv.1 --save
```

--------------------------------

### Component Override Example

Source: https://github.com/enactjs/enact/blob/master/docs/theming.md

Illustrates how to use `ComponentOverride` to allow themes to provide custom components for base elements like buttons and icons.

```javascript
import ComponentOverride from '@enact/ui/ComponentOverride';

...
	defaultProps: {
		buttonComponent: 'div',
		iconComponent: 'span'
	},
...
	render: ({buttonComponent, children, css, icon, iconComponent: Icon, size, ...rest}) => (
		<ComponentOverride
			{...rest}
			component={buttonComponent}
			size={size}
			minWidth={false}
		>
			<Icon size={size} className={css.icon}>{icon}</Icon>
			{children}
		</ComponentOverride>
	)
```

--------------------------------

### Clone and Bootstrap Enact Repository

Source: https://github.com/enactjs/enact/wiki/Home

Clone the Enact repository, checkout the develop branch, install lerna, and bootstrap the project. This process installs all necessary dependencies for Enact development.

```shell
# clone the repo!
git clone git@github.com:enyojs/enact.git
# move in
cd enact
# we're using git flow so develop is our working branch
git checkout develop
# install lerna
npm install
# run the lerna bootstrap command (proxied by an npm script)
npm run bootstrap
# wait a while … installing enyo-config, react, ... :allthethings:
```

--------------------------------

### Install @enact/i18n Package

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/README.md

Install the @enact/i18n package using npm to add internationalization support to your project.

```bash
npm install --save @enact/i18n
```

--------------------------------

### Redux Provider Setup

Source: https://github.com/enactjs/enact/blob/master/docs/redux/redux-async.md

Sets up the Redux Provider to make the store available to the entire React application. Ensure the store is configured with necessary middleware.

```javascript
import {createRoot} from 'react-dom/client';
import {Provider} from 'react-redux';

import App from './App';
import store from './store';

let appElement = () => (
	<Provider store={store}>
		<App />
	</Provider>
);

createRoot(document.getElementById('root')).render(appElement);
```

--------------------------------

### Locale-Specific CSS Example

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/index.md

Shows how to use locale-specific CSS classes, such as '.enact-locale-right-to-left', to apply styles based on locale orientation. This example uses LESS and CSS modules.

```css
	:global(.enact-locale-right-to-left) & {
		flex-direction: row-reverse;
	}

```

--------------------------------

### Create a UI Test App View

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Example of a React component view for testing a Button component. It uses ThemeDecorator and renders a Button with an ID.

```javascript
import Button from '../../../../Button';
import ThemeDecorator from '../../../../ThemeDecorator';

const app = (props) => <div {...props}>
	<div>
		<Button
			id="button"
		>
			Default Button
		</Button>
	</div>
</div>;

export default ThemeDecorator(app);
```

--------------------------------

### Example DCO Sign-off

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/dco.md

This is an example of how to format a Developer Certificate of Origin sign-off for contributions to the Enact Project.

```text
Enact-DCO-1.0-Signed-off-by: Joe Smith <joe@myco.com>
```

--------------------------------

### Enyo Button Configuration

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrating-enyo-apps.md

Example of configuring a Moonstone Button in Enyo using its JSON-like syntax.

```json
{
  name: 'MyButton',
  kind: Button,
  small: true,
  content: 'Click Me!'
}
```

--------------------------------

### Launch Sampler with Built-in Server

Source: https://github.com/enactjs/enact/blob/master/packages/sampler/README.md

Launches the Enact Sampler using its built-in web server. This command starts a development server, typically accessible at http://localhost:8080/.

```bash
npm run serve
```

--------------------------------

### Create New Theme with Specific Skin

Source: https://github.com/enactjs/enact/blob/master/docs/theming.md

Generate a new Enact theme project and specify a particular skin (e.g., 'proton') to be used as the starting point.

```bash
enact create -t theme uranium --skin proton
```

--------------------------------

### Bootstrap Enact Mono-repo for Global Usage

Source: https://github.com/enactjs/enact/blob/master/README.md

Use this command to install and set up package dependencies for global usage on a system. It will npm link packages into global NPM userspace.

```bash
npm run bootstrap-link
```

--------------------------------

### Enyo Getters and Setters

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrating-enyo-apps.md

Demonstrates Enyo's generic `get` and `set` methods for component properties.

```js
...
var bar = '';
MyComponent.set('foo', 'bar');
bar = MyComponent.get('foo');  // bar === "bar"
...
```

--------------------------------

### Clean and reinstall dependencies

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enact/migrating-to-enact-5.md

Remove the npm-shrinkwrap.json file and reinstall dependencies to ensure a clean state. Run 'npm install' followed by 'npm shrinkwrap' to update the lock file.

```shell
$rm -rf npm_shrinkwrap.json
$npm install
$npm shrinkwrap
```

--------------------------------

### Link All Enact Submodules

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/building-enact-locally.md

After bootstrapping, use this command to link all Enact submodules. This is necessary to use the local Enact install with your apps or theme libraries.

```shell
npm run link-all
```

--------------------------------

### Bootstrap Enact in App

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/building-enact-locally.md

The Enact CLI provides a convenient command to install dependencies and link Enact packages in one step from within your app or theme library directory.

```shell
# from within your app/our theme libraries directory
enact bootstrap
```

--------------------------------

### LS2Request Thunk Action Creator

Source: https://github.com/enactjs/enact/blob/master/docs/redux/redux-async.md

An example of a thunk action creator that uses `LS2Request` to fetch system settings. It dispatches actions on success and allows for optional pre-fetch actions.

```javascript
import LS2Request from '@enact/webos/LS2Request';
// function returning function!
export const getSystemSettings = params => dispatch => {
	// possible to dispatch an action at the start of fetching
	// dispatch({type: 'FETCH_SYSETEM_SETTINGS'});
	return new LS2Request().send({
		service: 'luna://com.webos.settingsservice/',
		method: 'getSystemSettings',
		parameters: params,
		onSuccess: (res) => {
			// dispatches action on success callback with payload
			dispatch(receiveSystemSettings(res));
		}
	});
};
```

--------------------------------

### Component Class Level Documentation

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/documentation.md

Document a component with @class, @memberof, and @extends/@mixes tags. Use @ui for visible controls and @public for exported components. The usage example is not runnable.

```js
/**
 * An icon component with a label without any behaviors applied to it.
 *
 * Usage:
 * ```
 * <LabeledIcon icon="star" labelPosition="after">
 *   Favorite
 * </LabeledIcon>
 * ```
 *
 * @class LabeledIcon
 * @memberof ui/LabeledIcon
 * @extends ui/LabeledIcon.LabeledIconBase
 * @mixes ui/LabeledIcon.LabeledIconDecorator
 * @omit componentRef
 * @ui
 * @public
 */
```

--------------------------------

### Test a React Component with React Testing Library

Source: https://github.com/enactjs/enact/blob/master/docs/testing-components/unit-testing/index.md

Render a React component and assert its content using React Testing Library. This example shows how to test if a component renders specific text.

```javascript
const Text = (props) => {
	return <p>{props.content}</p>;
}

test('Should contain text', () => {
	render(
		<Text content='sample' />
	);

	const textElement = screen.queryByText('sample');

	expect(textElement).toBeInTheDocument();
});
```

--------------------------------

### Basic Spotlight Usage

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/README.md

Demonstrates how to integrate Spotlight into an Enact application. Import `kind`, `SpotlightRootDecorator`, and `Spottable`. Use `Spottable` to make components focusable and `SpotlightRootDecorator` to enable 5-way navigation for the application.

```javascript
import kind from '@enact/core/kind';
import SpotlightRootDecorator from '@enact/spotlight/SpotlightRootDecorator'
import Spottable from '@enact/spotlight/Spottable'

const MySpottableComponent = Spottable('div');

const MyApp = kind({
	name: 'MyApp',
	render: () => (<MySpottableComponent>Hello, Enact!</MySpottableComponent>)
});
const MySpotlightApp = SpotlightRootDecorator(MyApp);

export default MySpotlightApp;
```

--------------------------------

### Listen for webOS Launch Event

Source: https://github.com/enactjs/enact/blob/master/packages/webos/docs/webos-features.md

Use the global dispatcher's on() method to listen for the 'webOSLaunch' event. The default event listener target is document.

```javascript
import {off, on} from '@enact/core/dispatcher';
...
const handleLaunch = () => {
  console.log('APP LAUNCH');
};
on('webOSLaunch', handleLaunch, document);
...
```

--------------------------------

### Report Application Launch Performance on webOS

Source: https://github.com/enactjs/enact/blob/master/docs/performance.md

Use this command in the webOS terminal to generate a performance report detailing application launch times and process events. This helps identify bottlenecks during app startup.

```bash
pmctl perflog-report
```

--------------------------------

### Get Time Zone Offset

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Create a `TimeZone` instance with an IANA ID and use it to get the offset for a specific date. The offset is returned as an object with hours and minutes.

```javascript
import TimeZone from 'ilib/lib/TimeZone';
...
const tz = new TimeZone({
	id: "America/Los_Angeles"
});
const offset = tz.getOffset(dateFactory());
```

--------------------------------

### Documenting Added Components

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/changelogs.md

Use this format to document the addition of new components. Ensure component names include the library name.

```markdown
* `ui/NewComponent` Component
```

--------------------------------

### Initialize Date Formatter with Default Options

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Create a `DateFmt` instance with default options to format dates according to the system's locale. The `format()` method can then be used with a date object.

```javascript
import DateFmt from 'ilib/lib/DateFmt';
...
const fmt = new DateFmt();
const d = fmt.format(date);
```

--------------------------------

### Isomorphic Production Build

Source: https://github.com/enactjs/enact/blob/master/docs/performance.md

Create a production build with isomorphic support. This flag generates a static HTML representation of the initial page load, improving perceived performance for users.

```bash
enact pack --production --isomorphic
```

--------------------------------

### Directory Structure for Custom Skin

Source: https://github.com/enactjs/enact/blob/master/docs/creating-components.md

Place your `custom_skin.css` file under the `customizations` folder within the `dist` directory of your build result.

```none
my-app/
  README.md
  .gitignore
  package.json
  dist/
    customizations/
      custom_skin.css
    main.css
    main.js
    ...
  node_modules/
  src/
  resources/
  webos-meta/

```

--------------------------------

### Import Spotlight

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Import the Spotlight module into your application to begin using its API for navigation event management.

```javascript
import Spotlight from '@enact/spotlight';

```

--------------------------------

### Accessing iLib DateFmt

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Import and instantiate DateFmt from 'ilib/lib/DateFmt' to format dates. Configure with options like date format, length, timezone, and native usage.

```javascript
import DateFmt from 'ilib/lib/DateFmt';

const formatter = new DateFmt({
	date: 'dmwy',
	length: 'full',
	timezone: 'local',
	useNative: false
});
```

--------------------------------

### Applying App-Wide Focus Class

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Demonstrates how to apply a custom CSS class for focus effects globally using `SpotlightRootDecorator` with a configuration object.

```javascript
import css from './App.module.less';
import ApplicationView from './ApplicationView';
import SpotlightRootDecorator from '@enact/spotlight/SpotlightRootDecorator';

const App = SpotlightRootDecorator({focusEffectClass: css.focusRing}, ApplicationView);
```

--------------------------------

### Using Configurable HOCs

Source: https://github.com/enactjs/enact/blob/master/docs/creating-components.md

Demonstrates different ways to apply a configurable HOC like `Toggleable`. You can provide configuration and component together, or use default configurations.

```javascript
const ToggleableWidget = Toggleable({toggle: 'onClick', prop: 'selected'}, Widget);
```

```javascript
const ToggleableWidget = Toggleable(Widget);
```

```javascript
const ToggleDecorator = Toggleable({toggle: 'onClick', prop: 'selected'});
const ToggleableWidget = ToggleDecorator(Widget);
const ToggleableFrob = ToggleDecorator(Frob);
```

--------------------------------

### Enyo Published Properties with Getters/Setters

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrating-enyo-apps.md

Shows Enyo's `published` properties and their corresponding `get[Property]` and `set[Property]` methods.

```js
...
name: 'MyControl',
kind: enyo.Control,
published: {
	foo: 'bar'
}
...
var bar = '';
MyControl.setFoo('nobar');
bar = MyControl.getFoo();  // bar === "nobar"
...
```

--------------------------------

### Enact Property Handling

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrating-enyo-apps.md

Illustrates how properties are set in Enact by passing them to the rendered component. 'Get' functionality is replaced by data flow principles.

```js
...
import PropTypes from 'prop-types';
...
const MyComponent = kind({
	name: 'MyComponent',
	propTypes: {
		foo: PropTypes.string
	},
	defaultProps: {
		foo: 'bar'
	},
	render: ({foo}) => (
		<div>{foo}</div>
	)
});
...
// (another component that renders an instance of MyComponent)
...
	render: () => (
		<MyComponent foo="nobar" />
	)

```

--------------------------------

### Initialize ResBundle for Translations

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Import and create a new ResBundle instance to manage translated strings. Specify the locale for the resource bundle.

```javascript
import ResBundle from 'ilib/lib/ResBundle';
	...
	const rb = new ResBundle({locale: "ko-KR"});
```

--------------------------------

### JSON Translation File Format

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/index.md

Example of the JSON format required for locale-specific translation files. This structure maps source strings to their translated equivalents.

```json
{
	"source string1": "translated string1",
	"source string2": "translated string2",
	...
}

```

--------------------------------

### Example Commit Message with DCO Sign-off

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/index.md

Include the issue key and the DCO sign-off line in your commit or pull request comments for bug fixes.

```text
ENACT-123: Fixed girdle-spring physics on the encabulator scrollbar.
Enact-DCO-1.0-Signed-off-by: Joe Smith <joe@myco.com>
```

--------------------------------

### Use Core Enact Components in CRA

Source: https://github.com/enactjs/enact/blob/master/docs/interoperability.md

Integrate core Enact features and un-styled components like `ui/Button` into a create-react-app project after installing Enact dependencies.

```javascript
import kind from '@enact/core/kind';
import Button from '@enact/ui/Button';

const App = kind({
	name: 'App',

	render: (props) => (
		<Button>Hello Enact!</Button>
	)
});
```

--------------------------------

### Passing Locale Prop to App Component

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/updating-locale.md

Example of how to pass the `locale` prop to the `App` component. This is useful for controlling the locale from a parent component or through state management.

```javascript
const AppWrapped = (props) => (
	<App locale={props.locale}/>
)

```

--------------------------------

### Configure Spottable HOC with Parameters

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Pass configuration parameters as an object to the Spottable HOC. These parameters should be static throughout the control's lifecycle.

```javascript
import Spottable from '@enact/spotlight/Spottable';
// spottable control that doesn't emit `onClick` events when pressing the enter key
const Control = Spottable({emulateMouse: false}, 'div');
```

--------------------------------

### iLib Manifest Configuration

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/index.md

Shows how to configure the 'resources/ilibmanifest.json' file to include locale-specific translation files. This is necessary for iLib to find and load translations.

```json
{
	"files": ["en/US/strings.json", "ja/JP/strings.json", ...]
}

```

--------------------------------

### Create New Theme with Template

Source: https://github.com/enactjs/enact/blob/master/docs/theming.md

Generate a new Enact theme project using the 'theme' template. Specify the desired theme name (e.g., 'uranium').

```bash
enact create -t theme uranium
```

--------------------------------

### Documenting Changed Components

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/changelogs.md

Use this format to highlight changes to existing components, properties, or features. Specify the component and the nature of the change.

```markdown
* `ui/ChangedComponent` to no longer accept the `invalid` property
```

--------------------------------

### Build App with Custom Skin Support

Source: https://github.com/enactjs/enact/blob/master/docs/creating-components.md

Build your Enact application with the `--custom-skin` option enabled to allow for runtime skin customization. Ensure Enact CLI is version 5.1.0 or later.

```bash
enact pack --custom-skin

```

--------------------------------

### Automatic Batching Example

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enact/migrating-to-enact-4.5.md

Illustrates how React 18 automatically batches updates from various sources like timeouts, promises, and event handlers. This behavior is enabled by default with createRoot.

```javascript
// After React 18 updates inside of timeouts, promises,
// native event handlers or any other event are batched.

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);
```

--------------------------------

### Configure Spotlight Container Decorator

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Configure container behavior with options like `enterTo` and `leaveFor` to manage focus entry and exit points. `restrict` can limit focus within the container.

```javascript
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import Component from './Component';
const Container = SpotlightContainerDecorator({enterTo: 'last-focused', leaveFor: {left:'', right:''}, restrict: 'self-only'}, Component);
```

--------------------------------

### Convert Date to Julian Day and Create Hebrew Date

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Get the Julian Day number from a date object and use it to create a new date in a different calendar system, such as Hebrew.

```javascript
const now = dateFactory();
// now.year is currently 2013
const jd = now.getJulianDay();
const hebrewDate = new HebrewDate({julianday: jd});
// hebrewDate.year is 5773
```

--------------------------------

### Format Percentages with iLib

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Format numbers as percentages using the 'percentage' style. You can control the maximum number of fraction digits displayed.

```javascript
const fmt = new NumFmt({
		style: "percentage",
		maxFractionDigits: 2,
		locale: "tr-TR"
	});
	const percentString = fmt.format(0.893453);
```

--------------------------------

### Production Build Command

Source: https://github.com/enactjs/enact/blob/master/docs/performance.md

Generate a production-ready build of your Enact application. This command minifies and uglifies your code, bundling it into optimized files for deployment.

```bash
enact pack --production
```

--------------------------------

### Test a Simple JavaScript Function with Jest

Source: https://github.com/enactjs/enact/blob/master/docs/testing-components/unit-testing/index.md

Use Jest's `test` and `expect` to assert the output of a simple JavaScript function. This example demonstrates a basic unit test for an `add` function.

```javascript
const add = (numA, numB) => {
	return numA + numB;
}
```

```javascript
test('Should add the two arguments together', () => {
	const expected = 3;
	const actual = add(1,2)

	expect(actual).toBe(expected);
});
```

--------------------------------

### Redux Store Configuration with Redux Toolkit

Source: https://github.com/enactjs/enact/blob/master/docs/redux/redux-async.md

Configures the Redux store using Redux Toolkit's `configureStore`, which includes `redux-thunk` middleware by default. This setup is essential for handling asynchronous actions.

```javascript
import {configureStore} from '@reduxjs/toolkit';
import rootSlice from '../reducers';

const initialState = {};
const store = configureStore({
	reducer: rootSlice.reducer,
	initialState
});

export default store;
```

--------------------------------

### Configure Date Formatter with Specific Options

Source: https://github.com/enactjs/enact/blob/master/packages/i18n/docs/ilib.md

Instantiate `DateFmt` with custom options to control locale, date/time type, date components, and time zone for formatting.

```javascript
const fmt = new DateFmt({
	locale: "tr-TR",
	type: "date", date: "dmy", timezone: "Europe/Istanbul"
});
```

--------------------------------

### Upgrading @enact/cli

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enact/migrating-to-enact-4.5.md

Update the Enact CLI to version 5.0.0 or newer to leverage updated dependencies like Webpack 5, ESLint 8, and React 18. This command installs the latest version globally.

```sh
npm install -g @enact/cli
```

--------------------------------

### Enyo Data Management Pattern

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrating-enyo-apps.md

Illustrates the traditional Enyo pattern for managing data using `enyo.Model` and `enyo.Collection`, including setting up components, views, and bindings.

```javascript
// MyModel.js
...
name: 'MyModel',
kind: enyo.Model,
...
// MyCollection.js
...
name: 'MyCollection',
kind: enyo.Collection,
model: MyModel,
...
// App.js
...
components: [
	{name: 'allData', kind: MyCollection, public: true}
],
view: MainView
...
// MainView.js
...
components: [
	{name: 'list', kind: enyo.DataList, ...}
],
bindings: [
	{from: 'app.allData', to: '$.list.collection'}
],
...
```

--------------------------------

### Project Directory Structure

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrating-enyo-apps.md

A typical project directory structure for an Enact application, highlighting key directories like `assets`, `resources`, `src`, and `webos-meta`.

```bash
project_root/   (package.json lives here)
  assets/       (images and other non-source content)
  resources/    (ilibmanifest.json lives here)
  src/          (this directory may be important)
  webos-meta/   (helpful companion files for packaging webOS applications)
```

--------------------------------

### Spotlight.resume()

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Resumes Spotlight navigation after it has been paused.

```APIDOC
## Spotlight.resume()

### Description
Resumes Spotlight navigation.

### Method
Spotlight.resume()
```

--------------------------------

### Enact Flexbox Layout Example

Source: https://github.com/enactjs/enact/blob/master/docs/migration/enyo/migrate-fittables.md

Illustrates how to create a layout similar to Enyo's FittableColumnsLayout using Enact and CSS Flexbox. Inline styles are used for simplicity, but CSS classes are recommended for production.

```javascript
<div style={{display: "flex"}}>
	<div style="width: 5em;">A</div>
	<div style={{flexGrow: 1}}>B</div>
	<div style="width: 5em;">C</div>
</div>
```

--------------------------------

### Parse Enact Documentation

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/documentation.md

Run the `npm run parse` command to check for any documentation parsing warnings. Ensure the command executes without errors like 'Too many doclets'.

```bash
npm run parse
```

--------------------------------

### Customized UI Button Component

Source: https://github.com/enactjs/enact/blob/master/docs/theming.md

Creates a customized button by wrapping an unstyled UI component and exposing specific CSS classes for theming. This example restricts exported classes to 'button', 'bg', 'large', 'selected', and 'small'.

```jsx
import kind from '@enact/core/kind';
import UiButton from '@enact/ui/Button';

import componentCss from './Button.module.less';

const Button = kind({
	name: 'CustomizedButton',

	styles: {
		css: componentCss,
		className: 'button',
		publicClassNames: ['button', 'bg', 'large', 'selected', 'small']
	},

	render: ({children, css, ...rest}) => (
		<UiButton {...rest} css={css}>{children}</UiButton>
	)
});

export default Button;

```

--------------------------------

### React Redux Counter Example

Source: https://github.com/enactjs/enact/blob/master/docs/redux/redux-intro.md

Illustrates a Redux counter integrated with React using react-redux. It utilizes hooks like `useSelector` and `useDispatch` to manage state and dispatch actions within a React component. The store is provided via the `Provider` component.

```javascript
import {useCallback} from 'react';
import {createRoot} from 'react-dom/client';
import {Provider, useDispatch, useSelector} from 'react-redux';
import {createStore} from 'redux';

// reducer
const counterReducer = (state = {counter: 0}, action) => {
	sswitch (action.type) {
		case 'INCREMENT':
			return {counter: state.counter + 1};
		default:
			return state;
	}
};

// store
const store = createStore(counterReducer);

// counter component
const Counter = () => {
	const value = useSelector((state) => state.counter);
	const dispatch = useDispatch();

	const incrementHandler = useCallback(() => {
		dispatch({type: 'INCREMENT'});
	}, [dispatch]);

	return (
		<p>
			Clicked: {value} times <button onClick={incrementHandler}>+</button>
		</p>
	);
};

const App = () => <Counter />;

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
	<Provider store={store}>
		<App />
	</Provider>
);
```

--------------------------------

### Customizing Focus Appearance with CSS

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Shows how to style focused elements using the `data-spotlight-focused` attribute selector in LESS.

```less
// MyComponent.module.less
.myComponent {
    &[data-spotlight-focused] {
        outline: 3px solid var(--my-focus-color);
    }
}
```

--------------------------------

### Open New Screenshot Files

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Open the HTML file containing links to newly generated screenshots after a test run. This is useful for reviewing visual changes introduced by new or modified tests.

```bash
open tests/screenshot/dist/newFiles.html
```

--------------------------------

### Component Rendering with render()

Source: https://github.com/enactjs/enact/blob/master/docs/testing-components/test-driven-development/index.md

Use the render method to render a React component for testing. It accepts the component and optional configuration options.

```javascript
const {...results} = render(<Component {...props} />, {...options});
```

--------------------------------

### Initialize Spotlight with SpotlightRootDecorator

Source: https://github.com/enactjs/enact/blob/master/packages/spotlight/docs/index.md

Wrap your application view with SpotlightRootDecorator to initialize Spotlight and manage navigation event listeners. Sandstone applications include this by default.

```javascript
import ApplicationView from './ApplicationView';
import SpotlightRootDecorator from '@enact/spotlight/SpotlightRootDecorator';
const App = SpotlightRootDecorator(ApplicationView);
```

--------------------------------

### Link Enact Dependencies in App

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/building-enact-locally.md

From within your application or theme library directory, run this command to link the local Enact dependencies. This makes your local Enact build available to your project.

```shell
# from within your app/our theme libraries directory
enact link
```

--------------------------------

### Run Specific Screenshot Tests by Component

Source: https://github.com/enactjs/enact/blob/master/docs/contributing/adding-automated-ui-tests.md

Run screenshot tests for specific component(s) by providing a pattern. This allows for targeted testing of individual components or groups of components.

```bash
npm run test-ss -- --component <pattern>
```

--------------------------------

### Run Unit Tests

Source: https://github.com/enactjs/enact/blob/master/packages/core/README.md

Execute unit tests using Jest. Ensure tests are implemented in Testing Library.

```bash
npm test
```