feat: adding onboarding documentation to studio

package.json

@@ -115,6 +115,7 @@
     "raw-loader": "^4.0.2",
     "react-scripts": "4.0.3",
     "semantic-release": "^19.0.3",
+    "swiper": "^8.3.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "ts-node": "^10.4.0",
     "typescript": "^4.4.3"

src/components/Modals/Onboarding/FeatureContent.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface FeatureContentProps {
+  featureTitle: React.ReactNode;
+  featureDescription: React.ReactNode;
+  newFeatureTag: boolean;
+  featureScreenshot: React.ReactNode;
+  featureCount: number;
+};
+
+export const FeatureContent: React.FunctionComponent<React.PropsWithChildren<FeatureContentProps>> = ({
+  featureTitle,
+  featureDescription,
+  newFeatureTag,
+  featureScreenshot,
+  featureCount
+}) => {
+  return (
+    <div className='feature-content'>
+      {newFeatureTag 
+        ? <span className='new-feature-tag text-xs font-semibold text-pink-600'>
+            NEW FEATURE
+          </span> 
+        : <React.Fragment></React.Fragment>}
+      <div className='mt-2'>
+        <h1 className='feature-title text-lg leading-7 font-bold'>{featureTitle}</h1>
+        <p className='feature-description text-sm text-gray-500 leading-6 font-normal'>{featureDescription}</p>
+      </div>
+      <img src={featureScreenshot?.toString()} 
+        className='' 
+        alt='feature-cover' 
+      />
+    </div>
+  )
+}

src/components/Modals/Onboarding/OnboardingContent.json

@@ -0,0 +1,27 @@
+[
+  {
+    "newFeatureTag": true,
+    "featureTitle": "Visualiser",
+    "featureDescription": "Visualiser for your managing EDA Driven APIs, visually",
+    "featureScreenshot": "https://placekitten.com/700/240"
+  },
+  {
+    "newFeatureTag": true,
+    "featureTitle": "Visualiser",
+    "featureDescription": "Visualiser for your managing EDA Driven APIs, visually",
+    "featureScreenshot": "https://placekitten.com/700/240"
+  },
+  {
+    "newFeatureTag": true,
+    "featureTitle": "Visualiser",
+    "featureDescription": "Visualiser for your managing EDA Driven APIs, visually",
+    "featureScreenshot": "https://placekitten.com/700/240"
+  },
+  {
+    "newFeatureTag": true,
+    "featureTitle": "Visualiser",
+    "featureDescription": "Visualiser for your managing EDA Driven APIs, visually",
+    "featureScreenshot": "https://placekitten.com/700/240"
+  }
+
+]

src/components/Modals/Onboarding/OnboardingModal.tsx

@@ -0,0 +1,60 @@
+import React, { useRef, useState } from "react";
+import { VscBook } from "react-icons/vsc";
+import { ConfirmModal } from "../ConfirmModal";
+import { FeatureContent } from "./FeatureContent";
+import OnboardingContent from './OnboardingContent.json';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, A11y } from 'swiper';
+
+import { useSwiperRef, checkLastSnapIndex } from '../../common/swiper';
+
+export const OnboardingModal: React.FunctionComponent = () => {
+    const onboardingContentRef = useRef(OnboardingContent);
+
+    const [nextEl, nextElRef] = useSwiperRef();
+    const [prevEl, prevElRef] = useSwiperRef();
+
+    const [current, setCurrent] = useState(0);
+
+    return (
+        <ConfirmModal
+            title={'Onboarding Docs'}
+            confirmText="Get Started"
+            confirmDisabled={false}
+            opener={
+                <button
+                    className={'flex border-l-2 text-gray-500 hover:text-white border-gray-800 focus:outline-none border-box p-4'}
+                    type="button"  
+                    title="Onboarding"  
+                >
+                    <VscBook className="w-5 h-5" />
+                </button>
+            }
+        >
+            <Swiper
+                modules={[Navigation, A11y]}
+                spaceBetween={8}
+                slidesPerView={1}
+                onSlideChange={(swiper) => setCurrent(swiper.snapIndex)}
+                breakpoints={{
+                    640: {
+                        slidesPerView: 1
+                    }
+                }}
+            >
+                {onboardingContentRef.current?.map((feature, featureIndex) => (
+                    <SwiperSlide key={featureIndex}>
+                        <FeatureContent 
+                            featureTitle={feature?.featureTitle}
+                            featureDescription={feature?.featureDescription}
+                            newFeatureTag={feature?.newFeatureTag}
+                            featureScreenshot={feature?.featureScreenshot}
+                            featureCount={featureIndex+1}
+                        />
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+        </ConfirmModal>
+    )
+}

src/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile } from
 import { SettingsModal } from './Modals/Settings/SettingsModal';
 
 import state from '../state';
+import { OnboardingModal } from './Modals/Onboarding/OnboardingModal';
 
 type NavItemType = 'navigation' | 'editor' | 'template' | 'visualiser';
 
@@ -115,6 +116,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = () => {
         ))}
       </div>
       <div className="flex flex-col">
+        <OnboardingModal />
         <SettingsModal />
       </div>
     </div>

src/components/common/swiper.js

@@ -0,0 +1,27 @@
+import { useState, useRef, useEffect } from 'react'
+
+export function useSwiperRef() {
+  const [wrapper, setWrapper] = useState(null);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    setWrapper(ref.current);
+  }, []);
+
+  return [
+    wrapper,
+    ref,
+  ]
+};
+
+export function checkLastSnapIndex(current) {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const viewportWidth = document.documentElement.clientWidth;
+  if (viewportWidth <= 640) {
+    return current === 4;
+  }
+  return current === 3;
+}