Merge pull request #6 from jamesgiu/PP-02

Pp 02

.github/workflows/deploy-github-pages.yml

@@ -0,0 +1,37 @@
+# .github/workflows/deploy-github-pages.yaml
+
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  # Event for the workflow to run on
+  push:
+    branches:
+      - 'main' # Replace with the branch you want to deploy from
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v3
+
+      # Set up Node
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/[email protected]
+        with:
+          install_command: yarn install # default: npm ci
+          build_command: yarn build-storybook # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-pipes",
-  "version": "1.0.0",
-  "description": "A component library for pipelines in React",
+  "name": "quick-acyclic",
+  "version": "0.0.1",
+  "description": "A component library for pipelines and acyclic flows in React",
   "main": "index.ts",
   "scripts": {
     "rollup": "rollup -c",
@@ -10,21 +10,30 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jamesgiu/react-pipes.git"
+    "url": "git+https://github.com/jamesgiu/quick-acyclic.git"
   },
   "keywords": [
     "react",
     "pipelines",
+    "ci/cd",
+    "continuous integration",
+    "continuous development",
+    "loading",
+    "tabler-icons",
+    "icons",
+    "progress",
+    "DAG",
+    "acyclic",
     "component",
     "pipeline",
     "stepper"
   ],
   "author": "jamesgiu",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/jamesgiu/react-pipes/issues"
+    "url": "https://github.com/jamesgiu/quick-acyclic/issues"
   },
-  "homepage": "https://github.com/jamesgiu/react-pipes#readme",
+  "homepage": "https://github.com/jamesgiu/quick-acyclic#readme",
   "devDependencies": {
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",

src/components/Demo/Demo.stories.tsx

@@ -4,7 +4,11 @@ import { Demo } from './Demo';
 
 const meta: Meta<typeof Demo> = {
     title: 'Demo',
-    component: Demo,
+    component: (Demo),
+    parameters: {
+      // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+      layout: 'centered',
+    }
   };
 
 type Story = StoryObj<typeof Demo>;

src/components/ReactPipes/ReactPipes.stories.tsx

@@ -7,6 +7,12 @@ import { ReactPipesIntent, ReactPipesSize } from './types';
 const meta: Meta<typeof ReactPipes> = {
     title: 'Pipeline',
     component: ReactPipes,
+    parameters: {
+      // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+      layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs']
   };
 
 type Story = StoryObj<typeof ReactPipes>;

src/components/ReactPipes/shared/ReactPipesNode/ReactPipesNode.stories.tsx

@@ -7,6 +7,12 @@ import ReactPipesNode from './ReactPipesNode';
 const meta: Meta<typeof ReactPipesNode> = {
     title: 'PipelineNode',
     component: ReactPipesNode,
+    parameters: {
+      // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+      layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs']
   };
 
 type Story = StoryObj<typeof ReactPipesNode>;

src/components/ReactPipes/shared/ReactPipesPipe/ReactPipesPipe.stories.tsx

@@ -6,6 +6,12 @@ import { ReactPipesIntent, ReactPipesSize } from '../../types';
 const meta: Meta<typeof ReactPipesPipe> = {
     title: 'Pipe',
     component: ReactPipesPipe,
+    parameters: {
+      // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+      layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs']
   };
 
 type Story = StoryObj<typeof ReactPipesPipe>;