1.0.0 • Published 4 years ago
visualizer-machines v1.0.0
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"
1.0.0
4 years ago