Component to design a Quest for Decentraland's Quests Service.

Setup

If you want to contribute to the package, you can clone the repository and install the dependencies of the project with:

$ npm i

And you're ready to start contributing.

You can build the package with:

$ make build

and run the tests with:

$ make test

Usage

To use this package in your project, you can install it with:

$ npm i @dcl/quests-designer@latest

And then you can start using it in your code:

import React from "react"
import { createRoot } from "react-dom/client"
import { QuestsDesigner } from "@dcl/quests-designer"
import { initialNodes } from "@dcl/quests-designer/dist/utils"

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QuestsDesigner
      initialEdges={[]}
      initialNodes={initialNodes}
      backButton={() => alert("close")}
      saveDesignButton={{
        onClick: async (def, nodes, edges) => {
          console.log(def)
          console.log(nodes)
          console.log(edges)
          await navigator.clipboard.writeText(JSON.stringify(def))
          alert("Saved")
        },
        content: "Generate Quest",
      }}
    />
  </React.StrictMode>,
)

Example

You can see an example of the package in action by running:

$ npm run example

This will start a local server with a simple example of the package.

Also this component is used in the Quests Manager.