### Run OverReact Redux Todo App

Source: https://github.com/workiva/over_react/blob/master/example/README.md

Navigate to the OverReact Redux Todo App directory and start the development server using `webdev serve`. Access the application via localhost:8080.

```shell
cd app/over_react_redux/todo_client/
```

```shell
webdev serve
```

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

### Running the OverReact Todo App

Source: https://github.com/workiva/over_react/blob/master/app/over_react_redux/todo_client/README.md

Commands to fetch project dependencies and start the development server for the OverReact Redux Todo application. The app will be accessible at http://localhost:8080.

```Dart
pub get
webdev serve
```

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

### Dart 2 Props/State Inheritance Example

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Demonstrates how to correctly implement inheritance for Props and State classes in Dart 2 using the `_$` prefix convention, showing both base and derived class definitions.

```dart
// super.dart
import 'package:over_react/over_react.dart';
part 'super.over_react.g.dart';

@Props()
class _$SuperProps extends UiProps { ... }
```

```dart
// super.over_react.g.dart (generated)
part of 'super.dart';

class SuperProps extends _$SuperProps ...
```

```dart
// sub.dart
import 'package:over_react/over_react.dart';
import 'super.dart';
part 'sub.over_react.g.dart';

@Props()
class _$SubProps extends SuperProps { ... }
```

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

### Install over_react Snippets for WebStorm/IntelliJ

Source: https://github.com/workiva/over_react/blob/master/snippets/README.md

Installs over_react live templates for WebStorm and IntelliJ IDEs. It fetches a snippets XML file via curl and pipes it to pbcopy for easy pasting into IDE preferences.

```bash
curl https://raw.githubusercontent.com/Workiva/over_react/master/snippets/snippets.xml | pbcopy
```

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

### Setup Command

Source: https://github.com/workiva/over_react/blob/master/tools/analyzer_plugin/playground/README.md

Executes the Dart/Flutter package manager to fetch project dependencies.

```shell
pub get
```

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

### Running OverReact Development Server

Source: https://github.com/workiva/over_react/blob/master/README.md

Command to start the development server for an OverReact application, enabling hot-reloading and serving the application.

```bash
webdev serve
```

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

### Install over_react Snippets for VS Code

Source: https://github.com/workiva/over_react/blob/master/snippets/README.md

Installs over_react snippets for Visual Studio Code. This command downloads the snippets JSON file using curl and copies it to the clipboard for pasting into a new global snippet file.

```bash
curl https://raw.githubusercontent.com/Workiva/over_react/master/snippets/snippets.json | pbcopy
```

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

### Multiple Redux Stores Setup in Dart

Source: https://github.com/workiva/over_react/blob/master/doc/over_react_redux_documentation.md

Demonstrates how to initialize and render components connected to different Redux stores using `ReduxProvider` and `connect` with custom contexts.

```dart
Store store1 = new Store<CounterState>(counterStateReducer, initialState: new CounterState(count: 0));
Store store2 = new Store<BigCounterState>(bigCounterStateReducer, initialState: new BigCounterState(bigCount: 100));

UiFactory<CounterProps> Counter = connect<CounterState, CounterProps>(
  mapStateToProps: (state) => (Counter()..count = state.count)
)(castUiFactory(_$Counter));

UiFactory<CounterProps> BigCounter = connect<BigCounterState, CounterProps>(
  mapStateToProps: (state) => (BigCounter()..count = state.bigCount),
  context: bigCounterContext,
)(castUiFactory(_$Counter));

react_dom.render(
  Dom.div()( 
    (ReduxProvider()..store = store1)(
      (ReduxProvider()
        ..store = store2
        ..context = bigCounterContext
      )(
        Dom.div()( 
          Dom.h3()('BigCounter Store2'),
          BigCounter()(
            Dom.h4()('Counter Store1'),
            Counter()(),
          ),
        ),
      ),
    ),
  ), querySelector('#content')
);
```

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

### Dart: Basic Flux Store Setup

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Demonstrates a standard Flux store implementation using the w_flux and over_react_flux libraries. It outlines the definition of actions, the structure of the store, and how to trigger updates based on actions.

```dart
import 'package:w_flux/w_flux.dart' as flux;
import 'package:over_react/over_react_flux.dart';

class FluxActions {
  final flux.Action<int> updateExample = flux.Action();
}

class ExampleStore extends flux.Store {
  FluxActions _actions;

  var _example = 0;
  int get example => _example;

  TestConnectableFluxStore(this._actions) {
    triggerOnActionV2(_actions.updateExample, _updateExample);
  }

  void _incrementAction(int newNumber) {
    _example = newNumber;
  }
}

final actions = FluxActions();
final store = ExampleStore(actions);
```

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

### Dart Props Meta Consumption Example

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Demonstrates how to consume props meta from mixins in a Dart component using `PropsMetaCollection` and `consumedProps`. It shows accessing prop keys from different mixins and the generated implementation.

