Description

We need to add a tour (https://github.com/gilbarbara/react-joyride) to our playground in order to navigate and welcome the newcomers.

Expected Behavior

The tour component for the playground should include 4 steps:

1. Step: Welcome to the Permify Playground

   • Functionality: The initial step in the tour component should prompt when the playground opens for the first time.
   • Text: 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 docs.permify.co/

2. Step: Schema (Authorization Model)

• Functionality: Second step in the tour component should highlight the Schema section in playground.
• Text: 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 docs to learn more about how to model authorization in Permify.

3. Step: Authorization Data

• Functionality: Third step in the tour component should highlight the Relationships/Attributes below section in playground.
• Text: 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: [documentation link].

4. Step: Enforcement

• Functionality: Fourth step in the tour component should highlight the Enforcement section in playground.
• Text: 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: https://docs.permify.co/docs/playground/#enforcement-access-check-scenarios.

Implementation Notes

• The tour interface react-joyride should be compatible with the playground's styles and colors.

Acceptance Criteria

• Implement the react-joyride package into Playground.
• Ensure correct highlighting of the related section in the steps.
• Confirm compatibility with the current style and colors of the playground.
• Verify the correctness of the content (text) provided in the issue description.