Use github actions to mirror templates from monorepo to appropriate repos (#2781)

The idea here is to mirror project templates from our monorepo to the
corresponding "top level" repos in our organisation. The main benefits
are:

- being able to easily synchronise template versions to the last release
on release
- being able to test those templates together with the rest of the
project
- being able to deploy the unreleased version of the templates 

However, this PR will only do the synchronisation part. The main
roadblock for the latter at the moment is running `yarn install` on
packages in the current `main` that are still unreleased. There are ways
around that, but this PR is deliberately minimalistic to land it sooner.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package

---------

Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>

.github/workflows/publish-manual.yml

@@ -24,3 +24,13 @@ jobs:
         env:
           GH_TOKEN: ${{ github.token }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  publish_templates:
+    name: Publishes code templates to separate repositories
+    uses: tldraw/tldraw/.github/workflows/publish-templates.yml@dan/mirror-examples
+    secrets:
+      VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY: ${{ secrets.VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
+      NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY: ${{ secrets.NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
+    needs: [
+      deploy
+    ]

.github/workflows/publish-new.yml

@@ -40,3 +40,13 @@ jobs:
           GH_TOKEN: ${{ steps.generate_token.outputs.token }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           HUPPY_TOKEN: ${{ secrets.HUPPY_TOKEN }}
+
+  publish_templates:
+    name: Publishes code templates to separate repositories
+    uses: tldraw/tldraw/.github/workflows/publish-templates.yml@dan/mirror-examples
+    secrets:
+      VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY: ${{ secrets.VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
+      NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY: ${{ secrets.NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
+    needs: [
+      deploy
+    ]

.github/workflows/publish-templates.yml

@@ -0,0 +1,72 @@
+name: Publish templates
+
+on:
+  workflow_call:
+    secrets:
+      VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY:
+        required: true
+      NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY:
+        required: true
+
+env:
+  CI: 1
+  PRINT_GITHUB_ANNOTATIONS: 1
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  publish_vite:
+    name: 'Vite'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest-16-cores-open
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Substitute the latest published version of tldraw
+        run: |
+          export TEMPLATE=vite NPM_TAG=latest && \
+          npm view @tldraw/tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
+          cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \
+          jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."@tldraw/tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json" 
+
+      - name: Push vite template to tldraw/vite-template
+        uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 # v1.7.2
+        env:
+          SSH_DEPLOY_KEY: ${{ secrets.VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
+        with:
+          source-directory: 'templates/vite'
+          destination-github-username: 'tldraw'
+          destination-repository-name: 'vite-template'
+          user-email: dan+github.actions@tldraw.com
+          target-branch: main
+
+  publish_next:
+    name: 'Next.js'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest-16-cores-open
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Substitute the latest published version of tldraw
+        run: |
+          export TEMPLATE=nextjs NPM_TAG=latest && \
+          npm view @tldraw/tldraw dist-tags --json | jq -r ".$NPM_TAG" > /tmp/latest_tldraw && \
+          cp "templates/$TEMPLATE/package.json" /tmp/template_package.json && \
+          jq --tab --arg latest_tldraw "$(< /tmp/latest_tldraw)" '.dependencies."@tldraw/tldraw" |= $latest_tldraw' /tmp/template_package.json > "templates/$TEMPLATE/package.json" 
+
+      - name: Push next.js template to tldraw/nextjs-template
+        uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900  # v1.7.2
+        env:
+          SSH_DEPLOY_KEY: ${{ secrets.NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
+        with:
+          source-directory: 'templates/nextjs'
+          destination-github-username: 'tldraw'
+          destination-repository-name: 'nextjs-template'
+          user-email: dan+github.actions@tldraw.com
+          target-branch: main

templates/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": "next/core-web-vitals"
+}

templates/nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

templates/nextjs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 tldraw GB Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

templates/nextjs/README.md

@@ -0,0 +1,8 @@
+<div alt style="text-align: center; transform: scale(.5);">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-dark-draw.png" />
+		<img alt="tldraw" src="https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-light-draw.png" />
+	</picture>
+</div>
+
+This repo contains a very basic example of how to use [tldraw](https://github.com/tldraw/tldraw) in a [Next.js](https://nextjs.org/) app using the src directory and App router.

templates/nextjs/next.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ["@tldraw/tldraw"],
+  },
+};
+
+module.exports = nextConfig;

templates/nextjs/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "tldraw-nextjs-app-example",
+	"version": "0.1.0",
+	"private": true,
+	"author": {
+		"name": "tldraw GB Ltd.",
+		"email": "hello@tldraw.com"
+	},
+	"homepage": "https://tldraw.dev",
+	"license": "Apache-2.0",
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@tldraw/tldraw": "^2.0.0-beta.2",
+		"@types/node": "20.3.1",
+		"@types/react": "18.2.12",
+		"@types/react-dom": "18.2.5",
+		"eslint": "8.43.0",
+		"eslint-config-next": "13.4.6",
+		"next": "13.4.6",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"typescript": "5.1.3"
+	}
+}

templates/nextjs/src/app/globals.css

@@ -0,0 +1,6 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
+@import url("@tldraw/tldraw/tldraw.css");
+
+body {
+  font-family: "Inter";
+}

templates/nextjs/src/app/layout.tsx

@@ -0,0 +1,14 @@
+import './globals.css'
+
+export const metadata = {
+	title: 'tldraw Next.js app template',
+	description: 'An example of how to use tldraw in a Next.js app',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+		</html>
+	)
+}

templates/nextjs/src/app/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { Tldraw } from '@tldraw/tldraw'
+
+export default function Home() {
+	return (
+		<main>
+			<div style={{ position: 'fixed', inset: 0 }}>
+				<Tldraw />
+			</div>
+		</main>
+	)
+}

templates/nextjs/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
+}

templates/vite/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

templates/vite/.gitignore

@@ -0,0 +1,2 @@
+/*/node_modules
+node_modules