```dart
@Props()
class FooProps extends UiProps with FooPropsMixin, BarPropsMixin {}

@PropsMixin()
mixin FooPropsMixin on UiProps {
  @requiredProp
  int foo;
}

@Component2()
class FooComponent extends UiComponent2<FooProps> {
  @override
  render() => [props.foo];

  @override
  get consumedProps => [
    propsMeta.forMixin(FooPropsMixin),
  ];

  test() {
    print(propsMeta.keys); // ('foo', 'bar')
    print(propsMeta.forMixin(FooPropsMixin).keys); // ('foo')
    print(propsMeta.forMixin(BarPropsMixin).keys); // ('bar')
  }
}

// Generated code
class _FooCopmonentImpl extends FooComponent {
  // ...

  @override
  PropsMetaCollection get propsMeta => const PropsMetaCollection({
    FooPropsMixin: $FooPropsMixin.meta,
    BarPropsMixin: $BarPropsMixin.meta,
  });
}
```

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

### Static Meta Field for Props Metadata

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Provides an example of the generated static `meta` field on a props class, which holds metadata like fields and keys. This replaces the older `$Props()` and `$PropKeys()` utilities for builder compatibility.

```dart
// generated by builder
class FooProps extends _$FooProps with _$FooPropsAccessorsMixin {
  static PropsMeta meta = _$metaForFooProps;
}

const PropsMeta _$metaForFooFooProps = const PropsMeta(
  fields: ..., 
  keys: ...,
);
```

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

### Dart: Basic UiFunction Component with UiProps

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

A simple example of defining a functional component using `uiFunction` and `UiProps` in Dart. It demonstrates how to access props like `id` within the component.

```dart
UiFactory<UiProps> Foo = uiFunction(
  (props) {
    return 'id: ${props.id}'; 
  }, 
  UiFactoryConfig(
    displayName: 'Foo',
  ),
);
```

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

### StatefulComponent2 with Lifecycle Methods

Source: https://github.com/workiva/over_react/blob/master/README.md

Provides an example of a stateful component (UiStatefulComponent2) demonstrating prop and state manipulation, default props, initial state, and lifecycle methods like componentDidUpdate.

```dart
mixin FooProps on UiProps {
  late String color;
  Function()? onDidActivate;
  Function()? onDidDeactivate;
}
mixin FooState on UiState {
  late bool isActive;
}

class FooComponent extends UiStatefulComponent2<FooProps, FooState> {
  @override
  Map get defaultProps => (newProps()
    ..color = '#66cc00'
  );

  @override
  Map get initialState => (newState()
    ..isActive = false
  );

  @override
  void componentDidUpdate(Map prevProps, Map prevState, [dynamic snapshot]) {
    var tPrevState = typedStateFactory(prevState);
    var tPrevProps = typedPropsFactory(prevProps);

    if (state.isActive && !tPrevState.isActive) {
      props.onDidActivate?.call();
    } else if (!state.isActive && tPrevState.isActive) {
      props.onDidDeactivate?.call();
    }
  }

  @override
  dynamic render() {
    return (Dom.div()
      ..modifyProps(addUnconsumedDomProps)
      ..style = {
        ...newStyleFromProps(props),
        'color': props.color,
        'fontWeight': state.isActive ? 'bold' : 'normal',
      }
    )(
      (Dom.button()..onClick = _handleButtonClick)('Toggle'),
      props.children,
    );
  }

  void _handleButtonClick(SyntheticMouseEvent event) {
    setState(newState()
      ..isActive = !state.isActive
    );
  }
}
```

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

### Setup ReduxProvider in Dart

Source: https://github.com/workiva/over_react/blob/master/doc/over_react_redux_documentation.md

Demonstrates how to initialize the `ReduxProvider` component to make the Redux store accessible to the entire application tree. This is a prerequisite for using Redux hooks within your React components.

```dart
import 'package:over_react/over_react_redux.dart';
import 'package:over_react/react_dom.dart' as react_dom;

main() {
  react_dom.render(
      (ReduxProvider()..store = yourReduxStoreInstance)(
        // Function components that use the hooks in this section go here.
      ),
      querySelector('#id_of_mount_node'));
}
```

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

### Setup ReduxProvider with Dart/React Components

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Shows how to integrate the Redux store into the React component tree using `ReduxProvider`. This involves instantiating the store and passing it as a prop to the `ReduxProvider` component.

```dart
import 'dart:html';

import 'package:react/react_dom.dart' as react_dom;
import 'package:over_react/over_react_redux.dart';

import './store.dart'; // Assuming store setup is here
import './components/example.dart'; // Assuming Example component is here

main() {
  // Assuming randomColorStore is an instance of the Redux store
  react_dom.render(
      (ReduxProvider()..store = randomColorStore)(
        Example()(),
      ),
      querySelector('#content'));
}
```

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

### Setup ReduxProvider for React DOM Rendering

Source: https://github.com/workiva/over_react/blob/master/doc/built_redux_to_redux.md

Demonstrates how to wrap the root React component with ReduxProvider to make the Redux store available to connected components. This is typically done in the react_dom.render() call.

```dart
import 'dart:html';

import 'package:react/react_client.dart';
import 'package:react/react_dom.dart' as react_dom;
import 'package:over_react/over_react_redux.dart';

import './store.dart';
import './components/example.dart';

main() {
    react_dom.render(
        (ReduxProvider()..store = counterStore)(
          Example()(),
        ),
        querySelector('#content'));
}
```

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

