🔀 Quick Cyc ([sɪk])

A component library for displaying pipelines in React.

📚 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
outerLabel	string	yes
outerLabelIcon	docs	yes

Pipeline

Prop	Description	Optional
schema	(PipelineProps | PipelineNodeProps | PipelinePipesProps)[]	no