diff --git a/src/App.tsx b/src/App.tsx index 15f785e..cccb8ae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,6 @@ import TemplateModel from './TemplateModel'; import useAppStore from './store'; import Header from './Header'; import Footer from './Footer'; -import SampleDropdown from './SampleDropdown'; function App() { const init = useAppStore((state) => state.init); @@ -20,7 +19,6 @@ function App() { return (
-
diff --git a/src/Header.tsx b/src/Header.tsx index b206a94..a5b0eba 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -1,4 +1,5 @@ import './App.css'; +import SampleDropdown from './SampleDropdown'; function Header() { return ( @@ -12,6 +13,9 @@ function Header() {

Template Playground (Beta)

+
+ +

diff --git a/src/samples/clause.ts b/src/samples/clause.ts index 8eb7918..2975d0d 100644 --- a/src/samples/clause.ts +++ b/src/samples/clause.ts @@ -13,7 +13,10 @@ concept Customer { o Address address }`; -const TEMPLATE = `{{#clause address}} +const TEMPLATE = ` +> Renders an object using the \`#clause\` block. + +{{#clause address}} #### Address {{line1}}, {{city}}, {{state}}, diff --git a/src/samples/clausecondition.ts b/src/samples/clausecondition.ts new file mode 100644 index 0000000..e88c8f7 --- /dev/null +++ b/src/samples/clausecondition.ts @@ -0,0 +1,34 @@ +const MODEL = `namespace hello@1.0.0 + +concept Address { + o String line1 + o String city + o String state + o String country +} + + +@template +concept Customer { + o Address address optional +}`; + +const TEMPLATE = ` +> Renders an optional object using the \`#clause\` block with a conditional expression. + +{{#clause address condition="return address!==undefined"}} +#### Address +{{line1}}, +{{city}}, {{state}}, +{{country}} +{{/clause}} + +Done. +`; + +const DATA = { + "$class" : "hello@1.0.0.Customer" +}; + +const NAME = 'Clause with Condition'; +export {NAME, MODEL,DATA,TEMPLATE}; \ No newline at end of file diff --git a/src/samples/formula.ts b/src/samples/formula.ts new file mode 100644 index 0000000..d41676f --- /dev/null +++ b/src/samples/formula.ts @@ -0,0 +1,21 @@ +const MODEL = `namespace hello@1.0.0 + +@template +concept HelloWorld { + o String name +}`; + +const TEMPLATE = `> Includes a TypeScript formula. + +### Welcome {{name}}! + +Your name has {{% return name.length %}} characters. +`; + +const DATA = { + "$class" : "hello@1.0.0.HelloWorld", + "name": "John Doe" +}; + +const NAME = 'Formula'; +export {NAME, MODEL,DATA,TEMPLATE}; \ No newline at end of file diff --git a/src/samples/formulanow.ts b/src/samples/formulanow.ts index 8dd286b..724c470 100644 --- a/src/samples/formulanow.ts +++ b/src/samples/formulanow.ts @@ -5,7 +5,7 @@ concept HelloWorld { o String name }`; -const TEMPLATE = `Hello {{name}}! +const TEMPLATE = `> Includes a TypeScript formula that references the implicit \`now\` variable. Today is **{{% return now.toISOString() %}}**. `; diff --git a/src/samples/helloworld.ts b/src/samples/helloworld.ts index 38eb1ea..13d2552 100644 --- a/src/samples/helloworld.ts +++ b/src/samples/helloworld.ts @@ -5,7 +5,9 @@ concept HelloWorld { o String name }`; -const TEMPLATE = `### Welcome {{name}}! +const TEMPLATE = `> The one, the only... + +### Hello {{name}}! `; const DATA = { diff --git a/src/samples/index.ts b/src/samples/index.ts index 1a7fb88..aabe13c 100644 --- a/src/samples/index.ts +++ b/src/samples/index.ts @@ -6,6 +6,8 @@ import * as clause from './clause'; import * as list from './list'; import * as optional from './optional'; import * as markdown from './markdown'; +import * as formula from './formula'; +import * as clausecondition from './clausecondition'; export type Sample = { NAME: string, @@ -17,9 +19,11 @@ export type Sample = { export const SAMPLES:Array = [ playground, helloworld, + formula, formulanow, join, clause, + clausecondition, list, optional, markdown diff --git a/src/samples/join.ts b/src/samples/join.ts index 5808d2a..fdfca25 100644 --- a/src/samples/join.ts +++ b/src/samples/join.ts @@ -10,7 +10,9 @@ concept Insurance { o ItemType[] items }`; -const TEMPLATE = `## en Locale +const TEMPLATE = `> Joins lists using formatting options + +## en Locale ## Style diff --git a/src/samples/list.ts b/src/samples/list.ts index c6f6391..78d66a1 100644 --- a/src/samples/list.ts +++ b/src/samples/list.ts @@ -5,10 +5,20 @@ concept Person { o String[] middleNames }`; -const TEMPLATE = `## Middle Names +const TEMPLATE = `> Ordered and unorded list expansion + +## Lists + +Ordered: {{#olist middleNames}} - {{this}} {{/olist}} + +Unordered: +{{#ulist middleNames}} +- {{this}} +{{/ulist}} + `; const DATA = { diff --git a/src/samples/markdown.ts b/src/samples/markdown.ts index ae25816..b22dee4 100644 --- a/src/samples/markdown.ts +++ b/src/samples/markdown.ts @@ -4,7 +4,7 @@ const MODEL = `namespace hello@1.0.0 concept Empty { }`; -const TEMPLATE = ` +const TEMPLATE = `> Most markdown can be used in a template. # h1 Heading 8-) ## h2 Heading diff --git a/src/samples/optional.ts b/src/samples/optional.ts index a11f6e3..1cf4668 100644 --- a/src/samples/optional.ts +++ b/src/samples/optional.ts @@ -9,13 +9,19 @@ concept TemplateData { o LoyaltyStatus loyaltyStatus optional }`; -const TEMPLATE = `{{#optional loyaltyStatus}}Your loyalty status: {{level}}{{else}}You do not have a loyalty status.{{/optional}} +const TEMPLATE = `> The \`{{#optional}}\` block is used with optional content. + +{{#optional loyaltyStatus}}You have loyalty status.{{else}}You do not have a loyalty status.{{/optional}} Done. `; const DATA = { - "$class" : "test@1.0.0.TemplateData" + "$class" : "test@1.0.0.TemplateData", + "loyaltyStatus" : { + $class: "test@1.0.0.LoyaltyStatus", + level: "Gold" + } }; const NAME = 'Optional'; diff --git a/src/samples/playground.ts b/src/samples/playground.ts index 72768ef..219c9ce 100644 --- a/src/samples/playground.ts +++ b/src/samples/playground.ts @@ -29,7 +29,8 @@ concept TemplateData { o Order order }`; -const TEMPLATE = `### Welcome {{name}}! +const TEMPLATE = `> A general sample that uses a range of features +### Welcome {{name}}! ![AP Logo](https://avatars.githubusercontent.com/u/29445438?s=64) diff --git a/src/store.ts b/src/store.ts index 6a74ad5..be9f7c2 100644 --- a/src/store.ts +++ b/src/store.ts @@ -14,7 +14,7 @@ import { TemplateMarkTransformer } from '@accordproject/markdown-template'; import { transform } from '@accordproject/markdown-transform'; import {SAMPLES, Sample} from './samples'; -import * as playground from './samples/helloworld'; +import * as playground from './samples/playground'; interface AppState { templateMarkdown: string