### Compiling Sass Files

Source: https://github.com/workiva/over_react/blob/master/app/over_react_redux/todo_client/README.md

Command to compile Sass files into CSS using the `w_common` package. This command compiles the Sass with an expanded output style.

```Dart
pub run w_common:compile_sass -s expanded
```

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

### Basic Function Component Syntax

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Demonstrates the fundamental syntax for creating a function component using `uiFunction`. It shows how to define props with a mixin and use `UiFactory` for component creation, inferring types from the props definition.

```dart
import 'package:over_react/over_react.dart';

part 'foo.over_react.g.dart';

UiFactory<FooProps> Foo = uiFunction(
  (props) {
    return 'foo: ${props.foo}'; 
  },
  _$FooConfig, // ignore: undefined_identifier
);

mixin FooProps on UiProps {
  String foo;
}
```

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

### Update pubspec.yaml for Dart 2 Compatibility

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Modify your package's pubspec.yaml to include a Dart SDK version range that supports both Dart 1 and Dart 2. This ensures that the correct version of over_react is installed and used depending on the Dart environment.

```yaml
environment:
  sdk: ">=1.24.3 <3.0.0"
```

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

### Run null_safety_prep Codemod

Source: https://github.com/workiva/over_react/blob/master/doc/null_safety/null_safe_migration.md

Activates the over_react_codemod package and runs the `null_safety_prep` codemod. This codemod prepares the repository by migrating OverReact-specific use cases to facilitate a smoother null safety migration.

```shell
dart pub global activate over_react_codemod
dart pub global run over_react_codemod:null_safety_prep --yes-to-all
```

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

### Bash: Over_react Codemod and Audit Commands for Upgrades

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Provides command-line instructions for upgrading over_react components. It includes steps for activating `semver_audit`, generating audit reports, and running the `boilerplate_upgrade` codemod.

```bash
pub global activate semver_audit --hosted-url=https://pub.workiva.org
```

```bash
pub global run semver_audit generate 2> semver_report.json
```

```bash
pub global run over_react_codemod boilerplate_upgrade --treat-all-components-as-private
```

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

### Dart JS Component Interop Setup with uiJsComponent

Source: https://github.com/workiva/over_react/blob/master/doc/wrapping_js_components.md

Illustrates how to use the `uiJsComponent` function to bridge JavaScript components into Dart. It requires wrapping the raw JavaScript component within a `ReactJsComponentFactoryProxy`.

```dart
UiFactory<ArbitraryComponentProps> ArbitraryComponent = uiJsComponent(
  ReactJsComponentFactoryProxy( /* JS Component*/ _jsArbitraryComponent),
  _$ArbitraryComponentConfig,
);
```

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

### Dart 2 Generated Part Inclusion

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Demonstrates the addition of a `part` directive to include generated code for Dart 2 compatibility in over_react components.

```dart
  // foo.dart;
  library foo;

  import 'package:over_react/over_react.dart';

+ part 'foo.over_react.g.dart';

  @Factory() ...
  @Props() ...
  @Component() ...
```

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

### Legacy Component: Props and Unconsumed Props

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Demonstrates the output of `props` and `copyUnconsumedProps()` in a legacy Over React component. Shows how props declared directly in the props class are consumed by default.

```dart
@Props()
class FooProps extends UiProps {
  int foo;
  int bar;
}

@Component()
class FooComponent extends UiComponent<FooProps> {
  render() {
    // {
    //   FooProps.foo: 1, 
    //   FooProps.bar: 2, 
    //   data-a-dom-prop: 3,
    //   onClick: 4,
    //   someArbitraryProp: 5,
    // }
    print(props);
    
    // {
    //   data-a-dom-prop: 3,
    //   onClick: 4,
    //   someArbitraryProp: 5,
    // } 
    print(copyUnconsumedProps());
  }
}
```

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

### Dart 2 Component Factory Initialization

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Illustrates the required change in component factory initialization for Dart 2, using `castUiFactory` to wrap the generated symbol `_$Foo`.

```dart
  @Factory()
- UiFactory<FooProps> Foo;
+ UiFactory<FooProps> Foo = castUiFactory(_$Foo);
```

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

### Dart 2 Props/State Naming Convention

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Explains the convention of prefixing Props, State, AbstractProps, and AbstractState classes with `_$` to enable builder-generated public versions in Dart 2.

```dart
  @Props()
- class FooProps extends UiProps { ... }
+ class _$FooProps extends UiProps { ... }
```

```dart
  @State()
- class FooState extends UiState { ... }
+ class _$FooState extends UiState { ... }
```

```dart
  @AbstractProps()
- class AbstractFooProps extends UiProps { ... }
+ class _$AbstractFooProps extends UiProps { ... }
```

```dart
  @AbstractState()
- class AbstractFooState extends UiState { ... }
+ class _$AbstractFooState extends UiState { ... }
```

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

### Dart UiComponent2 Base Class Update

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Illustrates the addition of the `propsMeta` getter to the `UiComponent2` base class in the over_react library, providing access to prop metadata.

