Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jamesgiu/quick-cyc

A component library for displaying pipelines in React. https://www.npmjs.com/package/quick-cyc
https://github.com/jamesgiu/quick-cyc

acyclic component dag pipeline pipelines react stepper

Last synced: 2 days ago
JSON representation

A component library for displaying pipelines in React. https://www.npmjs.com/package/quick-cyc

Host: GitHub
URL: https://github.com/jamesgiu/quick-cyc
Owner: jamesgiu
License: apache-2.0
Created: 2023-10-01T10:45:39.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-04-29T13:48:27.000Z (8 months ago)
Last Synced: 2024-10-22T02:04:56.306Z (2 months ago)
Topics: acyclic, component, dag, pipeline, pipelines, react, stepper
Language: TypeScript
Homepage: https://jamesgiu.github.io/quick-cyc/
Size: 953 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        ![ezgif-4-fef5b85f32](https://github.com/jamesgiu/react-pipes/assets/13777223/57c7879e-4438-44a2-86d5-3bfa50df5b22)

# 🔀 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](https://jamesgiu.github.io/quick-cyc/).

## 🚀 Features

### A wide variety of intents and icons

![ezgif-4-b0c494d8b3](https://github.com/jamesgiu/react-pipes/assets/13777223/cb65ca2a-03d5-430e-bfa8-a0d4fb22ab5f)

### Sub pipelines

![ezgif-4-3e54426d46](https://github.com/jamesgiu/react-pipes/assets/13777223/7384304e-8a80-416a-958e-d205e1e72c52)

## 💡 Getting started

### Installation

```

npm i quick-cyc

``` 

### Quick code example

```

```

## ⚙ Components

### Pipe

![image](https://github.com/jamesgiu/quick-cyc/assets/13777223/0b2677e3-f900-46c0-bebc-93eb73197773)

| 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](https://github.com/jamesgiu/quick-cyc/assets/13777223/00b17998-3a37-4f0b-ac59-144bb171d07a)

| 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](https://jamesgiu.github.io/quick-cyc/?path=/docs/pipelinenode--docs)    |    yes |

|  attempts | number      |    yes |

|  progressPercent | number      |    yes |

|  className | string      |    yes |

### Pipeline

![ezgif-4-b0c494d8b3](https://github.com/jamesgiu/quick-cyc/assets/13777223/cb65ca2a-03d5-430e-bfa8-a0d4fb22ab5f)

| Prop          | Description        | Optional  |

| ------------- |:-------------:| -----:|

| schema      | (PipelineProps \| PipelineNodeProps \| PipelinePipesProps)[]  | no