[Feature] Add SDK example integrations

.github/workflows/pr-build.yml

@@ -1,72 +1,73 @@
 name: PR Build
 on: [pull_request]
 jobs:
-    build:
-        runs-on: ubuntu-latest
-        strategy:
-            matrix:
-                node-version: [18]
-        steps:
-            - uses: FranzDiebold/github-env-vars-action@v2
-            - uses: actions/checkout@v1
-            - name: Check cache
-              id: cache
-              uses: actions/cache@v1
-              with:
-                  path: packages/sdk/node_modules
-                  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-0
-                  restore-keys: |
-                      ${{ runner.os }}-node-
-            - name: Use Node ${{ matrix.node-version }}
-              uses: actions/setup-node@v1
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  registry-url: 'https://npm.pkg.github.com'
-                  scope: '@chili-publish'
-            - name: install dependencies
-              run: yarn install
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.PACKAGE_SECRET }}
-            - name: run license check
-              run: yarn validate-licenses
-            - name: run linting
-              run: yarn ci-lint
-            - name: run tests
-              run: yarn cover
-            - name: Publish Unit Test Results
-              continue-on-error: true
-              uses: EnricoMi/publish-unit-test-result-action@v1
-              if: always()
-              with:
-                  files: packages/sdk/coverage/**/*.xml
-            - name: build code
-              run: yarn build
-            - name: ensure packages/sdk/upload exists
-              run: node cicd.js sdk mkdir -p upload/dev-packages/$CI_PR_ID
-            - name: pack sdk build
-              run: node cicd.js sdk yarn pack -f upload/dev-packages/$CI_PR_ID/studio-sdk.tgz
-            - name: prepare for connectors upload
-              run: node cicd.js connectors yarn prepare-upload
-            - name: copy file branch
-              run: |
-                  path=packages/sdk/upload/coverage/$CI_REF_NAME && mkdir -p ${path%"/merge"} && cp -R packages/sdk/coverage/lcov-report/index.html packages/sdk/coverage/lcov-report/coverage.html &&
-                  cp -R packages/sdk/coverage/lcov-report/src packages/sdk/coverage/lcov-report/coverage.html packages/sdk/coverage/lcov-report/base.css packages/sdk/coverage/lcov-report/prettify.css ${path%"/merge"}
-            - name: Copy to Azure Blob Storage
-              uses: azure/CLI@v1
-              with:
-                  inlineScript: |
-                      az storage blob upload-batch -d sdk -s packages/sdk/upload/ --connection-string "${{ secrets.AZURE_CDN_STUDIO_DEV_CONNECTION_STRING }}" --overwrite true
-            - name: Copy to Azure Blob Storage (Connectors)
-              uses: azure/CLI@v1
-              with:
-                  inlineScript: |
-                      az storage blob upload-batch -d sdk -s packages/connectors/upload/ --connection-string "${{ secrets.AZURE_CDN_STUDIO_DEV_CONNECTION_STRING }}" --overwrite true
-            - name: prepare for actions upload
-              run: |
-                node cicd.js actions node scripts/prepare-release.mjs
-            - name: Copy to Azure Blob Storage (Actions)
-              uses: azure/CLI@v1
-              with:
-                  inlineScript: |
-                      az storage blob upload-batch -d sdk -s packages/actions/cdn/ --connection-string "${{ secrets.AZURE_CDN_STUDIO_DEV_CONNECTION_STRING }}" --overwrite true
-
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
+    steps:
+      - uses: FranzDiebold/github-env-vars-action@v2
+      - uses: actions/checkout@v4
+      - name: Check cache
+        id: cache
+        uses: actions/cache@v1
+        with:
+          path: packages/sdk/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-0
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: "https://npm.pkg.github.com"
+          scope: "@chili-publish"
+      - name: install dependencies
+        run: yarn install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.PACKAGE_SECRET }}
+      - name: run license check
+        run: yarn validate-licenses
+      - name: run linting
+        run: yarn ci-lint
+      - name: run tests
+        run: yarn cover
+      - name: Publish Unit Test Results
+        continue-on-error: true
+        uses: EnricoMi/publish-unit-test-result-action@v1
+        if: always()
+        with:
+          files: packages/sdk/coverage/**/*.xml
+      - name: build code
+        run: yarn build
+      - name: validate sdk examples
+        run: cd examples/sdk/basic-typescript-example && npm install && npm run build
+      - name: ensure packages/sdk/upload exists
+        run: node cicd.js sdk mkdir -p upload/dev-packages/$CI_PR_ID
+      - name: pack sdk build
+        run: node cicd.js sdk yarn pack -f upload/dev-packages/$CI_PR_ID/studio-sdk.tgz
+      - name: prepare for connectors upload
+        run: node cicd.js connectors yarn prepare-upload
+      - name: copy file branch
+        run: |
+          path=packages/sdk/upload/coverage/$CI_REF_NAME && mkdir -p ${path%"/merge"} && cp -R packages/sdk/coverage/lcov-report/index.html packages/sdk/coverage/lcov-report/coverage.html &&
+          cp -R packages/sdk/coverage/lcov-report/src packages/sdk/coverage/lcov-report/coverage.html packages/sdk/coverage/lcov-report/base.css packages/sdk/coverage/lcov-report/prettify.css ${path%"/merge"}
+      - name: Copy to Azure Blob Storage
+        uses: azure/CLI@v1
+        with:
+          inlineScript: |
+            az storage blob upload-batch -d sdk -s packages/sdk/upload/ --connection-string "${{ secrets.AZURE_CDN_STUDIO_DEV_CONNECTION_STRING }}" --overwrite true
+      - name: Copy to Azure Blob Storage (Connectors)
+        uses: azure/CLI@v1
+        with:
+          inlineScript: |
+            az storage blob upload-batch -d sdk -s packages/connectors/upload/ --connection-string "${{ secrets.AZURE_CDN_STUDIO_DEV_CONNECTION_STRING }}" --overwrite true
+      - name: prepare for actions upload
+        run: |
+          node cicd.js actions node scripts/prepare-release.mjs
+      - name: Copy to Azure Blob Storage (Actions)
+        uses: azure/CLI@v1
+        with:
+          inlineScript: |
+            az storage blob upload-batch -d sdk -s packages/actions/cdn/ --connection-string "${{ secrets.AZURE_CDN_STUDIO_DEV_CONNECTION_STRING }}" --overwrite true

