From fa714db746211065ad2c0c72674c58c5902f8963 Mon Sep 17 00:00:00 2001 From: Alok Gupta Date: Mon, 23 Sep 2024 18:33:26 +0530 Subject: [PATCH] feat : add studio tour for first time user (#1120) Co-authored-by: asyncapi-bot --- .sonarcloud.properties | 2 +- apps/studio-next/package.json | 2 + apps/studio-next/src/app/globals.css | 63 + .../src/components/Editor/Editor.tsx | 2 +- .../src/components/Editor/EditorSidebar.tsx | 2 +- .../src/components/Navigationv3.tsx | 2 +- apps/studio-next/src/components/Sidebar.tsx | 23 +- .../src/components/StudioWrapper.tsx | 10 +- .../src/components/Template/HTMLWrapper.tsx | 2 +- .../src/components/Terminal/Terminal.tsx | 2 +- apps/studio-next/src/components/Toolbar.tsx | 2 +- apps/studio-next/src/helpers/driver.ts | 153 + apps/studio-next/src/state/other.state.ts | 2 +- apps/studio/package.json | 5 +- apps/studio/src/App.tsx | 16 +- apps/studio/src/components/Editor/Editor.tsx | 2 +- .../src/components/Editor/EditorSidebar.tsx | 2 +- apps/studio/src/components/Navigationv3.tsx | 2 +- apps/studio/src/components/Sidebar.tsx | 21 +- .../src/components/Template/HTMLWrapper.tsx | 2 +- .../src/components/Terminal/Terminal.tsx | 2 +- apps/studio/src/components/Toolbar.tsx | 36 +- apps/studio/src/helpers/driver.ts | 153 + apps/studio/src/main.css | 118 +- apps/studio/src/state/other.state.ts | 2 +- doc/adr/0008-use-studio-tour.md | 48 + pnpm-lock.yaml | 8586 ++++++++--------- 27 files changed, 4831 insertions(+), 4431 deletions(-) create mode 100644 apps/studio-next/src/helpers/driver.ts create mode 100644 apps/studio/src/helpers/driver.ts create mode 100644 doc/adr/0008-use-studio-tour.md diff --git a/.sonarcloud.properties b/.sonarcloud.properties index 5d00c1309..353095205 100644 --- a/.sonarcloud.properties +++ b/.sonarcloud.properties @@ -1,4 +1,4 @@ # Disable specific file since it would introduce more complexity to reduce it - mainly code complexity and complex template literals sonar.exclusions=apps/studio/public/js/monaco/**,apps/studio/src/tailwind.css,apps/studio/src/components/SplitPane/**,apps/studio-next/cypress/**,apps/studio-next/Dockerfile # Disable duplicate code in tests since it would introduce more complexity to reduce it. -sonar.cpd.exclusions=apps/studio/**,apps/studio-next/src/components/Navigationv3.tsx,apps/studio-next/src/components/Navigation.tsx,apps/studio-next/cypress/** +sonar.cpd.exclusions=apps/studio/**,apps/studio-next/src/components/Navigationv3.tsx,apps/studio-next/src/components/Navigation.tsx,apps/studio-next/cypress/**,apps/studio-next/src/helpers/driver.ts diff --git a/apps/studio-next/package.json b/apps/studio-next/package.json index b3381f274..6530f14f0 100644 --- a/apps/studio-next/package.json +++ b/apps/studio-next/package.json @@ -36,6 +36,8 @@ "@types/react": "18.2.18", "@types/react-dom": "18.2.7", "autoprefixer": "10.4.14", + "codemirror": "^6.0.1", + "driver.js": "^1.3.1", "eslint-config-next": "13.4.12", "js-base64": "^3.7.3", "js-file-download": "^0.4.12", diff --git a/apps/studio-next/src/app/globals.css b/apps/studio-next/src/app/globals.css index 7db48e56c..cb6e2521b 100644 --- a/apps/studio-next/src/app/globals.css +++ b/apps/studio-next/src/app/globals.css @@ -118,3 +118,66 @@ .tippy-box[data-placement^="right"] > .tippy-arrow:before { border-right-color: rgba(17, 24, 39) !important; } +.driver-popover.driverjs-theme { + background-color: #1a1a1a; + border: 1px solid #333333; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); +} + +.driver-popover.driverjs-theme .driver-popover-title { + font-size: 18px; + font-weight: bold; + color: #db2777; +} + +.driver-popover.driverjs-theme .driver-popover-description { + font-size: 14px; + color: #cccccc; + font-family: sans-serif; +} + +.driver-popover.driverjs-theme button { + background-color: #db2777; + color: #ffffff !important; + border: none !important; + font-size: 14px; + padding: 8px 20px; + border-radius: 4px; + margin-left: 10px; + text-shadow: none; + font-weight: bold; + text-align: center; + transition: background-color 0.3s ease; +} + +.driver-popover.driverjs-theme button:not(.driver-popover-close-btn):hover { + background-color: #c81c67; + cursor: pointer; +} + +.driver-popover.driverjs-theme .driver-popover-close-btn { + color: #999999; + font-size: 20px; + background-color: transparent; + top: 13px; + right: 5px; + padding: 0%; + cursor: pointer; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow { + border-left-color: #1a1a1a; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow { + border-right-color: #1a1a1a; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow { + border-top-color: #1a1a1a; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { + border-bottom-color: #1a1a1a; +} \ No newline at end of file diff --git a/apps/studio-next/src/components/Editor/Editor.tsx b/apps/studio-next/src/components/Editor/Editor.tsx index 250ff8c10..00c4c3357 100644 --- a/apps/studio-next/src/components/Editor/Editor.tsx +++ b/apps/studio-next/src/components/Editor/Editor.tsx @@ -21,7 +21,7 @@ export const Editor: React.FunctionComponent = () => { size={editorHeight} defaultSize={editorHeight} > -
+
diff --git a/apps/studio-next/src/components/Editor/EditorSidebar.tsx b/apps/studio-next/src/components/Editor/EditorSidebar.tsx index da61dbc81..2cdad0ba0 100644 --- a/apps/studio-next/src/components/Editor/EditorSidebar.tsx +++ b/apps/studio-next/src/components/Editor/EditorSidebar.tsx @@ -38,7 +38,7 @@ export const EditorSidebar: React.FunctionComponent< className="flex flex-row items-center" style={{ height: '30px', lineHeight: '30px' }} > -
+
  • diff --git a/apps/studio-next/src/components/Navigationv3.tsx b/apps/studio-next/src/components/Navigationv3.tsx index 57d7e4e07..3efe8143a 100644 --- a/apps/studio-next/src/components/Navigationv3.tsx +++ b/apps/studio-next/src/components/Navigationv3.tsx @@ -406,7 +406,7 @@ export const Navigationv3: React.FunctionComponent = ({ const components = document.components(); return ( -
    +