first commit

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults, not ie 11",
+        "corejs": "3.21"
+      }
+    ]
+  ]
+}

.cspell.json

@@ -0,0 +1,28 @@
+{
+  // Version of the setting file.  Always 0.2
+  "version": "0.2",
+  // language - current active spelling language
+  "language": "en",
+  // words - list of words to be always considered correct
+  "words": [
+    "mkdirp",
+    "tsmerge",
+    "githubusercontent",
+    "streetsidesoftware",
+    "vsmarketplacebadge",
+    "visualstudio",
+    "motorcortex",
+    "donkeyclip",
+    "corejs",
+    "linebreak",
+    "cssnano",
+    "automerge",
+    "brotli",
+    "reviewdog",
+    "sobolevn"
+  ],
+  // flagWords - list of words to be always considered incorrect
+  // This is useful for offensive words and common spelling errors.
+  // For example "hte" should be "the"
+  "flagWords": ["hte"]
+}

.eslintignore

@@ -0,0 +1 @@
+bundle.js

.eslintrc

@@ -0,0 +1,48 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "rules": {
+    "prettier/prettier": ["error"],
+    "linebreak-style": ["error", "unix"],
+    "semi": ["error", "always"],
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error", "info"]
+      }
+    ],
+    "prefer-promise-reject-errors": "error",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "any",
+        "ignoreReadBeforeAssign": false
+      }
+    ],
+    "no-var": "error",
+    "no-unused-vars": "error"
+  }
+}

.gitignore

@@ -0,0 +1,74 @@
+# Node modules
+node_modules
+
+bundle.js
+bundle.js.LICENSE.txt
+server/bundle.js
+server/bundle.js.LICENSE.txt
+dist
+
+# Coverage
+coverage
+
+# Output folders
+build
+compiled
+.nyc_output
+
+# Cachses
+.awcache
+.rpt2_cache
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# VSCode
+.vscode
+
+# Cloud9
+.c9revisions
+.c9
+
+# Intelij
+.idea
+cmake-build-*/
+
+# Sublime text
+*.iws
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+*.lnk
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+$RECYCLE.BIN/
+[Dd]esktop.ini
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp

README.md

@@ -0,0 +1,33 @@
+# motorcortex-clip-starter
+
+## Purpose
+
+This repository is a starter boilerplate for creating MotorCortex Clips with DCode. Do not use this repo directly. Instead, use it from the **[Donkeyclip CLI](https://github.com/donkeyclip/cli)**
+
+## Structure and Contents
+
+It includes:
+
+- a pre-configured webpack so you don't have to care about setting up your project
+- pre-configured eslint and babel
+- a "clip" folder in order for you to use to define your Clip and Incidents. The folder
+  contains the `clip.js` file which is just a starting point for your Clip.
+- a "server" folder that is there just for the needs of viewing, debugging and creating
+  your Clip through DCode.
+
+## How to use
+
+Once you've created your new Clip you have the ability to publish it through the [donkeyclip](https://donkeyclip.com) page. You can then embed your clip in any site you want!.
+
+## Commands
+
+- `npm run build`: builds the demo
+- `npm start`: builds and starts the demo
+
+## Have fun!!!
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+[<img src="https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg" width=250></img>](https://donkeyclip.com)

clip/clip.css

@@ -0,0 +1,18 @@
+* {
+  --font-size: {{ initParams.fontSize }};
+  --font-color: {{ initParams.color }};
+  /*
+    This is an example of how to use MotorCortex's init params in css, using a css variable
+      if you are unfamiliar with css variables here is a quick guide https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage
+  */
+}
+
+.container {
+display: flex;
+justify-content: center;
+flex-direction: column;
+align-items: center;
+height: 100%;
+color: var(--font-color);
+font-size:var(--font-size);
+}

clip/clip.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <p>Welcome!</p>
+  <p>You've picked <u>{{ initParams.color }}</u></p>
+</div>

clip/clip.ts

@@ -0,0 +1,24 @@
+import { HTMLClip } from "@donkeyclip/motorcortex";
+import css from "./clip.css";
+import html from "./clip.html";
+import { fadeOut } from "./effects/fadeOut";
+import { scaleBig } from "./effects/scaleBig";
+import initParams from "./initParams";
+import initParamsValidationRules from "./initParamsValidationRules";
+
+const clip = new HTMLClip({
+  html,
+  css,
+  host: document.getElementById("clip"),
+  initParamsValidationRules,
+  initParams: initParams[0].value,
+  containerParams: {
+    width: "800px",
+    height: "450px",
+  },
+});
+
+clip.addIncident(fadeOut, 0);
+clip.addIncident(scaleBig(".container", 2000), 0);
+
+export { clip };

clip/effects/fadeOut.ts

@@ -0,0 +1,13 @@
+/*Here we export he incident, so you can use it only one time*/
+import { CSSEffect } from "@donkeyclip/motorcortex";
+export const fadeOut = new CSSEffect(
+  {
+    animatedAttrs: {
+      opacity: 0,
+    },
+  },
+  {
+    selector: ".container",
+    duration: 2000,
+  }
+);

clip/effects/scaleBig.ts

@@ -0,0 +1,21 @@
+/*This incident is export as function so you can use it more than one times*/
+
+import { CSSEffect } from "@donkeyclip/motorcortex";
+export const scaleBig = (selector, duration, easing = "linear") =>
+  new CSSEffect(
+    {
+      animatedAttrs: {
+        transform: {
+          scale: 1.8,
+        },
+      },
+      initialValues: {
+        opacity: 0,
+      },
+    },
+    {
+      selector,
+      duration,
+      easing,
+    }
+  );

clip/initParams.ts

@@ -0,0 +1,23 @@
+export default [
+  {
+    name: "Blue medium",
+    value: {
+      color: "blue",
+      fontSize: "30px",
+    },
+  },
+  {
+    name: "Red big",
+    value: {
+      color: "red",
+      fontSize: "60px",
+    },
+  },
+  {
+    name: "Green small",
+    value: {
+      color: "red",
+      fontSize: "10px",
+    },
+  },
+];

clip/initParamsValidationRules.ts

@@ -0,0 +1,15 @@
+export default {
+  color: {
+    label: "Text Color",
+    type: "color",
+    optional: true,
+    default: "white",
+  },
+  fontSize: {
+    label: "Font size",
+    type: "measurement",
+    units: ["px"],
+    optional: true,
+    default: "12px",
+  },
+};