Merge pull request #13 from jamesgiu/RP-rename

Rp rename

README.md

@@ -1,10 +1,12 @@
 ![ezgif-4-fef5b85f32](https://github.com/jamesgiu/react-pipes/assets/13777223/57c7879e-4438-44a2-86d5-3bfa50df5b22)
 
-# 🔀 Quick Acyclic React Pipes
+# 🔀 Quick Cyc ([sɪk]) - NOT RECOMMENDED FOR PRODUCTION
 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-acyclic/).
+Check out the [hosted documentation](https://jamesgiu.github.io/quick-cyc/).
 
 ## 🚀 Features
 ### A wide variety of intents and icons
@@ -16,7 +18,7 @@ Check out the [hosted documentation](https://jamesgiu.github.io/quick-acyclic/).
 ## 💡 Getting started
 ### Installation
 ```
-npm i quick-acyclic
+npm i quick-cyc
 ``` 
 
 ### Quick code example
@@ -28,81 +30,81 @@ npm i quick-acyclic
       active: false,
       attempts: 1,
       icon: 'Icon2fa',
-      intent: 'rp-intent-success',
-      size: 'rp-size-m'
+      intent: 'qc-intent-success',
+      size: 'qc-size-m'
     },
     {
       active: false,
-      intent: 'rp-intent-success',
-      size: 'rp-size-s'
+      intent: 'qc-intent-success',
+      size: 'qc-size-s'
     },
     {
       active: false,
       attempts: 1,
       icon: 'IconAward',
-      intent: 'rp-intent-success',
-      size: 'rp-size-m'
+      intent: 'qc-intent-success',
+      size: 'qc-size-m'
     },
     {
       active: false,
-      intent: 'rp-intent-success',
-      size: 'rp-size-s'
+      intent: 'qc-intent-success',
+      size: 'qc-size-s'
     },
     {
       active: true,
       icon: 'IconClock',
-      intent: 'rp-intent-in-progress',
-      size: 'rp-size-m'
+      intent: 'qc-intent-in-progress',
+      size: 'qc-size-m'
     },
     {
       active: true,
-      intent: 'rp-intent-in-progress',
+      intent: 'qc-intent-in-progress',
       progressPercent: 30,
-      size: 'rp-size-s'
+      size: 'qc-size-s'
     },
     {
       active: false,
       icon: 'Icon3dRotate',
-      intent: 'rp-intent-none',
-      size: 'rp-size-m'
+      intent: 'qc-intent-none',
+      size: 'qc-size-m'
     }
   ]}
 />
 ```
 
 ## ⚙ Components
 ### Pipe
-![image](https://github.com/jamesgiu/quick-acyclic/assets/13777223/0b2677e3-f900-46c0-bebc-93eb73197773)
+![image](https://github.com/jamesgiu/quick-cyc/assets/13777223/0b2677e3-f900-46c0-bebc-93eb73197773)
 
 | Prop          | Description        | Optional  |
 | ------------- |:-------------:| -----:|
-| intent      |"rp-intent-none" "rp-intent-warning" "rp-intent-success" "rp-intent-failure" "rp-intent-in-progress" "rp-intent-skipped"  | no |
+| 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 | "rp-size-xs" "rp-size-s" "rp-size-m" "rp-size-l" "rp-size-xl"      |   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-acyclic/assets/13777223/00b17998-3a37-4f0b-ac59-144bb171d07a)
+![image](https://github.com/jamesgiu/quick-cyc/assets/13777223/00b17998-3a37-4f0b-ac59-144bb171d07a)
 
 | Prop          | Description        | Optional  |
 | ------------- |:-------------:| -----:|
-| intent      |"rp-intent-none" "rp-intent-warning" "rp-intent-success" "rp-intent-failure" "rp-intent-in-progress" "rp-intent-skipped"  | no |
+| 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 | "rp-size-xs" "rp-size-s" "rp-size-m" "rp-size-l" "rp-size-xl"      |   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 | "rp-size-xs" "rp-size-s" "rp-size-m" "rp-size-l" "rp-size-xl"      |   no |
-|  icon |   [docs](https://jamesgiu.github.io/quick-acyclic/?path=/docs/pipelinenode--docs)    |    yes |
+|  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/react-pipes/assets/13777223/cb65ca2a-03d5-430e-bfa8-a0d4fb22ab5f)
+![ezgif-4-b0c494d8b3](https://github.com/jamesgiu/quick-cyc/assets/13777223/cb65ca2a-03d5-430e-bfa8-a0d4fb22ab5f)
 
 | Prop          | Description        | Optional  |
 | ------------- |:-------------:| -----:|
 | schema      | (ReactPipesProps \| ReactPipesNodeProps \| ReactPipesPipeProps)[]  | no
 
-<img src="https://github.com/jamesgiu/react-pipes/assets/13777223/7706e6f4-b3e6-49a0-a693-42e0069a11bb" width="50" height="50" align="right"/>
+<img src="https://github.com/jamesgiu/quick-cyc/assets/13777223/7706e6f4-b3e6-49a0-a693-42e0069a11bb" width="50" height="50" align="right"/>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "quick-acyclic",
-  "version": "0.0.6",
+  "name": "quick-cyc",
+  "version": "0.0.1",
   "description": "A component library for pipelines and acyclic flows in React",
   "scripts": {
     "rollup": "rollup -c",
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jamesgiu/quick-acyclic.git"
+    "url": "git+https://github.com/jamesgiu/quick-cyc.git"
   },
   "keywords": [
     "react",
@@ -31,9 +31,9 @@
   "author": "jamesgiu",
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/jamesgiu/quick-acyclic/issues"
+    "url": "https://github.com/jamesgiu/quick-cyc/issues"
   },
-  "homepage": "https://jamesgiu.github.io/quick-acyclic/",
+  "homepage": "https://jamesgiu.github.io/quick-cyc/",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [

src/components/Demo/Demo.css

@@ -1,6 +1,6 @@
 
 /* Animation property */
-.rp-wiggle {
+.qc-wiggle {
   animation: wiggle 2s linear infinite;
 }
 

src/components/Demo/Demo.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
 import React, { useState } from "react";
 import "./Demo.css";
-import ReactPipes from "../ReactPipes";
-import { ReactPipesIntent, ReactPipesSize } from "../ReactPipes/types";
-import { ReactPipesIcons } from "../ReactPipes/icons";
+import Pipeline from "../Pipeline";
+import { PipelineIcons } from "../Pipeline/icons";
+import { PipelineIntent, PipelineSize } from "../Pipeline/types";
 
 export const Demo = () => {
 
@@ -24,54 +24,54 @@ export const Demo = () => {
     }, [percentComplete]);
 
     return (
-    <span className={"rp-pipeline-demo"}>
-      <ReactPipes
+    <span className={"qc-pipeline-demo"}>
+      <Pipeline
         label= {'Pipeline'}
         schema={[
           {
-          icon:ReactPipesIcons.Icon2fa,
-          intent:ReactPipesIntent.SUCCESS,
+          icon:PipelineIcons.Icon2fa,
+          intent:PipelineIntent.SUCCESS,
           active:false,
           attempts:1,
-          size:ReactPipesSize.M,
+          size:PipelineSize.M,
           },
           {
-            intent:ReactPipesIntent.SUCCESS,
+            intent:PipelineIntent.SUCCESS,
             active:false,
-            size:ReactPipesSize.S,
+            size:PipelineSize.S,
           },
           {
-            icon:ReactPipesIcons.IconAward,
-            intent:ReactPipesIntent.SUCCESS,
+            icon:PipelineIcons.IconAward,
+            intent:PipelineIntent.SUCCESS,
             active:false,
             attempts:1,
-            size:ReactPipesSize.M,
+            size:PipelineSize.M,
           },
           {
-            intent:ReactPipesIntent.SUCCESS,
+            intent:PipelineIntent.SUCCESS,
             active:false,
-            size:ReactPipesSize.S,
+            size:PipelineSize.S,
           },
           {
-            icon:ReactPipesIcons.IconClock,
-            intent:percentComplete < 100 ? ReactPipesIntent.IN_PROGRESS : ReactPipesIntent.SUCCESS,
+            icon:PipelineIcons.IconClock,
+            intent:percentComplete < 100 ? PipelineIntent.IN_PROGRESS : PipelineIntent.SUCCESS,
             active:percentComplete < 100 ? true : false,
             attempts: Math.round(percentComplete / 20),
             percentComplete: percentComplete,
-            size:ReactPipesSize.M,
+            size:PipelineSize.M,
           },
           {
-            intent:percentComplete < 100 ? ReactPipesIntent.IN_PROGRESS : ReactPipesIntent.SUCCESS,
+            intent:percentComplete < 100 ? PipelineIntent.IN_PROGRESS : PipelineIntent.SUCCESS,
             active:percentComplete < 100 ? true : false,
             progressPercent: percentComplete,
-            size:ReactPipesSize.S,
+            size:PipelineSize.S,
           },
           {
-            icon:ReactPipesIcons.Icon3dRotate,
-            intent: percentComplete < 90 ? ReactPipesIntent.NONE : percentComplete < 100 ? ReactPipesIntent.IN_PROGRESS : ReactPipesIntent.SUCCESS,
+            icon:PipelineIcons.Icon3dRotate,
+            intent: percentComplete < 90 ? PipelineIntent.NONE : percentComplete < 100 ? PipelineIntent.IN_PROGRESS : PipelineIntent.SUCCESS,
             active:percentComplete < 90 ? true : false,
-            size:ReactPipesSize.M,
-            className: percentComplete > 90 && percentComplete < 100 ? "rp-wiggle" : undefined
+            size:PipelineSize.M,
+            className: percentComplete > 90 && percentComplete < 100 ? "qc-wiggle" : undefined
           }
         ]}
         />

src/components/ReactPipes/ReactPipes.css → src/components/Pipeline/Pipeline.css

@@ -1,20 +1,20 @@
-.rp-pipeline {
+.qc-pipeline {
     display: flex;
     flex-direction: row;
 }
 
-.rp-pipeline .rp-pipe-wrapper {
+.qc-pipeline .qc-pipe-wrapper {
     margin: auto;
     margin-left: -10px;
     margin-right: -10px;
     z-index: -100;
 }
 
-.rp-subpipeline .rp-node-wrapper {
+.qc-subpipeline .qc-node-wrapper {
     margin: auto;
 }
 
-.rp-subpipeline {
+.qc-subpipeline {
     border: dashed 0.1px;
     margin-top: auto;
     margin-bottom: auto;