added canva example repository from https://github.com/canva-sdks/can…

…va-connect-api-starter-kit.git, moved .github folder and .gitignore to root, removed connect-api/test.txt

.github/workflows/demo_integrations_ci.yml

@@ -0,0 +1,38 @@
+name: Continuous integration checks on public components
+run-name: ${{ github.actor }} pushed a commit 🚀
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths-ignore:
+      - 'internal/**'
+
+jobs:
+  ecommerce_demo:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory:
+          ./demos/ecommerce_shop
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Set up node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: NPM ci
+        run: npm ci
+      - name: Run prettier
+        run: npm run format:check
+      - name: NPM ci repository root
+        run: cd ../.. && npm ci
+      - name: Lint types
+        run: npm run lint:types
+      - name: ESLint
+        run: npm run lint
+      - name: Frontend - Run build
+        run: cd frontend && npm run build
+      - name: Backend - Unit tests
+        run: cd backend && npm run test
+
+

.github/workflows/package-lock-check.yml

@@ -0,0 +1,30 @@
+name: Check package-lock.json updated
+run-name: ${{ github.actor }} pushed a commit 🚀
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths-ignore:
+      - 'internal/**'
+
+jobs:
+  check-package-lock:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Install Node.js and NPM
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+
+    - name: Install NPM packages
+      run: npm install
+
+    - name: Check for package-lock.json changes
+      run: |
+        if git diff --name-only | grep --quiet 'package-lock.json'; then
+          echo "::error::Please run 'npm install' before committing your changes and make sure package-lock.json is up to date."
+          exit 1
+        fi

.github/workflows/ts-client-check.yml

@@ -0,0 +1,33 @@
+name: Check TS SDK is up-to-date with the public api yml updated
+run-name: ${{ github.actor }} pushed a commit 🚀
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths-ignore:
+      - 'internal/**'
+
+jobs:
+  ts-client-check:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Install Node.js and NPM
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+
+    - name: Npm CI
+      run: npm ci
+
+    - name: npm run generate
+      run: npm run generate
+
+    - name: Check for ./client changes
+      run: |
+        if git diff --name-only | grep --quiet '^client/'; then
+          echo "::error::TS Client is out of date. Please run 'npm run generate' to regenerate the typescript client SDK."
+          exit 1
+        fi

.gitignore