```dart
class UiComponent2 ... {
  /// A collection of metadata for the prop fields in all prop mixins
  /// used by the props class of this component.
  PropsMetaCollection get propsMeta => null;
}
```

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

### Prop Nullability Options Table

Source: https://github.com/workiva/over_react/blob/master/doc/null_safety/null_safe_migration.md

Illustrates the combinations of requiredness and nullability for props, showing the resulting Dart syntax. This helps developers choose the correct declaration based on prop behavior.

```APIDOC
Prop Nullability Options:

| Required (`late`)    | Optional        | Nullable (`?`) | Non-nullable   |
|----------------------|-----------------|----------------|----------------|
| `late String? prop;` | `String? prop;` | Nullable       | N/A            |
| `late String prop;`  | N/A             | Non-nullable   | Required       |

- Optional props should generally be nullable (`String? prop;`).
- Required props can be nullable (`late String? prop;`) if explicitly set to null, or non-nullable (`late String prop;`) if never null.
```

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

### Updated Syntax: Consuming All Except Specific Mixins

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Shows how to use `propsMeta.allExceptForMixins` in the updated syntax to consume props from all mixins except a specified one, overriding the default behavior.

```dart
class FooProps = UiProps with
    FooPropsMixin 
    AProps,
    BProps,
    CProps,
    NoConsumeProps;

class FooComponent extends UiComponent<FooProps> {
  @override
  consumedProps => 
      propsMeta.allExceptForMixins({NoConsumeProps}),

  // ...
}
```

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

### Migrate to New Factory Syntax (Dart 2.9)

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Run the `dart2_9_upgrade` codemod to migrate components to the new factory syntax. This upgrade is minor, but manual intervention might be needed for edge cases.

```bash
pub global run over_react_codemod:dart2_9_upgrade
```

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

### Optional Custom Annotation Configuration

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Illustrates how to use the @Props annotation with custom parameters, such as 'keyNamespace', when specific configuration is required. This allows for opt-in custom behavior without cluttering standard component definitions.

```dart
@Props(keyNamespace: 'customNamespace.')
class _$FooProps extends BarProps {
  String foo;
}
```

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

### Dart: Higher-Order Component (HOC) Pattern

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Demonstrates creating a Higher-Order Component (HOC) in Dart using `uiFunction` and props mixins. This pattern allows wrapping other components and injecting additional props or behavior.

```dart
import 'package:over_react/over_react.dart';

part 'foo.over_react.g.dart';

mixin FooProps on UiProps {
  String foo;
}

// Example function; this can look like anything and doesn't have to 
// be declared in this file. 
UiFactory<FooProps> createFooHoc(UiFactory otherFactory) { 
  Object closureVariable;
  // ... 

  UiFactory<FooProps> FooHoc = uiFunction(
    (props) { 
      return otherFactory()(
        Dom.div()('closureVariable: ${closureVariable}'), 
        Dom.div()('prop foo: ${props.foo}'), 
      );
    },
    UiFactoryConfig(
        displayName: 'FooHoc',
        propsFactory: PropsFactory.fromUiFactory(Foo),
    ),
  );

  return FooHoc;
}
```

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

### OverReact connect Component Handling

Source: https://github.com/workiva/over_react/blob/master/doc/null_safety/null_safe_migration.md

Details strategies for managing required prop validation issues with `connect` higher-order components in OverReact, including disabling validation or migrating to hooks.

```APIDOC
connect Component Handling:

When using `connect` from `react-redux` (or similar HOCs) in OverReact, you might encounter linting or runtime errors for missing required props, even if they are correctly provided by the HOC.

Strategies:
1.  **Disable Validation**: Follow instructions in the null safety documentation to suppress required prop validation for specific props or components. The null safety migrator companion codemod often automates this for `connect` props.
2.  **Migrate to Hooks**: Refactor components to use OverReact Redux hooks (e.g., `useSelector`, `useDispatch`). Hooks access store data and dispatchers directly, avoiding the prop-passing mechanism that triggers validation issues.

Recommendation: Prefer hooks for new development due to simpler API and avoidance of prop validation concerns. For existing components, evaluate the effort of converting to functional components versus applying validation suppression.
```

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

### Run null_safety_migrator_companion Codemod

Source: https://github.com/workiva/over_react/blob/master/doc/null_safety/null_safe_migration.md

Activates the over_react_codemod package and executes the `null_safety_migrator_companion` codemod. This step adds nullability hints to state fields, callback ref types, and disables required prop validation for `connect` props.

```shell
dart pub global activate over_react_codemod
dart pub global run over_react_codemod:null_safety_migrator_companion --yes-to-all
```

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

### Generated Props Mixin Implementation

Source: https://github.com/workiva/over_react/blob/master/doc/dart2_migration.md

Illustrates the generated class structure for Props mixins when using the builder pattern. The builder generates a separate class that implements the consumer-defined mixin, providing concrete getters and setters.

```dart
@PropsMixin()
class _$FooPropsMixin {
  String foo;

  int get length => foo.length;
}

// generated by builder
class FooPropsMixin implements _$FooPropsMixin {
  String get foo => ...;
  set foo(String value) { ... };

  int get length => foo.length;
}
```

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

