@clicktap/state 0.1.0

package/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*",
+    "jest.config.ts",
+    "*.spec.ts"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {},
+      "parserOptions": {
+        "project": [
+          "libs/state/tsconfig.lib.json"
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,11 @@
+# state
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build state` to build the library.
+
+## Running unit tests
+
+Run `nx test state` to execute the unit tests via [Jest](https://jestjs.io).

package/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'state',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/libs/state',
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@clicktap/state",
+  "version": "0.1.0",
+  "type": "commonjs",
+  "dependencies": {
+    "cookie": "^0.5.0"
+  },
+  "devDependencies": {
+    "@types/cookie": "^0.5.1",
+    "@types/react": "18.0.28"
+  },
+  "peerDependencies": {
+    "next": "^13.4.6",
+    "react": "^18.2.0",
+    "xstate": "^4.38.1",
+    "@xstate/immer": "^0.3.3",
+    "@xstate/inspect": "^0.8.0",
+    "@xstate/react": "^3.2.2"
+  }
+}

package/project.json

@@ -0,0 +1,40 @@
+{
+  "name": "state",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/state/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/state",
+        "main": "libs/state/src/index.ts",
+        "tsConfig": "libs/state/tsconfig.lib.json",
+        "assets": ["libs/state/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/state/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/state/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

package/src/auth/AuthProvider.tsx

@@ -0,0 +1,97 @@
+import { createContext, useContext } from 'react';
+import { interpret } from 'xstate';
+import type { InterpreterFrom } from 'xstate';
+import cookie from 'cookie';
+import type { ReactNode } from 'react';
+import type { NextPageContext } from 'next';
+import { authMachine } from './auth';
+
+// removing dependencies on next, this should work regardless of platform
+// import type { NextPageContext } from 'next';
+// import { useRouter } from 'next/router';
+
+export const AuthContext = createContext(
+  {} as InterpreterFrom<typeof authMachine>
+);
+
+export const useAuth = () => {
+  // console.log('useAuth');
+  // console.log(useContext(AuthContext).getSnapshot().context);
+  return useContext(AuthContext);
+};
+
+export const useUser = () => {
+  return useContext(AuthContext).getSnapshot().context.user;
+};
+
+type AuthOptions = {
+  devTools: boolean;
+  endpoints: {
+    login: string;
+    logout: string;
+    refresh: string;
+    ssrRefresh: string;
+  };
+};
+
+/**
+ * this will run on the server side as part of app.getInitialProps
+ * @todo is it possible to share state from client to server? headers? cookies?
+ */
+export const getAuth = async (
+  context: NextPageContext,
+  options: AuthOptions
+  // eslint-disable-next-line @typescript-eslint/require-await
+) => {
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'App.getInitialProps::getAuth should not be run on the frontend. You are probably missing getServerSideProps in your page.'
+    );
+    return interpret(authMachine, { devTools: options.devTools }).start();
+  }
+
+  const cookies = cookie.parse(
+    context?.req?.headers && context.req.headers.cookie
+      ? context.req.headers.cookie
+      : ''
+  );
+  if (typeof cookies['refresh_token'] !== 'undefined') {
+    const authContext = {
+      ...authMachine.initialState.context,
+      refreshToken: cookies['refresh_token'],
+      endpoints: { ...options.endpoints },
+    };
+    return interpret(authMachine.withContext(authContext), {
+      devTools: options.devTools,
+    }).start();
+  }
+
+  return interpret(authMachine, { devTools: options.devTools }).start();
+};
+
+type Props = {
+  children: ReactNode;
+  service: InterpreterFrom<typeof authMachine>;
+  // options: {
+  //   devTools: boolean;
+  // };
+  // state: StateConfig<AuthMachineContext, AuthMachineEvents>;
+};
+
+export function AuthProvider({
+  children,
+  service,
+}: // options = { devTools: false },
+// state
+Props) {
+  // console.log('AuthProvider::state');
+  // console.log(state.context);
+  // let authService = interpret(authMachine, { devTools: options.devTools }).start(state);
+  // console.log('AuthProvider::authService');
+  // console.log(authService.getSnapshot().context);
+
+  return (
+    <AuthContext.Provider value={service}>{children}</AuthContext.Provider>
+  );
+}

package/src/auth/auth.spec.ts

@@ -0,0 +1,7 @@
+import { authMachine } from './auth';
+
+describe('state', () => {
+  it('should work', () => {
+    expect(authMachine).toEqual('auth');
+  });
+});

package/src/auth/auth.ts

@@ -0,0 +1,408 @@
+import { createMachine } from 'xstate';
+import { assign } from '@xstate/immer';
+import type { DoneInvokeEvent } from 'xstate';
+
+export interface AuthMachineContext {
+  user: {
+    email: string;
+    username: string;
+    firstName: string;
+    lastName: string;
+    birthdate?: Date;
+    gender?: string /** @todo use enum? */;
+    createdAt: Date;
+    updatedAt: Date;
+    role?: string /** @todo use enum? */;
+    locked: boolean;
+    affiliateId: string;
+    stripeId: string;
+  } | null;
+  accessToken: string;
+  refreshToken: string;
+  ignoreRefreshToken: boolean;
+  endpoints: {
+    login: string;
+    logout: string;
+    refresh: string;
+    ssrRefresh: string;
+  };
+}
+
+export interface RefreshTokenEvent {
+  type: 'REFRESH_TOKEN';
+  accessToken: AuthMachineContext['accessToken'];
+}
+
+export interface LoginEvent {
+  type: 'LOGIN';
+  username: string;
+  password: string;
+  // grant_type: 'password';
+  // client_id: string;
+  // client_secret: string;
+  // scope: 'default';
+}
+
+export interface LogoutEvent {
+  type: 'LOGOUT';
+}
+
+export interface AuthenticateSuccessEvent {
+  type: 'AUTHENTICATE_SUCCESS';
+  user: AuthMachineContext['user'];
+  accessToken: AuthMachineContext['accessToken'];
+}
+
+export interface RefreshTokenSuccessEvent {
+  type: 'REFRESH_TOKEN_SUCCESS';
+  accessToken: AuthMachineContext['accessToken'];
+}
+
+// type AuthEvents = RefreshTokenEvent | AnotherEvent;
+export type AuthMachineEvents =
+  | RefreshTokenEvent
+  | LoginEvent
+  | LogoutEvent
+  | DoneInvokeEvent<AuthenticateSuccessEvent>
+  | DoneInvokeEvent<RefreshTokenSuccessEvent>;
+
+type RefreshTokenResponse = {
+  accessToken?: string;
+};
+type AuthenticateResponse = {
+  accessToken?: string;
+  message?: string;
+  success: boolean;
+  user?: AuthenticateSuccessEvent['user'];
+};
+async function request<T>(url: string, options: object): Promise<T> {
+  const response = await fetch(url, options);
+  if (response.status === 200) {
+    return response.json() as Promise<T>;
+  }
+
+  return Promise.resolve({
+    message: response.statusText,
+    success: false,
+  }) as Promise<T>;
+}
+
+export const authMachine =
+  /** @xstate-layout N4IgpgJg5mDOIC5QEMCuAXAFgOjVsAdugJYDGyJBUAxBAPYFjbEEBudA1k3jj4SeUpQELdoOIMA2gAYAujNmJQABzqxiJBkpAAPRAEZ9Adn3YAbABYATAGYr1gKwWLDoxYA0IAJ6JbATmwADkCXPyszK0CzPyijAF84zx5cDEx+MgoWGjAAJxy6HOxlABsKADMCgFsUrBq0ogyhETY6cSk5BW1VdU0CbT0EfWkncysHYelba0DXTx8EBzNTCxDXPzMbaTCjQISk1OxUAj4G8SpaBiZRTm4Do5OBTKpmsUz2+TkutQ0JPqRdRAAWkMAUiNkCxjMO02+gsNjmvkCVmw+hsRnRjiM0hMexAyXuqXSZ2yeQKRVK6AqOWq+OOhNOT2E1zaBAUnX+3R+Wn+A2R0RsmwhRjMUKsRgcSIRCCR2Fs6MCYSmDn0wVxyRyYDKGtgmCyF0YzBaXDq2A1WrguuezLerI6nw5316-UQRhi2BiQ2kk2VkylUSCfnB9iWwSxYrVBzN2stJPyhRK5SqJqjFqyL1aNrZ9pUjt+zoQFn0Zmw0gs6Ks0n0gZMMSlwOx2ELTj80jMTisYvCEdqxToUBgEAA8hhqAAZQcAcQAkgA5dk5np5nm+KElsyBcWWQzhMZSizSQLYVzbhyB8F+Pz6bs4Xv9yBTghjyeDgCqABV5yBOU7l9KjDYghmQJhgVPwHArKw6yrYswKWf8HE2cYJWvbBbwHB9qB0WB0AobgynQXIAAozC9L0AEpqGSND71tRQHUXblQAGKJkVdZwqwlMIokCKCjGwYUYThf8SLRCwEkSEACDoCA4G0HgvgYv4mKBIs+LBIUoUCQT4W8IFIgsRtFmMMskMvKwUIeRosgUrklIBQZKwA1soWccJXU2PwpVEktjBmdcIhiZwUIJfAGSEGyf2UhBAQM0N1gPJYoVbHYoJCHyTCiLYYnXcMJPVTVo2s+jbPzawAkMSZwmxBUJX0KUxUPOV3LYy8tjEvKDmoocMAipcopsAJTzRNY0VhWEpVcaQSy0sVxjGFs0RQrqH16xj7MMOFGxWRYBXBRYeN0hA3XsINnBCfcLyvcSgA */
+  createMachine<AuthMachineContext, AuthMachineEvents>(
+    {
+      context: {
+        // id: '',
+        user: null,
+        accessToken: '',
+        refreshToken: '', // will only be on the request from the server side for initial check, does not get passed to the client
+        /**
+         * If unauthenticating fails, we need a way to ignore the refresh token on subsequent access token refresh.
+         * This would be set to true done/error of unauthenticate service, and false on done of authenticate service
+         */
+        ignoreRefreshToken: false,
+        endpoints: {
+          login: '',
+          logout: '',
+          refresh: '',
+          ssrRefresh: '',
+        },
+      },
+      predictableActionArguments: true,
+      id: 'auth',
+      initial: 'refreshing',
+      states: {
+        authenticating: {
+          invoke: {
+            src: 'authenticate',
+            onDone: [
+              {
+                actions: 'setUserContext',
+                target: 'loggedIn',
+              },
+            ],
+            onError: [
+              {
+                target: 'loggedOut',
+              },
+            ],
+          },
+        },
+        unauthenticating: {
+          invoke: {
+            src: 'unauthenticate',
+            onDone: [
+              {
+                actions: 'unsetUserContext',
+                target: 'loggedOut',
+              },
+            ],
+            onError: [
+              {
+                actions: ['unsetUserContext', 'setIgnoreRefreshToken'],
+                target: 'loggedOut',
+              },
+            ],
+          },
+        },
+        refreshing: {
+          invoke: {
+            src: 'refreshAccessToken',
+            onDone: [
+              {
+                actions: ['unsetRefreshToken', 'setAccessToken'],
+                target: 'loggedIn',
+              },
+            ],
+            onError: [
+              {
+                actions: 'unsetRefreshToken',
+                target: 'unauthenticating',
+              },
+            ],
+          },
+        },
+        loggedOut: {
+          on: {
+            LOGIN: {
+              target: 'authenticating',
+            },
+          },
+        },
+        loggedIn: {
+          after: {
+            '60000': {
+              cond: () => typeof window !== 'undefined',
+              target: 'refreshing',
+            },
+          },
+          // entry: ['unsetUserContext'],
+          on: {
+            LOGOUT: {
+              target: 'unauthenticating',
+            },
+          },
+        },
+      },
+    },
+    {
+      actions: {
+        // setAccessToken: assign<UserContext, RefreshTokenEvent>((context, event) => {
+        //   context.accessToken = event.accessToken;
+        // }),
+        setUserContext: assign(
+          (
+            context: AuthMachineContext,
+            event: DoneInvokeEvent<AuthenticateSuccessEvent>
+          ) => {
+            // event.type - done.invoke.auth.authenticating:invocation[0]
+            if (event.data.type !== 'AUTHENTICATE_SUCCESS') return;
+
+            // context.user = event.data.user;
+            context.accessToken = event.data.accessToken;
+            context.ignoreRefreshToken = false;
+          }
+        ),
+        unsetUserContext: assign((context) => {
+          Object.assign(context, authMachine.initialState.context);
+          // context = authMachine.initialState.context;
+        }),
+        setAccessToken: assign(
+          (
+            context: AuthMachineContext,
+            event: DoneInvokeEvent<RefreshTokenSuccessEvent>
+          ) => {
+            if (event.data.type !== 'REFRESH_TOKEN_SUCCESS') return; // is this really necessary?
+
+            context.accessToken = event.data.accessToken;
+            context.ignoreRefreshToken = false;
+          }
+        ),
+        unsetRefreshToken: assign(
+          (
+            context: AuthMachineContext,
+            event: DoneInvokeEvent<RefreshTokenSuccessEvent>
+          ) => {
+            if (event.data.type !== 'REFRESH_TOKEN_SUCCESS') return; // is this really necessary?
+
+            context.refreshToken = '';
+          }
+        ),
+        setIgnoreRefreshToken: assign((context) => {
+          context.ignoreRefreshToken = true;
+        }),
+      },
+      services: {
+        refreshAccessToken: (context) => async () => {
+          // eslint-disable-next-line no-console
+          // console.log(
+          //   'refresh access token (%s)',
+          //   typeof window === 'undefined' ? 'server' : 'client'
+          // );
+          // eslint-disable-next-line no-console
+          // console.log('--------------------');
+
+          let response: RefreshTokenResponse;
+          if (typeof window === 'undefined') {
+            // server
+            // eslint-disable-next-line no-console
+            // console.log('in server refreshAccessToken');
+            // eslint-disable-next-line no-console
+            // console.log(context.refreshToken);
+            if (context.refreshToken === '') throw new Error('Unauthorized.');
+
+            try {
+              response = await request<RefreshTokenResponse>(
+                'http://nginx:5210/auth/refresh',
+                {
+                  method: 'POST',
+                  mode: 'cors',
+                  credentials: 'include',
+                  headers: {
+                    Cookie: `refresh_token=${context.refreshToken}`,
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    grant_type: 'refresh_token',
+                    // client_id: 'default',
+                    // client_secret: 'Password123!',
+                    // scope: 'default',
+                  }).toString(),
+                }
+              );
+
+              const data = response;
+
+              if (typeof data.accessToken === 'undefined') {
+                throw new Error('Unauthorized.');
+              }
+
+              return {
+                type: 'REFRESH_TOKEN_SUCCESS',
+                accessToken: data.accessToken,
+              } as RefreshTokenSuccessEvent;
+            } catch (err) {
+              // eslint-disable-next-line no-console
+              // console.log(err);
+              throw new Error('Could not complete refresh request (server)');
+            }
+          } else {
+            // client
+            response = await request<RefreshTokenResponse>(
+              'https://middleware-clicktap.local-rmgmedia.com/auth/refresh',
+              {
+                method: 'POST',
+                mode: 'cors',
+                credentials: 'include',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  grant_type: 'refresh_token',
+                  // client_id: 'default',
+                  // client_secret: 'Password123!',
+                  // scope: 'default',
+                }).toString(),
+              }
+            );
+
+            const data = response;
+
+            if (typeof data.accessToken === 'undefined') {
+              throw new Error('Unauthorized.');
+            }
+
+            return {
+              type: 'REFRESH_TOKEN_SUCCESS',
+              accessToken: data.accessToken,
+            };
+          }
+        },
+        authenticate: (context, event) => async () => {
+          const e = event as LoginEvent; // workaround to typescript not allowing casting in parameter
+          if (e.type !== 'LOGIN') {
+            throw new Error(
+              `Authenticate can only be called for "LOGIN" event type. Event caller: ${String(
+                e.type
+              )}`
+            );
+          }
+
+          const response = await request<AuthenticateResponse>(
+            'https://middleware-clicktap.local-rmgmedia.com/auth/login',
+            {
+              method: 'POST',
+              mode: 'cors',
+              credentials: 'include',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                username: e.username,
+                password: e.password,
+                // grant_type: 'password',
+                // client_id: 'default',
+                // client_secret: 'Password123!',
+                // scope: 'default',
+              }).toString(),
+            }
+          );
+          /** @todo do we need to handle different status codes here...like what if the service is down? */
+          const data = response;
+
+          if (typeof data.accessToken === 'undefined') {
+            throw new Error(
+              data.message?.toString() ?? 'Sign in failed. Please try again.'
+            );
+          }
+
+          return {
+            type: 'AUTHENTICATE_SUCCESS',
+            // user: data.user,
+            accessToken: data.accessToken,
+          } as AuthenticateSuccessEvent;
+          // /** @todo how to call immer assign from inside invoke here to update context? */
+
+          // console.log(data);
+          // console.log(event);
+        },
+        unauthenticate: (context) => async () => {
+          // const response = await fetch(
+          await fetch(
+            'https://middleware-clicktap.local-rmgmedia.com/auth/logout',
+            {
+              method: 'POST',
+              mode: 'cors',
+              credentials: 'include',
+              // headers: {
+              //   'Access-Control-Allow-Origin': 'https://middleware-clicktap.local-rmgmedia.com',
+              //   'Access-Control-Allow-Credentials': 'true',
+              // },
+            }
+          );
+          /** @todo do we need to handle different status codes here...like what if the service is down? */
+          // const data = await response.json();
+
+          return { type: 'UNAUTHENTICATE' };
+
+          // if (!data.success) {
+          //   throw new Error(data.message ?? 'Sign in failed. Please try again.');
+          // }
+
+          // return {
+          //   type: 'AUTHENTICATE_SUCCESS',
+          //   user: data.user,
+          //   accessToken: data.accessToken,
+          // };
+        },
+      },
+      // doesn't make sense in the case where you have an access token that is about to expire
+      // and the loggedIn state won't fire another refresh for 15 min
+      //
+      // guards: {
+      //   checkIfLoggedIn: (context, _event) => {
+      //     if (context.user) return true;
+      //   },
+      // },
+    }
+  );

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './auth/auth';
+export * from './auth/AuthProvider';
+export * from './toast/toast';
+export * from './toast/ToastProvider';
+export * from './toast/timer';

package/src/toast/ToastProvider.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext } from 'react';
+import type { InterpreterFrom } from 'xstate';
+import type { ReactNode } from 'react';
+import { toastMachine } from './toast';
+
+export const ToastContext = createContext(
+  {} as InterpreterFrom<typeof toastMachine>
+);
+
+export const useToast = () => {
+  return useContext(ToastContext);
+};
+
+type Props = {
+  children: ReactNode;
+  // options: {
+  //   devTools: boolean;
+  // };
+  // state: StateConfig<ToastMachineContext, ToastMachineEvents>;
+  // setState: Dispatch<
+  //   SetStateAction<StateConfig<ToastMachineContext, ToastMachineEvents>>
+  // >;
+  service: InterpreterFrom<typeof toastMachine>;
+};
+
+export function ToastProvider({
+  children,
+  service,
+}: // options = { devTools: false },
+// state,
+// setState,
+Props) {
+  // const toastService = interpret(toastMachine, {
+  //   devTools: options.devTools,
+  // }).start(state);
+
+  // toastService.subscribe((s) => {
+  //   setState(s);
+  // });
+
+  return (
+    <ToastContext.Provider value={service}>{children}</ToastContext.Provider>
+  );
+}

package/src/toast/timer.ts

@@ -0,0 +1,109 @@
+import { createMachine } from 'xstate';
+import { assign } from '@xstate/immer';
+
+export interface TimerContext {
+  // The elapsed time (in ms)
+  elapsed: number;
+  // The maximum time (in ms)
+  duration: number;
+  // The interval to send TICK events (in ms)
+  interval: number;
+  // The interval timer
+  intervalId: NodeJS.Timer | null;
+}
+
+export type TimerEvents =
+  | {
+      // User intent to start the timer
+      type: 'START_TIMER';
+    }
+  | {
+      // User intent to resume the timer
+      type: 'RESUME_TIMER';
+    }
+  | {
+      // User intent to pause the timer
+      type: 'PAUSE_TIMER';
+    }
+  | {
+      // The TICK event sent by the spawned interval service
+      type: 'TICK';
+    }
+  | {
+      // User intent to update the duration
+      type: 'DURATION.UPDATE';
+      value: number;
+    }
+  | {
+      // User intent to reset the elapsed time to 0
+      type: 'RESET_TIMER';
+    };
+
+export const timerMachine =
+  /** @xstate-layout N4IgpgJg5mDOIC5QBcCWBbMAnAdABwEMBXWSAYgCUBRAZQFUBZKgfQBUBJJigbQAYBdRKDwB7WKjQiAdkJAAPRAFoAjADYATDmUBOXQA5tAZmV69AFgDsq1QBoQAT0SHehnAFYAvh7tpMuLERSUqhSUGQcAMIA0nyCSCCi4pIy8QoIJqo4qnoWbnaOCGZmmaq8Zbyqyi5uym6qXj4Y2DgBQSFhAAoAgnQ0LBxcsbKJEqjSsmlVbjimFmZ6agZmbsbq+U4u7g0gvs2twaFkQ-EjyRNObrxZOXkOiGbKFjjq5WbqFurFvNpmXt4gUhEEDgsl2WGGYlG41SSnUVS0um0BmMpks1nW6Tcmk8-zB+GIpAgEKSYxSoDSvAxn142zx+3axKhZPkiEpdwQhjmW1xTVwAGMROg8AAbMDISCMs4whBsgpuOp-DxAA */
+  createMachine<TimerContext, TimerEvents>({
+    id: 'timer',
+    initial: 'running',
+    context: {
+      elapsed: 0,
+      duration: 3000,
+      interval: 100,
+      intervalId: null,
+    },
+    states: {
+      paused: {
+        on: {
+          // START_TIMER: {
+          //   target: 'running',
+          //   cond: (context) => context.elapsed < context.duration,
+          // },
+          RESUME_TIMER: {
+            target: 'running',
+            cond: (context) => context.elapsed < context.duration,
+          },
+        },
+      },
+      running: {
+        invoke: {
+          src: (context) => (send) => {
+            // eslint-disable-next-line no-console
+            // console.log('context.interval: ', context.interval);
+            const interval = setInterval(() => {
+              send('TICK');
+            }, context.interval);
+            return () => {
+              clearInterval(interval);
+            };
+          },
+        },
+        always: [
+          {
+            target: 'completed',
+            cond: (context) => {
+              return context.elapsed >= context.duration;
+            },
+          },
+        ],
+        on: {
+          TICK: {
+            actions: assign((context, event) => {
+              if (event.type !== 'TICK') return;
+              context.elapsed += context.interval;
+              // eslint-disable-next-line no-console
+              // console.log(
+              //   'elapsed: %d | interval: %d',
+              //   context.elapsed,
+              //   context.interval
+              // );
+            }),
+          },
+          PAUSE_TIMER: { target: 'paused' },
+        },
+      },
+      completed: {
+        type: 'final',
+      },
+    },
+  });
+
+export default timerMachine;

package/src/toast/toast.spec.ts

@@ -0,0 +1,7 @@
+import { toastMachine } from './toast';
+
+describe('state', () => {
+  it('should work', () => {
+    expect(toastMachine).toEqual('toast');
+  });
+});

package/src/toast/toast.ts

@@ -0,0 +1,222 @@
+import { createMachine, sendTo } from 'xstate';
+import { assign } from '@xstate/immer';
+import { cloneElement, ReactNode } from 'react';
+import crypto from 'crypto';
+import type { ReactElement } from 'react';
+import { timerMachine } from './timer';
+
+// circular reference, don't want library depending on UI component specific to one app
+// import { Notification } from "@waytrade/components/app/Toast/Notification";
+
+/** @todo figure out TS here */
+export type ToastItem = {
+  id: string | null;
+  duration: number;
+  element: ReactNode;
+};
+
+export interface ToastMachineContext {
+  /** @todo create proper type for Array items */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  items: Array<ToastItem>;
+  order: 'asc' | 'desc';
+  duration: number;
+  activeItem: string | null;
+}
+
+export interface AddItemEvent {
+  type: 'ADD_ITEM';
+  item: ReactElement;
+  duration?: number;
+}
+
+export interface RemoveItemEvent {
+  type: 'REMOVE_ITEM';
+}
+
+export interface SetIdleEvent {
+  type: 'SET_IDLE';
+}
+
+export interface SetActiveEvent {
+  type: 'SET_ACTIVE';
+}
+
+export interface ResumeTimerEvent {
+  type: 'RESUME_TIMER';
+}
+
+export interface PauseTimerEvent {
+  type: 'PAUSE_TIMER';
+}
+
+export interface TimeoutEvent {
+  type: 'xstate.after(ITEM_TIMEOUT)#toast.active';
+}
+
+export interface TimerDoneEvent {
+  type: 'done.invoke.timer';
+}
+
+export type ToastMachineEvents =
+  | AddItemEvent
+  | RemoveItemEvent
+  | SetIdleEvent
+  | SetActiveEvent
+  | TimeoutEvent
+  | ResumeTimerEvent
+  | PauseTimerEvent
+  | TimerDoneEvent;
+
+export const toastMachine =
+  /** @xstate-layout N4IgpgJg5mDOIC5QBcD2BDWyB0BLCANmAMQCCAIuQPoCSAKgKICyA2gAwC6ioADqrLmS5UAO24gAHogCMAZgCs2AGzS2SgBxKA7AE4lO2ToAsAGhABPRAFoj6gL52zaTDnQBjIQDcSEUWDwinqgA1v5CALZgAE7sXEggfAJCouJSCEpsOspaOQay0kqyAExKZpYIReps2LY6mmxG+kUKWkYOThhY2O5eJBTU9Myx4omCwmLxabKF2NKN8kpFbPls8gpl1vLqykXyasaNhdJFWu0gzl09uN7EAErMAPIAagy0jKycI-xjKZOIi9sDPI9EZgYV1LItBsEIYlNg9NIdGxKki1jkzhdXB5riQAMoMOi0cgAGQYw3io2SE1AaTkWS0RQOSKWEK0c2hzWkNUWJy0Skah1sGM6WN6dwYuIAqkxXnQaDLbuTeN8qakZPIuXylhktAppgUitDilpsJpQeo9KsVOoCsKXN1sTcAAqkSX4qhyhVKhIq8ZqirSbaZeTyLRbVnqVqyaHSaQm45mtirKo6Eo6O2XCAQXAiKDEfGEmgksmfCm+340xC2bCh3XGrTLfR8+TQqxFJbYTIoow6HStBshjOuLM5vMFqikADCcpe3spfr+MKMmsZbDmFvU6jBRtW8I3IcMBT7Q+wUTA4VQnlH+YJRNJc-L1MkiHURiKps0DIWKhyIZjehqfc1h0I8GyUE8zwvK9cxvQkpxnEs4mVJIF0rBBU1kWZVw1WtgSMUwLHVIxsEqIxjVDIF5CFM4RFQCA4HETEvhQitnwQKxYxNOoDFjbQ2RtfRW1kfJO1THjA1sVRZBPfAiGYn4nzSKx9D3cS+MDI9-zhWot2A0C1BPK5vHk1VF1kIwuOZPICmKYEtMAuoDxAptlkMkdcxM1C2MMYjKhKXUlH5DUimkVsijImsxMMcLpjDUMIPPS9R081i0i3OE10afI42XcKW0ImFgRrYE5FBWx1F2cyHAcIA */
+  createMachine<ToastMachineContext, ToastMachineEvents>(
+    {
+      context: { items: [], order: 'desc', duration: 0, activeItem: null },
+      predictableActionArguments: true,
+      id: 'toast',
+      initial: 'idle',
+      states: {
+        idle: {
+          on: {
+            ADD_ITEM: {
+              target: 'adding',
+            },
+          },
+        },
+        active: {
+          invoke: {
+            id: 'timer',
+            src: timerMachine,
+            onDone: {
+              target: 'removing',
+              cond: 'itemHasTimeout',
+            },
+            data: Object.assign(timerMachine.context, {
+              duration: (context: ToastMachineContext) =>
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+                context.items[context.items.length - 1].duration ??
+                context.duration,
+            }),
+          },
+          on: {
+            ADD_ITEM: {
+              // actions: sendTo('timer', 'PAUSE_TIMER'),
+              target: 'adding',
+            },
+            REMOVE_ITEM: {
+              target: 'removing',
+            },
+            SET_IDLE: {
+              target: 'idle',
+            },
+            RESUME_TIMER: {
+              actions: sendTo('timer', 'RESUME_TIMER'),
+              // cond: (context) => context.duration > 0,
+            },
+            PAUSE_TIMER: {
+              actions: sendTo('timer', 'PAUSE_TIMER'),
+              // cond: (context) => context.duration > 0,
+            },
+          },
+          // after: {
+          //   ITEM_TIMEOUT: {
+          //     target: 'removing',
+          //     cond: 'itemHasTimeout',
+          //   },
+          // },
+        },
+        adding: {
+          entry: ['addItem'],
+          on: {
+            SET_IDLE: {
+              target: 'idle',
+            },
+            SET_ACTIVE: {
+              target: 'active',
+            },
+          },
+        },
+        removing: {
+          entry: 'removeItem',
+          on: {
+            SET_IDLE: {
+              target: 'idle',
+            },
+            SET_ACTIVE: {
+              target: 'active',
+            },
+          },
+        },
+      },
+    },
+    {
+      actions: {
+        addItem: assign((context, event) => {
+          if (event.type !== 'ADD_ITEM') return;
+
+          const id = `notification-${crypto.randomBytes(16).toString('hex')}`;
+          const duration = event.duration ?? context.duration;
+
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          const notification = cloneElement(event.item, {
+            duration,
+            id,
+            key: event.item.key ?? id,
+            ...event.item.props,
+          });
+          const item = {
+            duration,
+            id,
+            element: notification,
+          };
+
+          if (context.order === 'desc') {
+            context.items.push(item);
+          } else {
+            context.items.unshift(item);
+          }
+          context.activeItem = id;
+        }),
+        removeItem: assign((context, event) => {
+          if (
+            event.type !== 'REMOVE_ITEM' &&
+            event.type !== 'xstate.after(ITEM_TIMEOUT)#toast.active' &&
+            event.type !== 'done.invoke.timer'
+          )
+            return;
+
+          if (context.order === 'desc') {
+            context.items.pop();
+            context.activeItem =
+              context.items.length > 0
+                ? context.items[context.items.length - 1].id
+                : null;
+          } else {
+            context.items.shift();
+            context.activeItem =
+              context.items.length > 0 ? context.items[0].id : null;
+          }
+        }),
+        // startTimer: sendTo('timer', { type: 'START' }),
+      },
+      delays: {
+        ITEM_TIMEOUT: (context) => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          return (
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            context.items[context.items.length - 1].duration ?? context.duration
+          );
+        },
+      },
+      guards: {
+        itemHasTimeout: (context) => {
+          return (
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            context.items[context.items.length - 1].duration > 0 ||
+            context.duration > 0
+          );
+        },
+      },
+    }
+  );

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}