@@ -0,0 +1,10 @@
+.idea
+.vscode
+.ssl
+.DS_Store
+.env
+node_modules
+yarn-error.log
+dist
+openapi-ts-error-*.log
+**/*/db.json

connect-api/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

connect-api/.nvmrc

@@ -0,0 +1 @@
+20.14.0

connect-api/LICENSE.md

@@ -0,0 +1,48 @@
+# A message from Canva
+
+By making these software components available to you, our goal is to give you
+the right to use the components to build your apps for Canva's ecosystem. See
+below for the specific licence terms that apply to your use.
+
+# Licence
+
+Canva Pty Ltd (ACN 158 929 938) ("Canva") owns the copyright in the software and
+associated documentation files to which this Licence relates (each a "Software
+Component"). Canva reserves all of its rights.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+the Software Components ("You"), to use the Software Components, but strictly
+subject to the following restrictions and conditions:
+
+1. You must only use the Software Components and any Derivative on the Canva
+   Platform.
+
+2. You must only use the Software Components and any Derivative for the purpose
+   of building or updating Permitted Apps, and for no other purpose.
+
+3. You must include a copy of this Licence in all copies of any Software
+   Component and Derivative.
+
+4. To the fullest extent permitted by law, the Software Components are 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 non-infringement. To the fullest extent permitted by law, 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 Components
+   or any Derivative, or the use of or other dealings in the Software Components
+   or any Derivative.
+
+5. In this Licence:
+
+   (a) "Canva Platform" means the visual communications platform owned and
+   operated by Canva that is made available on Canva.com (as well as any
+   sub-domains and international versions) and via mobile applications, desktop
+   applications, and in other forms provided or made available by Canva;
+
+   (b) "Derivative" means any software, document or other material that: (i)
+   contains any Software Component; and/or (ii) comprises or contains a
+   derivative, adaptation or substantial part of any Software Component; and
+
+   (c) "Permitted App" means a software application that is solely offered to
+   end-users on the Canva Platform.

connect-api/README.md

@@ -0,0 +1,96 @@
+# Canva Connect API Starter Kit
+
+Welcome to the **Connect API starter kit** for Canva's developers platform. 🎉
+
+This repo contains our openAPI specifications, as well as a demo ecommerce web application built with the Connect API. The complete documentation for the platform is at [canva.dev/docs/connect](https://www.canva.dev/docs/connect/).
+
+## OpenAPI Spec
+
+The Canva Connect API doesn't maintain nor publish client SDKs, however, we have made our [OpenAPI spec](./openapi/spec.yml) publicly available, so you can use it with your favorite code generation library, such as [openapi-generator](https://github.com/OpenAPITools/openapi-generator) to generate client SDKs in your language of choice!
+
+To demonstrate this, we're using [openapi-ts](https://www.npmjs.com/package/@hey-api/openapi-ts) to generate TypeScript SDKs in [client/ts](./client//ts/) which is used in our demo app.
+
+Run an initial install to set up Open API:
+
+```bash
+npm install
+```
+
+To regenerate the types, simply run:
+
+```bash
+npm run generate
+```
+
+## Demos: E-commerce Shop
+
+### Requirements
+
+- Node.js `v20.14.0`
+- npm `v9` or `v10`
+
+**Note:** To make sure you're running the correct version of Node.js, we recommend using a version manager, such as [nvm](https://github.com/nvm-sh/nvm#intro). The [.nvmrc](/.nvmrc) file in the root directory of this repo will ensure the correct version is used once you run `nvm install`.
+
+### Prerequisites
+
+Before you can run this demo, you'll need to do some setup beforehand.
+
+1. Open the [Developer Portal](https://www.canva.com/developers/integrations/connect-api), and click `Create an integration`.
+
+2. Under `Configuration` → `Configure your integration`.
+
+- `Integration name`: Add a name.
+- `Client ID`: Make a note of this value; you'll need it in a later step.
+- `Generate secret`: Click this and save the secret in a secure location, as you'll need it for a later step.
+
+3. Under `Scopes` → `Set the scopes`, check the following boxes:
+
+- `asset`: Read and Write.
+- `brandtemplate:content`: Read.
+- `brandtemplate:meta`: Read.
+- `design:content`: Read and Write.
+- `design:meta`: Read.
+- `profile`: Read.
+
+4. Under `Authentication` → `Add Authentication`, locate `URL 1` and enter the following value:
+
+```
+http://127.0.0.1:3001/oauth/redirect
+```
+
+### How to run
+
+1. Install dependencies
+
+```bash
+cd demos/ecommerce_shop
+npm install
+```
+
+2. Add your integration settings to the `demos/ecommerce_shop/.env` file.
+
+- `CANVA_CLIENT_ID`: This is the `Client ID` from the prerequisites.
+- `CANVA_CLIENT_SECRET`: This is the `client secret` you generated in the prerequisites.
+- `DATABASE_ENCRYPTION_KEY`: This will be used to encrypt and decrypt the tokens stored in the JSON database. You can generate one with `generate:db-key`.
+
+3. Run the app
+
+```bash
+npm start
+```
+
+> [!WARNING]  
+> Accessing the app via `localhost:3000` will throw CORS errors, you must access the app via the below URL.
+
+4. View your app: [http://127.0.0.1:3000](http://127.0.0.1:3000)
+
+### Decision Registry
+
+#### Multer
+
+We use [Multer](https://www.npmjs.com/package/multer) in our Express.js app to handle file uploads. It simplifies the process of uploading files and reduces the amount of code required. There are other alternatives to `Multer`, like [express-fileupload](https://www.npmjs.com/package/express-fileupload) that you can use in your own application.
+
+## Helpful Links
+
+[Canva Connect API - Getting Started](https://canva-connect-api.apidocumentation.com/guide/getting-started)  
+[Canva Connect API - Official Documentation](https://www.canva.dev/docs/connect/)  

connect-api/client/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

connect-api/client/openapi-ts.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@hey-api/openapi-ts';
+
+export default defineConfig({
+  input: '../openapi/spec.yml',
+  client: '@hey-api/client-fetch',
+  output: {
+    path: './ts',
+    format: 'prettier',
+    lint: 'eslint',
+  },
+  services: {
+    asClass: true,
+  },
+  types: {
+    enums: "javascript",
+  }
+});

connect-api/client/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@canva/connect-api-ts",
+  "version": "0.0.0",
+  "description": "Codegen-ed Typescript client library for Canva's Connect APIs",
+  "author": "Canva Pty Ltd.",
+  "license": "SEE LICENSE IN LICENSE.md in root directory",
+  "private": true,
+  "scripts": {
+    "generate": "rm -rf ./ts && openapi-ts"
+  },
+  "dependencies": {
+    "@hey-api/client-fetch": "^0.1.3"
+  },
+  "engines": {
+    "node": ">=20.14.0"
+  },
+  "engineStrict": true,
+  "devDependencies": {
+    "@hey-api/openapi-ts": "^0.46.3",
+    "typescript": "^5.4.5"
+  }
+}

connect-api/client/ts/index.ts

@@ -0,0 +1,4 @@
+// This file is auto-generated by @hey-api/openapi-ts
+export * from './schemas.gen';
+export * from './services.gen';
+export * from './types.gen';