mirror of https://github.com/hashicorp/consul
308e5a480e
This PR removes storybook and adds docfy and uses docfy to render our existing README files. This now means we can keep adding README documentation without committing any specific format or framework. If we eventually move to storybook then fine, or if we just want to remove docfy for whatever reason then fine - we will still have a full set of README files viewable via GitHub. |
||
|---|---|---|
| .. | ||
| action | ||
| guard | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
## StateChart
```hbs
<StateChart
@chart={{xstateStateChartObject}}
as |State Guard Action dispatch state|>
</StateChart>
```
`<StateChart />` is a renderless component that eases rendering of different states
from within templates using XState State Machine and Statechart objects.
### Arguments
| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `chart` | `object` | | An xstate statechart/state machine object |
| `initial` | `String` | The initial value of the state chart itself | The initial state of the machine/chart (defaults to whatever is defined on the object itself) |
The component currently yields 3 conextual components:
- `<State />`: Used for rendering matching certain states ([also see State Component](../state/README.mdx))
- `<Action @name="" @exec={{action ""}} />`: Used to wire together ember actions to xstate actions.
- `<Guard @name="" @cond={{action ""}} />`: Used to wire together ember actions or props to xstate guards.
and 2 further objects:
- `dispatch`: An action to dispatch an xstate event
- `state`: The state object itself for usage in the `state-matches` helper
### Example
```hbs
<StateChart
@chart={{xstateStateChartObject}}
as |State Guard Action dispatch state|>
<Guard @name="nameOfGuard" @cond={{action "testGuardCondition"}} />
<Action @name="nameOfAction" @exec={{action "executeAction"}} />
<State @matches="idle">
Currently Idle
</State>
<State @matches="loading">
Currently Loading
</State>
<State @matches={{array 'loading' 'idle'}}>
Idle and loading
<button disabled={{state-matches state "loading"}} onclick={{action dispatch "START"}}>Load</button>
</State>
</StateChart>
```
### See
- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)
---