Merge pull request #14 from jamesgiu/RP-rename

Rp rename
jamesgiu · Apr 25, 2024 · c4787e8 · c4787e8
2 parents 960e515 + e179040
commit c4787e8
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ![ezgif-4-fef5b85f32](https://github.com/jamesgiu/react-pipes/assets/13777223/57c7879e-4438-44a2-86d5-3bfa50df5b22)
 
-# 🔀 Quick Cyc ([sɪk]) - NOT RECOMMENDED FOR PRODUCTION
+# 🔀 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.
@@ -23,53 +23,30 @@ npm i quick-cyc
 
 ### Quick code example
 ```
-<ReactPipes
-  label="Pipeline"
+<Pipeline
+  label= {'Pipeline'}
   schema={[
     {
-      active: false,
-      attempts: 1,
-      icon: 'Icon2fa',
-      intent: 'qc-intent-success',
-      size: 'qc-size-m'
+    icon:PipelineIcons.Icon2fa,
+    intent:PipelineIntent.SUCCESS,
+    active:false,
+    attempts:1,
+    size:PipelineSize.M,
     },
     {
-      active: false,
-      intent: 'qc-intent-success',
-      size: 'qc-size-s'
+      intent:PipelineIntent.SUCCESS,
+      active:false,
+      size:PipelineSize.S,
     },
     {
-      active: false,
-      attempts: 1,
-      icon: 'IconAward',
-      intent: 'qc-intent-success',
-      size: 'qc-size-m'
-    },
-    {
-      active: false,
-      intent: 'qc-intent-success',
-      size: 'qc-size-s'
-    },
-    {
-      active: true,
-      icon: 'IconClock',
-      intent: 'qc-intent-in-progress',
-      size: 'qc-size-m'
-    },
-    {
-      active: true,
-      intent: 'qc-intent-in-progress',
-      progressPercent: 30,
-      size: 'qc-size-s'
-    },
-    {
-      active: false,
-      icon: 'Icon3dRotate',
-      intent: 'qc-intent-none',
-      size: 'qc-size-m'
+      icon:PipelineIcons.IconAward,
+      intent:PipelineIntent.SUCCESS,
+      active:false,
+      attempts:1,
+      size:PipelineSize.M,
     }
   ]}
-/>
+  />
 ```
 
 ## ⚙ Components
@@ -105,6 +82,6 @@ npm i quick-cyc
 
 | Prop          | Description        | Optional  |
 | ------------- |:-------------:| -----:|
-| schema      | (ReactPipesProps \| ReactPipesNodeProps \| ReactPipesPipeProps)[]  | no
+| schema      | (PipelineProps \| PipelineNodeProps \| PipelinePipesProps)[]  | no
 
 <img src="https://github.com/jamesgiu/quick-cyc/assets/13777223/7706e6f4-b3e6-49a0-a693-42e0069a11bb" width="50" height="50" align="right"/>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quick-cyc",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "A component library for pipelines and acyclic flows in React",
   "scripts": {
     "rollup": "rollup -c",

diff --git a/src/components/Pipeline/Pipeline.css b/src/components/Pipeline/Pipeline.css
@@ -7,7 +7,7 @@
     margin: auto;
     margin-left: -10px;
     margin-right: -10px;
-    z-index: -100;
+    z-index: 0;
 }
 
 .qc-subpipeline .qc-node-wrapper {

diff --git a/src/components/Pipeline/shared/PipelineNode/PipelineNode.css b/src/components/Pipeline/shared/PipelineNode/PipelineNode.css
@@ -7,7 +7,7 @@
     border: solid;
     position: relative;
     transition: background-color 0.5s, border 0.5s;
-    z-index: 0;
+    z-index: 1;
 }
 
 .qc-node-percent-complete {
@@ -17,7 +17,7 @@
     top: 0;
     left: 0;
     border-radius: 50%;
-    z-index: 1;
+    z-index: 2;
     opacity: 0.3;
     transform: rotate(270deg);
 }
@@ -54,7 +54,7 @@
     text-align: center;
     vertical-align: middle;
     border: solid 0.1px;
-    z-index: 2;
+    z-index: 3;
 }
 
 .qc-top-right-icon.qc-size-xs {
@@ -101,7 +101,7 @@
 }
 
 .qc-node-icon {
-    z-index: 1;
+    z-index: 2;
 }
 
 /* Sizes */