A component library for displaying pipelines in React.
This component library is currently under construction and is not recommended for production at this stage.
Check out the hosted documentation.
npm i quick-cyc
<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,
}
]}
/>
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 |
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 |
Prop | Description | Optional |
---|---|---|
schema | (PipelineProps | PipelineNodeProps | PipelinePipesProps)[] | no |
![](https://private-user-images.githubusercontent.com/13777223/282475899-7706e6f4-b3e6-49a0-a693-42e0069a11bb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg1MDA4NTksIm5iZiI6MTcxODUwMDU1OSwicGF0aCI6Ii8xMzc3NzIyMy8yODI0NzU4OTktNzcwNmU2ZjQtYjNlNi00OWEwLWE2OTMtNDJlMDA2OWExMWJiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE2VDAxMTU1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU5ODU1MmMwODYyNDljMWQ5MzAwNDhiYjdlYTIxMDk4YjUwNTQ0Y2VhYjNlYzBmZmRjMTM4YWRiYjNjOTU3MDgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.N0jykQVLHWDrgrLd6hIW3oIwT9sO4YgLAM1AlSAaJQ4)