v0 done

.gitignore

@@ -0,0 +1,8 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+.storybook
+.github
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Josh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,101 @@
+# TSM-React
+
+A simple React hook to make it easier to work with TSM in React.
+
+### Example
+```tsx
+import {components} from "@joshdcuneo/tsm";
+import * as React from "react";
+import {useMachine} from "../src";
+
+export type CounterProps = {initialCount?: number}
+type State = 'idle' | 'counting' | 'maxedOut';
+type Event = { type: 'inc' } | { type: 'dec' } | { type: 'reset' };
+type Context = number;
+
+const {
+  machine,
+  state,
+  transition,
+  reducer,
+  guard,
+  immediate,
+} = components<State, Event, Context>();
+
+const inc = transition(
+  'inc',
+  'counting',
+  reducer(ctx => ctx + 1)
+);
+const maxedOut = transition(
+  'inc',
+  'maxedOut',
+  guard(ctx => ctx === 5)
+);
+const dec = transition(
+  'dec',
+  'counting',
+  reducer(ctx => ctx - 1),
+  guard(ctx => ctx > 0)
+);
+const reset = transition(
+  'reset',
+  'idle',
+  reducer(() => 0)
+);
+const restart = immediate(
+  'idle',
+  reducer(() => 0),
+);
+
+const counterMachineConfig = machine(
+  state('idle', inc),
+  state('counting', maxedOut, inc, dec, reset),
+  state('maxedOut', restart),
+);
+
+export const Counter = (props: CounterProps) => {
+  const {initialCount = 0} = props
+  const [service] = useMachine<State, Event, Context>(counterMachineConfig, initialCount)
+  return (
+    <div>
+        <div>The count is: <span data-testid="count">{service.context()}</span></div>
+        <div>The machine state is: <span data-testid="state">{service.machine.state.name}</span></div>
+        <button onClick={()=>service.send({type: 'inc'})}>+</button>
+        <button onClick={()=>service.send({type: 'dec'})}>-</button>
+        <button onClick={()=>service.send({type: 'reset'})}>Reset</button>
+    </div>
+  )
+}
+
+```
+
+#### Storybook
+
+```bash
+git clone https://github.com/joshdcuneo/tsm-react.git
+cd tsm-react
+npm install
+npm run storybook
+```
+
+This loads the stories from `./stories`.
+
+### Examples
+
+Then run the example inside another:
+
+```bash
+git clone https://github.com/joshdcuneo/tsm-react.git
+cd tsm-react
+npm install
+npm run build
+cd example
+npm run start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.

example/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

example/Counter.tsx

@@ -0,0 +1,61 @@
+import {components} from "@joshdcuneo/tsm";
+import * as React from "react";
+import {useMachine} from "../.";
+
+export type CounterProps = {initialCount?: number}
+type State = 'idle' | 'counting' | 'maxedOut';
+type Event = { type: 'inc' } | { type: 'dec' } | { type: 'reset' };
+type Context = number;
+
+const {
+  machine,
+  state,
+  transition,
+  reducer,
+  guard,
+  immediate,
+} = components<State, Event, Context>();
+
+const inc = transition(
+  'inc',
+  'counting',
+  reducer(ctx => ctx + 1)
+);
+const maxedOut = transition(
+  'inc',
+  'maxedOut',
+  guard(ctx => ctx === 5)
+);
+const dec = transition(
+  'dec',
+  'counting',
+  reducer(ctx => ctx - 1),
+  guard(ctx => ctx > 0)
+);
+const reset = transition(
+  'reset',
+  'idle',
+  reducer(() => 0)
+);
+const restart = immediate(
+  'idle',
+  reducer(() => 0),
+);
+
+const counterMachineConfig = machine(
+  state('idle', inc),
+  state('counting', maxedOut, inc, dec, reset),
+  state('maxedOut', restart),
+);
+
+export const Counter = (props: CounterProps) => {
+  const {initialCount = 0} = props
+  const [service] = useMachine<State, Event, Context>(counterMachineConfig, initialCount)
+  return (<div>
+    <div>The count is: <span data-testid="count">{service.context()}</span></div>
+  <div>The machine state is: <span data-testid="state">{service.machine.state.name}</span></div>
+    <button onClick={()=>service.send({type: 'inc'})}>+</button>
+    <button onClick={()=>service.send({type: 'dec'})}>-</button>
+    <button onClick={()=>service.send({type: 'reset'})}>Reset</button>
+  </div>)
+}

example/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

example/index.tsx

@@ -0,0 +1,14 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Counter } from './Counter';
+
+const App = () => {
+  return (
+    <div>
+      <Counter />
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));