### Dart: Mixin-Based Props Accessor Generation (Old)

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Explains how props are declared as fields and accessor implementations are generated via mixins. This example highlights a problem where extending the user-authored class prevents inheritance of generated fields, leading to incorrect property access.

```dart
// Source
class FooProps {
  int foo;
}

// Generated
mixin $FooPropsAccessors on FooProps {
  @override  int get foo => props['foo'];
  @override  set foo(int value) => props['foo'] = value;
}

// This class is actually what's used under the hood, not FooProps.
class $FooProps = FooProps with $FooPropsAccessors;

// Example of inheritance issue:
class BarProps extends FooProps {
  String bar;
}

test() {
  // references `FooProps.foo`, not the `$FooProps.foo` getter as desired.
  BarProps().foo;
}
```

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

### UiProps Builder Pattern

Source: https://github.com/workiva/over_react/blob/master/README.md

Demonstrates using UiProps as a builder for creating component instances with fluent syntax. It shows how to set props and invoke the component with children.

```dart
mixin FooProps on UiProps {
  String? color;
}

class FooComponent extends UiComponent2<FooProps> {
  ReactElement bar() {
    // Create a UiProps instance to serve as a builder
    FooProps builder = Foo();

    // Set some prop values
    builder
      ..id = 'the_best_foo'
      ..color = '#ee2724';

    // Invoke as a function with the desired children
    // to return a new instance of the component.
    return builder('child1', 'child2');
  }

  /// Even better... do it inline! (a.k.a fluent)
  ReactElement baz() {
    return (Foo()
      ..id = 'the_best_foo'
      ..color = 'red'
    )(
      'child1',
      'child2'
    );
  }
}
```

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

### useSelector() Usage Example

Source: https://github.com/workiva/over_react/blob/master/doc/over_react_redux_documentation.md

An example of using the `useSelector` hook within a functional component to retrieve and display a piece of state from the Redux store. It assumes the component is a descendant of `ReduxProvider`.

```dart
import 'package:over_react/over_react.dart';
import 'package:over_react/over_react_redux.dart';
import 'counter_state.dart';

mixin CounterProps on UiProps {}

UiFactory<CounterProps> Counter = uiFunction(
  (props) {
    final count = useSelector<CounterState, int>((state) => state.count);

    return Dom.div()('The current count is $count');
  },
  $CounterConfig, // ignore: undefined_identifier
);
```

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

### State Model Refactor: built_redux vs Redux

Source: https://github.com/workiva/over_react/blob/master/doc/built_redux_to_redux.md

Compares the definition of state models between built_redux and Redux. The built_redux example uses an abstract class with a factory constructor, while the Redux example uses a standard Dart class with constructors for default and updated states.

```dart
// built value class
abstract class Counter implements Built<Counter, CounterBuilder> {
  int get count;
  String get customActionValue;
  String get secondCustomActionValue;
  bool get simpleActionState;

  Counter._();
  factory Counter() => 
      _$Counter._(count: 0, customActionValue: '', secondCustomActionValue: '', simpleActionState: false);
}

// Redux state model
class ReduxState {
  // Declare the state fields as normal properties
  int count;
  String customActionValue;
  String secondCustomActionValue;
  bool simpleActionState;
  
  // Optionally create constructors for different scenarios
  
  // A constructor to grab the default state of the app
  ReduxState.defaultState() 
      : this.count = 0, this.customActionValue = '', this.secondCustomActionValue = '', this.simpleActionState = false;
  
  // A constructor that makes it easier to create new state models, updating only specific fields
  ReduxState.from(prevState, {
      int count,
      String customActionValue,
      String secondCustomActionValue,
      bool simpleActionState
  }) : this.count = count ?? prevState.count,
      this.customActionValue = customActionValue ?? prevState.customActionValue,
      this.secondCustomActionValue = secondCustomActionValue ?? prevState.customActionValue,
      this.simpleActionState = simpleActionState ?? prevState.simpleActionState;
}
```

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

### Initialize Local Development Environment

Source: https://github.com/workiva/over_react/blob/master/tools/analyzer_plugin/README.md

This command initializes the local development environment for the OverReact analyzer plugin. It sets up a symlink to ensure that changes made to the plugin code are immediately reflected in the Dart Analysis Server, bypassing the standard copy mechanism.

```sh
dart tool/init_local_dev.dart
```

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

### Store Initialization: built_redux vs Redux

Source: https://github.com/workiva/over_react/blob/master/doc/built_redux_to_redux.md

Demonstrates the difference in initializing a store for built_redux and Redux. The built_redux store requires a reducer builder, initial state, and actions, while the Redux store takes a reducer function and initial state.

```dart
// built_redux store
final store = Store<Counter, CounterBuilder, CounterActions>(
  reducerBuilder.build(),
  Counter(),
  CounterActions(),
);
```

```dart
// Redux store
final store = Store<ReduxState>(counterReducer, initialState: ReduxState.defaultState());
```

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

### TypeScript Example of Conflicting Props

Source: https://github.com/workiva/over_react/blob/master/doc/wrapping_js_components.md