.github/workflows/pr-comment-on-open.yml

@@ -1,21 +1,21 @@
 name: PR Comment
 on:
-    pull_request:
-        types: [opened]
+  pull_request:
+    types: [opened]
 jobs:
-    comment:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: FranzDiebold/github-env-vars-action@v2
-            - uses: actions/checkout@v1
-            - name: 'Comment on PR'
-              uses: actions/github-script@0.3.0
-              if: github.event_name == 'pull_request'
-              with:
-                github-token: ${{ secrets.GITHUB_TOKEN }}
-                script: |
-                        const { issue: { number: issue_number }, repo: { owner, repo }  } = context;
-                        const fs = require('fs');
-                        const template = fs.readFileSync('.github/pull_request_comment_template.md', 'utf8');
-                        const comment = template.replaceAll('<<ISSUE_NUMBER>>', issue_number);
-                        github.issues.createComment({ issue_number, owner, repo, body: comment });
+  comment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: FranzDiebold/github-env-vars-action@v2
+      - uses: actions/checkout@v4
+      - name: "Comment on PR"
+        uses: actions/github-script@0.3.0
+        if: github.event_name == 'pull_request'
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { issue: { number: issue_number }, repo: { owner, repo }  } = context;
+            const fs = require('fs');
+            const template = fs.readFileSync('.github/pull_request_comment_template.md', 'utf8');
+            const comment = template.replaceAll('<<ISSUE_NUMBER>>', issue_number);
+            github.issues.createComment({ issue_number, owner, repo, body: comment });

.github/workflows/pr-merge.yml

@@ -10,7 +10,7 @@ jobs:
       matrix:
         node-version: [18]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.PACKAGE_SECRET }}
       - name: Check cache

.github/workflows/publish-docs.yml

@@ -2,65 +2,65 @@
 name: Publish Docs
 
 on:
-    # Runs when released
-    release:
-        types: [released]
+  # Runs when released
+  release:
+    types: [released]
 
-    # Allows you to run this workflow manually from the Actions tab
-    workflow_dispatch:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
-    contents: read
-    pages: write
-    id-token: write
+  contents: read
+  pages: write
+  id-token: write
 
 # Allow one concurrent deployment
 concurrency:
-    group: 'pages'
-    cancel-in-progress: true
+  group: "pages"
+  cancel-in-progress: true
 
 jobs:
-    # Single deploy job since we're just deploying
-    deploy_to_pages:
-        environment:
-            name: github-pages
-            url: ${{ steps.deployment.outputs.page_url }}
-        runs-on: ubuntu-latest
-        strategy:
-            matrix:
-                node-version: [18]
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v3
-            - name: Check cache
-              id: cache
-              uses: actions/cache@v1
-              with:
-                  path: packages/sdk/node_modules
-                  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-0
-                  restore-keys: |
-                      ${{ runner.os }}-node-
-            - name: Use Node ${{ matrix.node-version }}
-              uses: actions/setup-node@v1
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  registry-url: 'https://npm.pkg.github.com'
-                  scope: '@chili-publish'
-            - name: install dependencies
-              run: yarn install
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.PACKAGE_SECRET }}
-            - name: build documentation to md
-              run: yarn build-docs-md
-            - name: build documentation to html
-              run: yarn build-docs-html
-            - name: Setup Pages
-              uses: actions/configure-pages@v2
-            - name: Upload artifact
-              uses: actions/upload-pages-artifact@v1
-              with:
-                  path: './packages/sdk/docs/html'
-            - name: Deploy to GitHub Pages
-              id: deployment
-              uses: actions/deploy-pages@v1
+  # Single deploy job since we're just deploying
+  deploy_to_pages:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Check cache
+        id: cache
+        uses: actions/cache@v1
+        with:
+          path: packages/sdk/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-0
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: "https://npm.pkg.github.com"
+          scope: "@chili-publish"
+      - name: install dependencies
+        run: yarn install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.PACKAGE_SECRET }}
+      - name: build documentation to md
+        run: yarn build-docs-md
+      - name: build documentation to html
+        run: yarn build-docs-html
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "./packages/sdk/docs/html"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/publish-release-npm.yml

