🔀 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-cyc

Quick 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