Skip to content

jamesgiu/quick-cyc

Repository files navigation

ezgif-4-fef5b85f32

🔀 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

ezgif-4-b0c494d8b3

Sub pipelines

ezgif-4-3e54426d46

💡 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

image

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

image

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

ezgif-4-b0c494d8b3

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