Illustrates a TypeScript interface where a prop, like `onClick`, has a different signature than the standard event handler, including an extra parameter (`id`).

```TypeScript
interface ArbitraryComponentProps {
  // note that the `id` parameter isn't usually part of the `onClick` handler signature
  onClick: (e: React.MouseEvent, id: string) => void;
}
```

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

### Dart Flux Instantiation: Actions and Stores

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Demonstrates the instantiation of `RandomColorActions` and key stores (`RandomColorStore`, `AnotherColorStore`) in Dart. This code sets up the application's core objects, linking actions to stores for event handling.

```dart
// Instantiate the actions
RandomColorActions randomColorActions = RandomColorActions();

// Instantiate the stores
RandomColorStore bigStore = RandomColorStore(randomColorActions);
AnotherColorStore littleStore = AnotherColorStore(randomColorActions);

```

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

### Instantiate Redux Store

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Shows the standard method for instantiating a Redux store in Dart. This involves providing the root reducer function and an initial state object for the application.

```dart
redux.Store reduxStore = redux.Store<ReduxState>(reduxReducer, initialState: ReduxState.defaultState());
```

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

### TypeScript Props Interface Example

Source: https://github.com/workiva/over_react/blob/master/doc/wrapping_js_components.md

Defines a TypeScript interface for component props, showcasing various types like records, strings, functions, and union types. This serves as the source for Dart conversion.

```typescript
interface ArbitraryComponentProps {
  anObjProp: Record<string, bool>;
  content: string;
  onClick: (e: React.MouseEvent, id: string) => void;
  onBlur: (e: React.FocusEvent) => void; // the same type as React.EventHandler<React.FocusEvent>
  size: 2 | 4 | 6 | 8;
}
```

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

### Initialize ReduxProvider in Main

Source: https://github.com/workiva/over_react/blob/master/doc/over_react_redux_documentation.md

Wrap your React component tree with `ReduxProvider` in your application's main entry point, passing the Redux store instance to it.

```dart
import 'package:over_react/over_react_redux.dart';
import 'package:over_react/react_dom.dart' as react_dom;

main() {
  react_dom.render(
    (ReduxProvider()..store = fooStore)(
      // ... React component tree with connected components
    ),
    mountNode,
  );
}
```

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

### Updated Syntax: Overriding Consumed Props with propsMeta

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Illustrates overriding `consumedProps` in the updated mixin-based syntax using `propsMeta.forMixins` to specify consumed props.

```dart
@override
get consumedProps => propsMeta.forMixins({FooPropsMixin});
```

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

### getDerivedStateFromProps Signature

Source: https://github.com/workiva/over_react/blob/master/doc/null_safety/null_safe_migration.md

Provides the correct null-safe signature for the `getDerivedStateFromProps` static method in Dart class components, correcting a common misinterpretation during migration.

```Dart
Map? getDerivedStateFromProps(Map nextProps, Map prevState) {}
```

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

### Configure DevToolsStore with Custom Name

Source: https://github.com/workiva/over_react/blob/master/doc/over_react_redux_documentation.md

Shows how to initialize `DevToolsStore` with the `overReactReduxDevToolsMiddlewareFactory` to provide custom options, such as a name for the instance.

```dart
var store = new DevToolsStore<AppState>(
  /*ReducerName*/,
  initialState: /*Default App State Object*/,
  middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'Some Custom Instance Name')],
)
```

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

### Update Published Documentation

Source: https://github.com/workiva/over_react/blob/master/tools/analyzer_plugin/README.md

Command to execute from the tools/analyzer_plugin/ directory to update the project's published documentation on GitHub Pages.

```shell
dart ./tool/doc.dart --gh-pages
```

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

### Complete Dart Imports with JS Annotation

Source: https://github.com/workiva/over_react/blob/master/doc/wrapping_js_components.md

Shows the full imports section for an OverReact component, including JS() annotation, necessary packages, and the generated part file. This setup is crucial for JS interop.

```dart
@JS()
library some_library.path.to.component;

import 'package:js/js.dart';
import 'package:over_react/over_react.dart';

part 'arbitrary_component.over_react.g.dart';
```

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

### Dart: Document Component Factories

Source: https://github.com/workiva/over_react/blob/master/README.md

Demonstrates how to write informative comments for component factories in Dart. This includes explaining the component's purpose, its relationships to other components, and relevant links. Good documentation aids maintainability and understanding.

```dart
/// Use the `DropdownButton` component to render a button
/// that controls the visibility of a child [DropdownMenu].
///
/// * Related to [Button].
/// * Extends [DropdownTrigger].
/// * Similar to [SplitButton].
///
/// See: <https://link-to-any-relevant-documentation>.
UiFactory<DropdownButtonProps> DropdownButton = castUiFactory(_$DropdownButton); // ignore: undefined_identifier
```

```dart
/// Component Factory for a dropdown button component.
UiFactory<DropdownButtonProps> DropdownButton = castUiFactory(_$DropdownButton); // ignore: undefined_identifier
```

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

### Include React and ReactDOM in index.html

Source: https://github.com/workiva/over_react/blob/master/README.md

