diff --git a/examples/adaptive-cards/.gitignore b/examples/adaptive-cards/.gitignore new file mode 100644 index 000000000..db4c6d9b6 --- /dev/null +++ b/examples/adaptive-cards/.gitignore @@ -0,0 +1,2 @@ +dist +node_modules \ No newline at end of file diff --git a/examples/adaptive-cards/README.md b/examples/adaptive-cards/README.md new file mode 100644 index 000000000..3093a29ca --- /dev/null +++ b/examples/adaptive-cards/README.md @@ -0,0 +1,13 @@ + + +# ComposeUI Default App + +This is a simple webpage that loads adaptive-cards and showcases a button which launches an alert when clicked. + +## During Development + +```npm i + +npx lerna run start --stream --scope=@morgan-stanley/composeui-example-adaptive-cards +``` \ No newline at end of file diff --git a/examples/adaptive-cards/app.js b/examples/adaptive-cards/app.js new file mode 100644 index 000000000..46e40f167 --- /dev/null +++ b/examples/adaptive-cards/app.js @@ -0,0 +1,43 @@ +// Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + +import * as AdaptiveCards from "adaptivecards"; + +// Author a card +var card = { + "type": "AdaptiveCard", + "version": "1.6", + "body": [ + { + "type": "TextBlock", + "text": "Clicking on the button below will cause an alert" + } + ], + "actions": [ + { + "type": "Action.OpenUrl", + "title": "Click me" + } + ] +}; + +// Create an AdaptiveCard instance +var adaptiveCard = new AdaptiveCards.AdaptiveCard(); + +// Set its hostConfig property unless you want to use the default Host Config +// Host Config defines the style and behavior of a card +adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({ + fontFamily: "Segoe UI, Helvetica Neue, sans-serif" +}); + +// Set the adaptive card's event handlers. onExecuteAction is invoked +// whenever an action is clicked in the card +adaptiveCard.onExecuteAction = function(action) { alert("Ow! "); } + +// Parse the card payload +adaptiveCard.parse(card); + +// Render the card to an HTML element: +var renderedCard = adaptiveCard.render(); + +// And finally insert it somewhere in your page: +document.body.appendChild(renderedCard); \ No newline at end of file diff --git a/examples/adaptive-cards/index.html b/examples/adaptive-cards/index.html new file mode 100644 index 000000000..6ae19e9f8 --- /dev/null +++ b/examples/adaptive-cards/index.html @@ -0,0 +1,12 @@ + + + + ComposeUI Adapative cards POC App + + + +
+ + + + diff --git a/examples/adaptive-cards/package.json b/examples/adaptive-cards/package.json new file mode 100644 index 000000000..a760534e1 --- /dev/null +++ b/examples/adaptive-cards/package.json @@ -0,0 +1,22 @@ +{ + "name": "@morgan-stanley/composeui-example-adaptive-cards", + "version": "0.1.0-alpha.1", + "private": true, + "description": "ComposeUI Default App", + "main": "app.js", + "type": "module", + "scripts": { + "clean": "rimraf dist", + "bundle": "rollup -c", + "build": "npm run clean && npm run bundle", + "start": "http-server -p 6060" + }, + "devDependencies": { + "http-server": "14.1.1", + "rimraf": "^6.0.1", + "rollup": "^4.24.0" + }, + "dependencies": { + "adaptivecards": "^1.3.1" + } +} diff --git a/examples/adaptive-cards/rollup.config.js b/examples/adaptive-cards/rollup.config.js new file mode 100644 index 000000000..3d39ae88b --- /dev/null +++ b/examples/adaptive-cards/rollup.config.js @@ -0,0 +1,18 @@ +// Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; + + + +export default { + input: 'app.js', + output: { + file: 'dist/bundle.js', + format: 'iife', + name: 'app' + }, + plugins: [ + resolve(), + commonjs() + ] +}; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e04615da5..40da22fe6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,6 +6,7 @@ "": { "name": "@morgan-stanley/composeui-web-modules", "workspaces": [ + "examples/adaptive-cards", "examples/js-chart-and-grid-messagerouter/js-*", "examples/fdc3-chart-and-grid/js-*", "examples/fdc3-pricing-and-chat/js-*", @@ -19,6 +20,17 @@ "lerna": "8.1.8" } }, + "examples/adaptive-cards": { + "version": "0.1.0-alpha.1", + "dependencies": { + "adaptivecards": "^1.3.1" + }, + "devDependencies": { + "http-server": "14.1.1", + "rimraf": "^6.0.1", + "rollup": "^4.24.0" + } + }, "examples/fdc3-chart-and-grid/js-chart": { "name": "@morgan-stanley/composeui-example-chart", "version": "0.1.0-alpha.1", @@ -4492,6 +4504,10 @@ "tslib": "^2.1.0" } }, + "node_modules/@morgan-stanley/composeui-example-adaptive-cards": { + "resolved": "examples/adaptive-cards", + "link": true + }, "node_modules/@morgan-stanley/composeui-example-chart": { "resolved": "examples/fdc3-chart-and-grid/js-chart", "link": true @@ -6190,6 +6206,11 @@ "version": "4.0.5", "license": "MIT" }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/vinyl": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.12.tgz", @@ -6580,6 +6601,14 @@ "node": ">=0.4.0" } }, + "node_modules/adaptivecards": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-1.3.1.tgz", + "integrity": "sha512-NKRcf+ScvlszMnVS5JVAT6odnhPg2GXMuYAQLSiDClw3FlbtNL/SzcstEV/TUUDhZDG5b9WlIDQDasAa1OEx0g==", + "dependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/add-stream": { "version": "1.0.0", "dev": true, diff --git a/package.json b/package.json index eb56cf919..ea646492d 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "description": "Lerna monorepo of the web dependencies in ComposeUI", "private": true, "workspaces": [ + "examples/adaptive-cards", "examples/js-chart-and-grid-messagerouter/js-*", "examples/fdc3-chart-and-grid/js-*", "examples/fdc3-pricing-and-chat/js-*",