-
-
Notifications
You must be signed in to change notification settings - Fork 100
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat : add studio tour for first time user (#1120)
Co-authored-by: asyncapi-bot <[email protected]>
- Loading branch information
1 parent
1608159
commit fa714db
Showing
27 changed files
with
4,831 additions
and
4,431 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| import { driver } from 'driver.js'; | ||
| import 'driver.js/dist/driver.css'; | ||
|
|
||
| export const driverObj = driver({ | ||
| popoverClass: 'driverjs-theme', | ||
| showProgress: true, | ||
| showButtons: ['next', 'previous', 'close'], | ||
| nextBtnText: 'Next', | ||
| prevBtnText: 'Back', | ||
|
|
||
| steps: [ | ||
| { | ||
| element: '#tour-start', | ||
| popover: { | ||
| title: 'Welcome to AsyncAPI Studio', | ||
| description: | ||
| 'Discover a powerful tool for designing, documenting, and managing AsyncAPI-based applications. This tour will guide you through key features to enhance your AsyncAPI development workflow.', | ||
| side: 'left', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#navbar', | ||
| popover: { | ||
| title: 'Control Center', | ||
| description: | ||
| 'This control center allows you to toggle the editor, navigation panel, and HTML preview on or off. It\'s also your gateway to creating new AsyncAPI templates for various protocols like Apache Kafka, WebSocket, HTTP, and more. Customize your workspace and jumpstart your AsyncAPI design process from here.', | ||
| side: 'left', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#navigation-panel', | ||
| popover: { | ||
| title: 'Navigation Panel', | ||
| description: | ||
| 'Explore your API structure using this navigation panel. Quickly access Servers, Channels, Operations, Messages, and Schemas - the building blocks of your AsyncAPI document.', | ||
| side: 'left', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#editor', | ||
| popover: { | ||
| title: 'The Powerful Editor', | ||
| description: | ||
| 'Create and edit your AsyncAPI documents with ease. Enjoy features like syntax highlighting, auto-completion, and real-time validation to streamline your API design process.', | ||
| side: 'bottom', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#editor-dropdown', | ||
| popover: { | ||
| title: 'Share and Editor Options', | ||
| description: | ||
| 'Collaborate on your work and access document management tools. Import, export, and convert your API specifications with just a few clicks.', | ||
| side: 'top', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#terminal', | ||
| popover: { | ||
| title: 'Terminal', | ||
| description: | ||
| 'Quickly identify and resolve issues in your specification. View errors, warnings, and helpful messages to ensure your API documentation is error-free.', | ||
| side: 'bottom', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#html-preview', | ||
| popover: { | ||
| title: 'Instant HTML Preview', | ||
| description: | ||
| 'See your API documentation come to life in real-time. This panel renders a human-readable version of your specification as you make changes.', | ||
| side: 'top', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#studio-setting', | ||
| popover: { | ||
| title: 'Studio Settings', | ||
| description: | ||
| 'Customize your AsyncAPI Studio experience. Adjust preferences and settings to tailor the tool to your workflow.', | ||
| side: 'top', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#communicate', | ||
| popover: { | ||
| title: 'Join AsyncAPI Community', | ||
| description: | ||
| 'Connect with fellow AsyncAPI developers. Join our Slack community to share ideas, get help, and stay updated on AsyncAPI news and events.', | ||
| side: 'top', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| const {activeIndex} = driverObj.getState(); | ||
| localStorage.setItem('currentTourStep', activeIndex?.toString() || '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| element: '#Thank-you', | ||
| popover: { | ||
| title: 'Thank You', | ||
| description: | ||
| 'Thanks for exploring AsyncAPI Studio. We hope you find it valuable for your API projects. Feel free to reach out with any questions or feedback. Happy coding!', | ||
| side: 'top', | ||
| align: 'start', | ||
| onPopoverRender: () => { | ||
| localStorage.setItem('currentTourStep', '0'); | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.