Includes the native JavaScript `react` and `react_dom` libraries and an HTML element with a unique identifier where the OverReact UI will be mounted. This setup is crucial for the Dart-compiled JavaScript to interact with the DOM.

```html
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <div id="react_mount_point">
      // OverReact component render() output will show up here.
    </div>

    <script src="packages/react/react.js"></script>
    <script src="packages/react/react_dom.js"></script>

    <!-- NOTE: "index" should correspond to the
         name of the `.dart` file that contains your `main()` entrypoint. -->
    <script type="application/javascript" defer src="index.dart.js"></script>
  </body>
</html>
```

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

### Using Forked Migrator Tool for Bugfix

Source: https://github.com/workiva/over_react/blob/master/doc/null_safety/null_safe_migration.md

Provides instructions for Workiva employees on how to use a forked version of the Dart migrator tool that includes a fix for the emulated function call nullability bug. This involves cloning the Dart SDK, checking out a specific branch, and running the local migrator script.

```sh
# Enter the dart-sdk/sdk directory
cd sdk

# Add fork and checkout branch with fix
git remote add sdk-fork https://github.com/greglittlefield-wf/sdk.git
git fetch sdk-fork
git checkout fix-emulated-function-migration-2.19

# Update files for package config
gclient sync -D --nohooks

# Generate package config
dart tools/generate_package_config.dart

# Run the local migrator tool (from your package directory)
cd your_package
dart /full/path/to/dart-sdk/sdk/pkg/nnbd_migration/bin/migrate.dart
```

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

### Redux Store Instantiation

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Instantiates the Redux store with a reducer and initial state. This store manages the application's state and dispatches actions.

```dart
import 'package:redux/redux.dart' as redux;

// Instantiate a store using the reducer and state class
redux.Store randomColorStore = redux.Store<RandomColorState>(reducer, initialState: RandomColorState.defaultState());
```

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

### Legacy Component: Overriding Consumed Props

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Shows how to override the `consumedProps` getter in a legacy Over React component to explicitly define which props should be consumed, overriding default behavior.

```dart
@override
get consumedProps => [
      FooProps.meta,
      OtherPropsMixin.meta,
    ];
```

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

### Remove Individual Ignore Comments

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Shows the removal of a specific '// ignore: uri_has_not_been_generated' comment from a 'part' directive. This is possible after configuring the analyzer to ignore this warning project-wide.

```diff
- // ignore: uri_has_not_been_generated
part 'foo.over_react.g.dart';
```

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

### Dart: Flux Store with ConnectFluxAdapterStore

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Shows the simplified integration of a Flux store using ConnectFluxAdapterStore. This approach requires minimal changes to the original Flux store, primarily involving an additional instantiation step to adapt it.

```dart
import 'package:w_flux/w_flux.dart' as flux;
import 'package:over_react/over_react_flux.dart';

class ExampleStore extends flux.Store {
  FluxActions _actions;

  var _example = 0;
  int get example => _example;

  TestConnectableFluxStore(this._actions) {
    triggerOnActionV2(_actions.updateExample, _updateExample);
    triggerOnActionV2(_actions.resetAction, _resetAction);
  }

  void _incrementAction(int newNumber) {
    _example = newNumber;
  }
}

final actions = FluxActions();
final store = ExampleStore(actions);
// Note that the only difference is an extra instantiation step
final adapter = store.asConnectFluxStore(actions);
```

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

### OverReact Redux Integration API

Source: https://github.com/workiva/over_react/blob/master/doc/built_redux_to_redux.md

Provides an overview of key concepts and patterns for integrating Redux with over_react components, including state management, action dispatching, and component connection.

```APIDOC
ReduxProvider:
  Description: Wraps the component tree to provide the Redux store.
  Props:
    store: The Redux Store instance.
  Usage:
    (ReduxProvider()..store = myStore)(<App />)

UiComponent2:
  Description: The base class for modern over_react components.
  Migration:
    - Upgrade from BuiltReduxUiComponent or UiComponent.
    - Remove direct stream subscriptions; use props.store.stream or connect.
    - Move Substate logic into props.

Props Class:
  Description: Defines the interface for component props, including state and actions.
  Usage:
    mixin MyProps on UiProps {
      String someProp;
      Function onAction;
    }

mapStateToProps:
  Description: A function passed to `connect` that selects state from the Redux store and maps it to component props.
  Signature:
    (state, ownProps) => Map<String, dynamic>
  Example:
    mapStateToProps: (state, props) => {
      'userName': state.user.name,
      'items': state.cart.items,
    }

mapDispatchToProps:
  Description: A function passed to `connect` that maps Redux actions to component props, often as callbacks.
  Signature:
    (dispatch, ownProps) => Map<String, Function>
  Example:
    mapDispatchToProps: (dispatch, props) => {
      'onUpdateText': (newText) => dispatch(UpdateTextAction(newText)),
    }

connect:
  Description: A higher-order component (HOC) that connects a React component to the Redux store.
  Usage:
    final ConnectedComponent = connect(
      mapStateToProps: (state) => {...},
      mapDispatchToProps: (dispatch) => {...},
    )(MyComponent);

props.dispatch:
  Description: When using `props.dispatch` (via ConnectPropsMixin), allows direct dispatching of actions from within a component.
  Usage:
    props.dispatch(SomeAction());

Component Refactoring Steps:
  1. Ensure component is UiComponent2.
  2. Remove stream usage.
  3. Add props for all state values used.
  4. Refactor state references from `store.stateValue` to `props.stateValue`.
  5. Decide on action dispatching: `mapDispatchToProps` or `props.dispatch`.
  6. Replace built_redux actions with Redux actions (e.g., `props.propCreatedInPreviousStep` or `props.dispatch(Action())`).
  7. Add `connect` HOC with appropriate `mapStateToProps` and `mapDispatchToProps`.
```

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

