1.0.1 • Published 1 year ago
quick-cyc v1.0.1
🔀 Quick Cyc (sɪk)
A component library for displaying pipelines in React.
This component library is currently under construction and is not recommended for production at this stage.
📚 Hosted documentation
Check out the hosted documentation.
🚀 Features
A wide variety of intents and icons
Sub pipelines
💡 Getting started
Installation
npm i quick-cycQuick code example
<Pipeline
label= {'Pipeline'}
schema={[
{
icon:PipelineIcons.Icon2fa,
intent:PipelineIntent.SUCCESS,
active:false,
attempts:1,
size:PipelineSize.M,
},
{
intent:PipelineIntent.SUCCESS,
active:false,
size:PipelineSize.S,
},
{
icon:PipelineIcons.IconAward,
intent:PipelineIntent.SUCCESS,
active:false,
attempts:1,
size:PipelineSize.M,
}
]}
/>âš™ Components
Pipe
| Prop | Description | Optional |
|---|---|---|
| intent | "qc-intent-none" "qc-intent-warning" "qc-intent-success" "qc-intent-failure" "qc-intent-in-progress" "qc-intent-skipped" | no |
| active | boolean | no |
| size | "qc-size-xs" "qc-size-s" "qc-size-m" "qc-size-l" "qc-size-xl" | no |
| progressPercent | number | yes |
PipelineNode
| Prop | Description | Optional |
|---|---|---|
| intent | "qc-intent-none" "qc-intent-warning" "qc-intent-success" "qc-intent-failure" "qc-intent-in-progress" "qc-intent-skipped" | no |
| active | boolean | no |
| size | "qc-size-xs" "qc-size-s" "qc-size-m" "qc-size-l" "qc-size-xl" | no |
| progressPercent | number | yes |
| onNodeClick | ()=>void | no |
| active | boolean | no |
| size | "qc-size-xs" "qc-size-s" "qc-size-m" "qc-size-l" "qc-size-xl" | no |
| icon | docs | yes |
| attempts | number | yes |
| progressPercent | number | yes |
| className | string | yes |
Pipeline
| Prop | Description | Optional |
|---|---|---|
| schema | (PipelineProps | PipelineNodeProps | PipelinePipesProps)[] | no |