[feature] [playground] add guided tour

playground/src/layout/MainLayout.js

@@ -6,7 +6,7 @@ import Upload from "../services/s3";
 import {nanoid} from "nanoid";
 import yaml from "js-yaml";
 import {useShapeStore} from "../state/shape";
-import Share from "./components/modals/Share";
+import Share from "./components/Modals/Share";
 
 const {Option, OptGroup} = Select;
 const {Content} = Layout;

playground/src/layout/components/GuidedTour.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Tour } from "antd";
+
+export default function GuidedTour({ refSchemaEditor, refRelationshipsAndAttributes, refEnforcement }) {
+  const [open, setOpen] = useState(!(localStorage.getItem("hasSeenGuidedTour") === "true"));
+
+  const onTourClose = () => {
+    localStorage.setItem("hasSeenGuidedTour", "true");
+    setOpen(false);
+  };
+
+  const steps = [
+    {
+      title: "Welcome to the Permify Playground!",
+      placement: "center",
+      description: (
+        <p>
+          This environment enables you to create and test your authorization schema within a browser. The Permify playground comprises three main sections: Schema (Authorization Model), Authorization Data, and Enforcement. While we cover these
+          sections in this tour, you can find the complete documentation at &nbsp;
+          <a href="https://docs.permify.co/" target="_blank" rel="noreferrer noopener">
+            docs.permify.co
+          </a>
+        </p>
+      ),
+    },
+    {
+      title: "Schema (Authorization Model)",
+      target: refSchemaEditor.current,
+      description: (
+        <p>
+          You can create your authorization model in this section with using our domain specific language. We already have a couple of use cases and example that you can choose from the dropdown above. Also, you can check our &nbsp;
+          <a href="https://docs.permify.co/docs/getting-started/modeling/" target="_blank" rel="noreferrer noopener">
+            docs
+          </a>
+          &nbsp; to learn more about how to model authorization in Permify.
+        </p>
+      ),
+    },
+    {
+      title: "Authorization Data",
+      target: refRelationshipsAndAttributes.current,
+      description: (
+        <p>
+          You can create sample authorization data to test your authorization logic. For instance, to create a relationship between your defined entities, simply click the 'Add Relationship' button. For further information on data creation, please
+          refer to &nbsp;
+          <a href="https://docs.permify.co/docs/getting-started/sync-data/" target="_blank" rel="noreferrer noopener">
+            docs
+          </a>
+        </p>
+      ),
+    },
+    {
+      title: "Enforcement",
+      target: refEnforcement.current,
+      description: (
+        <p>
+          Now that we have sample data and a defined schema, let's perform an access check! The YAML in the Enforcement section represents a test scenario for conducting access checks. To learn more about the capabilities of this YAML, refer to:
+          &nbsp;
+          <a href="https://docs.permify.co/docs/playground/#enforcement-access-check-scenarios" target="_blank" rel="noreferrer noopener">
+            access check scenarios
+          </a>
+        </p>
+      ),
+    },
+  ];
+  return <Tour open={open} steps={steps} onClose={onTourClose} />;
+}

playground/src/layout/sides/output.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useRef} from 'react'
 import {Allotment} from 'allotment'
 import "allotment/dist/style.css";
 import Schema from "./schema";
@@ -14,8 +14,13 @@ import Relationships from "./particials/data/relationships";
 import Attributes from "./particials/data/attributes";
 import {useShapeStore} from "../../state/shape";
 import Enforcement from "./enforcement";
+import GuidedTour from '../components/GuidedTour';
 
 function Output(props) {
+    const refSchemaEditor = useRef(null);
+    const refRelationshipsAndAttributes = useRef(null);
+    const refEnforcement = useRef(null);
+
     const [dataSelected, setDataSelected] = useState('relationships');
     const [schemaSelected, setSchemaSelected] = useState('schema');
     const [isOpen, setIsOpen] = useState(false);
@@ -81,11 +86,12 @@ function Output(props) {
         <div>
             {!props.loading &&
                 <>
+                    <GuidedTour refSchemaEditor={refSchemaEditor} refRelationshipsAndAttributes={refRelationshipsAndAttributes} refEnforcement={refEnforcement}/>
                     <div style={{height: '100vh'}} className="ml-10 mr-10">
                         <Allotment vertical defaultSizes={[100, 100]} >
                             <Allotment.Pane snap visible={!isOpen}>
                                 <Allotment>
-                                    <Allotment.Pane snap>
+                                    <Allotment.Pane snap ref={refSchemaEditor}>
                                         <Card title={
                                             <Radio.Group defaultValue="schema" buttonStyle="solid"
                                                          onChange={onSchemaSelectedChange}
@@ -99,7 +105,7 @@ function Output(props) {
                                             {renderSchemaComponent()}
                                         </Card>
                                     </Allotment.Pane>
-                                    <Allotment.Pane snap>
+                                    <Allotment.Pane snap ref={refEnforcement}>
                                         <Card title="Enforcement" className="ml-10"
                                               extra={<div style={{display: 'flex', alignItems: 'center'}}>
                                                   <Button
@@ -117,7 +123,7 @@ function Output(props) {
                                     </Allotment.Pane>
                                 </Allotment>
                             </Allotment.Pane>
-                            <Allotment.Pane snap>
+                            <Allotment.Pane snap ref={refRelationshipsAndAttributes}>
                                 <Card title={
                                     <Radio.Group
                                         defaultValue="relationships"