@@ -9,7 +9,7 @@ jobs:
       matrix:
         node-version: [18]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.PACKAGE_SECRET }}
       - name: Check cache

.gitignore

@@ -14,4 +14,6 @@ lib/
 lib-esm/
 _bundles/
 coverage/
-docs/
+docs/
+
+examples/**/package-lock.json

README.md

@@ -4,7 +4,7 @@
 
 [![Build PR](https://github.com/chili-publish/studio-sdk/actions/workflows/pr-merge.yml/badge.svg)](https://github.com/chili-publish/studio-sdk/actions/workflows/pr-merge.yml) [![Publish Package](https://github.com/chili-publish/studio-sdk/actions/workflows/publish-release-npm.yml/badge.svg)](https://github.com/chili-publish/studio-sdk/actions/workflows/publish-package.yml)
 
-This is the Open Source GraFx Studio SDK which will make your life easier when you’re working on and integrating GraFx Studio.
+This is the Open Source GraFx Studio SDK which you'll need while working on and integrating GraFx Studio.
 
 The project is currently under active development, contributions are welcome in the form of [creating issues](https://github.com/chili-publish/studio-sdk/issues/new/choose) or in the form of actual contributions on the code. See our [CONTRIBUTING.md](https://github.com/chili-publish/studio-sdk/blob/develop/CONTRIBUTING.md) file to get started on your first contribution.
 
@@ -14,9 +14,6 @@ The project is currently under active development, contributions are welcome in
 
 [Link to the official SDK documentation on GitHub](https://chili-publish.github.io/studio-sdk/)\*
 
-[Link to Studio UI, a live integration example](https://github.com/chili-publish/studio-ui)
-
-
 \*Note: the hosted documentation is always based on the latest version. To get the documentation of the release that you use, you can download the sourcecode of that release and open `/docs/index.html`.
 
 ## Overview
@@ -55,8 +52,8 @@ Then you can easily import the SDK in your JS and TS files, but also the typing
 
 ```typescript
 // TS example
-import EditorSDK from '@chili-publish/studio-sdk';
-import type { Variable } from '@chili-publish/studio-sdk';
+import StudioSDK from "@chili-publish/studio-sdk";
+import type { Variable } from "@chili-publish/studio-sdk";
 ```
 
 ### Load script
@@ -67,8 +64,13 @@ The other way would be to include the sdk using the script tag just before the c
 <script src="https://path/to/sdk/latest/main.js"></script>
 ```
 
-To really get started, there is a nice guide on [the official documentation page](https://chili-publish.github.io/studio-sdk/).
-And you can find basic integration examples in [one of our other repositories](https://github.com/chili-publish/studio-sdk-integration-examples).
+To really get started, or to get inspiration, these are examples of live integrations.
+
+[Link to some basic example integrations in JS and TS](https://github.com/chili-publish/studio-sdk/tree/main/examples/sdk)
+
+[Link to Studio UI, a live advanced integration example used in production (My Projects in CHILI GraFx)](https://github.com/chili-publish/studio-ui)\*
+
+\* Studio UI itself can also be integrated and might be exactly what you need, with almost no effort.
 
 ## Contribute?
 
@@ -80,4 +82,4 @@ If you have any feedback on the technical parts of the application, a feature re
 
 ## License
 
-This project is [MIT licensed](https://github.com/chili-publish/studio-sdk/blob/main/LICENSE)
+This project is [MIT licensed](https://github.com/chili-publish/studio-sdk/blob/main/LICENSE)

examples/sdk/basic-javascript-example/README.md

@@ -0,0 +1,15 @@
+# Basic Vanilla Javascript SDK example
+
+In this example, the SDK gets initialised in the most simple form.
+It loads in the SDK via a packagemanager. This could be either `npm` or `yarn`.
+
+simply run `npm install @chili-publish/studio-sdk --save` and you're good to go.
+
+\*\* note that this example uses a local reference to the package so that needs to be changed first
+
+## How to run
+
+This basic application should be run inside a local webserver like Apache, NGINX or MAMP.
+Otherwise there might be some issues regarding fetching the document and so on.
+
+Apart from that, it's just a matter of opening up the html file, since this is a vanilla JS example, there is no need to build or transpile anything.