visualizer-machines

Visualizer Machines for Xstate

IMPORTANT

| Dentro da pasta src/utils/lib estão 3 arquivos necessarios para o funcionamento, ao instalar a lib em seu projeto copie e cole os 3 arquivos dentro da pasta em seu node_modules/xstate/lib

HOW TO IMPORT

import { Visualizer } from "smiles-react-machine-visualizer"
 
const CustomMachine = Machine({
  ...
})
 
<Visualizer machine={CustomMachine} theme={DEFAULT_COLORS}>

COLORS PATTERN

const DEFAULT_COLORS = {
  smiles_base: '#FFFFF3',
  smiles_active: '#F17F42',
  smiles_disabled: '#E0E3DA',
  smiles_details: '#30A9DE'
}

MACHINE PATTERN

| Example:
 
// Machine Schema
interface DefaultMachineStateSchema {
  states: {
    idle: {};
    loading: {};
    success: {};
    failure: {};
  };
}
 
// Machine Events
type DefaultMachineEvents = 
  | { type: 'FETCH' }
  | { type: 'RETRY';  search: string };
 
// Machine Context
interface DefaultMachineContext {
  search: string | undefined;
  error: string | undefined;
  data: string[] | undefined;
}

HOW TO INSTALL

npm install

cd example && npm install

HOW TO RUN

cd .. npm start - Aguardar o bundle

cd example && npm start - Automaticamente abre a pagina no navegador

Default Scripts

   "build": "npx microbundle-crl --no-compress --format modern,cjs",
     "start": "npx microbundle-crl watch --no-compress --format modern,cjs",
     "prepare": "run-s build",
     "test": "run-s test:unit test:lint test:build",
     "test:build": "run-s build",
     "test:lint": "eslint .",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "predeploy": "cd example && npm install && npm run build",
     "deploy": "gh-pages -d example/build",
     "commit": "npx git-cz"