### Dart Props MapView Consumption Change

Source: https://github.com/workiva/over_react/blob/master/doc/new_boilerplate_migration.md

Demonstrates the change in how props map views are declared and consumed in over_react, moving from a direct class instantiation to a factory pattern.

```diff
import 'package:over_react/over_react.dart';

+ part 'foo.over_react.g.dart';

- class FooPropsMapView extends UiPropsMapView with SomeOtherPropsMixin {
-   FooPropsMapView(Map backingMap) : super(backingMap);
- }

+ UiFactory<FooMapViewProps> FooMapView = $FooMapView; // ignore: undefined_identifier

+ class FooMapViewProps = UiProps with SomeOtherPropsMixin;

usage() {
-   final mapView = FooPropsMapView(someExistingMap);
+   final mapView = FooMapView(someExistingMap);
}
```

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

### Props Implementation Constructor Logic

Source: https://github.com/workiva/over_react/blob/master/lib/src/builder/README.md

Details the constructor logic for a generated props implementation class, handling different backing map types like JsBackedMap and plain Maps for optimization.

```dart
class _$$FooProps extends UiProps with FooProps, $FooProps {
  factory _$$FooProps(Map backingMap) {
    if (backingMap == null || backingMap is JsBackedMap) {
      return _$$FooProps$JsMap(backingMap);
    } else {
      return _$$FooProps$PlainMap(backingMap);
    }
  }

  /// The backing props map proxied by this class.
  @override
  // ... (rest of the class definition)
```

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

### Instantiate Redux Store in Dart

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Demonstrates how to create a Redux store instance using the defined reducer and initial state. This store manages the application's state and dispatches actions.

```dart
import 'package:redux/redux.dart' as redux;
    
// Instantiate a store using the reducer and state class
redux.Store reduxStore = redux.Store<ReduxState>(afterTransitionReducer, initialState: ReduxState.defaultState());
```

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

### Nest ReduxProviders for Context

Source: https://github.com/workiva/over_react/blob/master/doc/over_react_redux_documentation.md

Demonstrates nesting `ReduxProvider` components to provide different stores and contexts to nested parts of the application tree.

```dart
// ... Wrapped in a reactDom.render()
(ReduxProvider()..store = store1)(
  (ReduxProvider()
    ..store = store2
    ..context = bigCounterContext
  )(
    // ... connected componentry
  ),
)
```

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

### Dart: Flux Store with Redux Adapter (Noop Reducer)

Source: https://github.com/workiva/over_react/blob/master/doc/flux_to_redux.md

Illustrates the setup required to integrate a Flux store with Redux without using ConnectFluxAdapterStore. This method necessitates a FluxToReduxAdapterStore and a no-operation reducer, highlighting the increased boilerplate.

```dart
import 'package:w_flux/w_flux.dart' as flux;
import 'package:over_react/over_react_flux.dart';

class FluxActions {
  final flux.Action<int> updateExample = flux.Action();
}

class ExampleStore extends flux.Store with InfluxStoreMixin<Null> {
  FluxActions _actions;
  
  @override
  get reduxReducer => noopReducer;

  var _example = 0;
  int get example => _example;

  TestConnectableFluxStore(this._actions) {
    triggerOnActionV2(_actions.updateExample, _updateExample);
  }

  void _incrementAction(int newNumber) {
    _example = newNumber;
  }
}

// Note the addition of a "reducer" that does nothing.
Null noopReducer(Null oldState, dynamic actions) {
  return oldState;
}

final actions = FluxActions();
final store = ExampleStore(actions);
final adapter = store.asReduxStore(actions);
```

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

### Use UiProps as a Map and Builder

Source: https://github.com/workiva/over_react/blob/master/README.md

Illustrates using a UiProps instance as both a builder for component props and as a map-like object to set and retrieve prop values. It shows direct assignment and initialization from an existing map.

```dart
UiFactory<FooProps> Foo = castUiFactory(_$Foo); // ignore: undefined_identifier

mixin FooProps on UiProps {
  String? color;
}

class FooComponent extends UiComponent2<FooProps> {
  // ...
}

void bar() {
  FooProps props = Foo();

  props.color = '#66cc00';

  print(props.color); // #66cc00
  print(props);       // {FooProps.color: #66cc00}
}

/// You can also use the factory to create a UiProps instance
/// backed by an existing Map.
void baz() {
  Map existingMap = {'FooProps.color': '#0094ff'};

  FooProps props = Foo(existingMap);

  print(props.color); // #0094ff
}
```