# @dcl/quests-designer

> Quests Designer

Latest version **1.1.4** (published 2024-06-18) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @dcl/quests-designer
pnpm add @dcl/quests-designer
yarn add @dcl/quests-designer
bun add @dcl/quests-designer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2024-06-18 |
| First published | 2023-09-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 111.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Decentraland |
| Maintainers | decentralandbot |

## Links

- npm: https://www.npmjs.com/package/@dcl/quests-designer
- Repository: https://github.com/decentraland/quests-designer
- Homepage: https://github.com/decentraland/quests-designer#readme
- Issues: https://github.com/decentraland/quests-designer/issues
- npm.io page: https://npm.io/package/@dcl/quests-designer

## Dependencies (4)

- [reactflow](https://npm.io/package/reactflow.md) ^11.7.4
- [deep-equal](https://npm.io/package/deep-equal.md) ^2.2.2
- [decentraland-ui](https://npm.io/package/decentraland-ui.md) ^4.10.0
- [@dcl/quests-client](https://npm.io/package/@dcl/quests-client.md) ^1.0.3

## Recent versions

- 1.1.4 (latest) — 2024-06-18
- 1.1.4-20240611190704.commit-185d712 (next) — 2024-06-11
- 1.1.4-20240607181351.commit-78f8738 — 2024-06-07
- 1.1.3 — 2023-10-25
- 1.1.3-20231025134349.commit-2b04ee3 — 2023-10-25
- 1.1.2 — 2023-10-24
- 1.1.2-20231024194553.commit-064648d — 2023-10-24
- 1.1.1 — 2023-09-18
- 1.1.1-20230918004909.commit-0af3e26 — 2023-09-18
- 1.1.1-20230918004825.commit-e7aaf11 — 2023-09-18
- 1.1.1-20230916145506.commit-3a2fb9e — 2023-09-16
- 1.1.1-20230916134924.commit-adf6d61 — 2023-09-16
- 1.1.1-20230915222753.commit-a586fb6 — 2023-09-15
- 1.1.0 — 2023-09-15
- 1.0.1-20230915210450.commit-6c44946 — 2023-09-15
- … 2 more at https://npm.io/package/@dcl/quests-designer/versions

## README

<p align="center">
  <a href="https://decentraland.org">
    <img alt="Decentraland" src="https://decentraland.org/images/logo.png" width="60" />
  </a>
</p>
<h1 align="center">
  Quests Designer
</h1>

Component to design a Quest for [Decentraland's Quests Service](https://github.com/decentraland/quests-designer).

## Setup

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

```bash
$ npm i
```

And you're ready to start contributing.


You can build the package with:

```bash
$ make build
```

and run the tests with:

```bash
$ make test
```

## Usage

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

```bash
$ npm i @dcl/quests-designer@latest
```

And then you can start using it in your code:

```tsx
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:

```bash
$ 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](https://github.com/decentraland/quests-manager).

---
_Source: https://npm.io/package/@dcl/quests-designer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._