Open source SpiceDB Playground (#1)

* OSS Release

* Add support for node v18

* Vercel build info

* PR feedback

- Remove unused graphql utilities
- Clean up auth config options
- Clean up header values
- Add links to READMEs

* PR feedback

* Fix version number

.gitattributes

@@ -0,0 +1,2 @@
+wasm/main.wasm filter=lfs diff=lfs merge=lfs -text
+wasm/zed.wasm filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+yarn-debug.log
+yarn-error.log
+spicedb
+zed
+build
+.vercel

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "examples"]
+	path = examples
+	url = https://github.com/authzed/examples.git

CODE-OF-CONDUCT.md

@@ -0,0 +1,24 @@
+# Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery
+- Personal attacks
+- Trolling or insulting/derogatory comments
+- Public or private harassment
+- Publishing other’s private information, such as physical or electronic addresses, without explicit permission
+- Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct.
+By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project.
+Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
+
+This Code of Conduct is adapted from the Contributor Covenant, version 1.2.0, available [here](https://www.contributor-covenant.org/version/1/2/0/code-of-conduct.html)

CONTRIBUTING.md

@@ -0,0 +1,113 @@
+# How to contribute
+
+## Communication
+
+- Bug Reports & Feature Requests: [GitHub Issues]
+- Questions: [Discord]
+
+All communication in these forums abides by our [Code of Conduct].
+
+[GitHub Issues]: https://github.com/authzed/playground/issues
+[Code of Conduct]: CODE-OF-CONDUCT.md
+[Discord]: https://authzed.com/discord
+
+## Creating issues
+
+If any part of the project has a bug or documentation mistakes, please let us know by opening an issue.
+All bugs and mistakes are considered seriously, regardless of complexity.
+
+Before creating an issue, please check that an issue reporting the same problem does not already exist.
+To make the issue accurate and easy to understand, please try to create issues that are:
+
+- Unique -- do not duplicate existing bug report.
+  Duplicate bug reports will be closed.
+- Specific -- include as much details as possible: which version, what environment, what configuration, etc.
+- Reproducible -- include the steps to reproduce the problem.
+  Some issues might be hard to reproduce, so please do your best to include the steps that might lead to the problem.
+- Isolated -- try to isolate and reproduce the bug with minimum dependencies.
+  It would significantly slow down the speed to fix a bug if too many dependencies are involved in a bug report.
+  Debugging external systems that rely on this project is out of scope, but guidance or help using the project itself is fine.
+- Scoped -- one bug per report.
+  Do not follow up with another bug inside one report.
+
+It may be worthwhile to read [Elika Etemad’s article on filing good bug reports][filing-good-bugs] before creating a bug report.
+
+Maintainers might ask for further information to resolve an issue.
+
+[filing-good-bugs]: http://fantasai.inkedblade.net/style/talks/filing-good-bugs/
+
+## Finding issues
+
+You can find issues by priority: [Urgent], [High], [Medium], [Low], [Maybe].
+There are also [good first issues].
+
+[Urgent]: https://github.com/authzed/playground/labels/priority%2F0%20urgent
+[High]: https://github.com/authzed/playground/labels/priority%2F1%20high
+[Medium]: https://github.com/authzed/playground/labels/priority%2F2%20medium
+[Low]: https://github.com/authzed/playground/labels/priority%2F3%20low
+[Maybe]: https://github.com/authzed/playground/labels/priority%2F4%20maybe
+[good first issues]: https://github.com/authzed/playground/labels/hint%2Fgood%20first%20issue
+
+## Contribution flow
+
+This is a rough outline of what a contributor's workflow looks like:
+
+- Create an issue
+- Fork the project
+- Create a [feature branch]
+- Push changes to your branch
+- Submit a pull request
+- Respond to feedback from project maintainers
+- Rebase to squash related and fixup commits
+- Get LGTM from reviewer(s)
+- Merge with a merge commit
+
+Creating new issues is one of the best ways to contribute.
+You have no obligation to offer a solution or code to fix an issue that you open.
+If you do decide to try and contribute something, please submit an issue first so that a discussion can occur to avoid any wasted efforts.
+
+[feature branch]: https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow
+
+## Legal requirements
+
+In order to protect the project, all contributors are required to sign our [Contributor License Agreement][cla] before their contribution is accepted.
+
+The signing process has been automated by [CLA Assistant][cla-assistant] during the Pull Request review process and only requires responding with a comment acknowledging the agreement.
+
+[cla]: https://github.com/authzed/cla/blob/main/v1/icla.md
+[cla-assistant]: https://github.com/cla-assistant/cla-assistant
+
+## Common tasks
+
+We use [yarn](https://yarnpkg.com/) to run common tasks in the project.
+
+### Testing
+
+In order to build and test the project, a [modern version of node] and knowledge of  [React app architecture] are required.
+
+[modern version of node]: https://nodejs.org/en/about/previous-releases
+[React app architecture]: https://react.dev/
+
+```sh
+yarn run test
+```
+
+To run integration tests:
+
+```sh
+yarn run cy:run
+```
+
+### Linting
+
+```sh
+yarn run lint
+```
+
+### Adding dependencies
+
+This project uses [yarn](https://yarnpkg.com/) for managing dependencies.
+
+```sh
+yarn add <package>
+```

Dockerfile

@@ -0,0 +1,51 @@
+ARG BASE_IMAGE=node:18-alpine3.18
+
+FROM --platform=$BUILDPLATFORM $BASE_IMAGE AS playground-builder
+WORKDIR /app
+COPY ./package.json .
+COPY ./yarn.lock .
+COPY ./playground-ui ./playground-ui
+COPY ./spicedb-common ./spicedb-common
+COPY ./playground/package.json ./playground/package.json
+ENV YARN_CACHE_FOLDER=/tmp/yarn_cache
+RUN yarn install --frozen-lockfile --production --non-interactive --network-timeout 1000000
+
+COPY ./playground ./playground
+
+WORKDIR /app/playground
+
+ARG APPLICATION_ROOT=/
+ARG NODE_OPTIONS=--openssl-legacy-provider
+ENV PUBLIC_URL ${APPLICATION_ROOT}
+RUN yarn build
+
+FROM $BASE_IMAGE AS playground-verifier
+RUN npm install -g jshint
+COPY ./playground/contrib/generate-config-env.sh .
+COPY ./playground/contrib/test-config-env.sh .
+RUN ./test-config-env.sh
+RUN echo 'Config Verified' > verified
+
+FROM nginx:1.25.2
+LABEL maintainer="AuthZed <[email protected]>"
+EXPOSE 3000
+ENV PORT=3000
+
+ENTRYPOINT ["./docker-entrypoint-wrapper.sh"]
+CMD []
+
+COPY ./playground/contrib/generate-config-env.sh .
+COPY ./playground/contrib/test-nginx-conf.sh .
+COPY ./playground/contrib/test-config-env.sh .
+COPY ./playground/contrib/nginx.conf.tmpl .
+COPY ./playground/contrib/docker-entrypoint-wrapper.sh .
+RUN bash ./test-nginx-conf.sh
+
+COPY --from=playground-verifier verified .
+COPY --from=playground-builder /app/playground/build/ /usr/share/nginx/html/
+COPY wasm/main.wasm  /usr/share/nginx/html/static/main.wasm
+COPY wasm/zed.wasm  /usr/share/nginx/html/static/zed.wasm
+
+RUN mkdir /usr/share/nginx/html/static/schemas
+COPY examples/schemas/ /usr/share/nginx/html/static/schemas
+RUN ls /usr/share/nginx/html/static/schemas > /usr/share/nginx/html/static/schemas/_all

README.md

@@ -0,0 +1,124 @@
+<a href="https://authzed.com#gh-dark-mode-only" target="_blank">
+    <img width="300" src="https://github.com/authzed/spicedb/assets/343539/82234426-468b-4297-8b5c-f06a44fe2278" alt="spicedb logo">
+</a>
+<a href="https://authzed.com#gh-light-mode-only" target="_blank">
+    <img width="300" src="https://github.com/authzed/spicedb/assets/343539/312ff046-7076-4c30-afd4-2e3d86c06f51" alt="spicedb Logo">
+</a>
+
+# Playground
+
+The SpiceDB Playground is an interactive app for building a [SpiceDB] schema, interacting with test relationships, and quickly iterating with test assertions.
+
+Whether you're just getting started learning SpiceDB concepts or need to develop a new permissions system schema for your application, the SpiceDB playground has functionality to help.
+
+SpiceDB Playground features include:
+
+- Rich text editor with syntax highlighting and tooltips
+- Visual relationship editor with support for defining caveat context data
+- Developer system that detects and presents schema and data errors
+- Real-time check requests against a full SpiceDB instance running client side via WASM
+- Fully functional [zed](https://github.com/authzed/zed) CLI instance running client side via WASM
+- Schema and relationship graph visualization
+- Import and export schema and workspace data as a YAML file
+
+## What is SpiceDB?
+
+SpiceDB is a graph database purpose-built for storing and evaluating access control data.
+
+As of 2021, broken access control became the #1 threat to the web. With SpiceDB, developers finally have the solution to stopping this threat the same way as the hyperscalers.
+
+Learn more about [SpiceDB]
+
+[SpiceDB]: https://authzed.com/spicedb
+
+## Getting Started
+
+## Deploying
+
+### Docker
+
+Run the latest Docker container
+
+```command
+docker run -it ghcr.io/authzed/spicedb-playground:latest
+```
+
+### Vercel
+
+Deploy an instance hosted on Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fauthzed%2Fplayground&project-name=spicedb-playground&repository-name=spicedb-playground)
+
+or using the Vercel CLI
+
+```command
+NODE_OPTIONS=--openssl-legacy-provider vercel build
+vercel deploy --prebuilt
+```
+
+### NodeJS
+
+The `build` directory in the project root directory after running `yarn build` will contain an optimized production React application that can be served using your preferred NodeJS hosting method.
+
+> ℹ️ Node v18.x is required.
+
+For example:
+
+```command
+NODE_OPTIONS=--openssl-legacy-provider yarn global install serve
+cd build
+serve
+```
+
+## Installing dependencies
+
+Setup git submodules: `git submodule update --init --recursive`
+
+Run `yarn install` in the _root_ project directory.
+
+## Updating wasm dependencies
+
+The project contains prebuilt WASM files for versions of both SpiceDB and zed. To update the versions, edit the following script files with the appropriate tag/commit hash and then run from the project root:
+
+`yarn run update:spicedb`
+
+`yarn run update:zed`
+
+## Developing your own schema
+
+You can try both [SpiceDB](https://github.com/authzed/spicedb) and [zed](https://github.com/authzed/zed) entirely in your browser on a SpiceDB Playground deployment thanks to the power of [WebAssembly](https://authzed.com/blog/some-assembly-required).
+
+If you don't want to start with the examples loadable from a Playground, you can follow a guide for [developing a schema] or review the the schema language [design documentation].
+
+Watch the SpiceDB primer video to get started with schema development:
+
+<a href="https://www.youtube.com/watch?v=AoK0LrkGFDY" target="_blank"><img width="600" alt="SpiceDB Primer YouTube Thumbnail" src="https://github.com/authzed/spicedb/assets/343539/7784dfa2-b330-4c5e-b32a-090759e48392"></a>
+
+[developing a schema]: https://authzed.com/docs/spicedb/modeling/developing-a-schema
+[design documentation]: https://authzed.com/docs/spicedb/concepts/schema
+
+## Contribute
+
+[CONTRIBUTING.md] documents communication, contribution flow, legal requirements, and common tasks when contributing to the project.
+
+You can find issues by priority: [Urgent], [High], [Medium], [Low], [Maybe].
+There are also [good first issues].
+
+Our [documentation website] is also open source if you'd like to clarify anything you find confusing.
+
+[CONTRIBUTING.md]: CONTRIBUTING.md
+[Urgent]: https://github.com/authzed/playground/labels/priority%2F0%20urgent
+[High]: https://github.com/authzed/playground/labels/priority%2F1%20high
+[Medium]: https://github.com/authzed/playground/labels/priority%2F2%20medium
+[Low]: https://github.com/authzed/playground/labels/priority%2F3%20low
+[Maybe]: https://github.com/authzed/playground/labels/priority%2F4%20maybe
+[good first issues]: https://github.com/authzed/playground/labels/hint%2Fgood%20first%20issue
+[documentation website]: https://github.com/authzed/docs
+
+## Joining the SpiceDB Community
+
+SpiceDB is a community project where everyone is invited to participate and [feel welcomed].
+While the project has a technical goal, participation is not restricted to those with code contributions.
+Join our [Community Discord](https://authzed.com/discord) to ask questions and meet other users.
+
+[feel welcomed]: CODE-OF-CONDUCT.md

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "code",
+  "private": "true",
+  "version": "0.1.0",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "yarn workspace playground build && ./scripts/copy-build.sh",
+    "update:spicedb": "./scripts/update-spicedb.sh",
+    "update:zed": "./scripts/update-zed.sh"
+  },
+  "workspaces": [
+    "spicedb-common",
+    "playground-ui",
+    "playground"
+  ],
+  "dependencies": {}
+}

playground-ui/README.md

@@ -0,0 +1,13 @@
+# PlaygroundUI
+
+PlaygroundUI is our React-UI skeleton.
+
+## Installing dependencies
+
+Run `yarn install` in the _parent_ directory.
+
+### Referencing
+
+```ts
+import LoadingView from '@code/playground-ui/src/LoadingView';
+```